From 9964c24aa3a7d00fdfe89d5fc7ef1ba269a58741 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 24 Oct 2019 07:04:35 +0200 Subject: [PATCH 1/5] feat: Include hidden elements by default --- src/__tests__/element-queries.js | 4 +-- src/__tests__/role.js | 52 +++++++++++++++----------------- src/config.js | 2 ++ src/queries/role.js | 22 ++++++++++++-- 4 files changed, 48 insertions(+), 32 deletions(-) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 8a8bc35f..c9b8be90 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -86,9 +86,9 @@ test('get throws a useful error message', () => { " `) expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an accessible element with the role "LucyRicardo" +"Unable to find an element with the role "LucyRicardo" -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 +There are no available roles.
diff --git a/src/__tests__/role.js b/src/__tests__/role.js index 407e1662..156fded2 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -1,11 +1,11 @@ import {render} from './helpers/test-utils' -test('by default logs accessible roles when it fails', () => { +test('by default logs available roles when it fails', () => { const {getByRole} = render(`

Hi

`) expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an accessible element with the role "article" +"Unable to find an element with the role "article" -Here are the accessible roles: +Here are the available roles: heading: @@ -21,19 +21,13 @@ Here are the accessible roles: `) }) -test('when hidden: true logs available roles when it fails', () => { +test('when hidden: false logs accessible roles when it fails', () => { const {getByRole} = render(``) - expect(() => getByRole('article', {hidden: true})) + expect(() => getByRole('article', {hidden: false})) .toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element with the role "article" - -Here are the available roles: - - heading: - -

+"Unable to find an accessible element with the role "article" - -------------------------------------------------- +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
{ +test('logs a different error if inaccessible roles should not be included', () => { const {getByRole} = render('
') - expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(` + expect(() => getByRole('article', {hidden: false})) + .toThrowErrorMatchingInlineSnapshot(` "Unable to find an accessible element with the role "article" 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 @@ -60,10 +55,9 @@ There are no accessible roles. But there might be some inaccessible roles. If yo `) }) -test('logs a different error if inaccessible roles should be included', () => { +test('logs error when there are no available roles', () => { const {getByRole} = render('
') - expect(() => getByRole('article', {hidden: true})) - .toThrowErrorMatchingInlineSnapshot(` + expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(` "Unable to find an element with the role "article" There are no available roles. @@ -74,10 +68,11 @@ There are no available roles. `) }) -test('by default excludes elements that have the html hidden attribute or any of their parents', () => { +test('can exclude elements that have the html hidden attribute or any of their parents', () => { const {getByRole} = render('') - expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(` + expect(() => getByRole('list', {hidden: false})) + .toThrowErrorMatchingInlineSnapshot(` "Unable to find an accessible element with the role "list" 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 @@ -92,12 +87,13 @@ There are no accessible roles. But there might be some inaccessible roles. If yo `) }) -test('by default excludes elements which have display: none or any of their parents', () => { +test('can exclude elements which have display: none or any of their parents', () => { const {getByRole} = render( '
    ', ) - expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(` + expect(() => getByRole('list', {hidden: false})) + .toThrowErrorMatchingInlineSnapshot(` "Unable to find an accessible element with the role "list" 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 @@ -117,7 +113,8 @@ There are no accessible roles. But there might be some inaccessible roles. If yo test('by default excludes elements which have visibility hidden', () => { const {getByRole} = render('
      ') - expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(` + expect(() => getByRole('list', {hidden: false})) + .toThrowErrorMatchingInlineSnapshot(` "Unable to find an accessible element with the role "list" 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 @@ -141,7 +138,8 @@ test('by default excludes elements which have aria-hidden="true" or any of their '', ) - expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(` + expect(() => getByRole('list', {hidden: false})) + .toThrowErrorMatchingInlineSnapshot(` "Unable to find an accessible element with the role "list" 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 @@ -158,7 +156,7 @@ There are no accessible roles. But there might be some inaccessible roles. If yo `) }) -test('considers the computed visibility style not the parent', () => { +test('when hidden: false considers the computed visibility style not the parent', () => { // this behavior deviates from the spec which includes "any descendant" // if visibility is hidden. However, chrome a11y tree and nvda will include // the following markup. This behavior might change depending on how @@ -167,10 +165,10 @@ test('considers the computed visibility style not the parent', () => { '
        ', ) - expect(getByRole('list')).not.toBeNull() + expect(getByRole('list', {hidden: false})).not.toBeNull() }) -test('can include inaccessible roles', () => { +test('includes inaccessible roles by default', () => { // this behavior deviates from the spec which includes "any descendant" // if visibility is hidden. However, chrome a11y tree and nvda will include // the following markup. This behavior might change depending on how diff --git a/src/config.js b/src/config.js index c09c5085..c76958f4 100644 --- a/src/config.js +++ b/src/config.js @@ -12,6 +12,8 @@ let config = { // react-testing-library to use. For that reason, this feature will remain // undocumented. asyncWrapper: cb => cb(), + // don't check if the element is part of the a11y tree by default + defaultHidden: true, } export function configure(newConfig) { diff --git a/src/queries/role.js b/src/queries/role.js index be031475..342fe8ed 100644 --- a/src/queries/role.js +++ b/src/queries/role.js @@ -3,12 +3,24 @@ import { prettyRoles, isInaccessible, } from '../role-helpers' -import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils' +import { + buildQueries, + fuzzyMatches, + getConfig, + makeNormalizer, + matches, +} from './all-utils' function queryAllByRole( container, role, - {exact = true, collapseWhitespace, hidden = false, trim, normalizer} = {}, + { + exact = true, + collapseWhitespace, + hidden = getConfig().defaultHidden, + trim, + normalizer, + } = {}, ) { const matcher = exact ? matches : fuzzyMatches const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer}) @@ -35,7 +47,11 @@ function queryAllByRole( const getMultipleError = (c, role) => `Found multiple elements with the role "${role}"` -const getMissingError = (container, role, {hidden = false} = {}) => { +const getMissingError = ( + container, + role, + {hidden = getConfig().defaultHidden} = {}, +) => { const roles = prettyRoles(container, {hidden}) let roleMessage From b76be8dc45531a4388a5e5cb8d1502777a88f2a5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 24 Oct 2019 07:27:29 +0200 Subject: [PATCH 2/5] Fix coverage --- src/__tests__/role.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/__tests__/role.js b/src/__tests__/role.js index 156fded2..156bdfff 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -21,6 +21,28 @@ Here are the available roles: `) }) +test('when hidde: false logs accessible roles when it fails', () => { + const {getByRole} = render(`

        Hi

        `) + expect(() => getByRole('article', {hidden: false})) + .toThrowErrorMatchingInlineSnapshot(` +"Unable to find an accessible element with the role "article" + +Here are the accessible roles: + + heading: + +

        + + -------------------------------------------------- + +
        +

        + Hi +

        +
        " +`) +}) + test('when hidden: false logs accessible roles when it fails', () => { const {getByRole} = render(``) expect(() => getByRole('article', {hidden: false})) From 66bf0d78bb26303cb80384228280d571644ee221 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 24 Oct 2019 11:59:16 +0200 Subject: [PATCH 3/5] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Kent C. Dodds Co-Authored-By: Adrià Fontcuberta --- src/__tests__/role.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/role.js b/src/__tests__/role.js index 156bdfff..9579608b 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -21,7 +21,7 @@ Here are the available roles: `) }) -test('when hidde: false logs accessible roles when it fails', () => { +test('when hidden: false logs accessible roles when it fails', () => { const {getByRole} = render(`

        Hi

        `) expect(() => getByRole('article', {hidden: false})) .toThrowErrorMatchingInlineSnapshot(` @@ -132,7 +132,7 @@ There are no accessible roles. But there might be some inaccessible roles. If yo `) }) -test('by default excludes elements which have visibility hidden', () => { + test('can exclude excludes elements which have visibility hidden', () => { const {getByRole} = render('
          ') expect(() => getByRole('list', {hidden: false})) From 1f97697661d9f6d5290de010ffbddf18ab8f1978 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 24 Oct 2019 12:03:00 +0200 Subject: [PATCH 4/5] Update src/__tests__/role.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Adrià Fontcuberta --- src/__tests__/role.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/role.js b/src/__tests__/role.js index 9579608b..1b6f824c 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -132,7 +132,7 @@ There are no accessible roles. But there might be some inaccessible roles. If yo `) }) - test('can exclude excludes elements which have visibility hidden', () => { +test('can exclude elements which have visibility hidden', () => { const {getByRole} = render('
            ') expect(() => getByRole('list', {hidden: false})) From 338e4d27c2eba57e99b84ab96f79b796303eafed Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Mon, 28 Oct 2019 19:26:58 +0100 Subject: [PATCH 5/5] Fix coverage --- src/__tests__/role.js | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/src/__tests__/role.js b/src/__tests__/role.js index 1b6f824c..4884da8f 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -21,7 +21,7 @@ Here are the available roles: `) }) -test('when hidden: false logs accessible roles when it fails', () => { +test('when hidden: false logs only accessible roles when it fails', () => { const {getByRole} = render(`

            Hi

            `) expect(() => getByRole('article', {hidden: false})) .toThrowErrorMatchingInlineSnapshot(` @@ -43,26 +43,6 @@ Here are the accessible roles: `) }) -test('when hidden: false logs accessible roles when it fails', () => { - const {getByRole} = render(``) - expect(() => getByRole('article', {hidden: false})) - .toThrowErrorMatchingInlineSnapshot(` -"Unable to find an accessible element with the role "article" - -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 - -
            - -
            " -`) -}) - test('logs a different error if inaccessible roles should not be included', () => { const {getByRole} = render('
            ') expect(() => getByRole('article', {hidden: false}))