Socket
Socket
Sign inDemoInstall

@testing-library/dom

Package Overview
Dependencies
Maintainers
10
Versions
228
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@testing-library/dom - npm Package Compare versions

Comparing version 5.2.1 to 5.3.0

dist/__tests__/__snapshots__/role-helpers.js.snap

72

dist/__tests__/element-queries.js

@@ -0,4 +1,6 @@

import jestSerializerAnsi from 'jest-serializer-ansi'
import {configure} from '../config'
import {render, renderIntoDocument} from './helpers/test-utils'
expect.addSnapshotSerializer(jestSerializerAnsi)
beforeEach(() => {

@@ -40,5 +42,5 @@ document.defaultView.Cypress = null

<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -49,5 +51,5 @@ expect(() => getByPlaceholderText('LucyRicardo'))

<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -57,12 +59,12 @@ expect(() => getByText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`

<div>
<div />
</div>"
<div>
<div />
</div>"
`)
expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]
"Unable to find an element by: [data-testid="LucyRicardo"]
<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -72,5 +74,5 @@ expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`

<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -80,5 +82,5 @@ expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`

<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -89,5 +91,5 @@ expect(() => getByDisplayValue('LucyRicardo'))

<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -97,5 +99,5 @@ expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`

<div>
<div />
</div>"
<div>
<div />
</div>"
`)

@@ -231,9 +233,9 @@ })

expect(() => getByLabelText(/alone/)).toThrowErrorMatchingInlineSnapshot(`
"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
<div>
<label>
All alone
</label>
</div>"
<div>
<label>
All alone
</label>
</div>"
`)

@@ -246,7 +248,7 @@ })

expect(() => getByLabelText('')).toThrowErrorMatchingInlineSnapshot(`
"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
<div>
<label />
</div>"
<div>
<label />
</div>"
`)

@@ -253,0 +255,0 @@ })

@@ -0,12 +1,15 @@

import jestSerializerAnsi from 'jest-serializer-ansi'
import {prettyDOM} from '../pretty-dom'
import {render} from './helpers/test-utils'
expect.addSnapshotSerializer(jestSerializerAnsi)
test('it prints out the given DOM element tree', () => {
const {container} = render('<div>Hello World!</div>')
expect(prettyDOM(container)).toMatchInlineSnapshot(`
"<div>
<div>
Hello World!
</div>
</div>"
"<div>
<div>
Hello World!
</div>
</div>"
`)

@@ -22,7 +25,7 @@ })

expect(prettyDOM(document)).toMatchInlineSnapshot(`
"<html>
<head />
<body />
</html>"
"<html>
<head />
<body />
</html>"
`)
})

@@ -685,10 +685,37 @@ 'use strict';

