You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.9 KiB
123 lines
3.9 KiB
4 years ago
|
"use strict";
|
||
|
|
||
|
Object.defineProperty(exports, "__esModule", {
|
||
|
value: true
|
||
|
});
|
||
|
exports.queryAllByRole = queryAllByRole;
|
||
|
exports.findByRole = exports.findAllByRole = exports.getByRole = exports.getAllByRole = exports.queryByRole = void 0;
|
||
|
|
||
|
var _domAccessibilityApi = require("dom-accessibility-api");
|
||
|
|
||
|
var _roleHelpers = require("../role-helpers");
|
||
|
|
||
|
var _allUtils = require("./all-utils");
|
||
|
|
||
|
function queryAllByRole(container, role, {
|
||
|
exact = true,
|
||
|
collapseWhitespace,
|
||
|
hidden = (0, _allUtils.getConfig)().defaultHidden,
|
||
|
name,
|
||
|
trim,
|
||
|
normalizer,
|
||
|
queryFallbacks = false
|
||
|
} = {}) {
|
||
|
const matcher = exact ? _allUtils.matches : _allUtils.fuzzyMatches;
|
||
|
const matchNormalizer = (0, _allUtils.makeNormalizer)({
|
||
|
collapseWhitespace,
|
||
|
trim,
|
||
|
normalizer
|
||
|
});
|
||
|
const subtreeIsInaccessibleCache = new WeakMap();
|
||
|
|
||
|
function cachedIsSubtreeInaccessible(element) {
|
||
|
if (!subtreeIsInaccessibleCache.has(element)) {
|
||
|
subtreeIsInaccessibleCache.set(element, (0, _roleHelpers.isSubtreeInaccessible)(element));
|
||
|
}
|
||
|
|
||
|
return subtreeIsInaccessibleCache.get(element);
|
||
|
}
|
||
|
|
||
|
return Array.from(container.querySelectorAll('*')).filter(node => {
|
||
|
const isRoleSpecifiedExplicitly = node.hasAttribute('role');
|
||
|
|
||
|
if (isRoleSpecifiedExplicitly) {
|
||
|
const roleValue = node.getAttribute('role');
|
||
|
|
||
|
if (queryFallbacks) {
|
||
|
return roleValue.split(' ').filter(Boolean).some(text => matcher(text, node, role, matchNormalizer));
|
||
|
} // if a custom normalizer is passed then let normalizer handle the role value
|
||
|
|
||
|
|
||
|
if (normalizer) {
|
||
|
return matcher(roleValue, node, role, matchNormalizer);
|
||
|
} // other wise only send the first word to match
|
||
|
|
||
|
|
||
|
const [firstWord] = roleValue.split(' ');
|
||
|
return matcher(firstWord, node, role, matchNormalizer);
|
||
|
}
|
||
|
|
||
|
const implicitRoles = (0, _roleHelpers.getImplicitAriaRoles)(node);
|
||
|
return implicitRoles.some(implicitRole => matcher(implicitRole, node, role, matchNormalizer));
|
||
|
}).filter(element => {
|
||
|
return hidden === false ? (0, _roleHelpers.isInaccessible)(element, {
|
||
|
isSubtreeInaccessible: cachedIsSubtreeInaccessible
|
||
|
}) === false : true;
|
||
|
}).filter(element => {
|
||
|
if (name === undefined) {
|
||
|
// Don't care
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
return (0, _allUtils.matches)((0, _domAccessibilityApi.computeAccessibleName)(element), element, name, text => text);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
const getMultipleError = (c, role) => `Found multiple elements with the role "${role}"`;
|
||
|
|
||
|
const getMissingError = (container, role, {
|
||
|
hidden = (0, _allUtils.getConfig)().defaultHidden,
|
||
|
name
|
||
|
} = {}) => {
|
||
|
const roles = (0, _roleHelpers.prettyRoles)(container, {
|
||
|
hidden,
|
||
|
includeName: name !== undefined
|
||
|
});
|
||
|
let roleMessage;
|
||
|
|
||
|
if (roles.length === 0) {
|
||
|
if (hidden === false) {
|
||
|
roleMessage = 'There are no accessible roles. But there might be some inaccessible roles. ' + 'If you wish to access them, then set the `hidden` option to `true`. ' + 'Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole';
|
||
|
} else {
|
||
|
roleMessage = 'There are no available roles.';
|
||
|
}
|
||
|
} else {
|
||
|
roleMessage = `
|
||
|
Here are the ${hidden === false ? 'accessible' : 'available'} roles:
|
||
|
|
||
|
${roles.replace(/\n/g, '\n ').replace(/\n\s\s\n/g, '\n\n')}
|
||
|
`.trim();
|
||
|
}
|
||
|
|
||
|
let nameHint = '';
|
||
|
|
||
|
if (name === undefined) {
|
||
|
nameHint = '';
|
||
|
} else if (typeof name === 'string') {
|
||
|
nameHint = ` and name "${name}"`;
|
||
|
} else {
|
||
|
nameHint = ` and name \`${name}\``;
|
||
|
}
|
||
|
|
||
|
return `
|
||
|
Unable to find an ${hidden === false ? 'accessible ' : ''}element with the role "${role}"${nameHint}
|
||
|
|
||
|
${roleMessage}`.trim();
|
||
|
};
|
||
|
|
||
|
const [queryByRole, getAllByRole, getByRole, findAllByRole, findByRole] = (0, _allUtils.buildQueries)(queryAllByRole, getMultipleError, getMissingError);
|
||
|
exports.findByRole = findByRole;
|
||
|
exports.findAllByRole = findAllByRole;
|
||
|
exports.getByRole = getByRole;
|
||
|
exports.getAllByRole = getAllByRole;
|
||
|
exports.queryByRole = queryByRole;
|