From 4b48614d43b5f26ddd17df4f66406f4ac5e89c35 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Wed, 9 Nov 2022 18:26:47 +0100 Subject: [PATCH 01/15] feat: add alias to hidden in query options --- src/helpers/findAll.ts | 5 +++-- src/queries/__tests__/a11yState.test.tsx | 9 +++++++++ src/queries/__tests__/a11yValue.test.tsx | 3 +++ src/queries/__tests__/displayValue.test.tsx | 3 +++ src/queries/__tests__/hintText.test.tsx | 3 +++ src/queries/__tests__/labelText.test.tsx | 3 +++ src/queries/__tests__/placeholderText.test.tsx | 7 +++++++ src/queries/__tests__/role.test.tsx | 2 ++ src/queries/__tests__/testId.test.tsx | 2 ++ src/queries/__tests__/text.test.tsx | 3 +++ src/queries/options.ts | 6 +++++- typings/index.flow.js | 2 +- 12 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index a29357cf6..96958487a 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -4,6 +4,7 @@ import { isHiddenFromAccessibility } from './accessiblity'; interface FindAllOptions { hidden?: boolean; + includeHidden?: boolean; } export function findAll( @@ -12,8 +13,8 @@ export function findAll( options?: FindAllOptions ) { const results = root.findAll(predicate); - - const hidden = options?.hidden ?? getConfig().defaultHidden; + const includeHiddenQueryOption = options?.includeHidden ?? options?.hidden; + const hidden = includeHiddenQueryOption ?? getConfig().defaultHidden; if (hidden) { return results; } diff --git a/src/queries/__tests__/a11yState.test.tsx b/src/queries/__tests__/a11yState.test.tsx index 73dc1cc57..8c007e79b 100644 --- a/src/queries/__tests__/a11yState.test.tsx +++ b/src/queries/__tests__/a11yState.test.tsx @@ -239,9 +239,18 @@ test('byA11yState queries support hidden option', () => { expect(getByA11yState({ expanded: false })).toBeTruthy(); expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); + expect( + getByA11yState({ expanded: false }, { includeHidden: true }) + ).toBeTruthy(); expect(queryByA11yState({ expanded: false }, { hidden: false })).toBeFalsy(); expect(() => getByA11yState({ expanded: false }, { hidden: false }) ).toThrow(); + expect( + queryByA11yState({ expanded: false }, { includeHidden: false }) + ).toBeFalsy(); + expect(() => + getByA11yState({ expanded: false }, { includeHidden: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/a11yValue.test.tsx b/src/queries/__tests__/a11yValue.test.tsx index c1b7c84b9..7debf8b6e 100644 --- a/src/queries/__tests__/a11yValue.test.tsx +++ b/src/queries/__tests__/a11yValue.test.tsx @@ -102,7 +102,10 @@ test('byA11yValue queries support hidden option', () => { expect(getByA11yValue({ max: 10 })).toBeTruthy(); expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); + expect(getByA11yValue({ max: 10 }, { includeHidden: true })).toBeTruthy(); expect(queryByA11yValue({ max: 10 }, { hidden: false })).toBeFalsy(); expect(() => getByA11yValue({ max: 10 }, { hidden: false })).toThrow(); + expect(queryByA11yValue({ max: 10 }, { includeHidden: false })).toBeFalsy(); + expect(() => getByA11yValue({ max: 10 }, { includeHidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx index ff2567ea0..a1d78214b 100644 --- a/src/queries/__tests__/displayValue.test.tsx +++ b/src/queries/__tests__/displayValue.test.tsx @@ -107,7 +107,10 @@ test('byDisplayValue queries support hidden option', () => { expect(getByDisplayValue('hidden')).toBeTruthy(); expect(getByDisplayValue('hidden', { hidden: true })).toBeTruthy(); + expect(getByDisplayValue('hidden', { includeHidden: true })).toBeTruthy(); expect(queryByDisplayValue('hidden', { hidden: false })).toBeFalsy(); expect(() => getByDisplayValue('hidden', { hidden: false })).toThrow(); + expect(queryByDisplayValue('hidden', { includeHidden: false })).toBeFalsy(); + expect(() => getByDisplayValue('hidden', { includeHidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/hintText.test.tsx b/src/queries/__tests__/hintText.test.tsx index 02ad9c596..5beff8977 100644 --- a/src/queries/__tests__/hintText.test.tsx +++ b/src/queries/__tests__/hintText.test.tsx @@ -116,7 +116,10 @@ test('byHintText queries support hidden option', () => { expect(getByHintText('hidden')).toBeTruthy(); expect(getByHintText('hidden', { hidden: true })).toBeTruthy(); + expect(getByHintText('hidden', { includeHidden: true })).toBeTruthy(); expect(queryByHintText('hidden', { hidden: false })).toBeFalsy(); expect(() => getByHintText('hidden', { hidden: false })).toThrow(); + expect(queryByHintText('hidden', { includeHidden: false })).toBeFalsy(); + expect(() => getByHintText('hidden', { includeHidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index d1ce5a51b..43c3025c0 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -153,7 +153,10 @@ test('byLabelText queries support hidden option', () => { expect(getByLabelText('hidden')).toBeTruthy(); expect(getByLabelText('hidden', { hidden: true })).toBeTruthy(); + expect(getByLabelText('hidden', { includeHidden: true })).toBeTruthy(); expect(queryByLabelText('hidden', { hidden: false })).toBeFalsy(); expect(() => getByLabelText('hidden', { hidden: false })).toThrow(); + expect(queryByLabelText('hidden', { includeHidden: false })).toBeFalsy(); + expect(() => getByLabelText('hidden', { includeHidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx index 973691eee..1b60ca563 100644 --- a/src/queries/__tests__/placeholderText.test.tsx +++ b/src/queries/__tests__/placeholderText.test.tsx @@ -66,7 +66,14 @@ test('byPlaceholderText queries support hidden option', () => { expect(getByPlaceholderText('hidden')).toBeTruthy(); expect(getByPlaceholderText('hidden', { hidden: true })).toBeTruthy(); + expect(getByPlaceholderText('hidden', { includeHidden: true })).toBeTruthy(); expect(queryByPlaceholderText('hidden', { hidden: false })).toBeFalsy(); expect(() => getByPlaceholderText('hidden', { hidden: false })).toThrow(); + expect( + queryByPlaceholderText('hidden', { includeHidden: false }) + ).toBeFalsy(); + expect(() => + getByPlaceholderText('hidden', { includeHidden: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index 25e5c9cc1..79aa07dbc 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -707,7 +707,9 @@ test('byRole queries support hidden option', () => { expect(getByRole('button')).toBeTruthy(); expect(getByRole('button', { hidden: true })).toBeTruthy(); + expect(getByRole('button', { includeHidden: true })).toBeTruthy(); expect(queryByRole('button', { hidden: false })).toBeFalsy(); expect(() => getByRole('button', { hidden: false })).toThrow(); + expect(() => getByRole('button', { includeHidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/testId.test.tsx b/src/queries/__tests__/testId.test.tsx index f60ebe3b7..419324541 100644 --- a/src/queries/__tests__/testId.test.tsx +++ b/src/queries/__tests__/testId.test.tsx @@ -142,7 +142,9 @@ test('byTestId queries support hidden option', () => { expect(getByTestId('hidden')).toBeTruthy(); expect(getByTestId('hidden', { hidden: true })).toBeTruthy(); + expect(getByTestId('hidden', { includeHidden: true })).toBeTruthy(); expect(queryByTestId('hidden', { hidden: false })).toBeFalsy(); expect(() => getByTestId('hidden', { hidden: false })).toThrow(); + expect(() => getByTestId('hidden', { includeHidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx index 9195e22bb..5f7164f94 100644 --- a/src/queries/__tests__/text.test.tsx +++ b/src/queries/__tests__/text.test.tsx @@ -474,7 +474,10 @@ test('byText support hidden option', () => { expect(getByText(/hidden/i)).toBeTruthy(); expect(getByText(/hidden/i, { hidden: true })).toBeTruthy(); + expect(getByText(/hidden/i, { includeHidden: true })).toBeTruthy(); expect(queryByText(/hidden/i, { hidden: false })).toBeFalsy(); + expect(queryByText(/hidden/i, { includeHidden: false })).toBeFalsy(); expect(() => getByText(/hidden/i, { hidden: false })).toThrow(); + expect(() => getByText(/hidden/i, { includeHidden: false })).toThrow(); }); diff --git a/src/queries/options.ts b/src/queries/options.ts index 8687b26e4..0de176b70 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -1,6 +1,10 @@ import { NormalizerFn } from '../matches'; -export type CommonQueryOptions = { hidden?: boolean }; +/** + * hidden is an alias for includeHidden that exists only to match react-testing-library API + * if both hidden and includeHidden values are defined, then includeHidden will take precedence + */ +export type CommonQueryOptions = { hidden?: boolean; includeHidden?: boolean }; export type TextMatchOptions = { exact?: boolean; diff --git a/typings/index.flow.js b/typings/index.flow.js index 7f30bad3d..46ccd4330 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -8,7 +8,7 @@ type QueryAllReturn = Array | []; type FindReturn = Promise; type FindAllReturn = Promise; -type CommonQueryOptions = { hidden?: boolean }; +type CommonQueryOptions = { hidden?: boolean, includeHidden?: boolean }; type TextMatch = string | RegExp; declare type NormalizerFn = (textToNormalize: string) => string; From e60d4a2a76db4479497cb6ce8adce58c4c40533e Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Wed, 9 Nov 2022 18:37:15 +0100 Subject: [PATCH 02/15] feat: add alias to hidden in config --- src/__tests__/config.test.ts | 1 + src/config.ts | 9 ++++++++- src/helpers/findAll.ts | 5 ++++- typings/index.flow.js | 2 ++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index 5879b8ee2..ae150a32f 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -15,6 +15,7 @@ test('configure() overrides existing config values', () => { asyncUtilTimeout: 5000, defaultDebugOptions: { message: 'debug message' }, defaultHidden: true, + defaultIncludeHidden: true, }); }); diff --git a/src/config.ts b/src/config.ts index b8133c3b9..ec2737427 100644 --- a/src/config.ts +++ b/src/config.ts @@ -4,7 +4,13 @@ export type Config = { /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */ asyncUtilTimeout: number; - /** Default hidden value for all queries */ + /** Default includeHidden value for all queries */ + defaultIncludeHidden: boolean; + + /** Default hidden value for all queries, alias to defaultIncludeHidden to respect react-testing-library API + * WARNING: if both defaultHidden and defaultIncludeHidden values are defined, + * then defaultIncludeHidden will take precedence + */ defaultHidden: boolean; /** Default options for `debug` helper. */ @@ -14,6 +20,7 @@ export type Config = { const defaultConfig: Config = { asyncUtilTimeout: 1000, defaultHidden: true, + defaultIncludeHidden: true, }; let config = { ...defaultConfig }; diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 96958487a..91906ac27 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -14,7 +14,10 @@ export function findAll( ) { const results = root.findAll(predicate); const includeHiddenQueryOption = options?.includeHidden ?? options?.hidden; - const hidden = includeHiddenQueryOption ?? getConfig().defaultHidden; + const defaultIncludeHidden = + getConfig()?.defaultIncludeHidden ?? getConfig()?.defaultHidden; + + const hidden = includeHiddenQueryOption ?? defaultIncludeHidden; if (hidden) { return results; } diff --git a/typings/index.flow.js b/typings/index.flow.js index 46ccd4330..c58b5998f 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -463,6 +463,8 @@ declare module '@testing-library/react-native' { declare interface Config { asyncUtilTimeout: number; + defaultHidden: boolean; + defaultIncludeHidden: boolean; defaultDebugOptions?: $Shape; } From 891b2931a9da1027600a9c12445f2841581ea600 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Wed, 9 Nov 2022 18:42:11 +0100 Subject: [PATCH 03/15] test: complete config test with hidden feature --- src/__tests__/config.test.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index ae150a32f..659c02e29 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -20,9 +20,17 @@ test('configure() overrides existing config values', () => { }); test('resetToDefaults() resets config to defaults', () => { - configure({ asyncUtilTimeout: 5000 }); + configure({ + asyncUtilTimeout: 5000, + defaultIncludeHidden: false, + defaultHidden: false, + }); expect(getConfig().asyncUtilTimeout).toEqual(5000); + expect(getConfig().defaultHidden).toEqual(false); + expect(getConfig().defaultIncludeHidden).toEqual(false); resetToDefaults(); expect(getConfig().asyncUtilTimeout).toEqual(1000); + expect(getConfig().defaultHidden).toEqual(true); + expect(getConfig().defaultIncludeHidden).toEqual(true); }); From cb569a247275b893dcd3acf6d5a9b7daad71df36 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Wed, 9 Nov 2022 19:13:04 +0100 Subject: [PATCH 04/15] doc: add documentation for the new naming --- website/docs/API.md | 7 ++++++- website/docs/Queries.md | 17 +++++++++++------ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index e8b76b5a6..f93f95712 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -50,6 +50,7 @@ title: API - [Configuration](#configuration) - [`configure`](#configure) - [`asyncUtilTimeout` option](#asyncutiltimeout-option) + - [`defaultIncludeHidden` option](#defaultincludehidden-option) - [`defaultHidden` option](#defaulthidden-option) - [`defaultDebugOptions` option](#defaultdebugoptions-option) - [`resetToDefaults()`](#resettodefaults) @@ -791,9 +792,13 @@ function configure(options: Partial) {} Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementToBeRemoved`) and `findBy*` queries. Defaults to 1000 ms. +#### `defaultIncludeHidden` option + +Default [includeHidden](Queries.md#includehidden-option) query option for all queries. This default option will be overridden by the one you specify directly when using your query. + #### `defaultHidden` option -Default [hidden](Queries.md#hidden-option) query option for all queries. This default option will be overridden by the one you specify directly when using your query. +This is just an alias to the `defaultIncludeHidden` option. It only exists to match react-testing-library naming used in the [configuration options](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). Prefer the use of `defaultIncludeHidden` if possible as `defaultIncludeHidden: true` is clearer than `defaultHidden: true`. #### `defaultDebugOptions` option diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 337cc08b4..48d99da70 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -27,6 +27,7 @@ title: Queries - [Default state for: `checked` and `expanded` keys](#default-state-for-checked-and-expanded-keys) - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) - [Common options](#common-options) + - [`includeHidden` option](#includehidden-option) - [`hidden` option](#hidden-option) - [TextMatch](#textmatch) - [Examples](#examples) @@ -376,9 +377,9 @@ const element = screen.getByA11yValue({ min: 40 }); ## Common options -### `hidden` option +### `includeHidden` option -All queries have the `hidden` option which enables them to respect accessibility props on components when it is set to `false`. If you set `hidden` to `true`, elements that are normally excluded from the accessibility tree are considered for the query as well. Currently `hidden` option is set `true` by default, which means that elements hidden from accessibility will be included by default. However, we plan to change the default value to `hidden: false` in the next major release. +All queries have the `includeHidden` option which enables them to respect accessibility props on components when it is set to `false`. If you set `includeHidden` to `true`, elements that are normally excluded from the accessibility tree are considered for the query as well. Currently `includeHidden` option is set `true` by default, which means that elements includeHidden from accessibility will be included by default. However, we plan to change the default value to `includeHidden: false` in the next major release. You can configure the default value with the [`configure` function](API.md#configure). @@ -389,18 +390,22 @@ An element is considered to be hidden from accessibility based on [`isHiddenFrom ```tsx render(I am hidden from accessibility); -// Ignore hidden elements +// Include hidden elements expect( - screen.queryByText('I am hidden from accessibility', { hidden: false }) + screen.queryByText('I am hidden from accessibility', { includeHidden: false }) ).toBeFalsy(); // Match hidden elements -expect(screen.getByText('I am hidden from accessibility')).toBeTruthy(); // Defaults to hidden: true for now +expect(screen.getByText('I am hidden from accessibility')).toBeTruthy(); // Defaults to includeHidden: true for now expect( - screen.getByText('I am hidden from accessibility', { hidden: true }) + screen.getByText('I am hidden from accessibility', { includeHidden: true }) ).toBeTruthy(); ``` +### `hidden` option + +This is just an alias to the `includeHidden` option. It only exists to match react-testing-library naming used in [byRole](https://testing-library.com/docs/queries/byrole/#hidden). Prefer the use of `includeHidden` if possible as `includeHidden: true` is clearer than `hidden: true`. + ## TextMatch ```ts From dfcd2edb0b0541b939e6391aa95cbb106d92ea7b Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 12:29:17 +0100 Subject: [PATCH 05/15] refactor: rename includeHiddenFromAccessibility to includeHiddenElements --- src/__tests__/config.test.ts | 8 ++++---- src/config.ts | 12 ++++++------ src/helpers/findAll.ts | 12 +++++++----- src/queries/__tests__/a11yState.test.tsx | 6 +++--- src/queries/__tests__/a11yValue.test.tsx | 12 +++++++++--- src/queries/__tests__/displayValue.test.tsx | 12 +++++++++--- src/queries/__tests__/hintText.test.tsx | 10 +++++++--- src/queries/__tests__/labelText.test.tsx | 12 +++++++++--- src/queries/__tests__/placeholderText.test.tsx | 8 +++++--- src/queries/__tests__/role.test.tsx | 4 ++-- src/queries/__tests__/testId.test.tsx | 6 ++++-- src/queries/__tests__/text.test.tsx | 8 +++++--- src/queries/options.ts | 9 ++++++--- typings/index.flow.js | 7 +++++-- website/docs/API.md | 8 ++++---- website/docs/Queries.md | 14 +++++++------- 16 files changed, 92 insertions(+), 56 deletions(-) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index 659c02e29..4b7b9cb5f 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -15,22 +15,22 @@ test('configure() overrides existing config values', () => { asyncUtilTimeout: 5000, defaultDebugOptions: { message: 'debug message' }, defaultHidden: true, - defaultIncludeHidden: true, + defaultIncludeHiddenElements: true, }); }); test('resetToDefaults() resets config to defaults', () => { configure({ asyncUtilTimeout: 5000, - defaultIncludeHidden: false, + defaultIncludeHiddenElements: false, defaultHidden: false, }); expect(getConfig().asyncUtilTimeout).toEqual(5000); expect(getConfig().defaultHidden).toEqual(false); - expect(getConfig().defaultIncludeHidden).toEqual(false); + expect(getConfig().defaultIncludeHiddenElements).toEqual(false); resetToDefaults(); expect(getConfig().asyncUtilTimeout).toEqual(1000); expect(getConfig().defaultHidden).toEqual(true); - expect(getConfig().defaultIncludeHidden).toEqual(true); + expect(getConfig().defaultIncludeHiddenElements).toEqual(true); }); diff --git a/src/config.ts b/src/config.ts index ec2737427..a16061357 100644 --- a/src/config.ts +++ b/src/config.ts @@ -4,12 +4,12 @@ export type Config = { /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */ asyncUtilTimeout: number; - /** Default includeHidden value for all queries */ - defaultIncludeHidden: boolean; + /** Default includeHiddenElements value for all queries */ + defaultIncludeHiddenElements: boolean; - /** Default hidden value for all queries, alias to defaultIncludeHidden to respect react-testing-library API - * WARNING: if both defaultHidden and defaultIncludeHidden values are defined, - * then defaultIncludeHidden will take precedence + /** Default hidden value for all queries, alias to defaultIncludeHiddenElements to respect react-testing-library API + * WARNING: if both defaultHidden and defaultIncludeHiddenElements values are defined, + * then defaultIncludeHiddenElements will take precedence */ defaultHidden: boolean; @@ -20,7 +20,7 @@ export type Config = { const defaultConfig: Config = { asyncUtilTimeout: 1000, defaultHidden: true, - defaultIncludeHidden: true, + defaultIncludeHiddenElements: true, }; let config = { ...defaultConfig }; diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 91906ac27..5b27eb23e 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -4,7 +4,7 @@ import { isHiddenFromAccessibility } from './accessiblity'; interface FindAllOptions { hidden?: boolean; - includeHidden?: boolean; + includeHiddenElements?: boolean; } export function findAll( @@ -13,11 +13,13 @@ export function findAll( options?: FindAllOptions ) { const results = root.findAll(predicate); - const includeHiddenQueryOption = options?.includeHidden ?? options?.hidden; - const defaultIncludeHidden = - getConfig()?.defaultIncludeHidden ?? getConfig()?.defaultHidden; + const includeHiddenElementsQueryOption = + options?.includeHiddenElements ?? options?.hidden; + const defaultIncludeHiddenElements = + getConfig()?.defaultIncludeHiddenElements ?? getConfig()?.defaultHidden; - const hidden = includeHiddenQueryOption ?? defaultIncludeHidden; + const hidden = + includeHiddenElementsQueryOption ?? defaultIncludeHiddenElements; if (hidden) { return results; } diff --git a/src/queries/__tests__/a11yState.test.tsx b/src/queries/__tests__/a11yState.test.tsx index 8c007e79b..783a3487a 100644 --- a/src/queries/__tests__/a11yState.test.tsx +++ b/src/queries/__tests__/a11yState.test.tsx @@ -240,7 +240,7 @@ test('byA11yState queries support hidden option', () => { expect(getByA11yState({ expanded: false })).toBeTruthy(); expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); expect( - getByA11yState({ expanded: false }, { includeHidden: true }) + getByA11yState({ expanded: false }, { includeHiddenElements: true }) ).toBeTruthy(); expect(queryByA11yState({ expanded: false }, { hidden: false })).toBeFalsy(); @@ -248,9 +248,9 @@ test('byA11yState queries support hidden option', () => { getByA11yState({ expanded: false }, { hidden: false }) ).toThrow(); expect( - queryByA11yState({ expanded: false }, { includeHidden: false }) + queryByA11yState({ expanded: false }, { includeHiddenElements: false }) ).toBeFalsy(); expect(() => - getByA11yState({ expanded: false }, { includeHidden: false }) + getByA11yState({ expanded: false }, { includeHiddenElements: false }) ).toThrow(); }); diff --git a/src/queries/__tests__/a11yValue.test.tsx b/src/queries/__tests__/a11yValue.test.tsx index 7debf8b6e..858deec25 100644 --- a/src/queries/__tests__/a11yValue.test.tsx +++ b/src/queries/__tests__/a11yValue.test.tsx @@ -102,10 +102,16 @@ test('byA11yValue queries support hidden option', () => { expect(getByA11yValue({ max: 10 })).toBeTruthy(); expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); - expect(getByA11yValue({ max: 10 }, { includeHidden: true })).toBeTruthy(); + expect( + getByA11yValue({ max: 10 }, { includeHiddenElements: true }) + ).toBeTruthy(); expect(queryByA11yValue({ max: 10 }, { hidden: false })).toBeFalsy(); expect(() => getByA11yValue({ max: 10 }, { hidden: false })).toThrow(); - expect(queryByA11yValue({ max: 10 }, { includeHidden: false })).toBeFalsy(); - expect(() => getByA11yValue({ max: 10 }, { includeHidden: false })).toThrow(); + expect( + queryByA11yValue({ max: 10 }, { includeHiddenElements: false }) + ).toBeFalsy(); + expect(() => + getByA11yValue({ max: 10 }, { includeHiddenElements: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx index a1d78214b..e9e6bf029 100644 --- a/src/queries/__tests__/displayValue.test.tsx +++ b/src/queries/__tests__/displayValue.test.tsx @@ -107,10 +107,16 @@ test('byDisplayValue queries support hidden option', () => { expect(getByDisplayValue('hidden')).toBeTruthy(); expect(getByDisplayValue('hidden', { hidden: true })).toBeTruthy(); - expect(getByDisplayValue('hidden', { includeHidden: true })).toBeTruthy(); + expect( + getByDisplayValue('hidden', { includeHiddenElements: true }) + ).toBeTruthy(); expect(queryByDisplayValue('hidden', { hidden: false })).toBeFalsy(); expect(() => getByDisplayValue('hidden', { hidden: false })).toThrow(); - expect(queryByDisplayValue('hidden', { includeHidden: false })).toBeFalsy(); - expect(() => getByDisplayValue('hidden', { includeHidden: false })).toThrow(); + expect( + queryByDisplayValue('hidden', { includeHiddenElements: false }) + ).toBeFalsy(); + expect(() => + getByDisplayValue('hidden', { includeHiddenElements: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/hintText.test.tsx b/src/queries/__tests__/hintText.test.tsx index 5beff8977..b79514744 100644 --- a/src/queries/__tests__/hintText.test.tsx +++ b/src/queries/__tests__/hintText.test.tsx @@ -116,10 +116,14 @@ test('byHintText queries support hidden option', () => { expect(getByHintText('hidden')).toBeTruthy(); expect(getByHintText('hidden', { hidden: true })).toBeTruthy(); - expect(getByHintText('hidden', { includeHidden: true })).toBeTruthy(); + expect(getByHintText('hidden', { includeHiddenElements: true })).toBeTruthy(); expect(queryByHintText('hidden', { hidden: false })).toBeFalsy(); expect(() => getByHintText('hidden', { hidden: false })).toThrow(); - expect(queryByHintText('hidden', { includeHidden: false })).toBeFalsy(); - expect(() => getByHintText('hidden', { includeHidden: false })).toThrow(); + expect( + queryByHintText('hidden', { includeHiddenElements: false }) + ).toBeFalsy(); + expect(() => + getByHintText('hidden', { includeHiddenElements: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index 43c3025c0..321c3c0a8 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -153,10 +153,16 @@ test('byLabelText queries support hidden option', () => { expect(getByLabelText('hidden')).toBeTruthy(); expect(getByLabelText('hidden', { hidden: true })).toBeTruthy(); - expect(getByLabelText('hidden', { includeHidden: true })).toBeTruthy(); + expect( + getByLabelText('hidden', { includeHiddenElements: true }) + ).toBeTruthy(); expect(queryByLabelText('hidden', { hidden: false })).toBeFalsy(); expect(() => getByLabelText('hidden', { hidden: false })).toThrow(); - expect(queryByLabelText('hidden', { includeHidden: false })).toBeFalsy(); - expect(() => getByLabelText('hidden', { includeHidden: false })).toThrow(); + expect( + queryByLabelText('hidden', { includeHiddenElements: false }) + ).toBeFalsy(); + expect(() => + getByLabelText('hidden', { includeHiddenElements: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx index 1b60ca563..a5ca8f774 100644 --- a/src/queries/__tests__/placeholderText.test.tsx +++ b/src/queries/__tests__/placeholderText.test.tsx @@ -66,14 +66,16 @@ test('byPlaceholderText queries support hidden option', () => { expect(getByPlaceholderText('hidden')).toBeTruthy(); expect(getByPlaceholderText('hidden', { hidden: true })).toBeTruthy(); - expect(getByPlaceholderText('hidden', { includeHidden: true })).toBeTruthy(); + expect( + getByPlaceholderText('hidden', { includeHiddenElements: true }) + ).toBeTruthy(); expect(queryByPlaceholderText('hidden', { hidden: false })).toBeFalsy(); expect(() => getByPlaceholderText('hidden', { hidden: false })).toThrow(); expect( - queryByPlaceholderText('hidden', { includeHidden: false }) + queryByPlaceholderText('hidden', { includeHiddenElements: false }) ).toBeFalsy(); expect(() => - getByPlaceholderText('hidden', { includeHidden: false }) + getByPlaceholderText('hidden', { includeHiddenElements: false }) ).toThrow(); }); diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index 79aa07dbc..2700fbe6f 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -707,9 +707,9 @@ test('byRole queries support hidden option', () => { expect(getByRole('button')).toBeTruthy(); expect(getByRole('button', { hidden: true })).toBeTruthy(); - expect(getByRole('button', { includeHidden: true })).toBeTruthy(); + expect(getByRole('button', { includeHiddenElements: true })).toBeTruthy(); expect(queryByRole('button', { hidden: false })).toBeFalsy(); expect(() => getByRole('button', { hidden: false })).toThrow(); - expect(() => getByRole('button', { includeHidden: false })).toThrow(); + expect(() => getByRole('button', { includeHiddenElements: false })).toThrow(); }); diff --git a/src/queries/__tests__/testId.test.tsx b/src/queries/__tests__/testId.test.tsx index 419324541..73343a1d5 100644 --- a/src/queries/__tests__/testId.test.tsx +++ b/src/queries/__tests__/testId.test.tsx @@ -142,9 +142,11 @@ test('byTestId queries support hidden option', () => { expect(getByTestId('hidden')).toBeTruthy(); expect(getByTestId('hidden', { hidden: true })).toBeTruthy(); - expect(getByTestId('hidden', { includeHidden: true })).toBeTruthy(); + expect(getByTestId('hidden', { includeHiddenElements: true })).toBeTruthy(); expect(queryByTestId('hidden', { hidden: false })).toBeFalsy(); expect(() => getByTestId('hidden', { hidden: false })).toThrow(); - expect(() => getByTestId('hidden', { includeHidden: false })).toThrow(); + expect(() => + getByTestId('hidden', { includeHiddenElements: false }) + ).toThrow(); }); diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx index 5f7164f94..ec791edf3 100644 --- a/src/queries/__tests__/text.test.tsx +++ b/src/queries/__tests__/text.test.tsx @@ -474,10 +474,12 @@ test('byText support hidden option', () => { expect(getByText(/hidden/i)).toBeTruthy(); expect(getByText(/hidden/i, { hidden: true })).toBeTruthy(); - expect(getByText(/hidden/i, { includeHidden: true })).toBeTruthy(); + expect(getByText(/hidden/i, { includeHiddenElements: true })).toBeTruthy(); expect(queryByText(/hidden/i, { hidden: false })).toBeFalsy(); - expect(queryByText(/hidden/i, { includeHidden: false })).toBeFalsy(); + expect(queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy(); expect(() => getByText(/hidden/i, { hidden: false })).toThrow(); - expect(() => getByText(/hidden/i, { includeHidden: false })).toThrow(); + expect(() => + getByText(/hidden/i, { includeHiddenElements: false }) + ).toThrow(); }); diff --git a/src/queries/options.ts b/src/queries/options.ts index 0de176b70..181727dc4 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -1,10 +1,13 @@ import { NormalizerFn } from '../matches'; /** - * hidden is an alias for includeHidden that exists only to match react-testing-library API - * if both hidden and includeHidden values are defined, then includeHidden will take precedence + * hidden is an alias for includeHiddenElements that exists only to match react-testing-library API + * if both hidden and includeHiddenElements values are defined, then includeHiddenElements will take precedence */ -export type CommonQueryOptions = { hidden?: boolean; includeHidden?: boolean }; +export type CommonQueryOptions = { + hidden?: boolean; + includeHiddenElements?: boolean; +}; export type TextMatchOptions = { exact?: boolean; diff --git a/typings/index.flow.js b/typings/index.flow.js index c58b5998f..5ffc4a4b2 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -8,7 +8,10 @@ type QueryAllReturn = Array | []; type FindReturn = Promise; type FindAllReturn = Promise; -type CommonQueryOptions = { hidden?: boolean, includeHidden?: boolean }; +type CommonQueryOptions = { + hidden?: boolean, + includeHiddenElements?: boolean, +}; type TextMatch = string | RegExp; declare type NormalizerFn = (textToNormalize: string) => string; @@ -464,7 +467,7 @@ declare module '@testing-library/react-native' { declare interface Config { asyncUtilTimeout: number; defaultHidden: boolean; - defaultIncludeHidden: boolean; + defaultIncludeHiddenElements: boolean; defaultDebugOptions?: $Shape; } diff --git a/website/docs/API.md b/website/docs/API.md index f93f95712..96d5649e7 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -50,7 +50,7 @@ title: API - [Configuration](#configuration) - [`configure`](#configure) - [`asyncUtilTimeout` option](#asyncutiltimeout-option) - - [`defaultIncludeHidden` option](#defaultincludehidden-option) + - [`defaultIncludeHiddenElements` option](#defaultincludehidden-option) - [`defaultHidden` option](#defaulthidden-option) - [`defaultDebugOptions` option](#defaultdebugoptions-option) - [`resetToDefaults()`](#resettodefaults) @@ -792,13 +792,13 @@ function configure(options: Partial) {} Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementToBeRemoved`) and `findBy*` queries. Defaults to 1000 ms. -#### `defaultIncludeHidden` option +#### `defaultIncludeHiddenElements` option -Default [includeHidden](Queries.md#includehidden-option) query option for all queries. This default option will be overridden by the one you specify directly when using your query. +Default [includeHiddenElements](Queries.md#includehidden-option) query option for all queries. This default option will be overridden by the one you specify directly when using your query. #### `defaultHidden` option -This is just an alias to the `defaultIncludeHidden` option. It only exists to match react-testing-library naming used in the [configuration options](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). Prefer the use of `defaultIncludeHidden` if possible as `defaultIncludeHidden: true` is clearer than `defaultHidden: true`. +This is just an alias to the `defaultIncludeHiddenElements` option. It only exists to match react-testing-library naming used in the [configuration options](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). Prefer the use of `defaultIncludeHiddenElements` if possible as `defaultIncludeHiddenElements: true` is clearer than `defaultHidden: true`. #### `defaultDebugOptions` option diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 48d99da70..850b65101 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -27,7 +27,7 @@ title: Queries - [Default state for: `checked` and `expanded` keys](#default-state-for-checked-and-expanded-keys) - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) - [Common options](#common-options) - - [`includeHidden` option](#includehidden-option) + - [`includeHiddenElements` option](#includehidden-option) - [`hidden` option](#hidden-option) - [TextMatch](#textmatch) - [Examples](#examples) @@ -377,9 +377,9 @@ const element = screen.getByA11yValue({ min: 40 }); ## Common options -### `includeHidden` option +### `includeHiddenElements` option -All queries have the `includeHidden` option which enables them to respect accessibility props on components when it is set to `false`. If you set `includeHidden` to `true`, elements that are normally excluded from the accessibility tree are considered for the query as well. Currently `includeHidden` option is set `true` by default, which means that elements includeHidden from accessibility will be included by default. However, we plan to change the default value to `includeHidden: false` in the next major release. +All queries have the `includeHiddenElements` option which enables them to respect accessibility props on components when it is set to `false`. If you set `includeHiddenElements` to `true`, elements that are normally excluded from the accessibility tree are considered for the query as well. Currently `includeHiddenElements` option is set `true` by default, which means that elements includeHiddenElements from accessibility will be included by default. However, we plan to change the default value to `includeHiddenElements: false` in the next major release. You can configure the default value with the [`configure` function](API.md#configure). @@ -392,19 +392,19 @@ render(I am hidden from accessibility); // Include hidden elements expect( - screen.queryByText('I am hidden from accessibility', { includeHidden: false }) + screen.queryByText('I am hidden from accessibility', { includeHiddenElements: false }) ).toBeFalsy(); // Match hidden elements -expect(screen.getByText('I am hidden from accessibility')).toBeTruthy(); // Defaults to includeHidden: true for now +expect(screen.getByText('I am hidden from accessibility')).toBeTruthy(); // Defaults to includeHiddenElements: true for now expect( - screen.getByText('I am hidden from accessibility', { includeHidden: true }) + screen.getByText('I am hidden from accessibility', { includeHiddenElements: true }) ).toBeTruthy(); ``` ### `hidden` option -This is just an alias to the `includeHidden` option. It only exists to match react-testing-library naming used in [byRole](https://testing-library.com/docs/queries/byrole/#hidden). Prefer the use of `includeHidden` if possible as `includeHidden: true` is clearer than `hidden: true`. +This is just an alias to the `includeHiddenElements` option. It only exists to match react-testing-library naming used in [byRole](https://testing-library.com/docs/queries/byrole/#hidden). Prefer the use of `includeHiddenElements` if possible as `includeHiddenElements: true` is clearer than `hidden: true`. ## TextMatch From b4bfad206a0741208b5f2d8777fdd9cdab93f98b Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 17:34:39 +0100 Subject: [PATCH 06/15] refactor: inline includeHIddenElements computatiion --- src/helpers/findAll.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 5b27eb23e..76f38bbf4 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -13,13 +13,13 @@ export function findAll( options?: FindAllOptions ) { const results = root.findAll(predicate); - const includeHiddenElementsQueryOption = - options?.includeHiddenElements ?? options?.hidden; - const defaultIncludeHiddenElements = - getConfig()?.defaultIncludeHiddenElements ?? getConfig()?.defaultHidden; const hidden = - includeHiddenElementsQueryOption ?? defaultIncludeHiddenElements; + options?.includeHiddenElements ?? + options?.hidden ?? + getConfig()?.defaultIncludeHiddenElements ?? + getConfig()?.defaultHidden; + if (hidden) { return results; } From d0592adc66036f7a9e691244cf715e66b9913305 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 17:39:15 +0100 Subject: [PATCH 07/15] refactor: put better naming includeHIddenElements first in flow types --- typings/index.flow.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/typings/index.flow.js b/typings/index.flow.js index 5ffc4a4b2..212304859 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -9,8 +9,9 @@ type FindReturn = Promise; type FindAllReturn = Promise; type CommonQueryOptions = { - hidden?: boolean, includeHiddenElements?: boolean, + /** Alias to `includeHiddenElements` for RTL compatibility */ + hidden?: boolean, }; type TextMatch = string | RegExp; @@ -466,8 +467,9 @@ declare module '@testing-library/react-native' { declare interface Config { asyncUtilTimeout: number; - defaultHidden: boolean; defaultIncludeHiddenElements: boolean; + /** Alias to `defaultIncludeHiddenElements` for RTL compatibility */ + defaultHidden: boolean; defaultDebugOptions?: $Shape; } From 5d23ae3c32d45d956355c358449e214c57936e21 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 17:43:30 +0100 Subject: [PATCH 08/15] doc: minimize doc about hidden option --- website/docs/API.md | 7 ++----- website/docs/Queries.md | 9 +++------ 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index 96d5649e7..f91440a8f 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -50,8 +50,7 @@ title: API - [Configuration](#configuration) - [`configure`](#configure) - [`asyncUtilTimeout` option](#asyncutiltimeout-option) - - [`defaultIncludeHiddenElements` option](#defaultincludehidden-option) - - [`defaultHidden` option](#defaulthidden-option) + - [`defaultIncludeHiddenElements` option](#defaultincludehiddenelements-option) - [`defaultDebugOptions` option](#defaultdebugoptions-option) - [`resetToDefaults()`](#resettodefaults) - [Environment variables](#environment-variables) @@ -796,9 +795,7 @@ Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementTo Default [includeHiddenElements](Queries.md#includehidden-option) query option for all queries. This default option will be overridden by the one you specify directly when using your query. -#### `defaultHidden` option - -This is just an alias to the `defaultIncludeHiddenElements` option. It only exists to match react-testing-library naming used in the [configuration options](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). Prefer the use of `defaultIncludeHiddenElements` if possible as `defaultIncludeHiddenElements: true` is clearer than `defaultHidden: true`. +There is an alias to this option named `defaultHidden` that exists only for compatibility with [react-testing-library](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). #### `defaultDebugOptions` option diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 850b65101..56ff80f02 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -27,8 +27,7 @@ title: Queries - [Default state for: `checked` and `expanded` keys](#default-state-for-checked-and-expanded-keys) - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) - [Common options](#common-options) - - [`includeHiddenElements` option](#includehidden-option) - - [`hidden` option](#hidden-option) + - [`includeHiddenElements` option](#includehiddenelements-option) - [TextMatch](#textmatch) - [Examples](#examples) - [Precision](#precision) @@ -385,6 +384,8 @@ You can configure the default value with the [`configure` function](API.md#confi An element is considered to be hidden from accessibility based on [`isHiddenFromAccessibility()`](./API.md#ishiddenfromaccessibility) function. +There is an alias to this option named `hidden` that exists only for compatibility with [react-testing-library](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). + **Examples** ```tsx @@ -402,10 +403,6 @@ expect( ).toBeTruthy(); ``` -### `hidden` option - -This is just an alias to the `includeHiddenElements` option. It only exists to match react-testing-library naming used in [byRole](https://testing-library.com/docs/queries/byrole/#hidden). Prefer the use of `includeHiddenElements` if possible as `includeHiddenElements: true` is clearer than `hidden: true`. - ## TextMatch ```ts From 9835e772f7a097bc04eded64160939ce52f9b16a Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 18:14:01 +0100 Subject: [PATCH 09/15] test: extract includeHiddenElements tests --- .../__tests__/includeHiddenElements.test.tsx | 26 +++++++++++++++++++ src/queries/__tests__/a11yState.test.tsx | 5 ---- src/queries/__tests__/a11yValue.test.tsx | 3 --- src/queries/__tests__/displayValue.test.tsx | 3 --- src/queries/__tests__/hintText.test.tsx | 3 --- src/queries/__tests__/labelText.test.tsx | 3 --- .../__tests__/placeholderText.test.tsx | 3 --- src/queries/__tests__/role.test.tsx | 4 +-- src/queries/__tests__/testId.test.tsx | 4 +-- src/queries/__tests__/text.test.tsx | 3 --- 10 files changed, 28 insertions(+), 29 deletions(-) create mode 100644 src/helpers/__tests__/includeHiddenElements.test.tsx diff --git a/src/helpers/__tests__/includeHiddenElements.test.tsx b/src/helpers/__tests__/includeHiddenElements.test.tsx new file mode 100644 index 000000000..eb94d8cd2 --- /dev/null +++ b/src/helpers/__tests__/includeHiddenElements.test.tsx @@ -0,0 +1,26 @@ +import { View } from 'react-native'; +import React from 'react'; + +import render from '../../render'; +import { screen } from '../../screen'; +import { configure } from '../../config'; + +test('includeHiddenElements query option takes priority over hidden option and global config', () => { + configure({ defaultHidden: true, defaultIncludeHiddenElements: true }); + render(); + expect( + screen.queryByTestId('view', { includeHiddenElements: false, hidden: true }) + ).toBeFalsy(); +}); + +test('hidden option takes priority over global config when includeHiddenElements is not defined', () => { + configure({ defaultHidden: true, defaultIncludeHiddenElements: true }); + render(); + expect(screen.queryByTestId('view', { hidden: false })).toBeFalsy(); +}); + +test('global config defaultIncludeElements option takes priority over defaultHidden when set at the same time', () => { + configure({ defaultHidden: false, defaultIncludeHiddenElements: true }); + render(); + expect(screen.getByTestId('view')).toBeTruthy(); +}); diff --git a/src/queries/__tests__/a11yState.test.tsx b/src/queries/__tests__/a11yState.test.tsx index 783a3487a..315b5d1f8 100644 --- a/src/queries/__tests__/a11yState.test.tsx +++ b/src/queries/__tests__/a11yState.test.tsx @@ -238,15 +238,10 @@ test('byA11yState queries support hidden option', () => { ); expect(getByA11yState({ expanded: false })).toBeTruthy(); - expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); expect( getByA11yState({ expanded: false }, { includeHiddenElements: true }) ).toBeTruthy(); - expect(queryByA11yState({ expanded: false }, { hidden: false })).toBeFalsy(); - expect(() => - getByA11yState({ expanded: false }, { hidden: false }) - ).toThrow(); expect( queryByA11yState({ expanded: false }, { includeHiddenElements: false }) ).toBeFalsy(); diff --git a/src/queries/__tests__/a11yValue.test.tsx b/src/queries/__tests__/a11yValue.test.tsx index 858deec25..26043ea8d 100644 --- a/src/queries/__tests__/a11yValue.test.tsx +++ b/src/queries/__tests__/a11yValue.test.tsx @@ -101,13 +101,10 @@ test('byA11yValue queries support hidden option', () => { ); expect(getByA11yValue({ max: 10 })).toBeTruthy(); - expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); expect( getByA11yValue({ max: 10 }, { includeHiddenElements: true }) ).toBeTruthy(); - expect(queryByA11yValue({ max: 10 }, { hidden: false })).toBeFalsy(); - expect(() => getByA11yValue({ max: 10 }, { hidden: false })).toThrow(); expect( queryByA11yValue({ max: 10 }, { includeHiddenElements: false }) ).toBeFalsy(); diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx index e9e6bf029..8393d2882 100644 --- a/src/queries/__tests__/displayValue.test.tsx +++ b/src/queries/__tests__/displayValue.test.tsx @@ -106,13 +106,10 @@ test('byDisplayValue queries support hidden option', () => { ); expect(getByDisplayValue('hidden')).toBeTruthy(); - expect(getByDisplayValue('hidden', { hidden: true })).toBeTruthy(); expect( getByDisplayValue('hidden', { includeHiddenElements: true }) ).toBeTruthy(); - expect(queryByDisplayValue('hidden', { hidden: false })).toBeFalsy(); - expect(() => getByDisplayValue('hidden', { hidden: false })).toThrow(); expect( queryByDisplayValue('hidden', { includeHiddenElements: false }) ).toBeFalsy(); diff --git a/src/queries/__tests__/hintText.test.tsx b/src/queries/__tests__/hintText.test.tsx index b79514744..0d0caebeb 100644 --- a/src/queries/__tests__/hintText.test.tsx +++ b/src/queries/__tests__/hintText.test.tsx @@ -115,11 +115,8 @@ test('byHintText queries support hidden option', () => { ); expect(getByHintText('hidden')).toBeTruthy(); - expect(getByHintText('hidden', { hidden: true })).toBeTruthy(); expect(getByHintText('hidden', { includeHiddenElements: true })).toBeTruthy(); - expect(queryByHintText('hidden', { hidden: false })).toBeFalsy(); - expect(() => getByHintText('hidden', { hidden: false })).toThrow(); expect( queryByHintText('hidden', { includeHiddenElements: false }) ).toBeFalsy(); diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index 321c3c0a8..2e9986ad9 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -152,13 +152,10 @@ test('byLabelText queries support hidden option', () => { ); expect(getByLabelText('hidden')).toBeTruthy(); - expect(getByLabelText('hidden', { hidden: true })).toBeTruthy(); expect( getByLabelText('hidden', { includeHiddenElements: true }) ).toBeTruthy(); - expect(queryByLabelText('hidden', { hidden: false })).toBeFalsy(); - expect(() => getByLabelText('hidden', { hidden: false })).toThrow(); expect( queryByLabelText('hidden', { includeHiddenElements: false }) ).toBeFalsy(); diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx index a5ca8f774..7bc5fcdf3 100644 --- a/src/queries/__tests__/placeholderText.test.tsx +++ b/src/queries/__tests__/placeholderText.test.tsx @@ -65,13 +65,10 @@ test('byPlaceholderText queries support hidden option', () => { ); expect(getByPlaceholderText('hidden')).toBeTruthy(); - expect(getByPlaceholderText('hidden', { hidden: true })).toBeTruthy(); expect( getByPlaceholderText('hidden', { includeHiddenElements: true }) ).toBeTruthy(); - expect(queryByPlaceholderText('hidden', { hidden: false })).toBeFalsy(); - expect(() => getByPlaceholderText('hidden', { hidden: false })).toThrow(); expect( queryByPlaceholderText('hidden', { includeHiddenElements: false }) ).toBeFalsy(); diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index 2700fbe6f..972266554 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -706,10 +706,8 @@ test('byRole queries support hidden option', () => { ); expect(getByRole('button')).toBeTruthy(); - expect(getByRole('button', { hidden: true })).toBeTruthy(); expect(getByRole('button', { includeHiddenElements: true })).toBeTruthy(); - expect(queryByRole('button', { hidden: false })).toBeFalsy(); - expect(() => getByRole('button', { hidden: false })).toThrow(); + expect(queryByRole('button', { includeHiddenElements: false })).toBeFalsy(); expect(() => getByRole('button', { includeHiddenElements: false })).toThrow(); }); diff --git a/src/queries/__tests__/testId.test.tsx b/src/queries/__tests__/testId.test.tsx index 73343a1d5..353adac58 100644 --- a/src/queries/__tests__/testId.test.tsx +++ b/src/queries/__tests__/testId.test.tsx @@ -141,11 +141,9 @@ test('byTestId queries support hidden option', () => { ); expect(getByTestId('hidden')).toBeTruthy(); - expect(getByTestId('hidden', { hidden: true })).toBeTruthy(); expect(getByTestId('hidden', { includeHiddenElements: true })).toBeTruthy(); - expect(queryByTestId('hidden', { hidden: false })).toBeFalsy(); - expect(() => getByTestId('hidden', { hidden: false })).toThrow(); + expect(queryByTestId('hidden', { includeHiddenElements: false })).toBeFalsy(); expect(() => getByTestId('hidden', { includeHiddenElements: false }) ).toThrow(); diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx index ec791edf3..64c3f1d57 100644 --- a/src/queries/__tests__/text.test.tsx +++ b/src/queries/__tests__/text.test.tsx @@ -473,12 +473,9 @@ test('byText support hidden option', () => { ); expect(getByText(/hidden/i)).toBeTruthy(); - expect(getByText(/hidden/i, { hidden: true })).toBeTruthy(); expect(getByText(/hidden/i, { includeHiddenElements: true })).toBeTruthy(); - expect(queryByText(/hidden/i, { hidden: false })).toBeFalsy(); expect(queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy(); - expect(() => getByText(/hidden/i, { hidden: false })).toThrow(); expect(() => getByText(/hidden/i, { includeHiddenElements: false }) ).toThrow(); From 6a1cd36822ad2810e4ad8f3cf66a401b4850afa9 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 18:26:42 +0100 Subject: [PATCH 10/15] fix: handle case when using configure only with defaultHidden option --- src/config.ts | 14 ++++++++++++++ .../__tests__/includeHiddenElements.test.tsx | 18 +++++++++++++++++- src/helpers/findAll.ts | 3 +-- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/config.ts b/src/config.ts index a16061357..363aa8b0b 100644 --- a/src/config.ts +++ b/src/config.ts @@ -26,6 +26,20 @@ const defaultConfig: Config = { let config = { ...defaultConfig }; export function configure(options: Partial) { + if ( + options.defaultHidden !== undefined && + options.defaultIncludeHiddenElements === undefined + ) { + options.defaultIncludeHiddenElements = options.defaultHidden; + } + + if ( + options.defaultIncludeHiddenElements !== undefined && + options.defaultHidden === undefined + ) { + options.defaultHidden = options.defaultIncludeHiddenElements; + } + config = { ...config, ...options, diff --git a/src/helpers/__tests__/includeHiddenElements.test.tsx b/src/helpers/__tests__/includeHiddenElements.test.tsx index eb94d8cd2..5dcd2965a 100644 --- a/src/helpers/__tests__/includeHiddenElements.test.tsx +++ b/src/helpers/__tests__/includeHiddenElements.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import render from '../../render'; import { screen } from '../../screen'; -import { configure } from '../../config'; +import { configure, getConfig } from '../../config'; test('includeHiddenElements query option takes priority over hidden option and global config', () => { configure({ defaultHidden: true, defaultIncludeHiddenElements: true }); @@ -24,3 +24,19 @@ test('global config defaultIncludeElements option takes priority over defaultHid render(); expect(screen.getByTestId('view')).toBeTruthy(); }); + +test('defaultHidden takes priority when it was set last', () => { + // also simulates the case when defaultIncludeHiddenElements is true by default in the config + configure({ defaultIncludeHiddenElements: true }); + configure({ defaultHidden: false }); + render(); + expect(screen.queryByTestId('view')).toBeFalsy(); +}); + +test('defaultIncludeHiddenElements takes priority when it was set last', () => { + // also simulates the case when defaultHidden is true by default in the config + configure({ defaultHidden: true }); + configure({ defaultIncludeHiddenElements: false }); + render(); + expect(screen.queryByTestId('view')).toBeFalsy(); +}); diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 76f38bbf4..b1f992ff2 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -17,8 +17,7 @@ export function findAll( const hidden = options?.includeHiddenElements ?? options?.hidden ?? - getConfig()?.defaultIncludeHiddenElements ?? - getConfig()?.defaultHidden; + getConfig()?.defaultIncludeHiddenElements; if (hidden) { return results; From 6bf81aaabcb417b96f64ff3b0756bdda15026f1b Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 11 Nov 2022 18:30:14 +0100 Subject: [PATCH 11/15] chore: remove unused import --- src/helpers/__tests__/includeHiddenElements.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/__tests__/includeHiddenElements.test.tsx b/src/helpers/__tests__/includeHiddenElements.test.tsx index 5dcd2965a..01ef2cec4 100644 --- a/src/helpers/__tests__/includeHiddenElements.test.tsx +++ b/src/helpers/__tests__/includeHiddenElements.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import render from '../../render'; import { screen } from '../../screen'; -import { configure, getConfig } from '../../config'; +import { configure } from '../../config'; test('includeHiddenElements query option takes priority over hidden option and global config', () => { configure({ defaultHidden: true, defaultIncludeHiddenElements: true }); From a7c9c76e9314c8825625a8b7fd45b9a7cfa1be07 Mon Sep 17 00:00:00 2001 From: MattAgn <32499425+MattAgn@users.noreply.github.com> Date: Mon, 14 Nov 2022 14:14:41 +0100 Subject: [PATCH 12/15] Update src/helpers/findAll.ts Co-authored-by: Maciej Jastrzebski --- src/helpers/findAll.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index b1f992ff2..820714135 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -3,8 +3,9 @@ import { getConfig } from '../config'; import { isHiddenFromAccessibility } from './accessiblity'; interface FindAllOptions { - hidden?: boolean; includeHiddenElements?: boolean; + /** RTL-compatible alias to `includeHiddenElements` */ + hidden?: boolean; } export function findAll( From c86b75c7e4be954efaa03002b148fc98d2b2df68 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Mon, 14 Nov 2022 22:08:53 +0100 Subject: [PATCH 13/15] refactor: improve defaultHidden computing --- src/__tests__/config.test.ts | 10 +++++++--- src/config.ts | 37 ++++++++++++++++++------------------ typings/index.flow.js | 9 +++++++-- 3 files changed, 32 insertions(+), 24 deletions(-) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index 4b7b9cb5f..98de8b3b5 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -6,6 +6,7 @@ beforeEach(() => { test('getConfig() returns existing configuration', () => { expect(getConfig().asyncUtilTimeout).toEqual(1000); + expect(getConfig().defaultIncludeHiddenElements).toEqual(true); }); test('configure() overrides existing config values', () => { @@ -14,7 +15,6 @@ test('configure() overrides existing config values', () => { expect(getConfig()).toEqual({ asyncUtilTimeout: 5000, defaultDebugOptions: { message: 'debug message' }, - defaultHidden: true, defaultIncludeHiddenElements: true, }); }); @@ -26,11 +26,15 @@ test('resetToDefaults() resets config to defaults', () => { defaultHidden: false, }); expect(getConfig().asyncUtilTimeout).toEqual(5000); - expect(getConfig().defaultHidden).toEqual(false); expect(getConfig().defaultIncludeHiddenElements).toEqual(false); resetToDefaults(); expect(getConfig().asyncUtilTimeout).toEqual(1000); - expect(getConfig().defaultHidden).toEqual(true); expect(getConfig().defaultIncludeHiddenElements).toEqual(true); }); + +test('configure handles alias option defaultHidden', () => { + expect(getConfig().defaultIncludeHiddenElements).toEqual(true); + configure({ defaultHidden: false }); + expect(getConfig().defaultIncludeHiddenElements).toEqual(false); +}); diff --git a/src/config.ts b/src/config.ts index 363aa8b0b..5e9f470cb 100644 --- a/src/config.ts +++ b/src/config.ts @@ -7,42 +7,41 @@ export type Config = { /** Default includeHiddenElements value for all queries */ defaultIncludeHiddenElements: boolean; + /** Default options for `debug` helper. */ + defaultDebugOptions?: Partial; +}; + +export type ConfigAliasOptions = { /** Default hidden value for all queries, alias to defaultIncludeHiddenElements to respect react-testing-library API * WARNING: if both defaultHidden and defaultIncludeHiddenElements values are defined, * then defaultIncludeHiddenElements will take precedence */ defaultHidden: boolean; - - /** Default options for `debug` helper. */ - defaultDebugOptions?: Partial; }; const defaultConfig: Config = { asyncUtilTimeout: 1000, - defaultHidden: true, defaultIncludeHiddenElements: true, }; let config = { ...defaultConfig }; -export function configure(options: Partial) { - if ( - options.defaultHidden !== undefined && - options.defaultIncludeHiddenElements === undefined - ) { - options.defaultIncludeHiddenElements = options.defaultHidden; - } - - if ( - options.defaultIncludeHiddenElements !== undefined && - options.defaultHidden === undefined - ) { - options.defaultHidden = options.defaultIncludeHiddenElements; - } +export function configure(options: Partial) { + const { defaultHidden, ...restOptions } = options; + + const defaultIncludeHiddenElements = + restOptions.defaultIncludeHiddenElements ?? + defaultHidden ?? + config.defaultIncludeHiddenElements; + + const optionsToSet = { + ...restOptions, + defaultIncludeHiddenElements, + }; config = { ...config, - ...options, + ...optionsToSet, }; } diff --git a/typings/index.flow.js b/typings/index.flow.js index 212304859..29d56fc42 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -468,12 +468,17 @@ declare module '@testing-library/react-native' { declare interface Config { asyncUtilTimeout: number; defaultIncludeHiddenElements: boolean; + defaultDebugOptions?: $Shape; + } + + declare interface ConfigAliasOptions { /** Alias to `defaultIncludeHiddenElements` for RTL compatibility */ defaultHidden: boolean; - defaultDebugOptions?: $Shape; } - declare export var configure: (options: $Shape) => void; + declare export var configure: ( + options: $Shape + ) => void; declare export var resetToDefaults: () => void; declare export var act: (callback: () => void) => Thenable; From fa35bc9efb3574c84c5018192387ceecc1e79029 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 15 Nov 2022 10:22:37 +0100 Subject: [PATCH 14/15] refactor: pre-merge tweaks --- src/__tests__/config.test.ts | 2 +- src/config.ts | 15 ++++----------- .../__tests__/includeHiddenElements.test.tsx | 7 ++----- src/helpers/findAll.ts | 4 ++-- src/queries/__tests__/a11yState.test.tsx | 4 +++- src/queries/__tests__/a11yValue.test.tsx | 4 +++- src/queries/__tests__/displayValue.test.tsx | 4 +++- src/queries/__tests__/hintText.test.tsx | 4 +++- src/queries/__tests__/labelText.test.tsx | 4 +++- src/queries/__tests__/placeholderText.test.tsx | 4 +++- src/queries/__tests__/role.test.tsx | 6 +++++- src/queries/__tests__/testId.test.tsx | 4 +++- src/queries/__tests__/text.test.tsx | 4 +++- src/queries/options.ts | 9 ++++----- typings/index.flow.js | 1 - website/docs/API.md | 6 ++++-- website/docs/Queries.md | 18 ++++++++---------- 17 files changed, 54 insertions(+), 46 deletions(-) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index 98de8b3b5..599e36da7 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -23,7 +23,6 @@ test('resetToDefaults() resets config to defaults', () => { configure({ asyncUtilTimeout: 5000, defaultIncludeHiddenElements: false, - defaultHidden: false, }); expect(getConfig().asyncUtilTimeout).toEqual(5000); expect(getConfig().defaultIncludeHiddenElements).toEqual(false); @@ -35,6 +34,7 @@ test('resetToDefaults() resets config to defaults', () => { test('configure handles alias option defaultHidden', () => { expect(getConfig().defaultIncludeHiddenElements).toEqual(true); + configure({ defaultHidden: false }); expect(getConfig().defaultIncludeHiddenElements).toEqual(false); }); diff --git a/src/config.ts b/src/config.ts index 5e9f470cb..0f3a8c22f 100644 --- a/src/config.ts +++ b/src/config.ts @@ -4,7 +4,7 @@ export type Config = { /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */ asyncUtilTimeout: number; - /** Default includeHiddenElements value for all queries */ + /** Default value for `includeHiddenElements` query option. */ defaultIncludeHiddenElements: boolean; /** Default options for `debug` helper. */ @@ -12,10 +12,7 @@ export type Config = { }; export type ConfigAliasOptions = { - /** Default hidden value for all queries, alias to defaultIncludeHiddenElements to respect react-testing-library API - * WARNING: if both defaultHidden and defaultIncludeHiddenElements values are defined, - * then defaultIncludeHiddenElements will take precedence - */ + /** RTL-compatibility alias to `defaultIncludeHiddenElements` */ defaultHidden: boolean; }; @@ -34,14 +31,10 @@ export function configure(options: Partial) { defaultHidden ?? config.defaultIncludeHiddenElements; - const optionsToSet = { - ...restOptions, - defaultIncludeHiddenElements, - }; - config = { ...config, - ...optionsToSet, + ...restOptions, + defaultIncludeHiddenElements, }; } diff --git a/src/helpers/__tests__/includeHiddenElements.test.tsx b/src/helpers/__tests__/includeHiddenElements.test.tsx index 01ef2cec4..cf6cd738c 100644 --- a/src/helpers/__tests__/includeHiddenElements.test.tsx +++ b/src/helpers/__tests__/includeHiddenElements.test.tsx @@ -1,9 +1,6 @@ -import { View } from 'react-native'; import React from 'react'; - -import render from '../../render'; -import { screen } from '../../screen'; -import { configure } from '../../config'; +import { View } from 'react-native'; +import { configure, render, screen } from '../..'; test('includeHiddenElements query option takes priority over hidden option and global config', () => { configure({ defaultHidden: true, defaultIncludeHiddenElements: true }); diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 820714135..841ddf7c0 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -15,12 +15,12 @@ export function findAll( ) { const results = root.findAll(predicate); - const hidden = + const includeHiddenElements = options?.includeHiddenElements ?? options?.hidden ?? getConfig()?.defaultIncludeHiddenElements; - if (hidden) { + if (includeHiddenElements) { return results; } diff --git a/src/queries/__tests__/a11yState.test.tsx b/src/queries/__tests__/a11yState.test.tsx index 315b5d1f8..7c9f94f45 100644 --- a/src/queries/__tests__/a11yState.test.tsx +++ b/src/queries/__tests__/a11yState.test.tsx @@ -247,5 +247,7 @@ test('byA11yState queries support hidden option', () => { ).toBeFalsy(); expect(() => getByA11yState({ expanded: false }, { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with expanded state: false"` + ); }); diff --git a/src/queries/__tests__/a11yValue.test.tsx b/src/queries/__tests__/a11yValue.test.tsx index 26043ea8d..dc15c9383 100644 --- a/src/queries/__tests__/a11yValue.test.tsx +++ b/src/queries/__tests__/a11yValue.test.tsx @@ -110,5 +110,7 @@ test('byA11yValue queries support hidden option', () => { ).toBeFalsy(); expect(() => getByA11yValue({ max: 10 }, { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with accessibilityValue: {"max":10}"` + ); }); diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx index 8393d2882..1ba94bff2 100644 --- a/src/queries/__tests__/displayValue.test.tsx +++ b/src/queries/__tests__/displayValue.test.tsx @@ -115,5 +115,7 @@ test('byDisplayValue queries support hidden option', () => { ).toBeFalsy(); expect(() => getByDisplayValue('hidden', { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with displayValue: hidden"` + ); }); diff --git a/src/queries/__tests__/hintText.test.tsx b/src/queries/__tests__/hintText.test.tsx index 0d0caebeb..4adc5bb33 100644 --- a/src/queries/__tests__/hintText.test.tsx +++ b/src/queries/__tests__/hintText.test.tsx @@ -122,5 +122,7 @@ test('byHintText queries support hidden option', () => { ).toBeFalsy(); expect(() => getByHintText('hidden', { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with accessibilityHint: hidden"` + ); }); diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index 2e9986ad9..9e1b5c0cd 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -161,5 +161,7 @@ test('byLabelText queries support hidden option', () => { ).toBeFalsy(); expect(() => getByLabelText('hidden', { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with accessibilityLabel: hidden"` + ); }); diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx index 7bc5fcdf3..ef75bfe36 100644 --- a/src/queries/__tests__/placeholderText.test.tsx +++ b/src/queries/__tests__/placeholderText.test.tsx @@ -74,5 +74,7 @@ test('byPlaceholderText queries support hidden option', () => { ).toBeFalsy(); expect(() => getByPlaceholderText('hidden', { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with placeholder: hidden"` + ); }); diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index 972266554..211b0637d 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -709,5 +709,9 @@ test('byRole queries support hidden option', () => { expect(getByRole('button', { includeHiddenElements: true })).toBeTruthy(); expect(queryByRole('button', { includeHiddenElements: false })).toBeFalsy(); - expect(() => getByRole('button', { includeHiddenElements: false })).toThrow(); + expect(() => + getByRole('button', { includeHiddenElements: false }) + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with role: "button""` + ); }); diff --git a/src/queries/__tests__/testId.test.tsx b/src/queries/__tests__/testId.test.tsx index 353adac58..f064d411c 100644 --- a/src/queries/__tests__/testId.test.tsx +++ b/src/queries/__tests__/testId.test.tsx @@ -146,5 +146,7 @@ test('byTestId queries support hidden option', () => { expect(queryByTestId('hidden', { includeHiddenElements: false })).toBeFalsy(); expect(() => getByTestId('hidden', { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with testID: hidden"` + ); }); diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx index 64c3f1d57..9ae05cbb3 100644 --- a/src/queries/__tests__/text.test.tsx +++ b/src/queries/__tests__/text.test.tsx @@ -478,5 +478,7 @@ test('byText support hidden option', () => { expect(queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy(); expect(() => getByText(/hidden/i, { includeHiddenElements: false }) - ).toThrow(); + ).toThrowErrorMatchingInlineSnapshot( + `"Unable to find an element with text: /hidden/i"` + ); }); diff --git a/src/queries/options.ts b/src/queries/options.ts index 181727dc4..2468723a5 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -1,12 +1,11 @@ import { NormalizerFn } from '../matches'; -/** - * hidden is an alias for includeHiddenElements that exists only to match react-testing-library API - * if both hidden and includeHiddenElements values are defined, then includeHiddenElements will take precedence - */ export type CommonQueryOptions = { - hidden?: boolean; + /** Should query include elements hidden from accessibility. */ includeHiddenElements?: boolean; + + /** RTL-compatibile alias to `includeHiddenElements`. */ + hidden?: boolean; }; export type TextMatchOptions = { diff --git a/typings/index.flow.js b/typings/index.flow.js index 29d56fc42..1afeddc0f 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -10,7 +10,6 @@ type FindAllReturn = Promise; type CommonQueryOptions = { includeHiddenElements?: boolean, - /** Alias to `includeHiddenElements` for RTL compatibility */ hidden?: boolean, }; type TextMatch = string | RegExp; diff --git a/website/docs/API.md b/website/docs/API.md index f91440a8f..12e190c14 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -793,9 +793,11 @@ Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementTo #### `defaultIncludeHiddenElements` option -Default [includeHiddenElements](Queries.md#includehidden-option) query option for all queries. This default option will be overridden by the one you specify directly when using your query. +Default value for [includeHiddenElements](Queries.md#includehidden-option) query option for all queries. Defaults to `true`, which means that queries will match [elements hidden from accessibility](#ishiddenfromaccessibility) by default. -There is an alias to this option named `defaultHidden` that exists only for compatibility with [react-testing-library](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). +Currently this option is set to `true` which means that queries will also match hidden elements. This is done to avoid breaking changes. However, we plan to change the default behavior to exclude hidden elements in the next major release. + +This option is also available as `defaultHidden` alias for compatibility with [React Testing Library](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). #### `defaultDebugOptions` option diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 56ff80f02..7e8636424 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -378,28 +378,26 @@ const element = screen.getByA11yValue({ min: 40 }); ### `includeHiddenElements` option -All queries have the `includeHiddenElements` option which enables them to respect accessibility props on components when it is set to `false`. If you set `includeHiddenElements` to `true`, elements that are normally excluded from the accessibility tree are considered for the query as well. Currently `includeHiddenElements` option is set `true` by default, which means that elements includeHiddenElements from accessibility will be included by default. However, we plan to change the default value to `includeHiddenElements: false` in the next major release. +All queries have the `includeHiddenElements` option which affects whether [elements hidden from accessibility](./API.md#ishiddenfromaccessibility) are matched by the query. You can configure the default value with the [`configure` function](API.md#configure). -An element is considered to be hidden from accessibility based on [`isHiddenFromAccessibility()`](./API.md#ishiddenfromaccessibility) function. - -There is an alias to this option named `hidden` that exists only for compatibility with [react-testing-library](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaulthidden). +This option is also available as `hidden` alias for compatibility with [React Testing Library](https://testing-library.com/docs/queries/byrole#hidden). **Examples** ```tsx -render(I am hidden from accessibility); +render(Hidden from accessibility); -// Include hidden elements +// Exclude hidden elements expect( - screen.queryByText('I am hidden from accessibility', { includeHiddenElements: false }) + screen.queryByText('Hidden from accessibility', { includeHiddenElements: false }) ).toBeFalsy(); -// Match hidden elements -expect(screen.getByText('I am hidden from accessibility')).toBeTruthy(); // Defaults to includeHiddenElements: true for now +// Include hidden elements +expect(screen.getByText('Hidden from accessibility')).toBeTruthy(); expect( - screen.getByText('I am hidden from accessibility', { includeHiddenElements: true }) + screen.getByText('Hidden from accessibility', { includeHiddenElements: true }) ).toBeTruthy(); ``` From b89139541d65ecbbccb885675ad89510a5e2fa3d Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 15 Nov 2022 11:14:26 +0100 Subject: [PATCH 15/15] chore: improve code coverage --- .gitignore | 1 + src/helpers/__tests__/component-tree.test.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 13a6c4cc7..2f6d9c694 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules +coverage *.log .eslintcache build diff --git a/src/helpers/__tests__/component-tree.test.tsx b/src/helpers/__tests__/component-tree.test.tsx index 0056f146a..39ce7252b 100644 --- a/src/helpers/__tests__/component-tree.test.tsx +++ b/src/helpers/__tests__/component-tree.test.tsx @@ -45,6 +45,10 @@ describe('getHostParent()', () => { expect(getHostParent(hostGrandparent)).toBe(null); }); + it('returns host parent for null', () => { + expect(getHostParent(null)).toBe(null); + }); + it('returns host parent for composite component', () => { const view = render( @@ -65,7 +69,7 @@ describe('getHostChildren()', () => { - + Hello ); @@ -74,6 +78,8 @@ describe('getHostChildren()', () => { expect(getHostChildren(hostSubject)).toEqual([]); const hostSibling = view.getByTestId('sibling'); + expect(getHostChildren(hostSibling)).toEqual([]); + const hostParent = view.getByTestId('parent'); expect(getHostChildren(hostParent)).toEqual([hostSubject, hostSibling]);