var elementRoleList = buildElementRoleList(ariaQuery.elementRoles);
function getImplicitAriaRoles(currentNode) {
for (var _iterator = elementRoleList, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var _ref2 = _ref,
selector = _ref2.selector,
roles = _ref2.roles;
if (currentNode.matches(selector)) {
return [].concat(roles);
}
}
return [];
}
function buildElementRoleList(elementRolesMap) {
function makeElementSelector(_ref) {
var name = _ref.name,
_ref$attributes = _ref.attributes,
attributes = _ref$attributes === void 0 ? [] : _ref$attributes;
return "" + name + attributes.map(function (_ref2) {
var attributeName = _ref2.name,
value = _ref2.value;
function makeElementSelector(_ref3) {
var name = _ref3.name,
_ref3$attributes = _ref3.attributes,
attributes = _ref3$attributes === void 0 ? [] : _ref3$attributes;
return "" + name + attributes.map(function (_ref4) {
var attributeName = _ref4.name,
value = _ref4.value;
return "[" + attributeName + "=" + value + "]";

@@ -698,5 +725,5 @@ }).join('');

function getSelectorSpecificity(_ref3) {
var _ref3$attributes = _ref3.attributes,
attributes = _ref3$attributes === void 0 ? [] : _ref3$attributes;
function getSelectorSpecificity(_ref5) {
var _ref5$attributes = _ref5.attributes,
attributes = _ref5$attributes === void 0 ? [] : _ref5$attributes;
return attributes.length;

@@ -707,17 +734,17 @@ }

for (var _iterator = elementRolesMap.entries(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref6;
for (var _iterator2 = elementRolesMap.entries(), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
var _ref8;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref6 = _iterator[_i++];
if (_isArray2) {
if (_i2 >= _iterator2.length) break;
_ref8 = _iterator2[_i2++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref6 = _i.value;
_i2 = _iterator2.next();
if (_i2.done) break;
_ref8 = _i2.value;
}
var _ref7 = _ref6,
element = _ref7[0],
roles = _ref7[1];
var _ref9 = _ref8,
element = _ref9[0],
roles = _ref9[1];
result = [].concat(result, [{

@@ -730,5 +757,5 @@ selector: makeElementSelector(element),

return result.sort(function (_ref4, _ref5) {
var leftSpecificity = _ref4.specificity;
var rightSpecificity = _ref5.specificity;
return result.sort(function (_ref6, _ref7) {
var leftSpecificity = _ref6.specificity;
var rightSpecificity = _ref7.specificity;
return rightSpecificity - leftSpecificity;

@@ -738,11 +765,39 @@ });

var elementRoleList = buildElementRoleList(ariaQuery.elementRoles);
function getRoles(container) {
function flattenDOM(node) {
return [node].concat(Array.from(node.children).reduce(function (acc, child) {
return [].concat(acc, flattenDOM(child));
}, []));
}
return flattenDOM(container).reduce(function (acc, node) {
var roles = getImplicitAriaRoles(node);
return roles.reduce(function (rolesAcc, role) {
var _extends2, _extends3;
return Array.isArray(rolesAcc[role]) ? _extends({}, rolesAcc, (_extends2 = {}, _extends2[role] = [].concat(rolesAcc[role], [node]), _extends2)) : _extends({}, rolesAcc, (_extends3 = {}, _extends3[role] = [node], _extends3));
}, acc);
}, {});
}
function logRoles(container) {
var roles = getRoles(container);
return Object.entries(roles).map(function (_ref10) {
var role = _ref10[0],
elements = _ref10[1];
var delimiterBar = '-'.repeat(50);
var elementsString = elements.map(function (el) {
return debugDOM(el.cloneNode(false));
}).join('\n\n');
return role + ":\n\n" + elementsString + "\n\n" + delimiterBar;
}).join('\n');
}
function queryAllByRole(container, role, _temp) {
var _ref8 = _temp === void 0 ? {} : _temp,
_ref8$exact = _ref8.exact,
exact = _ref8$exact === void 0 ? true : _ref8$exact,
collapseWhitespace = _ref8.collapseWhitespace,
trim = _ref8.trim,
normalizer = _ref8.normalizer;
var _ref = _temp === void 0 ? {} : _temp,
_ref$exact = _ref.exact,
exact = _ref$exact === void 0 ? true : _ref$exact,
collapseWhitespace = _ref.collapseWhitespace,
trim = _ref.trim,
normalizer = _ref.normalizer;

@@ -755,28 +810,2 @@ var matcher = exact ? matches : fuzzyMatches;

});
function getImplicitAriaRole(currentNode) {
for (var _iterator2 = elementRoleList, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
var _ref9;
if (_isArray2) {
if (_i2 >= _iterator2.length) break;
_ref9 = _iterator2[_i2++];
} else {
_i2 = _iterator2.next();
if (_i2.done) break;
_ref9 = _i2.value;
}
var _ref10 = _ref9,
selector = _ref10.selector,
roles = _ref10.roles;
if (currentNode.matches(selector)) {
return [].concat(roles);
}
}
return [];
}
return Array.from(container.querySelectorAll('*')).filter(function (node) {

@@ -789,3 +818,3 @@ var isRoleSpecifiedExplicitly = node.hasAttribute('role');

var implicitRoles = getImplicitAriaRole(node);
var implicitRoles = getImplicitAriaRoles(node);
return implicitRoles.some(function (implicitRole) {

@@ -1719,2 +1748,4 @@ return matcher(implicitRole, node, role, matchNormalizer);

exports.getQueriesForElement = getQueriesForElement;
exports.getRoles = getRoles;
exports.logRoles = logRoles;
exports.makeFindQuery = makeFindQuery;

@@ -1721,0 +1752,0 @@ exports.makeGetAllQuery = makeGetAllQuery;

@@ -679,10 +679,37 @@ import _extends from '@babel/runtime/helpers/esm/extends';

var elementRoleList = buildElementRoleList(elementRoles);
function getImplicitAriaRoles(currentNode) {
for (var _iterator = elementRoleList, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var _ref2 = _ref,
selector = _ref2.selector,
roles = _ref2.roles;
if (currentNode.matches(selector)) {
return [].concat(roles);
}
}
return [];
}
function buildElementRoleList(elementRolesMap) {
function makeElementSelector(_ref) {
var name = _ref.name,
_ref$attributes = _ref.attributes,
attributes = _ref$attributes === void 0 ? [] : _ref$attributes;
return "" + name + attributes.map(function (_ref2) {
var attributeName = _ref2.name,
value = _ref2.value;
function makeElementSelector(_ref3) {
var name = _ref3.name,
_ref3$attributes = _ref3.attributes,
attributes = _ref3$attributes === void 0 ? [] : _ref3$attributes;
return "" + name + attributes.map(function (_ref4) {
var attributeName = _ref4.name,
value = _ref4.value;
return "[" + attributeName + "=" + value + "]";

@@ -692,5 +719,5 @@ }).join('');

function getSelectorSpecificity(_ref3) {
var _ref3$attributes = _ref3.attributes,
attributes = _ref3$attributes === void 0 ? [] : _ref3$attributes;
function getSelectorSpecificity(_ref5) {
var _ref5$attributes = _ref5.attributes,
attributes = _ref5$attributes === void 0 ? [] : _ref5$attributes;
return attributes.length;

@@ -701,17 +728,17 @@ }

for (var _iterator = elementRolesMap.entries(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref6;
for (var _iterator2 = elementRolesMap.entries(), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
var _ref8;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref6 = _iterator[_i++];
if (_isArray2) {
if (_i2 >= _iterator2.length) break;
_ref8 = _iterator2[_i2++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref6 = _i.value;
_i2 = _iterator2.next();
if (_i2.done) break;
_ref8 = _i2.value;
}
var _ref7 = _ref6,
element = _ref7[0],
roles = _ref7[1];
var _ref9 = _ref8,
element = _ref9[0],
roles = _ref9[1];
result = [].concat(result, [{

@@ -724,5 +751,5 @@ selector: makeElementSelector(element),

return result.sort(function (_ref4, _ref5) {
var leftSpecificity = _ref4.specificity;
var rightSpecificity = _ref5.specificity;
return result.sort(function (_ref6, _ref7) {
var leftSpecificity = _ref6.specificity;
var rightSpecificity = _ref7.specificity;
return rightSpecificity - leftSpecificity;

@@ -732,11 +759,39 @@ });

var elementRoleList = buildElementRoleList(elementRoles);
function getRoles(container) {
function flattenDOM(node) {
return [node].concat(Array.from(node.children).reduce(function (acc, child) {
return [].concat(acc, flattenDOM(child));
}, []));
}
return flattenDOM(container).reduce(function (acc, node) {
var roles = getImplicitAriaRoles(node);
return roles.reduce(function (rolesAcc, role) {
var _extends2, _extends3;
return Array.isArray(rolesAcc[role]) ? _extends({}, rolesAcc, (_extends2 = {}, _extends2[role] = [].concat(rolesAcc[role], [node]), _extends2)) : _extends({}, rolesAcc, (_extends3 = {}, _extends3[role] = [node], _extends3));
}, acc);
}, {});
}
function logRoles(container) {
var roles = getRoles(container);
return Object.entries(roles).map(function (_ref10) {
var role = _ref10[0],
elements = _ref10[1];
var delimiterBar = '-'.repeat(50);
var elementsString = elements.map(function (el) {
return debugDOM(el.cloneNode(false));
}).join('\n\n');
return role + ":\n\n" + elementsString + "\n\n" + delimiterBar;
}).join('\n');
}
function queryAllByRole(container, role, _temp) {
var _ref8 = _temp === void 0 ? {} : _temp,
_ref8$exact = _ref8.exact,
exact = _ref8$exact === void 0 ? true : _ref8$exact,
collapseWhitespace = _ref8.collapseWhitespace,
trim = _ref8.trim,
normalizer = _ref8.normalizer;
var _ref = _temp === void 0 ? {} : _temp,
_ref$exact = _ref.exact,
exact = _ref$exact === void 0 ? true : _ref$exact,
collapseWhitespace = _ref.collapseWhitespace,
trim = _ref.trim,
normalizer = _ref.normalizer;

@@ -749,28 +804,2 @@ var matcher = exact ? matches : fuzzyMatches;

});
function getImplicitAriaRole(currentNode) {
for (var _iterator2 = elementRoleList, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
var _ref9;
if (_isArray2) {
if (_i2 >= _iterator2.length) break;
_ref9 = _iterator2[_i2++];
} else {
_i2 = _iterator2.next();
if (_i2.done) break;
_ref9 = _i2.value;
}
var _ref10 = _ref9,
selector = _ref10.selector,
roles = _ref10.roles;
if (currentNode.matches(selector)) {
return [].concat(roles);
}
}
return [];
}
return Array.from(container.querySelectorAll('*')).filter(function (node) {

@@ -783,3 +812,3 @@ var isRoleSpecifiedExplicitly = node.hasAttribute('role');

var implicitRoles = getImplicitAriaRole(node);
var implicitRoles = getImplicitAriaRoles(node);
return implicitRoles.some(function (implicitRole) {

@@ -1670,2 +1699,2 @@ return matcher(implicitRole, node, role, matchNormalizer);

export { getQueriesForElement as bindElementToQueries, buildQueries, configure, createEvent, debugDOM, findAllByAltText, findAllByDisplayValue, findAllByLabelText, findAllByPlaceholderText, findAllByRole, findAllByTestId, findAllByText, findAllByTitle, findByAltText, findByDisplayValue, findByLabelText, findByPlaceholderText, findByRole, findByTestId, findByText, findByTitle, fireEvent, getAllByAltText, getAllByDisplayValue, getAllByLabelText, getAllByPlaceholderText, getAllByRole, getAllByTestId, getAllByText, getAllByTitle, getByAltText, getByDisplayValue, getByLabelText, getByPlaceholderText, getByRole, getByTestId, getByText, getByTitle, getDefaultNormalizer, getElementError, getMultipleElementsFoundError, getNodeText, getQueriesForElement, makeFindQuery, makeGetAllQuery, makeSingleQuery, prettyDOM, defaultQueries as queries, queryAllByAltText, queryAllByAttribute, queryAllByDisplayValue, queryAllByLabelText, queryAllByPlaceholderText, queryAllByRole, queryAllByTestId, queryAllByText, queryAllByTitle, queryByAltText, queryByAttribute, queryByDisplayValue, queryByLabelText, queryByPlaceholderText, queryByRole, queryByTestId, queryByText, queryByTitle, queryHelpers, waitWrapper as wait, waitForDomChangeWrapper as waitForDomChange, waitForElementWrapper as waitForElement, waitForElementToBeRemovedWrapper as waitForElementToBeRemoved, getQueriesForElement as within };
export { getQueriesForElement as bindElementToQueries, buildQueries, configure, createEvent, debugDOM, findAllByAltText, findAllByDisplayValue, findAllByLabelText, findAllByPlaceholderText, findAllByRole, findAllByTestId, findAllByText, findAllByTitle, findByAltText, findByDisplayValue, findByLabelText, findByPlaceholderText, findByRole, findByTestId, findByText, findByTitle, fireEvent, getAllByAltText, getAllByDisplayValue, getAllByLabelText, getAllByPlaceholderText, getAllByRole, getAllByTestId, getAllByText, getAllByTitle, getByAltText, getByDisplayValue, getByLabelText, getByPlaceholderText, getByRole, getByTestId, getByText, getByTitle, getDefaultNormalizer, getElementError, getMultipleElementsFoundError, getNodeText, getQueriesForElement, getRoles, logRoles, makeFindQuery, makeGetAllQuery, makeSingleQuery, prettyDOM, defaultQueries as queries, queryAllByAltText, queryAllByAttribute, queryAllByDisplayValue, queryAllByLabelText, queryAllByPlaceholderText, queryAllByRole, queryAllByTestId, queryAllByText, queryAllByTitle, queryByAltText, queryByAttribute, queryByDisplayValue, queryByLabelText, queryByPlaceholderText, queryByRole, queryByTestId, queryByText, queryByTitle, queryHelpers, waitWrapper as wait, waitForDomChangeWrapper as waitForDomChange, waitForElementWrapper as waitForElement, waitForElementToBeRemovedWrapper as waitForElementToBeRemoved, getQueriesForElement as within };

@@ -14,2 +14,4 @@ "use strict";

getDefaultNormalizer: true,
getRoles: true,
logRoles: true,
configure: true

@@ -35,2 +37,14 @@ };

});
Object.defineProperty(exports, "getRoles", {
enumerable: true,
get: function () {
return _roleHelpers.getRoles;
}
});
Object.defineProperty(exports, "logRoles", {
enumerable: true,
get: function () {
return _roleHelpers.logRoles;
}
});
Object.defineProperty(exports, "configure", {

@@ -165,2 +179,4 @@ enumerable: true,

var _roleHelpers = require("./role-helpers");
var _prettyDom = require("./pretty-dom");

@@ -167,0 +183,0 @@

@@ -9,44 +9,6 @@ "use strict";

var _roleHelpers = require("../role-helpers");
var _allUtils = require("./all-utils");
var _ariaQuery = require("aria-query");
function buildElementRoleList(elementRolesMap) {
function makeElementSelector({
name,
attributes = []
}) {
return `${name}${attributes.map(({
name: attributeName,
value
}) => `[${attributeName}=${value}]`).join('')}`;
}
function getSelectorSpecificity({
attributes = []
}) {
return attributes.length;
}
let result = [];
for (const [element, roles] of elementRolesMap.entries()) {
result = [...result, {
selector: makeElementSelector(element),
roles: Array.from(roles),
specificity: getSelectorSpecificity(element)
}];
}
return result.sort(function ({
specificity: leftSpecificity
}, {
specificity: rightSpecificity
}) {
return rightSpecificity - leftSpecificity;
});
}
const elementRoleList = buildElementRoleList(_ariaQuery.elementRoles);
function queryAllByRole(container, role, {

@@ -64,18 +26,2 @@ exact = true,

});
function getImplicitAriaRole(currentNode) {
for (const _ref of elementRoleList) {
const {
selector,
roles
} = _ref;
if (currentNode.matches(selector)) {
return [...roles];
}
}
return [];
}
return Array.from(container.querySelectorAll('*')).filter(node => {

@@ -88,3 +34,3 @@ const isRoleSpecifiedExplicitly = node.hasAttribute('role');

const implicitRoles = getImplicitAriaRole(node);
const implicitRoles = (0, _roleHelpers.getImplicitAriaRoles)(node);
return implicitRoles.some(implicitRole => matcher(implicitRole, node, role, matchNormalizer));

@@ -91,0 +37,0 @@ });

{
"name": "@testing-library/dom",
"version": "5.2.1",
"version": "5.3.0",
"description": "Simple and complete DOM testing utilities that encourage good testing practices.",

@@ -56,2 +56,3 @@ "main": "dist/index.js",

"jest-in-case": "^1.0.2",
"jest-serializer-ansi": "^1.0.3",
"jest-watch-select-projects": "^0.1.1",

@@ -58,0 +59,0 @@ "jsdom": "^15.1.1",

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc