From fc1f7241257334db7343a39895636a3eec35e55d Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Sat, 8 Oct 2022 08:57:51 +0200 Subject: [PATCH 01/32] chore: fix typo --- src/helpers/accessiblity.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index 0cccb7b6b..8224a165f 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -46,7 +46,7 @@ function isSubtreeInaccessible(element: ReactTestInstance | null): boolean { return true; } - // Note that `opacity: 0` is not threated as inassessible on iOS + // Note that `opacity: 0` is not treated as inaccessible on iOS const flatStyle = StyleSheet.flatten(element.props.style) ?? {}; if (flatStyle.display === 'none') return true; From de92da5a5269baeeb46e1e51858756d81ea6a0e3 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Sat, 8 Oct 2022 08:58:13 +0200 Subject: [PATCH 02/32] feat: add options to isInaccessible --- src/helpers/accessiblity.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index 8224a165f..fbe7ee51b 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -2,6 +2,10 @@ import { AccessibilityState, StyleSheet } from 'react-native'; import { ReactTestInstance } from 'react-test-renderer'; import { getHostSiblings } from './component-tree'; +type IsAnaccessibleOptions = { + isSubtreeInaccessible: (element: ReactTestInstance | null) => boolean; +}; + export type AccessibilityStateKey = keyof AccessibilityState; export const accessibilityStateKeys: AccessibilityStateKey[] = [ @@ -12,7 +16,14 @@ export const accessibilityStateKeys: AccessibilityStateKey[] = [ 'expanded', ]; -export function isInaccessible(element: ReactTestInstance | null): boolean { +const defaultIsInaccessibleOptions = { isSubtreeInaccessible }; + +export function isInaccessible( + element: ReactTestInstance | null, + { + isSubtreeInaccessible, + }: IsAnaccessibleOptions = defaultIsInaccessibleOptions +): boolean { if (element == null) { return true; } @@ -29,7 +40,9 @@ export function isInaccessible(element: ReactTestInstance | null): boolean { return false; } -function isSubtreeInaccessible(element: ReactTestInstance | null): boolean { +export function isSubtreeInaccessible( + element: ReactTestInstance | null +): boolean { if (element == null) { return true; } From 13b0d730ba25fbd49be13566c2aed10461611481 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Sat, 8 Oct 2022 09:02:34 +0200 Subject: [PATCH 03/32] feat: implement new findAll helper including hidden option --- src/helpers/findAll.ts | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/helpers/findAll.ts diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts new file mode 100644 index 000000000..0868a9c85 --- /dev/null +++ b/src/helpers/findAll.ts @@ -0,0 +1,39 @@ +import { ReactTestInstance } from 'react-test-renderer'; +import { AccessibilityOption } from '../queries/accessibilityOption'; +import { isInaccessible, isSubtreeInaccessible } from './accessiblity'; + +export function findAll( + instance: ReactTestInstance, + predicate: (node: ReactTestInstance) => boolean, + options?: Options +) { + const results = instance.findAll(predicate); + + //TODO: implement getConfig + const defaultHidden = true; + const hidden = options?.hidden ?? defaultHidden; // We will want to add `defaultHidden: boolean` option to `configure` + + if (hidden) { + return results; + } + + const subtreeIsInaccessibleCache = new WeakMap(); + function cachedIsSubtreeInaccessible(element: ReactTestInstance | null) { + if (element === null) { + return true; + } + + if (!subtreeIsInaccessibleCache.has(element)) { + subtreeIsInaccessibleCache.set(element, isSubtreeInaccessible(element)); + } + + return subtreeIsInaccessibleCache.get(element); + } + + return results.filter( + (result) => + !isInaccessible(result, { + isSubtreeInaccessible: cachedIsSubtreeInaccessible, + }) + ); +} From be193189ad080a24a49775ccc6d1a4f24bab3856 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 25 Aug 2022 10:41:43 +0200 Subject: [PATCH 04/32] feat: use new findAll with hiden option in all queries --- src/queries/a11yState.ts | 56 +++++++++++++++++++++--------- src/queries/a11yValue.ts | 39 ++++++++++++--------- src/queries/accessibilityOption.ts | 1 + src/queries/displayValue.ts | 8 +++-- src/queries/hintText.ts | 10 ++++-- src/queries/labelText.ts | 12 ++++--- src/queries/placeholderText.ts | 8 +++-- src/queries/role.ts | 11 ++++-- src/queries/testId.ts | 11 +++--- src/queries/text.ts | 12 +++++-- 10 files changed, 114 insertions(+), 54 deletions(-) create mode 100644 src/queries/accessibilityOption.ts diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index 7bbb415f7..f3adc12dc 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -1,7 +1,8 @@ import type { ReactTestInstance } from 'react-test-renderer'; -import type { AccessibilityState } from 'react-native'; +import { AccessibilityState } from 'react-native'; import { accessibilityStateKeys } from '../helpers/accessiblity'; import { matchAccessibilityState } from '../helpers/matchers/accessibilityState'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -11,14 +12,20 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; +import { AccessibilityOption } from './accessibilityOption'; const queryAllByA11yState = ( instance: ReactTestInstance -): ((matcher: AccessibilityState) => Array) => - function queryAllByA11yStateFn(matcher) { - return instance.findAll( +): (( + matcher: AccessibilityState, + queryOptions?: AccessibilityOption +) => Array) => + function queryAllByA11yStateFn(matcher, queryOptions) { + return findAll( + instance, (node) => - typeof node.type === 'string' && matchAccessibilityState(node, matcher) + typeof node.type === 'string' && matchAccessibilityState(node, matcher), + { hidden: queryOptions?.hidden } ); }; @@ -47,19 +54,34 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yStateQueries = { - getByA11yState: GetByQuery; - getAllByA11yState: GetAllByQuery; - queryByA11yState: QueryByQuery; - queryAllByA11yState: QueryAllByQuery; - findByA11yState: FindByQuery; - findAllByA11yState: FindAllByQuery; + getByA11yState: GetByQuery; + getAllByA11yState: GetAllByQuery; + queryByA11yState: QueryByQuery; + queryAllByA11yState: QueryAllByQuery; + findByA11yState: FindByQuery; + findAllByA11yState: FindAllByQuery; - getByAccessibilityState: GetByQuery; - getAllByAccessibilityState: GetAllByQuery; - queryByAccessibilityState: QueryByQuery; - queryAllByAccessibilityState: QueryAllByQuery; - findByAccessibilityState: FindByQuery; - findAllByAccessibilityState: FindAllByQuery; + getByAccessibilityState: GetByQuery; + getAllByAccessibilityState: GetAllByQuery< + AccessibilityState, + AccessibilityOption + >; + queryByAccessibilityState: QueryByQuery< + AccessibilityState, + AccessibilityOption + >; + queryAllByAccessibilityState: QueryAllByQuery< + AccessibilityState, + AccessibilityOption + >; + findByAccessibilityState: FindByQuery< + AccessibilityState, + AccessibilityOption + >; + findAllByAccessibilityState: FindAllByQuery< + AccessibilityState, + AccessibilityOption + >; }; export const bindByA11yStateQueries = ( diff --git a/src/queries/a11yValue.ts b/src/queries/a11yValue.ts index 8e68957e3..c7cb14a5b 100644 --- a/src/queries/a11yValue.ts +++ b/src/queries/a11yValue.ts @@ -1,5 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { matchObjectProp } from '../helpers/matchers/matchObjectProp'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -9,6 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; +import { AccessibilityOption } from './accessibilityOption'; type A11yValue = { min?: number; @@ -19,12 +21,17 @@ type A11yValue = { const queryAllByA11yValue = ( instance: ReactTestInstance -): ((value: A11yValue) => Array) => - function queryAllByA11yValueFn(value) { - return instance.findAll( +): (( + value: A11yValue, + queryOptions?: AccessibilityOption +) => Array) => + function queryAllByA11yValueFn(value, queryOptions) { + return findAll( + instance, (node) => typeof node.type === 'string' && - matchObjectProp(node.props.accessibilityValue, value) + matchObjectProp(node.props.accessibilityValue, value), + { hidden: queryOptions?.hidden } ); }; @@ -40,19 +47,19 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yValueQueries = { - getByA11yValue: GetByQuery; - getAllByA11yValue: GetAllByQuery; - queryByA11yValue: QueryByQuery; - queryAllByA11yValue: QueryAllByQuery; - findByA11yValue: FindByQuery; - findAllByA11yValue: FindAllByQuery; + getByA11yValue: GetByQuery; + getAllByA11yValue: GetAllByQuery; + queryByA11yValue: QueryByQuery; + queryAllByA11yValue: QueryAllByQuery; + findByA11yValue: FindByQuery; + findAllByA11yValue: FindAllByQuery; - getByAccessibilityValue: GetByQuery; - getAllByAccessibilityValue: GetAllByQuery; - queryByAccessibilityValue: QueryByQuery; - queryAllByAccessibilityValue: QueryAllByQuery; - findByAccessibilityValue: FindByQuery; - findAllByAccessibilityValue: FindAllByQuery; + getByAccessibilityValue: GetByQuery; + getAllByAccessibilityValue: GetAllByQuery; + queryByAccessibilityValue: QueryByQuery; + queryAllByAccessibilityValue: QueryAllByQuery; + findByAccessibilityValue: FindByQuery; + findAllByAccessibilityValue: FindAllByQuery; }; export const bindByA11yValueQueries = ( diff --git a/src/queries/accessibilityOption.ts b/src/queries/accessibilityOption.ts new file mode 100644 index 000000000..0e04503d2 --- /dev/null +++ b/src/queries/accessibilityOption.ts @@ -0,0 +1 @@ +export type AccessibilityOption = { hidden?: boolean }; diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts index 10f93600e..7b49d5aba 100644 --- a/src/queries/displayValue.ts +++ b/src/queries/displayValue.ts @@ -2,6 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { TextInput } from 'react-native'; import { filterNodeByType } from '../helpers/filterNodeByType'; import { matches, TextMatch } from '../matches'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -34,8 +35,11 @@ const queryAllByDisplayValue = ( queryOptions?: TextMatchOptions ) => Array) => function queryAllByDisplayValueFn(displayValue, queryOptions) { - return instance.findAll((node) => - getTextInputNodeByDisplayValue(node, displayValue, queryOptions) + return findAll( + instance, + (node) => + getTextInputNodeByDisplayValue(node, displayValue, queryOptions), + { hidden: queryOptions?.hidden } ); }; diff --git a/src/queries/hintText.ts b/src/queries/hintText.ts index bf9a33193..78ac19938 100644 --- a/src/queries/hintText.ts +++ b/src/queries/hintText.ts @@ -1,5 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { matches, TextMatch } from '../matches'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -10,6 +11,7 @@ import type { QueryByQuery, } from './makeQueries'; import { TextMatchOptions } from './text'; +import { AccessibilityOption } from './accessibilityOption'; const getNodeByHintText = ( node: ReactTestInstance, @@ -24,13 +26,15 @@ const queryAllByHintText = ( instance: ReactTestInstance ): (( hint: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: AccessibilityOption ) => Array) => function queryAllByA11yHintFn(hint, queryOptions) { - return instance.findAll( + return findAll( + instance, (node) => typeof node.type === 'string' && - getNodeByHintText(node, hint, queryOptions) + getNodeByHintText(node, hint, queryOptions), + { hidden: queryOptions?.hidden } ); }; diff --git a/src/queries/labelText.ts b/src/queries/labelText.ts index 2af6ede4f..afc0e3942 100644 --- a/src/queries/labelText.ts +++ b/src/queries/labelText.ts @@ -1,5 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { matches, TextMatch } from '../matches'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -10,6 +11,7 @@ import type { QueryByQuery, } from './makeQueries'; import { TextMatchOptions } from './text'; +import { AccessibilityOption } from './accessibilityOption'; const getNodeByLabelText = ( node: ReactTestInstance, @@ -24,13 +26,15 @@ const queryAllByLabelText = ( instance: ReactTestInstance ): (( text: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: AccessibilityOption ) => Array) => - function queryAllByLabelTextFn(text, queryOptions?: TextMatchOptions) { - return instance.findAll( + function queryAllByLabelTextFn(text, queryOptions) { + return findAll( + instance, (node) => typeof node.type === 'string' && - getNodeByLabelText(node, text, queryOptions) + getNodeByLabelText(node, text, queryOptions), + { hidden: queryOptions?.hidden } ); }; diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts index dc4fa4d98..fa840b0be 100644 --- a/src/queries/placeholderText.ts +++ b/src/queries/placeholderText.ts @@ -2,6 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { TextInput } from 'react-native'; import { filterNodeByType } from '../helpers/filterNodeByType'; import { matches, TextMatch } from '../matches'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -32,8 +33,11 @@ const queryAllByPlaceholderText = ( queryOptions?: TextMatchOptions ) => Array) => function queryAllByPlaceholderFn(placeholder, queryOptions) { - return instance.findAll((node) => - getTextInputNodeByPlaceholderText(node, placeholder, queryOptions) + return findAll( + instance, + (node) => + getTextInputNodeByPlaceholderText(node, placeholder, queryOptions), + queryOptions ); }; diff --git a/src/queries/role.ts b/src/queries/role.ts index 00d42b5e0..56e881fbc 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -5,6 +5,7 @@ import { matchAccessibilityState } from '../helpers/matchers/accessibilityState' import { matchStringProp } from '../helpers/matchers/matchStringProp'; import type { TextMatch } from '../matches'; import { getQueriesForElement } from '../within'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -14,10 +15,12 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; +import { AccessibilityOption } from './accessibilityOption'; type ByRoleOptions = { name?: TextMatch; -} & AccessibilityState; +} & AccessibilityState & + AccessibilityOption; const matchAccessibleNameIfNeeded = ( node: ReactTestInstance, @@ -42,14 +45,16 @@ const queryAllByRole = ( instance: ReactTestInstance ): ((role: TextMatch, options?: ByRoleOptions) => Array) => function queryAllByRoleFn(role, options) { - return instance.findAll( + return findAll( + instance, (node) => // run the cheapest checks first, and early exit too avoid unneeded computations typeof node.type === 'string' && matchStringProp(node.props.accessibilityRole, role) && matchAccessibleStateIfNeeded(node, options) && - matchAccessibleNameIfNeeded(node, options?.name) + matchAccessibleNameIfNeeded(node, options?.name), + { hidden: options?.hidden } ); }; diff --git a/src/queries/testId.ts b/src/queries/testId.ts index aec86511f..558becb3e 100644 --- a/src/queries/testId.ts +++ b/src/queries/testId.ts @@ -1,5 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { matches, TextMatch } from '../matches'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -27,11 +28,13 @@ const queryAllByTestId = ( queryOptions?: TextMatchOptions ) => Array) => function queryAllByTestIdFn(testId, queryOptions) { - const results = instance - .findAll((node) => getNodeByTestId(node, testId, queryOptions)) - .filter((element) => typeof element.type === 'string'); + const results = findAll( + instance, + (node) => getNodeByTestId(node, testId, queryOptions), + { hidden: queryOptions?.hidden } + ); - return results; + return results.filter((element) => typeof element.type === 'string'); }; const getMultipleError = (testId: TextMatch) => diff --git a/src/queries/text.ts b/src/queries/text.ts index 9633c9a61..9cab9e974 100644 --- a/src/queries/text.ts +++ b/src/queries/text.ts @@ -8,6 +8,7 @@ import { } from '../helpers/component-tree'; import { matches, TextMatch } from '../matches'; import type { NormalizerFn } from '../matches'; +import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -17,8 +18,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; +import { AccessibilityOption } from './accessibilityOption'; -export type TextMatchOptions = { +export type TextMatchOptions = AccessibilityOption & { exact?: boolean; normalizer?: NormalizerFn; }; @@ -86,8 +88,12 @@ const queryAllByText = ( return []; } - const results = baseInstance.findAll((node) => - getNodeByText(node, text, options) + const results = findAll( + baseInstance, + (node) => getNodeByText(node, text, options), + { + hidden: options?.hidden, + } ); return results; From f0c9e562a8829c0a13a6e3a4188070cadbb54ce4 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 14 Oct 2022 10:24:59 +0200 Subject: [PATCH 05/32] test: add tests for the queries to check hidden option support --- src/queries/__tests__/a11yState.test.tsx | 17 ++++++++++++++++ src/queries/__tests__/a11yValue.test.tsx | 12 +++++++++++ src/queries/__tests__/displayValue.test.tsx | 14 +++++++++++++ src/queries/__tests__/hintText.test.tsx | 12 +++++++++++ src/queries/__tests__/labelText.test.tsx | 12 +++++++++++ .../__tests__/placeholderText.test.tsx | 20 +++++++++++++++++++ src/queries/__tests__/role.test.tsx | 12 +++++++++++ src/queries/__tests__/testId.test.tsx | 13 ++++++++++++ src/queries/__tests__/text.test.tsx | 10 ++++++++++ 9 files changed, 122 insertions(+) diff --git a/src/queries/__tests__/a11yState.test.tsx b/src/queries/__tests__/a11yState.test.tsx index c97ad70cb..8a84fea0a 100644 --- a/src/queries/__tests__/a11yState.test.tsx +++ b/src/queries/__tests__/a11yState.test.tsx @@ -226,3 +226,20 @@ test('*ByA11yState on TouchableOpacity with "disabled" prop', () => { expect(view.getByA11yState({ disabled: true })).toBeTruthy(); expect(view.queryByA11yState({ disabled: false })).toBeFalsy(); }); + +test('byA11yState queries support hidden option', () => { + const { queryByA11yState, getByA11yState } = render( + + I am inaccessible + + ); + expect(queryByA11yState({ expanded: false }, { hidden: false })).toBeFalsy(); + expect(() => + getByA11yState({ expanded: false }, { hidden: false }) + ).toThrow(); + expect(queryByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); + expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/a11yValue.test.tsx b/src/queries/__tests__/a11yValue.test.tsx index ddb4201a4..f31c46a98 100644 --- a/src/queries/__tests__/a11yValue.test.tsx +++ b/src/queries/__tests__/a11yValue.test.tsx @@ -92,3 +92,15 @@ test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => { ); await expect(findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2); }); + +test('byA11yValue queries support hidden option', () => { + const { queryByA11yValue, getByA11yValue } = render( + + I am inaccessible + + ); + expect(queryByA11yValue({ max: 10 }, { hidden: false })).toBeFalsy(); + expect(() => getByA11yValue({ max: 10 }, { hidden: false })).toThrow(); + expect(queryByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); + expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx index 3eb150551..6fc80702e 100644 --- a/src/queries/__tests__/displayValue.test.tsx +++ b/src/queries/__tests__/displayValue.test.tsx @@ -99,3 +99,17 @@ test('findBy queries work asynchronously', async () => { await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy(); await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1); }, 20000); + +test('byDisplayValue queries support hidden option', () => { + const { queryByDisplayValue, getByDisplayValue } = render( + + I am inaccessible + + ); + expect(queryByDisplayValue('im-inaccessible', { hidden: false })).toBeFalsy(); + expect(() => + getByDisplayValue('im-inaccessible', { hidden: false }) + ).toThrow(); + expect(queryByDisplayValue('im-inaccessible', { hidden: true })).toBeTruthy(); + expect(getByDisplayValue('im-inaccessible', { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/hintText.test.tsx b/src/queries/__tests__/hintText.test.tsx index 9a7585920..6001febbd 100644 --- a/src/queries/__tests__/hintText.test.tsx +++ b/src/queries/__tests__/hintText.test.tsx @@ -106,3 +106,15 @@ test('getByHintText, getByHintText and exact = true', () => { expect(queryByHintText('id', { exact: true })).toBeNull(); expect(getAllByHintText('test', { exact: true })).toHaveLength(1); }); + +test('byHintText queries support hidden option', () => { + const { queryByHintText, getByHintText } = render( + + I am inaccessible + + ); + expect(queryByHintText('im-inaccessible', { hidden: false })).toBeFalsy(); + expect(() => getByHintText('im-inaccessible', { hidden: false })).toThrow(); + expect(queryByHintText('im-inaccessible', { hidden: true })).toBeTruthy(); + expect(getByHintText('im-inaccessible', { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index 68564fa02..188238d78 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -143,3 +143,15 @@ describe('findBy options deprecations', () => { ); }, 20000); }); + +test('byLabelText queries support hidden option', () => { + const { queryByLabelText, getByLabelText } = render( + + I am inaccessible + + ); + expect(queryByLabelText('im-inaccessible', { hidden: false })).toBeFalsy(); + expect(() => getByLabelText('im-inaccessible', { hidden: false })).toThrow(); + expect(queryByLabelText('im-inaccessible', { hidden: true })).toBeTruthy(); + expect(getByLabelText('im-inaccessible', { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx index 165e61b45..50e12ad05 100644 --- a/src/queries/__tests__/placeholderText.test.tsx +++ b/src/queries/__tests__/placeholderText.test.tsx @@ -58,3 +58,23 @@ test('getAllByPlaceholderText, queryAllByPlaceholderText', () => { expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs); expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0); }); + +test('byPlaceholderText queries support hidden option', () => { + const { queryByPlaceholderText, getByPlaceholderText } = render( + + ); + expect( + queryByPlaceholderText(PLACEHOLDER_CHEF, { hidden: false }) + ).toBeFalsy(); + expect(() => + getByPlaceholderText(PLACEHOLDER_CHEF, { hidden: false }) + ).toThrow(); + expect( + queryByPlaceholderText(PLACEHOLDER_CHEF, { hidden: true }) + ).toBeTruthy(); + expect(getByPlaceholderText(PLACEHOLDER_CHEF, { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index ce7519186..b8800bf7e 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -697,3 +697,15 @@ describe('error messages', () => { ); }); }); + +test('byRole queries support hidden option', () => { + const { queryByRole, getByRole } = render( + + I am inaccessible + + ); + expect(queryByRole('button', { hidden: false })).toBeFalsy(); + expect(() => getByRole('button', { hidden: false })).toThrow(); + expect(queryByRole('button', { hidden: true })).toBeTruthy(); + expect(getByRole('button', { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/testId.test.tsx b/src/queries/__tests__/testId.test.tsx index 6d97ac4b0..df92b0537 100644 --- a/src/queries/__tests__/testId.test.tsx +++ b/src/queries/__tests__/testId.test.tsx @@ -132,3 +132,16 @@ test('findByTestId and findAllByTestId work asynchronously', async () => { await expect(findByTestId('aTestId')).resolves.toBeTruthy(); await expect(findAllByTestId('aTestId')).resolves.toHaveLength(1); }, 20000); + +test('byTestId queries support hidden option', () => { + const { queryByTestId, getByTestId } = render( + + I am inaccessible + + ); + + expect(queryByTestId('im-inaccessible', { hidden: false })).toBeFalsy(); + expect(() => getByTestId('im-inaccessible', { hidden: false })).toThrow(); + expect(queryByTestId('im-inaccessible', { hidden: true })).toBeTruthy(); + expect(getByTestId('im-inaccessible', { hidden: true })).toBeTruthy(); +}); diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx index 6f5c435b6..bb1620f4f 100644 --- a/src/queries/__tests__/text.test.tsx +++ b/src/queries/__tests__/text.test.tsx @@ -466,3 +466,13 @@ test('getByText searches for text within self host element', () => { const textNode = within(getByTestId('subject')); expect(textNode.getByText('Hello')).toBeTruthy(); }); + +test('byText support hidden option', () => { + const { queryByText, getByText } = render( + I am inaccessible + ); + expect(queryByText('I am inaccessible', { hidden: false })).toBeFalsy(); + expect(() => getByText('I am inaccessible', { hidden: false })).toThrow(); + expect(queryByText('I am inaccessible', { hidden: true })).toBeTruthy(); + expect(getByText('I am inaccessible', { hidden: true })).toBeTruthy(); +}); From 42f04e620b9a8e88aa517eed26b689ba3ac5264f Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 28 Oct 2022 13:22:33 +0200 Subject: [PATCH 06/32] chore: fix typo --- src/helpers/accessiblity.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index fbe7ee51b..c0b9b75cc 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -2,7 +2,7 @@ import { AccessibilityState, StyleSheet } from 'react-native'; import { ReactTestInstance } from 'react-test-renderer'; import { getHostSiblings } from './component-tree'; -type IsAnaccessibleOptions = { +type IsInaccessibleOptions = { isSubtreeInaccessible: (element: ReactTestInstance | null) => boolean; }; @@ -22,7 +22,7 @@ export function isInaccessible( element: ReactTestInstance | null, { isSubtreeInaccessible, - }: IsAnaccessibleOptions = defaultIsInaccessibleOptions + }: IsInaccessibleOptions = defaultIsInaccessibleOptions ): boolean { if (element == null) { return true; From b188843b468a82e1f99727786ff7ddb579a1dcc4 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 28 Oct 2022 13:47:36 +0200 Subject: [PATCH 07/32] feat: use global config for default hidden --- src/config.ts | 4 +++- src/helpers/findAll.ts | 5 ++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/config.ts b/src/config.ts index 65d617935..5259b75cd 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,13 +3,15 @@ import { DebugOptions } from './helpers/debugDeep'; export type Config = { /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */ asyncUtilTimeout: number; - /** Default options for `debug` helper. */ defaultDebugOptions?: Partial; + /** Default hidden value for all queries */ + hidden: boolean; }; const defaultConfig: Config = { asyncUtilTimeout: 1000, + hidden: true, }; let config = { diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 0868a9c85..600512f4f 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -1,4 +1,5 @@ import { ReactTestInstance } from 'react-test-renderer'; +import { getConfig } from '../config'; import { AccessibilityOption } from '../queries/accessibilityOption'; import { isInaccessible, isSubtreeInaccessible } from './accessiblity'; @@ -9,9 +10,7 @@ export function findAll( ) { const results = instance.findAll(predicate); - //TODO: implement getConfig - const defaultHidden = true; - const hidden = options?.hidden ?? defaultHidden; // We will want to add `defaultHidden: boolean` option to `configure` + const hidden = options?.hidden ?? getConfig().hidden; // We will want to add `defaultHidden: boolean` option to `configure` if (hidden) { return results; From 56e3b2041b91fb296e737e32d1a21d18b96e3d9d Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Sat, 29 Oct 2022 13:21:17 +0200 Subject: [PATCH 08/32] refactor: simplify cache handling for accessibiilty --- src/helpers/accessiblity.ts | 17 ++++++++++------- src/helpers/findAll.ts | 15 ++------------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index c0b9b75cc..1f4e3203e 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -3,7 +3,7 @@ import { ReactTestInstance } from 'react-test-renderer'; import { getHostSiblings } from './component-tree'; type IsInaccessibleOptions = { - isSubtreeInaccessible: (element: ReactTestInstance | null) => boolean; + cache?: WeakMap; }; export type AccessibilityStateKey = keyof AccessibilityState; @@ -16,13 +16,9 @@ export const accessibilityStateKeys: AccessibilityStateKey[] = [ 'expanded', ]; -const defaultIsInaccessibleOptions = { isSubtreeInaccessible }; - export function isInaccessible( element: ReactTestInstance | null, - { - isSubtreeInaccessible, - }: IsInaccessibleOptions = defaultIsInaccessibleOptions + { cache }: IsInaccessibleOptions = { cache: undefined } ): boolean { if (element == null) { return true; @@ -30,7 +26,14 @@ export function isInaccessible( let current: ReactTestInstance | null = element; while (current) { - if (isSubtreeInaccessible(current)) { + let isCurrentSubtreeInaccessible = cache?.get(current); + + if (isCurrentSubtreeInaccessible === undefined) { + isCurrentSubtreeInaccessible = isSubtreeInaccessible(current); + cache?.set(current, isCurrentSubtreeInaccessible); + } + + if (isCurrentSubtreeInaccessible) { return true; } diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 600512f4f..fb1864fff 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -1,7 +1,7 @@ import { ReactTestInstance } from 'react-test-renderer'; import { getConfig } from '../config'; import { AccessibilityOption } from '../queries/accessibilityOption'; -import { isInaccessible, isSubtreeInaccessible } from './accessiblity'; +import { isInaccessible } from './accessiblity'; export function findAll( instance: ReactTestInstance, @@ -17,22 +17,11 @@ export function findAll( } const subtreeIsInaccessibleCache = new WeakMap(); - function cachedIsSubtreeInaccessible(element: ReactTestInstance | null) { - if (element === null) { - return true; - } - - if (!subtreeIsInaccessibleCache.has(element)) { - subtreeIsInaccessibleCache.set(element, isSubtreeInaccessible(element)); - } - - return subtreeIsInaccessibleCache.get(element); - } return results.filter( (result) => !isInaccessible(result, { - isSubtreeInaccessible: cachedIsSubtreeInaccessible, + cache: subtreeIsInaccessibleCache, }) ); } From 102664a2f8731ad64c8a007b0e4ca6412ba8b330 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 09:53:48 +0100 Subject: [PATCH 09/32] refactor: correct cache default --- src/helpers/accessiblity.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index 1f4e3203e..9ab4df787 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -18,7 +18,7 @@ export const accessibilityStateKeys: AccessibilityStateKey[] = [ export function isInaccessible( element: ReactTestInstance | null, - { cache }: IsInaccessibleOptions = { cache: undefined } + { cache }: IsInaccessibleOptions = {} ): boolean { if (element == null) { return true; From 726dd723046cb43a2a9ab8353ce4ca780b5ce60f Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 09:56:47 +0100 Subject: [PATCH 10/32] refactor: rename options file --- src/helpers/findAll.ts | 2 +- src/queries/a11yState.ts | 2 +- src/queries/a11yValue.ts | 2 +- src/queries/hintText.ts | 2 +- src/queries/labelText.ts | 2 +- src/queries/{accessibilityOption.ts => options.ts} | 0 src/queries/role.ts | 2 +- src/queries/text.ts | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename src/queries/{accessibilityOption.ts => options.ts} (100%) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index fb1864fff..7e7ac1d52 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -1,6 +1,6 @@ import { ReactTestInstance } from 'react-test-renderer'; import { getConfig } from '../config'; -import { AccessibilityOption } from '../queries/accessibilityOption'; +import { AccessibilityOption } from '../queries/options'; import { isInaccessible } from './accessiblity'; export function findAll( diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index f3adc12dc..39806b55a 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -12,7 +12,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './accessibilityOption'; +import { AccessibilityOption } from './options'; const queryAllByA11yState = ( instance: ReactTestInstance diff --git a/src/queries/a11yValue.ts b/src/queries/a11yValue.ts index c7cb14a5b..93ee33590 100644 --- a/src/queries/a11yValue.ts +++ b/src/queries/a11yValue.ts @@ -10,7 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './accessibilityOption'; +import { AccessibilityOption } from './options'; type A11yValue = { min?: number; diff --git a/src/queries/hintText.ts b/src/queries/hintText.ts index 78ac19938..ae29b3f64 100644 --- a/src/queries/hintText.ts +++ b/src/queries/hintText.ts @@ -11,7 +11,7 @@ import type { QueryByQuery, } from './makeQueries'; import { TextMatchOptions } from './text'; -import { AccessibilityOption } from './accessibilityOption'; +import { AccessibilityOption } from './options'; const getNodeByHintText = ( node: ReactTestInstance, diff --git a/src/queries/labelText.ts b/src/queries/labelText.ts index afc0e3942..5c07c96d8 100644 --- a/src/queries/labelText.ts +++ b/src/queries/labelText.ts @@ -11,7 +11,7 @@ import type { QueryByQuery, } from './makeQueries'; import { TextMatchOptions } from './text'; -import { AccessibilityOption } from './accessibilityOption'; +import { AccessibilityOption } from './options'; const getNodeByLabelText = ( node: ReactTestInstance, diff --git a/src/queries/accessibilityOption.ts b/src/queries/options.ts similarity index 100% rename from src/queries/accessibilityOption.ts rename to src/queries/options.ts diff --git a/src/queries/role.ts b/src/queries/role.ts index 56e881fbc..3408fdd4d 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -15,7 +15,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './accessibilityOption'; +import { AccessibilityOption } from './options'; type ByRoleOptions = { name?: TextMatch; diff --git a/src/queries/text.ts b/src/queries/text.ts index 9cab9e974..83a72eea5 100644 --- a/src/queries/text.ts +++ b/src/queries/text.ts @@ -18,7 +18,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './accessibilityOption'; +import { AccessibilityOption } from './options'; export type TextMatchOptions = AccessibilityOption & { exact?: boolean; From a88ac5d7e961aabff6d3bbe80e7342b2a6805794 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 09:58:04 +0100 Subject: [PATCH 11/32] refactor: rename AccessibiilityOption to BaseOptions --- src/helpers/findAll.ts | 4 ++-- src/queries/a11yState.ts | 40 ++++++++++++++-------------------------- src/queries/a11yValue.ts | 28 ++++++++++++++-------------- src/queries/hintText.ts | 4 ++-- src/queries/labelText.ts | 4 ++-- src/queries/options.ts | 2 +- src/queries/role.ts | 4 ++-- src/queries/text.ts | 4 ++-- 8 files changed, 39 insertions(+), 51 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 7e7ac1d52..901081069 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -1,9 +1,9 @@ import { ReactTestInstance } from 'react-test-renderer'; import { getConfig } from '../config'; -import { AccessibilityOption } from '../queries/options'; +import { BaseOptions } from '../queries/options'; import { isInaccessible } from './accessiblity'; -export function findAll( +export function findAll( instance: ReactTestInstance, predicate: (node: ReactTestInstance) => boolean, options?: Options diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index 39806b55a..8eab57a02 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -12,13 +12,13 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './options'; +import { BaseOptions } from './options'; const queryAllByA11yState = ( instance: ReactTestInstance ): (( matcher: AccessibilityState, - queryOptions?: AccessibilityOption + queryOptions?: BaseOptions ) => Array) => function queryAllByA11yStateFn(matcher, queryOptions) { return findAll( @@ -54,34 +54,22 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yStateQueries = { - getByA11yState: GetByQuery; - getAllByA11yState: GetAllByQuery; - queryByA11yState: QueryByQuery; - queryAllByA11yState: QueryAllByQuery; - findByA11yState: FindByQuery; - findAllByA11yState: FindAllByQuery; + getByA11yState: GetByQuery; + getAllByA11yState: GetAllByQuery; + queryByA11yState: QueryByQuery; + queryAllByA11yState: QueryAllByQuery; + findByA11yState: FindByQuery; + findAllByA11yState: FindAllByQuery; - getByAccessibilityState: GetByQuery; - getAllByAccessibilityState: GetAllByQuery< - AccessibilityState, - AccessibilityOption - >; - queryByAccessibilityState: QueryByQuery< - AccessibilityState, - AccessibilityOption - >; + getByAccessibilityState: GetByQuery; + getAllByAccessibilityState: GetAllByQuery; + queryByAccessibilityState: QueryByQuery; queryAllByAccessibilityState: QueryAllByQuery< AccessibilityState, - AccessibilityOption - >; - findByAccessibilityState: FindByQuery< - AccessibilityState, - AccessibilityOption - >; - findAllByAccessibilityState: FindAllByQuery< - AccessibilityState, - AccessibilityOption + BaseOptions >; + findByAccessibilityState: FindByQuery; + findAllByAccessibilityState: FindAllByQuery; }; export const bindByA11yStateQueries = ( diff --git a/src/queries/a11yValue.ts b/src/queries/a11yValue.ts index 93ee33590..dfccbc355 100644 --- a/src/queries/a11yValue.ts +++ b/src/queries/a11yValue.ts @@ -10,7 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './options'; +import { BaseOptions } from './options'; type A11yValue = { min?: number; @@ -23,7 +23,7 @@ const queryAllByA11yValue = ( instance: ReactTestInstance ): (( value: A11yValue, - queryOptions?: AccessibilityOption + queryOptions?: BaseOptions ) => Array) => function queryAllByA11yValueFn(value, queryOptions) { return findAll( @@ -47,19 +47,19 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yValueQueries = { - getByA11yValue: GetByQuery; - getAllByA11yValue: GetAllByQuery; - queryByA11yValue: QueryByQuery; - queryAllByA11yValue: QueryAllByQuery; - findByA11yValue: FindByQuery; - findAllByA11yValue: FindAllByQuery; + getByA11yValue: GetByQuery; + getAllByA11yValue: GetAllByQuery; + queryByA11yValue: QueryByQuery; + queryAllByA11yValue: QueryAllByQuery; + findByA11yValue: FindByQuery; + findAllByA11yValue: FindAllByQuery; - getByAccessibilityValue: GetByQuery; - getAllByAccessibilityValue: GetAllByQuery; - queryByAccessibilityValue: QueryByQuery; - queryAllByAccessibilityValue: QueryAllByQuery; - findByAccessibilityValue: FindByQuery; - findAllByAccessibilityValue: FindAllByQuery; + getByAccessibilityValue: GetByQuery; + getAllByAccessibilityValue: GetAllByQuery; + queryByAccessibilityValue: QueryByQuery; + queryAllByAccessibilityValue: QueryAllByQuery; + findByAccessibilityValue: FindByQuery; + findAllByAccessibilityValue: FindAllByQuery; }; export const bindByA11yValueQueries = ( diff --git a/src/queries/hintText.ts b/src/queries/hintText.ts index ae29b3f64..b27ca1c62 100644 --- a/src/queries/hintText.ts +++ b/src/queries/hintText.ts @@ -11,7 +11,7 @@ import type { QueryByQuery, } from './makeQueries'; import { TextMatchOptions } from './text'; -import { AccessibilityOption } from './options'; +import { BaseOptions } from './options'; const getNodeByHintText = ( node: ReactTestInstance, @@ -26,7 +26,7 @@ const queryAllByHintText = ( instance: ReactTestInstance ): (( hint: TextMatch, - queryOptions?: AccessibilityOption + queryOptions?: BaseOptions ) => Array) => function queryAllByA11yHintFn(hint, queryOptions) { return findAll( diff --git a/src/queries/labelText.ts b/src/queries/labelText.ts index 5c07c96d8..e91199b6a 100644 --- a/src/queries/labelText.ts +++ b/src/queries/labelText.ts @@ -11,7 +11,7 @@ import type { QueryByQuery, } from './makeQueries'; import { TextMatchOptions } from './text'; -import { AccessibilityOption } from './options'; +import { BaseOptions } from './options'; const getNodeByLabelText = ( node: ReactTestInstance, @@ -26,7 +26,7 @@ const queryAllByLabelText = ( instance: ReactTestInstance ): (( text: TextMatch, - queryOptions?: AccessibilityOption + queryOptions?: BaseOptions ) => Array) => function queryAllByLabelTextFn(text, queryOptions) { return findAll( diff --git a/src/queries/options.ts b/src/queries/options.ts index 0e04503d2..0f1ce9f1f 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -1 +1 @@ -export type AccessibilityOption = { hidden?: boolean }; +export type BaseOptions = { hidden?: boolean }; diff --git a/src/queries/role.ts b/src/queries/role.ts index 3408fdd4d..fcf5cd519 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -15,12 +15,12 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './options'; +import { BaseOptions } from './options'; type ByRoleOptions = { name?: TextMatch; } & AccessibilityState & - AccessibilityOption; + BaseOptions; const matchAccessibleNameIfNeeded = ( node: ReactTestInstance, diff --git a/src/queries/text.ts b/src/queries/text.ts index 83a72eea5..ed407b0df 100644 --- a/src/queries/text.ts +++ b/src/queries/text.ts @@ -18,9 +18,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { AccessibilityOption } from './options'; +import { BaseOptions } from './options'; -export type TextMatchOptions = AccessibilityOption & { +export type TextMatchOptions = BaseOptions & { exact?: boolean; normalizer?: NormalizerFn; }; From 8d71039539d6d0b19d0858f7ee7715d7e1066cd7 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 10:00:31 +0100 Subject: [PATCH 12/32] refactor: move TextMatchOptiond' --- src/queries/displayValue.ts | 2 +- src/queries/options.ts | 7 +++++++ src/queries/placeholderText.ts | 2 +- src/queries/testId.ts | 2 +- src/queries/text.ts | 8 +------- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts index 7b49d5aba..48d8b0ab6 100644 --- a/src/queries/displayValue.ts +++ b/src/queries/displayValue.ts @@ -12,7 +12,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import type { TextMatchOptions } from './text'; +import type { TextMatchOptions } from './options'; const getTextInputNodeByDisplayValue = ( node: ReactTestInstance, diff --git a/src/queries/options.ts b/src/queries/options.ts index 0f1ce9f1f..1a1c07837 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -1 +1,8 @@ +import { NormalizerFn } from '../matches'; + export type BaseOptions = { hidden?: boolean }; + +export type TextMatchOptions = BaseOptions & { + exact?: boolean; + normalizer?: NormalizerFn; +}; diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts index fa840b0be..da9cca0ac 100644 --- a/src/queries/placeholderText.ts +++ b/src/queries/placeholderText.ts @@ -12,7 +12,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import type { TextMatchOptions } from './text'; +import type { TextMatchOptions } from './options'; const getTextInputNodeByPlaceholderText = ( node: ReactTestInstance, diff --git a/src/queries/testId.ts b/src/queries/testId.ts index 558becb3e..4bb041c02 100644 --- a/src/queries/testId.ts +++ b/src/queries/testId.ts @@ -10,7 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import type { TextMatchOptions } from './text'; +import type { TextMatchOptions } from './options'; const getNodeByTestId = ( node: ReactTestInstance, diff --git a/src/queries/text.ts b/src/queries/text.ts index ed407b0df..9f124658c 100644 --- a/src/queries/text.ts +++ b/src/queries/text.ts @@ -7,7 +7,6 @@ import { getCompositeParentOfType, } from '../helpers/component-tree'; import { matches, TextMatch } from '../matches'; -import type { NormalizerFn } from '../matches'; import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { @@ -18,12 +17,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { BaseOptions } from './options'; - -export type TextMatchOptions = BaseOptions & { - exact?: boolean; - normalizer?: NormalizerFn; -}; +import { TextMatchOptions } from './options'; const getChildrenAsText = (children: React.ReactChild[]) => { const textContent: string[] = []; From 8abf6578c56c22249231b66bb153b4e3f3630b9f Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 10:02:15 +0100 Subject: [PATCH 13/32] fixup! feat: implement new findAll helper including hidden option --- src/helpers/findAll.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 901081069..95631da0f 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -3,10 +3,10 @@ import { getConfig } from '../config'; import { BaseOptions } from '../queries/options'; import { isInaccessible } from './accessiblity'; -export function findAll( +export function findAll( instance: ReactTestInstance, predicate: (node: ReactTestInstance) => boolean, - options?: Options + options?: BaseOptions ) { const results = instance.findAll(predicate); From fb830bda33fdb9d2c9e1db386f3b4507a0c45cbf Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 10:05:56 +0100 Subject: [PATCH 14/32] refactor: simplify naming in findAll --- src/helpers/findAll.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 95631da0f..9ec803565 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -16,12 +16,6 @@ export function findAll( return results; } - const subtreeIsInaccessibleCache = new WeakMap(); - - return results.filter( - (result) => - !isInaccessible(result, { - cache: subtreeIsInaccessibleCache, - }) - ); + const cache = new WeakMap(); + return results.filter((element) => !isInaccessible(element, { cache })); } From 97225d05e768fa301457d604e218eda0917a0455 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 10:08:56 +0100 Subject: [PATCH 15/32] refactor: simplify options syntax for findAll' --- src/queries/a11yState.ts | 2 +- src/queries/a11yValue.ts | 2 +- src/queries/displayValue.ts | 2 +- src/queries/hintText.ts | 7 +++---- src/queries/labelText.ts | 7 +++---- src/queries/role.ts | 2 +- src/queries/testId.ts | 2 +- src/queries/text.ts | 4 +--- 8 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index 8eab57a02..267e11dbf 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -25,7 +25,7 @@ const queryAllByA11yState = ( instance, (node) => typeof node.type === 'string' && matchAccessibilityState(node, matcher), - { hidden: queryOptions?.hidden } + queryOptions ); }; diff --git a/src/queries/a11yValue.ts b/src/queries/a11yValue.ts index dfccbc355..3d18d2cb2 100644 --- a/src/queries/a11yValue.ts +++ b/src/queries/a11yValue.ts @@ -31,7 +31,7 @@ const queryAllByA11yValue = ( (node) => typeof node.type === 'string' && matchObjectProp(node.props.accessibilityValue, value), - { hidden: queryOptions?.hidden } + queryOptions ); }; diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts index 48d8b0ab6..1f7f38658 100644 --- a/src/queries/displayValue.ts +++ b/src/queries/displayValue.ts @@ -39,7 +39,7 @@ const queryAllByDisplayValue = ( instance, (node) => getTextInputNodeByDisplayValue(node, displayValue, queryOptions), - { hidden: queryOptions?.hidden } + queryOptions ); }; diff --git a/src/queries/hintText.ts b/src/queries/hintText.ts index b27ca1c62..3af366a4a 100644 --- a/src/queries/hintText.ts +++ b/src/queries/hintText.ts @@ -10,8 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { TextMatchOptions } from './text'; -import { BaseOptions } from './options'; +import { TextMatchOptions } from './options'; const getNodeByHintText = ( node: ReactTestInstance, @@ -26,7 +25,7 @@ const queryAllByHintText = ( instance: ReactTestInstance ): (( hint: TextMatch, - queryOptions?: BaseOptions + queryOptions?: TextMatchOptions ) => Array) => function queryAllByA11yHintFn(hint, queryOptions) { return findAll( @@ -34,7 +33,7 @@ const queryAllByHintText = ( (node) => typeof node.type === 'string' && getNodeByHintText(node, hint, queryOptions), - { hidden: queryOptions?.hidden } + queryOptions ); }; diff --git a/src/queries/labelText.ts b/src/queries/labelText.ts index e91199b6a..90190bea0 100644 --- a/src/queries/labelText.ts +++ b/src/queries/labelText.ts @@ -10,8 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { TextMatchOptions } from './text'; -import { BaseOptions } from './options'; +import { TextMatchOptions } from './options'; const getNodeByLabelText = ( node: ReactTestInstance, @@ -26,7 +25,7 @@ const queryAllByLabelText = ( instance: ReactTestInstance ): (( text: TextMatch, - queryOptions?: BaseOptions + queryOptions?: TextMatchOptions ) => Array) => function queryAllByLabelTextFn(text, queryOptions) { return findAll( @@ -34,7 +33,7 @@ const queryAllByLabelText = ( (node) => typeof node.type === 'string' && getNodeByLabelText(node, text, queryOptions), - { hidden: queryOptions?.hidden } + queryOptions ); }; diff --git a/src/queries/role.ts b/src/queries/role.ts index fcf5cd519..9f048a2be 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -54,7 +54,7 @@ const queryAllByRole = ( matchStringProp(node.props.accessibilityRole, role) && matchAccessibleStateIfNeeded(node, options) && matchAccessibleNameIfNeeded(node, options?.name), - { hidden: options?.hidden } + options ); }; diff --git a/src/queries/testId.ts b/src/queries/testId.ts index 4bb041c02..dfde8ebd6 100644 --- a/src/queries/testId.ts +++ b/src/queries/testId.ts @@ -31,7 +31,7 @@ const queryAllByTestId = ( const results = findAll( instance, (node) => getNodeByTestId(node, testId, queryOptions), - { hidden: queryOptions?.hidden } + queryOptions ); return results.filter((element) => typeof element.type === 'string'); diff --git a/src/queries/text.ts b/src/queries/text.ts index 9f124658c..70a73f197 100644 --- a/src/queries/text.ts +++ b/src/queries/text.ts @@ -85,9 +85,7 @@ const queryAllByText = ( const results = findAll( baseInstance, (node) => getNodeByText(node, text, options), - { - hidden: options?.hidden, - } + options ); return results; From 0971813ce3541ea1ca52df79d948abf9f84cdd8c Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 13:42:44 +0100 Subject: [PATCH 16/32] refactor: renaming in findAll args --- src/helpers/findAll.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 9ec803565..d34b5ce72 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -4,11 +4,11 @@ import { BaseOptions } from '../queries/options'; import { isInaccessible } from './accessiblity'; export function findAll( - instance: ReactTestInstance, + root: ReactTestInstance, predicate: (node: ReactTestInstance) => boolean, options?: BaseOptions ) { - const results = instance.findAll(predicate); + const results = root.findAll(predicate); const hidden = options?.hidden ?? getConfig().hidden; // We will want to add `defaultHidden: boolean` option to `configure` From e9bebb692c345bfa83ca2a0d5a0ef6fac23bf691 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 13:43:52 +0100 Subject: [PATCH 17/32] refactor: clean type ByRoleOptions --- src/queries/role.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/queries/role.ts b/src/queries/role.ts index 9f048a2be..74a82f80c 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -17,10 +17,10 @@ import type { } from './makeQueries'; import { BaseOptions } from './options'; -type ByRoleOptions = { - name?: TextMatch; -} & AccessibilityState & - BaseOptions; +type ByRoleOptions = AccessibilityState & + BaseOptions & { + name?: TextMatch; + }; const matchAccessibleNameIfNeeded = ( node: ReactTestInstance, From f0d62442f6a68fba56dec5e3bccbc803d6f650c5 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 13:45:36 +0100 Subject: [PATCH 18/32] refactor: rename type BaseOptions to CommonQueryoptions --- src/helpers/findAll.ts | 4 ++-- src/queries/a11yState.ts | 37 +++++++++++++++++++++++-------------- src/queries/a11yValue.ts | 28 ++++++++++++++-------------- src/queries/options.ts | 4 ++-- src/queries/role.ts | 4 ++-- 5 files changed, 43 insertions(+), 34 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index d34b5ce72..d8bdb5f07 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -1,12 +1,12 @@ import { ReactTestInstance } from 'react-test-renderer'; import { getConfig } from '../config'; -import { BaseOptions } from '../queries/options'; +import { CommonQueryOptions } from '../queries/options'; import { isInaccessible } from './accessiblity'; export function findAll( root: ReactTestInstance, predicate: (node: ReactTestInstance) => boolean, - options?: BaseOptions + options?: CommonQueryOptions ) { const results = root.findAll(predicate); diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index 267e11dbf..dc54e33ca 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -12,13 +12,13 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { BaseOptions } from './options'; +import { CommonQueryOptions } from './options'; const queryAllByA11yState = ( instance: ReactTestInstance ): (( matcher: AccessibilityState, - queryOptions?: BaseOptions + queryOptions?: CommonQueryOptions ) => Array) => function queryAllByA11yStateFn(matcher, queryOptions) { return findAll( @@ -54,22 +54,31 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yStateQueries = { - getByA11yState: GetByQuery; - getAllByA11yState: GetAllByQuery; - queryByA11yState: QueryByQuery; - queryAllByA11yState: QueryAllByQuery; - findByA11yState: FindByQuery; - findAllByA11yState: FindAllByQuery; + getByA11yState: GetByQuery; + getAllByA11yState: GetAllByQuery; + queryByA11yState: QueryByQuery; + queryAllByA11yState: QueryAllByQuery; + findByA11yState: FindByQuery; + findAllByA11yState: FindAllByQuery; - getByAccessibilityState: GetByQuery; - getAllByAccessibilityState: GetAllByQuery; - queryByAccessibilityState: QueryByQuery; + getByAccessibilityState: GetByQuery; + getAllByAccessibilityState: GetAllByQuery< + AccessibilityState, + CommonQueryOptions + >; + queryByAccessibilityState: QueryByQuery< + AccessibilityState, + CommonQueryOptions + >; queryAllByAccessibilityState: QueryAllByQuery< AccessibilityState, - BaseOptions + CommonQueryOptions + >; + findByAccessibilityState: FindByQuery; + findAllByAccessibilityState: FindAllByQuery< + AccessibilityState, + CommonQueryOptions >; - findByAccessibilityState: FindByQuery; - findAllByAccessibilityState: FindAllByQuery; }; export const bindByA11yStateQueries = ( diff --git a/src/queries/a11yValue.ts b/src/queries/a11yValue.ts index 3d18d2cb2..ae3a56ec0 100644 --- a/src/queries/a11yValue.ts +++ b/src/queries/a11yValue.ts @@ -10,7 +10,7 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { BaseOptions } from './options'; +import { CommonQueryOptions } from './options'; type A11yValue = { min?: number; @@ -23,7 +23,7 @@ const queryAllByA11yValue = ( instance: ReactTestInstance ): (( value: A11yValue, - queryOptions?: BaseOptions + queryOptions?: CommonQueryOptions ) => Array) => function queryAllByA11yValueFn(value, queryOptions) { return findAll( @@ -47,19 +47,19 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByA11yValueQueries = { - getByA11yValue: GetByQuery; - getAllByA11yValue: GetAllByQuery; - queryByA11yValue: QueryByQuery; - queryAllByA11yValue: QueryAllByQuery; - findByA11yValue: FindByQuery; - findAllByA11yValue: FindAllByQuery; + getByA11yValue: GetByQuery; + getAllByA11yValue: GetAllByQuery; + queryByA11yValue: QueryByQuery; + queryAllByA11yValue: QueryAllByQuery; + findByA11yValue: FindByQuery; + findAllByA11yValue: FindAllByQuery; - getByAccessibilityValue: GetByQuery; - getAllByAccessibilityValue: GetAllByQuery; - queryByAccessibilityValue: QueryByQuery; - queryAllByAccessibilityValue: QueryAllByQuery; - findByAccessibilityValue: FindByQuery; - findAllByAccessibilityValue: FindAllByQuery; + getByAccessibilityValue: GetByQuery; + getAllByAccessibilityValue: GetAllByQuery; + queryByAccessibilityValue: QueryByQuery; + queryAllByAccessibilityValue: QueryAllByQuery; + findByAccessibilityValue: FindByQuery; + findAllByAccessibilityValue: FindAllByQuery; }; export const bindByA11yValueQueries = ( diff --git a/src/queries/options.ts b/src/queries/options.ts index 1a1c07837..c0ac08555 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -1,8 +1,8 @@ import { NormalizerFn } from '../matches'; -export type BaseOptions = { hidden?: boolean }; +export type CommonQueryOptions = { hidden?: boolean }; -export type TextMatchOptions = BaseOptions & { +export type TextMatchOptions = CommonQueryOptions & { exact?: boolean; normalizer?: NormalizerFn; }; diff --git a/src/queries/role.ts b/src/queries/role.ts index 74a82f80c..e5d8ef760 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -15,10 +15,10 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { BaseOptions } from './options'; +import { CommonQueryOptions } from './options'; type ByRoleOptions = AccessibilityState & - BaseOptions & { + CommonQueryOptions & { name?: TextMatch; }; From 18bca34b1236bae8bc8e61ddde11e88d378503e2 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 13:46:42 +0100 Subject: [PATCH 19/32] chore: remove deprecated common --- src/helpers/findAll.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index d8bdb5f07..43b26da8c 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -10,7 +10,7 @@ export function findAll( ) { const results = root.findAll(predicate); - const hidden = options?.hidden ?? getConfig().hidden; // We will want to add `defaultHidden: boolean` option to `configure` + const hidden = options?.hidden ?? getConfig().hidden; if (hidden) { return results; From 58816b0b217050cdb4fb87dfbf4b183811c2726c Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 13:59:44 +0100 Subject: [PATCH 20/32] refactor: separate query and findAll types --- src/helpers/findAll.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 43b26da8c..2dc5125aa 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -1,12 +1,15 @@ import { ReactTestInstance } from 'react-test-renderer'; import { getConfig } from '../config'; -import { CommonQueryOptions } from '../queries/options'; import { isInaccessible } from './accessiblity'; +interface FindAllOptions { + hidden?: boolean; +} + export function findAll( root: ReactTestInstance, predicate: (node: ReactTestInstance) => boolean, - options?: CommonQueryOptions + options?: FindAllOptions ) { const results = root.findAll(predicate); From 32651fab60f80d76520ce8685f7ef69f651e3cc9 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 14:11:17 +0100 Subject: [PATCH 21/32] fix: add options to flow types for queryByTestId --- typings/index.flow.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/typings/index.flow.js b/typings/index.flow.js index a1a27a20b..4f17f13bd 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -109,8 +109,14 @@ interface ByTestIdQueries { testID: TextMatch, options?: TextMatchOptions ) => Array; - queryByTestId: (testID: TextMatch) => ReactTestInstance | null; - queryAllByTestId: (testID: TextMatch) => Array | []; + queryByTestId: ( + testID: TextMatch, + options?: TextMatchOptions + ) => ReactTestInstance | null; + queryAllByTestId: ( + testID: TextMatch, + options?: TextMatchOptions + ) => Array | []; findByTestId: ( testID: TextMatch, queryOptions?: TextMatchOptions, From 61a11f891c18887d3d911d53e1c6f7e473c9056c Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 14:13:14 +0100 Subject: [PATCH 22/32] feat: update flow types --- typings/index.flow.js | 49 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 39 insertions(+), 10 deletions(-) diff --git a/typings/index.flow.js b/typings/index.flow.js index 4f17f13bd..a885ca08e 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -8,6 +8,7 @@ type QueryAllReturn = Array | []; type FindReturn = Promise; type FindAllReturn = Promise; +type CommonQueryOptions = { hidden?: boolean }; type TextMatch = string | RegExp; declare type NormalizerFn = (textToNormalize: string) => string; @@ -15,7 +16,7 @@ declare type NormalizerConfig = { trim?: boolean, collapseWhitespace?: boolean, }; -declare type TextMatchOptions = { +declare type TextMatchOptions = CommonQueryOptions & { exact?: boolean, normalizer?: NormalizerFn, }; @@ -209,7 +210,7 @@ interface UnsafeByPropsQueries { | []; } -type ByRoleOptions = { +type ByRoleOptions = CommonQueryOptions & { ...A11yState, name?: string, }; @@ -314,30 +315,58 @@ interface A11yAPI { ) => FindAllReturn; // State - getByA11yState: (matcher: A11yState) => GetReturn; - getAllByA11yState: (matcher: A11yState) => GetAllReturn; - queryByA11yState: (matcher: A11yState) => QueryReturn; - queryAllByA11yState: (matcher: A11yState) => QueryAllReturn; + getByA11yState: ( + matcher: A11yState, + options?: CommonQueryOptions + ) => GetReturn; + getAllByA11yState: ( + matcher: A11yState, + options?: CommonQueryOptions + ) => GetAllReturn; + queryByA11yState: ( + matcher: A11yState, + options?: CommonQueryOptions + ) => QueryReturn; + queryAllByA11yState: ( + matcher: A11yState, + options?: CommonQueryOptions + ) => QueryAllReturn; findByA11yState: ( matcher: A11yState, + queryOptions?: CommonQueryOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByA11yState: ( matcher: A11yState, + queryOptions?: CommonQueryOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; // Value - getByA11yValue: (matcher: A11yValue) => GetReturn; - getAllByA11yValue: (matcher: A11yValue) => GetAllReturn; - queryByA11yValue: (matcher: A11yValue) => QueryReturn; - queryAllByA11yValue: (matcher: A11yValue) => QueryAllReturn; + getByA11yValue: ( + matcher: A11yValue, + options?: CommonQueryOptions + ) => GetReturn; + getAllByA11yValue: ( + matcher: A11yValue, + options?: CommonQueryOptions + ) => GetAllReturn; + queryByA11yValue: ( + matcher: A11yValue, + options?: CommonQueryOptions + ) => QueryReturn; + queryAllByA11yValue: ( + matcher: A11yValue, + options?: CommonQueryOptions + ) => QueryAllReturn; findByA11yValue: ( matcher: A11yValue, + queryOptions?: CommonQueryOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByA11yValue: ( matcher: A11yValue, + queryOptions?: CommonQueryOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; } From b7824d9c66f3a21955798a31eda93c5e55583e71 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Thu, 3 Nov 2022 14:37:33 +0100 Subject: [PATCH 23/32] test: fix config test --- src/__tests__/config.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index 5e3707ed8..b164009e0 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -14,6 +14,7 @@ test('configure() overrides existing config values', () => { expect(getConfig()).toEqual({ asyncUtilTimeout: 5000, defaultDebugOptions: { message: 'debug message' }, + hidden: true, }); }); From c97446e4b5967dfa5e91df4667eb67fda02eaae2 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 4 Nov 2022 10:35:10 +0100 Subject: [PATCH 24/32] doc: add doc on hidden option --- website/docs/Queries.md | 59 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 733e7dcf0..b8820dc9d 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -26,8 +26,12 @@ title: Queries - [Default state for: `disabled`, `selected`, and `busy` keys](#default-state-for-disabled-selected-and-busy-keys) - [Default state for: `checked` and `expanded` keys](#default-state-for-checked-and-expanded-keys) - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) -- [TextMatch](#textmatch) +- [Hidden accessibility option](#hidden-accessibility-option) - [Examples](#examples) + - [`display: "none"`](#display-none) + - [`accessibilityElementsHidden`](#accessibilityelementshidden) +- [TextMatch](#textmatch) + - [Examples](#examples-1) - [Precision](#precision) - [Normalization](#normalization) - [Normalization Examples](#normalization-examples) @@ -87,7 +91,7 @@ type ReactTestInstance = { ### Options -Usually query first argument can be a **string** or a **regex**. Some queries accept optional argument which change string matching behaviour. See [TextMatch](#textmatch) for more info. +Usually query first argument can be a **string** or a **regex**. All queries take at least the [`hidden`](#hidden-accessibility-option) option as an optionnal second argument and some queries accept more options which change string matching behaviour. See [TextMatch](#textmatch) for more info. ### `ByText` @@ -355,6 +359,57 @@ render(); const element = screen.getByA11yValue({ min: 40 }); ``` +## Hidden accessibility 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. For now if no `hidden` option is defined, `hidden` is set to `true` by default in order to avoid breaking changes. In the near future, we plan to set it to `false` by default so that the default behavior of all queries is to respect accessibility. + +An element will be considered inaccessible when it checks one of the following: +- it has a style with `display: "none"` +- it has the prop [`importantForAccessibility='no-hide-descendants'`](https://reactnative.dev/docs/accessibility#importantforaccessibility-android) +- it has the prop [`accessibilityElementsHidden={true}`](https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios) +- one of its siblings has the prop [`accessibilityViewIsModal={true}`](https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios) +- one of its parents is inaccessible due to one of the checks above + +You can find more documentation about accessibility in React Native [here](https://reactnative.dev/docs/accessibility). + +### Examples + +#### `display: "none"` +Given the following render: +```ts +render(I am inaccessible) +``` + +Will **find a match**: +```ts +screen.getByText("I am inaccessible", { hidden: true}); +screen.getByText("I am inaccessible"); +``` + +Will **NOT find a match**: +```ts +screen.getByText("I am inaccessible", { hidden: false }); +``` + +#### `accessibilityElementsHidden` + +Given the following render: +```ts +render(I am inaccessible) +``` + +Will **find a match**: +```ts +screen.getByText("I am inaccessible", { hidden: true}); +screen.getByText("I am inaccessible"); +``` + +Will **NOT find a match**: +```ts +screen.getByText("I am inaccessible", { hidden: false }); +``` + + ## TextMatch ```ts From 63f3e8677eac0596d0b01b4eb666ed9f0235de8e Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 4 Nov 2022 12:08:49 +0100 Subject: [PATCH 25/32] doc: correct docs for hidden option --- website/docs/Queries.md | 61 ++++++++++++----------------------------- 1 file changed, 17 insertions(+), 44 deletions(-) diff --git a/website/docs/Queries.md b/website/docs/Queries.md index b8820dc9d..81bde8dce 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -26,10 +26,9 @@ title: Queries - [Default state for: `disabled`, `selected`, and `busy` keys](#default-state-for-disabled-selected-and-busy-keys) - [Default state for: `checked` and `expanded` keys](#default-state-for-checked-and-expanded-keys) - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) -- [Hidden accessibility option](#hidden-accessibility-option) - - [Examples](#examples) - - [`display: "none"`](#display-none) - - [`accessibilityElementsHidden`](#accessibilityelementshidden) +- [Common query options](#common-query-options) + - [`hidden` option](#hidden-option) + - [Examples](#examples) - [TextMatch](#textmatch) - [Examples](#examples-1) - [Precision](#precision) @@ -91,7 +90,7 @@ type ReactTestInstance = { ### Options -Usually query first argument can be a **string** or a **regex**. All queries take at least the [`hidden`](#hidden-accessibility-option) option as an optionnal second argument and some queries accept more options which change string matching behaviour. See [TextMatch](#textmatch) for more info. +Usually query first argument can be a **string** or a **regex**. All queries take at least the [`hidden`](#hidden-option) option as an optionnal second argument and some queries accept more options which change string matching behaviour. See [TextMatch](#textmatch) for more info. ### `ByText` @@ -359,57 +358,31 @@ render(); const element = screen.getByA11yValue({ min: 40 }); ``` -## Hidden accessibility option +## Common query options -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. For now if no `hidden` option is defined, `hidden` is set to `true` by default in order to avoid breaking changes. In the near future, we plan to set it to `false` by default so that the default behavior of all queries is to respect accessibility. +### `hidden` option -An element will be considered inaccessible when it checks one of the following: -- it has a style with `display: "none"` -- it has the prop [`importantForAccessibility='no-hide-descendants'`](https://reactnative.dev/docs/accessibility#importantforaccessibility-android) -- it has the prop [`accessibilityElementsHidden={true}`](https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios) -- one of its siblings has the prop [`accessibilityViewIsModal={true}`](https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios) -- one of its parents is inaccessible due to one of the checks above +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. -You can find more documentation about accessibility in React Native [here](https://reactnative.dev/docs/accessibility). +You can configure the default value with the [`configure` function](API.md#configure). -### Examples - -#### `display: "none"` -Given the following render: -```ts -render(I am inaccessible) -``` +An element is considered to be hidden from accessibility based on [`isInaccessible()`](./API.md#isinaccessible) function result. -Will **find a match**: -```ts -screen.getByText("I am inaccessible", { hidden: true}); -screen.getByText("I am inaccessible"); -``` +#### Examples -Will **NOT find a match**: -```ts -screen.getByText("I am inaccessible", { hidden: false }); -``` - -#### `accessibilityElementsHidden` +Given the following render: -Given the following render: ```ts -render(I am inaccessible) -``` +render(I am inaccessible); -Will **find a match**: -```ts -screen.getByText("I am inaccessible", { hidden: true}); -screen.getByText("I am inaccessible"); -``` +// Ignore hidden elements +expect(screen.queryByText("I am inaccessible", { hidden: false })).toBeFalsy(); -Will **NOT find a match**: -```ts -screen.getByText("I am inaccessible", { hidden: false }); +// Match hidden elements +expect(screen.getByText("I am inaccessible")).toBeTruthy(); // Defaults to hidden: true for now +expect(screen.getByText("I am inaccessible", { hidden: true})).toBeTruthy(); ``` - ## TextMatch ```ts From ee4adddf4bfe8ffb3a33de4a1fcffaeb5eb5975f Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 4 Nov 2022 12:11:42 +0100 Subject: [PATCH 26/32] doc: add doc for configure api --- website/docs/API.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/website/docs/API.md b/website/docs/API.md index 1591a92e0..adb2f310a 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -51,6 +51,7 @@ title: API - [`configure`](#configure) - [`asyncUtilTimeout` option](#asyncutiltimeout-option) - [`defaultDebugOptions` option](#defaultdebugoptions-option) + - [`hidden` option](#hidden-option) - [`resetToDefaults()`](#resettodefaults) - [Environment variables](#environment-variables) - [`RNTL_SKIP_AUTO_CLEANUP`](#rntl_skip_auto_cleanup) @@ -782,7 +783,8 @@ it('should use context value', () => { ```ts type Config = { asyncUtilTimeout: number; - defaultDebugOptions: Partial + defaultDebugOptions: Partial; + hidden: boolean; }; function configure(options: Partial) {} @@ -795,12 +797,17 @@ Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementTo Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`. +#### `hidden` option + +Default [hidden option](Queries.md#hidden-option) to be used for all queries. This default option will be overridden by the one you specify directly when using your query (eg: `getByText("Hello world", { hidden: true })`). + ### `resetToDefaults()` ```ts function resetToDefaults() {} ``` + ### Environment variables #### `RNTL_SKIP_AUTO_CLEANUP` From eec0c1b0f9f2f5d20750c247307b0b38ef7b871c Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 4 Nov 2022 14:44:02 +0100 Subject: [PATCH 27/32] doc: few tweaks to hidden option --- website/docs/Queries.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 81bde8dce..62304addd 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -28,9 +28,8 @@ title: Queries - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) - [Common query options](#common-query-options) - [`hidden` option](#hidden-option) - - [Examples](#examples) - [TextMatch](#textmatch) - - [Examples](#examples-1) + - [Examples](#examples) - [Precision](#precision) - [Normalization](#normalization) - [Normalization Examples](#normalization-examples) @@ -368,11 +367,9 @@ You can configure the default value with the [`configure` function](API.md#confi An element is considered to be hidden from accessibility based on [`isInaccessible()`](./API.md#isinaccessible) function result. -#### Examples +**Examples** -Given the following render: - -```ts +```tsx render(I am inaccessible); // Ignore hidden elements From 8557eaa490163987a9e72e5829f22185982e7e79 Mon Sep 17 00:00:00 2001 From: EBAM006 Date: Fri, 4 Nov 2022 14:50:18 +0100 Subject: [PATCH 28/32] refactor: rename hidden global option to defaultHidden --- src/__tests__/config.test.ts | 2 +- src/config.ts | 4 ++-- src/helpers/findAll.ts | 2 +- website/docs/API.md | 8 ++++---- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__tests__/config.test.ts b/src/__tests__/config.test.ts index b164009e0..5879b8ee2 100644 --- a/src/__tests__/config.test.ts +++ b/src/__tests__/config.test.ts @@ -14,7 +14,7 @@ test('configure() overrides existing config values', () => { expect(getConfig()).toEqual({ asyncUtilTimeout: 5000, defaultDebugOptions: { message: 'debug message' }, - hidden: true, + defaultHidden: true, }); }); diff --git a/src/config.ts b/src/config.ts index 5259b75cd..2160129bd 100644 --- a/src/config.ts +++ b/src/config.ts @@ -6,12 +6,12 @@ export type Config = { /** Default options for `debug` helper. */ defaultDebugOptions?: Partial; /** Default hidden value for all queries */ - hidden: boolean; + defaultHidden: boolean; }; const defaultConfig: Config = { asyncUtilTimeout: 1000, - hidden: true, + defaultHidden: true, }; let config = { diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index 2dc5125aa..b14c1a7f7 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -13,7 +13,7 @@ export function findAll( ) { const results = root.findAll(predicate); - const hidden = options?.hidden ?? getConfig().hidden; + const hidden = options?.hidden ?? getConfig().defaultHidden; if (hidden) { return results; diff --git a/website/docs/API.md b/website/docs/API.md index adb2f310a..d01aa9158 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -51,7 +51,7 @@ title: API - [`configure`](#configure) - [`asyncUtilTimeout` option](#asyncutiltimeout-option) - [`defaultDebugOptions` option](#defaultdebugoptions-option) - - [`hidden` option](#hidden-option) + - [`defaultHidden` option](#defaulthidden-option) - [`resetToDefaults()`](#resettodefaults) - [Environment variables](#environment-variables) - [`RNTL_SKIP_AUTO_CLEANUP`](#rntl_skip_auto_cleanup) @@ -784,7 +784,7 @@ it('should use context value', () => { type Config = { asyncUtilTimeout: number; defaultDebugOptions: Partial; - hidden: boolean; + defaultHidden: boolean; }; function configure(options: Partial) {} @@ -797,9 +797,9 @@ Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementTo Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`. -#### `hidden` option +#### `defaultHidden` option -Default [hidden option](Queries.md#hidden-option) to be used for all queries. This default option will be overridden by the one you specify directly when using your query (eg: `getByText("Hello world", { hidden: true })`). +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. ### `resetToDefaults()` From 7e869de4f38609fe4b5bc931d2c349103af5a96f Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Fri, 4 Nov 2022 21:48:30 +0100 Subject: [PATCH 29/32] refactor: formatting --- src/config.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/config.ts b/src/config.ts index 2160129bd..dee59e127 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,10 +3,12 @@ import { DebugOptions } from './helpers/debugDeep'; export type Config = { /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */ asyncUtilTimeout: number; - /** Default options for `debug` helper. */ - defaultDebugOptions?: Partial; + /** Default hidden value for all queries */ defaultHidden: boolean; + + /** Default options for `debug` helper. */ + defaultDebugOptions?: Partial; }; const defaultConfig: Config = { @@ -14,9 +16,7 @@ const defaultConfig: Config = { defaultHidden: true, }; -let config = { - ...defaultConfig, -}; +let config = { ...defaultConfig }; export function configure(options: Partial) { config = { @@ -26,7 +26,7 @@ export function configure(options: Partial) { } export function resetToDefaults() { - config = defaultConfig; + config = { ...defaultConfig }; } export function getConfig() { From b9d64042e10594d54192f0288568ac32e5c764d2 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Fri, 4 Nov 2022 21:52:37 +0100 Subject: [PATCH 30/32] refactor: final tweaks --- src/config.ts | 4 +- src/helpers/findAll.ts | 1 - src/queries/__tests__/a11yState.test.tsx | 14 +-- src/queries/__tests__/a11yValue.test.tsx | 10 +- src/queries/__tests__/displayValue.test.tsx | 18 ++-- src/queries/__tests__/hintText.test.tsx | 16 +-- src/queries/__tests__/labelText.test.tsx | 16 +-- .../__tests__/placeholderText.test.tsx | 24 ++--- src/queries/__tests__/role.test.tsx | 14 +-- src/queries/__tests__/testId.test.tsx | 15 +-- src/queries/__tests__/text.test.tsx | 14 +-- src/queries/a11yState.ts | 2 +- src/queries/a11yValue.ts | 2 +- src/queries/displayValue.ts | 20 ++-- src/queries/hintText.ts | 44 ++++---- src/queries/labelText.ts | 20 ++-- src/queries/options.ts | 2 +- src/queries/placeholderText.ts | 23 ++-- src/queries/role.ts | 6 +- src/queries/testId.ts | 20 ++-- src/queries/text.ts | 27 +++-- typings/index.flow.js | 100 ++++++++++-------- website/docs/API.md | 12 +-- website/docs/Queries.md | 12 +-- 24 files changed, 232 insertions(+), 204 deletions(-) diff --git a/src/config.ts b/src/config.ts index dee59e127..b8133c3b9 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,10 +3,10 @@ import { DebugOptions } from './helpers/debugDeep'; export type Config = { /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */ asyncUtilTimeout: number; - + /** Default hidden value for all queries */ defaultHidden: boolean; - + /** Default options for `debug` helper. */ defaultDebugOptions?: Partial; }; diff --git a/src/helpers/findAll.ts b/src/helpers/findAll.ts index b14c1a7f7..779b8f0b4 100644 --- a/src/helpers/findAll.ts +++ b/src/helpers/findAll.ts @@ -14,7 +14,6 @@ export function findAll( const results = root.findAll(predicate); const hidden = options?.hidden ?? getConfig().defaultHidden; - if (hidden) { return results; } diff --git a/src/queries/__tests__/a11yState.test.tsx b/src/queries/__tests__/a11yState.test.tsx index 8a84fea0a..73dc1cc57 100644 --- a/src/queries/__tests__/a11yState.test.tsx +++ b/src/queries/__tests__/a11yState.test.tsx @@ -228,18 +228,20 @@ test('*ByA11yState on TouchableOpacity with "disabled" prop', () => { }); test('byA11yState queries support hidden option', () => { - const { queryByA11yState, getByA11yState } = render( - - I am inaccessible - + Hidden from accessibility + ); + + expect(getByA11yState({ expanded: false })).toBeTruthy(); + expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); + expect(queryByA11yState({ expanded: false }, { hidden: false })).toBeFalsy(); expect(() => getByA11yState({ expanded: false }, { hidden: false }) ).toThrow(); - expect(queryByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); - expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy(); }); diff --git a/src/queries/__tests__/a11yValue.test.tsx b/src/queries/__tests__/a11yValue.test.tsx index f31c46a98..c1b7c84b9 100644 --- a/src/queries/__tests__/a11yValue.test.tsx +++ b/src/queries/__tests__/a11yValue.test.tsx @@ -94,13 +94,15 @@ test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => { }); test('byA11yValue queries support hidden option', () => { - const { queryByA11yValue, getByA11yValue } = render( + const { getByA11yValue, queryByA11yValue } = render( - I am inaccessible + Hidden from accessibility ); + + expect(getByA11yValue({ max: 10 })).toBeTruthy(); + expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); + expect(queryByA11yValue({ max: 10 }, { hidden: false })).toBeFalsy(); expect(() => getByA11yValue({ max: 10 }, { hidden: false })).toThrow(); - expect(queryByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); - expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy(); }); diff --git a/src/queries/__tests__/displayValue.test.tsx b/src/queries/__tests__/displayValue.test.tsx index 6fc80702e..ff2567ea0 100644 --- a/src/queries/__tests__/displayValue.test.tsx +++ b/src/queries/__tests__/displayValue.test.tsx @@ -101,15 +101,13 @@ test('findBy queries work asynchronously', async () => { }, 20000); test('byDisplayValue queries support hidden option', () => { - const { queryByDisplayValue, getByDisplayValue } = render( - - I am inaccessible - + const { getByDisplayValue, queryByDisplayValue } = render( + ); - expect(queryByDisplayValue('im-inaccessible', { hidden: false })).toBeFalsy(); - expect(() => - getByDisplayValue('im-inaccessible', { hidden: false }) - ).toThrow(); - expect(queryByDisplayValue('im-inaccessible', { hidden: true })).toBeTruthy(); - expect(getByDisplayValue('im-inaccessible', { hidden: true })).toBeTruthy(); + + expect(getByDisplayValue('hidden')).toBeTruthy(); + expect(getByDisplayValue('hidden', { hidden: true })).toBeTruthy(); + + expect(queryByDisplayValue('hidden', { hidden: false })).toBeFalsy(); + expect(() => getByDisplayValue('hidden', { hidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/hintText.test.tsx b/src/queries/__tests__/hintText.test.tsx index 6001febbd..02ad9c596 100644 --- a/src/queries/__tests__/hintText.test.tsx +++ b/src/queries/__tests__/hintText.test.tsx @@ -108,13 +108,15 @@ test('getByHintText, getByHintText and exact = true', () => { }); test('byHintText queries support hidden option', () => { - const { queryByHintText, getByHintText } = render( - - I am inaccessible + const { getByHintText, queryByHintText } = render( + + Hidden from accessiblity ); - expect(queryByHintText('im-inaccessible', { hidden: false })).toBeFalsy(); - expect(() => getByHintText('im-inaccessible', { hidden: false })).toThrow(); - expect(queryByHintText('im-inaccessible', { hidden: true })).toBeTruthy(); - expect(getByHintText('im-inaccessible', { hidden: true })).toBeTruthy(); + + expect(getByHintText('hidden')).toBeTruthy(); + expect(getByHintText('hidden', { hidden: true })).toBeTruthy(); + + expect(queryByHintText('hidden', { hidden: false })).toBeFalsy(); + expect(() => getByHintText('hidden', { hidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index 188238d78..d1ce5a51b 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -145,13 +145,15 @@ describe('findBy options deprecations', () => { }); test('byLabelText queries support hidden option', () => { - const { queryByLabelText, getByLabelText } = render( - - I am inaccessible + const { getByLabelText, queryByLabelText } = render( + + Hidden from accessibility ); - expect(queryByLabelText('im-inaccessible', { hidden: false })).toBeFalsy(); - expect(() => getByLabelText('im-inaccessible', { hidden: false })).toThrow(); - expect(queryByLabelText('im-inaccessible', { hidden: true })).toBeTruthy(); - expect(getByLabelText('im-inaccessible', { hidden: true })).toBeTruthy(); + + expect(getByLabelText('hidden')).toBeTruthy(); + expect(getByLabelText('hidden', { hidden: true })).toBeTruthy(); + + expect(queryByLabelText('hidden', { hidden: false })).toBeFalsy(); + expect(() => getByLabelText('hidden', { hidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/placeholderText.test.tsx b/src/queries/__tests__/placeholderText.test.tsx index 50e12ad05..973691eee 100644 --- a/src/queries/__tests__/placeholderText.test.tsx +++ b/src/queries/__tests__/placeholderText.test.tsx @@ -60,21 +60,13 @@ test('getAllByPlaceholderText, queryAllByPlaceholderText', () => { }); test('byPlaceholderText queries support hidden option', () => { - const { queryByPlaceholderText, getByPlaceholderText } = render( - + const { getByPlaceholderText, queryByPlaceholderText } = render( + ); - expect( - queryByPlaceholderText(PLACEHOLDER_CHEF, { hidden: false }) - ).toBeFalsy(); - expect(() => - getByPlaceholderText(PLACEHOLDER_CHEF, { hidden: false }) - ).toThrow(); - expect( - queryByPlaceholderText(PLACEHOLDER_CHEF, { hidden: true }) - ).toBeTruthy(); - expect(getByPlaceholderText(PLACEHOLDER_CHEF, { hidden: true })).toBeTruthy(); + + expect(getByPlaceholderText('hidden')).toBeTruthy(); + expect(getByPlaceholderText('hidden', { hidden: true })).toBeTruthy(); + + expect(queryByPlaceholderText('hidden', { hidden: false })).toBeFalsy(); + expect(() => getByPlaceholderText('hidden', { hidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index b8800bf7e..25e5c9cc1 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -699,13 +699,15 @@ describe('error messages', () => { }); test('byRole queries support hidden option', () => { - const { queryByRole, getByRole } = render( - - I am inaccessible - + const { getByRole, queryByRole } = render( + + Hidden from accessibility + ); + + expect(getByRole('button')).toBeTruthy(); + expect(getByRole('button', { hidden: true })).toBeTruthy(); + expect(queryByRole('button', { hidden: false })).toBeFalsy(); expect(() => getByRole('button', { hidden: false })).toThrow(); - expect(queryByRole('button', { hidden: true })).toBeTruthy(); - expect(getByRole('button', { hidden: true })).toBeTruthy(); }); diff --git a/src/queries/__tests__/testId.test.tsx b/src/queries/__tests__/testId.test.tsx index df92b0537..f60ebe3b7 100644 --- a/src/queries/__tests__/testId.test.tsx +++ b/src/queries/__tests__/testId.test.tsx @@ -134,14 +134,15 @@ test('findByTestId and findAllByTestId work asynchronously', async () => { }, 20000); test('byTestId queries support hidden option', () => { - const { queryByTestId, getByTestId } = render( - - I am inaccessible + const { getByTestId, queryByTestId } = render( + + Hidden from accessibility ); - expect(queryByTestId('im-inaccessible', { hidden: false })).toBeFalsy(); - expect(() => getByTestId('im-inaccessible', { hidden: false })).toThrow(); - expect(queryByTestId('im-inaccessible', { hidden: true })).toBeTruthy(); - expect(getByTestId('im-inaccessible', { hidden: true })).toBeTruthy(); + expect(getByTestId('hidden')).toBeTruthy(); + expect(getByTestId('hidden', { hidden: true })).toBeTruthy(); + + expect(queryByTestId('hidden', { hidden: false })).toBeFalsy(); + expect(() => getByTestId('hidden', { hidden: false })).toThrow(); }); diff --git a/src/queries/__tests__/text.test.tsx b/src/queries/__tests__/text.test.tsx index bb1620f4f..9195e22bb 100644 --- a/src/queries/__tests__/text.test.tsx +++ b/src/queries/__tests__/text.test.tsx @@ -468,11 +468,13 @@ test('getByText searches for text within self host element', () => { }); test('byText support hidden option', () => { - const { queryByText, getByText } = render( - I am inaccessible + const { getByText, queryByText } = render( + Hidden from accessibility ); - expect(queryByText('I am inaccessible', { hidden: false })).toBeFalsy(); - expect(() => getByText('I am inaccessible', { hidden: false })).toThrow(); - expect(queryByText('I am inaccessible', { hidden: true })).toBeTruthy(); - expect(getByText('I am inaccessible', { hidden: true })).toBeTruthy(); + + expect(getByText(/hidden/i)).toBeTruthy(); + expect(getByText(/hidden/i, { hidden: true })).toBeTruthy(); + + expect(queryByText(/hidden/i, { hidden: false })).toBeFalsy(); + expect(() => getByText(/hidden/i, { hidden: false })).toThrow(); }); diff --git a/src/queries/a11yState.ts b/src/queries/a11yState.ts index dc54e33ca..84ca4bcb9 100644 --- a/src/queries/a11yState.ts +++ b/src/queries/a11yState.ts @@ -1,8 +1,8 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { AccessibilityState } from 'react-native'; import { accessibilityStateKeys } from '../helpers/accessiblity'; -import { matchAccessibilityState } from '../helpers/matchers/accessibilityState'; import { findAll } from '../helpers/findAll'; +import { matchAccessibilityState } from '../helpers/matchers/accessibilityState'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, diff --git a/src/queries/a11yValue.ts b/src/queries/a11yValue.ts index ae3a56ec0..0c1f680b6 100644 --- a/src/queries/a11yValue.ts +++ b/src/queries/a11yValue.ts @@ -1,6 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; -import { matchObjectProp } from '../helpers/matchers/matchObjectProp'; import { findAll } from '../helpers/findAll'; +import { matchObjectProp } from '../helpers/matchers/matchObjectProp'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, diff --git a/src/queries/displayValue.ts b/src/queries/displayValue.ts index 1f7f38658..7c5ccc159 100644 --- a/src/queries/displayValue.ts +++ b/src/queries/displayValue.ts @@ -1,8 +1,8 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { TextInput } from 'react-native'; import { filterNodeByType } from '../helpers/filterNodeByType'; -import { matches, TextMatch } from '../matches'; import { findAll } from '../helpers/findAll'; +import { matches, TextMatch } from '../matches'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -12,7 +12,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import type { TextMatchOptions } from './options'; +import type { CommonQueryOptions, TextMatchOptions } from './options'; + +type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions; const getTextInputNodeByDisplayValue = ( node: ReactTestInstance, @@ -32,7 +34,7 @@ const queryAllByDisplayValue = ( instance: ReactTestInstance ): (( displayValue: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: ByDisplayValueOptions ) => Array) => function queryAllByDisplayValueFn(displayValue, queryOptions) { return findAll( @@ -55,12 +57,12 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByDisplayValueQueries = { - getByDisplayValue: GetByQuery; - getAllByDisplayValue: GetAllByQuery; - queryByDisplayValue: QueryByQuery; - queryAllByDisplayValue: QueryAllByQuery; - findByDisplayValue: FindByQuery; - findAllByDisplayValue: FindAllByQuery; + getByDisplayValue: GetByQuery; + getAllByDisplayValue: GetAllByQuery; + queryByDisplayValue: QueryByQuery; + queryAllByDisplayValue: QueryAllByQuery; + findByDisplayValue: FindByQuery; + findAllByDisplayValue: FindAllByQuery; }; export const bindByDisplayValueQueries = ( diff --git a/src/queries/hintText.ts b/src/queries/hintText.ts index 3af366a4a..1d8bd26ef 100644 --- a/src/queries/hintText.ts +++ b/src/queries/hintText.ts @@ -1,6 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; -import { matches, TextMatch } from '../matches'; import { findAll } from '../helpers/findAll'; +import { matches, TextMatch } from '../matches'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -10,7 +10,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { TextMatchOptions } from './options'; +import { CommonQueryOptions, TextMatchOptions } from './options'; + +type ByHintTextOptions = CommonQueryOptions & TextMatchOptions; const getNodeByHintText = ( node: ReactTestInstance, @@ -25,7 +27,7 @@ const queryAllByHintText = ( instance: ReactTestInstance ): (( hint: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: ByHintTextOptions ) => Array) => function queryAllByA11yHintFn(hint, queryOptions) { return findAll( @@ -49,28 +51,28 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByHintTextQueries = { - getByHintText: GetByQuery; - getAllByHintText: GetAllByQuery; - queryByHintText: QueryByQuery; - queryAllByHintText: QueryAllByQuery; - findByHintText: FindByQuery; - findAllByHintText: FindAllByQuery; + getByHintText: GetByQuery; + getAllByHintText: GetAllByQuery; + queryByHintText: QueryByQuery; + queryAllByHintText: QueryAllByQuery; + findByHintText: FindByQuery; + findAllByHintText: FindAllByQuery; // a11yHint aliases - getByA11yHint: GetByQuery; - getAllByA11yHint: GetAllByQuery; - queryByA11yHint: QueryByQuery; - queryAllByA11yHint: QueryAllByQuery; - findByA11yHint: FindByQuery; - findAllByA11yHint: FindAllByQuery; + getByA11yHint: GetByQuery; + getAllByA11yHint: GetAllByQuery; + queryByA11yHint: QueryByQuery; + queryAllByA11yHint: QueryAllByQuery; + findByA11yHint: FindByQuery; + findAllByA11yHint: FindAllByQuery; // accessibilityHint aliases - getByAccessibilityHint: GetByQuery; - getAllByAccessibilityHint: GetAllByQuery; - queryByAccessibilityHint: QueryByQuery; - queryAllByAccessibilityHint: QueryAllByQuery; - findByAccessibilityHint: FindByQuery; - findAllByAccessibilityHint: FindAllByQuery; + getByAccessibilityHint: GetByQuery; + getAllByAccessibilityHint: GetAllByQuery; + queryByAccessibilityHint: QueryByQuery; + queryAllByAccessibilityHint: QueryAllByQuery; + findByAccessibilityHint: FindByQuery; + findAllByAccessibilityHint: FindAllByQuery; }; export const bindByHintTextQueries = ( diff --git a/src/queries/labelText.ts b/src/queries/labelText.ts index 90190bea0..2677e603f 100644 --- a/src/queries/labelText.ts +++ b/src/queries/labelText.ts @@ -1,6 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; -import { matches, TextMatch } from '../matches'; import { findAll } from '../helpers/findAll'; +import { matches, TextMatch } from '../matches'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -10,7 +10,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { TextMatchOptions } from './options'; +import { CommonQueryOptions, TextMatchOptions } from './options'; + +type ByLabelTextOptions = CommonQueryOptions & TextMatchOptions; const getNodeByLabelText = ( node: ReactTestInstance, @@ -25,7 +27,7 @@ const queryAllByLabelText = ( instance: ReactTestInstance ): (( text: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: ByLabelTextOptions ) => Array) => function queryAllByLabelTextFn(text, queryOptions) { return findAll( @@ -49,12 +51,12 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByLabelTextQueries = { - getByLabelText: GetByQuery; - getAllByLabelText: GetAllByQuery; - queryByLabelText: QueryByQuery; - queryAllByLabelText: QueryAllByQuery; - findByLabelText: FindByQuery; - findAllByLabelText: FindAllByQuery; + getByLabelText: GetByQuery; + getAllByLabelText: GetAllByQuery; + queryByLabelText: QueryByQuery; + queryAllByLabelText: QueryAllByQuery; + findByLabelText: FindByQuery; + findAllByLabelText: FindAllByQuery; }; export const bindByLabelTextQueries = ( diff --git a/src/queries/options.ts b/src/queries/options.ts index c0ac08555..8687b26e4 100644 --- a/src/queries/options.ts +++ b/src/queries/options.ts @@ -2,7 +2,7 @@ import { NormalizerFn } from '../matches'; export type CommonQueryOptions = { hidden?: boolean }; -export type TextMatchOptions = CommonQueryOptions & { +export type TextMatchOptions = { exact?: boolean; normalizer?: NormalizerFn; }; diff --git a/src/queries/placeholderText.ts b/src/queries/placeholderText.ts index da9cca0ac..05dbcdfef 100644 --- a/src/queries/placeholderText.ts +++ b/src/queries/placeholderText.ts @@ -1,8 +1,8 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { TextInput } from 'react-native'; +import { findAll } from '../helpers/findAll'; import { filterNodeByType } from '../helpers/filterNodeByType'; import { matches, TextMatch } from '../matches'; -import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -12,7 +12,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import type { TextMatchOptions } from './options'; +import type { CommonQueryOptions, TextMatchOptions } from './options'; + +type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions; const getTextInputNodeByPlaceholderText = ( node: ReactTestInstance, @@ -30,7 +32,7 @@ const queryAllByPlaceholderText = ( instance: ReactTestInstance ): (( placeholder: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: ByPlaceholderTextOptions ) => Array) => function queryAllByPlaceholderFn(placeholder, queryOptions) { return findAll( @@ -53,12 +55,15 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByPlaceholderTextQueries = { - getByPlaceholderText: GetByQuery; - getAllByPlaceholderText: GetAllByQuery; - queryByPlaceholderText: QueryByQuery; - queryAllByPlaceholderText: QueryAllByQuery; - findByPlaceholderText: FindByQuery; - findAllByPlaceholderText: FindAllByQuery; + getByPlaceholderText: GetByQuery; + getAllByPlaceholderText: GetAllByQuery; + queryByPlaceholderText: QueryByQuery; + queryAllByPlaceholderText: QueryAllByQuery< + TextMatch, + ByPlaceholderTextOptions + >; + findByPlaceholderText: FindByQuery; + findAllByPlaceholderText: FindAllByQuery; }; export const bindByPlaceholderTextQueries = ( diff --git a/src/queries/role.ts b/src/queries/role.ts index e5d8ef760..be13d474d 100644 --- a/src/queries/role.ts +++ b/src/queries/role.ts @@ -1,11 +1,11 @@ import { type AccessibilityState } from 'react-native'; import type { ReactTestInstance } from 'react-test-renderer'; import { accessibilityStateKeys } from '../helpers/accessiblity'; +import { findAll } from '../helpers/findAll'; import { matchAccessibilityState } from '../helpers/matchers/accessibilityState'; import { matchStringProp } from '../helpers/matchers/matchStringProp'; import type { TextMatch } from '../matches'; import { getQueriesForElement } from '../within'; -import { findAll } from '../helpers/findAll'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -17,8 +17,8 @@ import type { } from './makeQueries'; import { CommonQueryOptions } from './options'; -type ByRoleOptions = AccessibilityState & - CommonQueryOptions & { +type ByRoleOptions = CommonQueryOptions & + AccessibilityState & { name?: TextMatch; }; diff --git a/src/queries/testId.ts b/src/queries/testId.ts index dfde8ebd6..31d279763 100644 --- a/src/queries/testId.ts +++ b/src/queries/testId.ts @@ -1,6 +1,6 @@ import type { ReactTestInstance } from 'react-test-renderer'; -import { matches, TextMatch } from '../matches'; import { findAll } from '../helpers/findAll'; +import { matches, TextMatch } from '../matches'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -10,7 +10,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import type { TextMatchOptions } from './options'; +import type { CommonQueryOptions, TextMatchOptions } from './options'; + +type ByTestIdOptions = CommonQueryOptions & TextMatchOptions; const getNodeByTestId = ( node: ReactTestInstance, @@ -25,7 +27,7 @@ const queryAllByTestId = ( instance: ReactTestInstance ): (( testId: TextMatch, - queryOptions?: TextMatchOptions + queryOptions?: ByTestIdOptions ) => Array) => function queryAllByTestIdFn(testId, queryOptions) { const results = findAll( @@ -49,12 +51,12 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByTestIdQueries = { - getByTestId: GetByQuery; - getAllByTestId: GetAllByQuery; - queryByTestId: QueryByQuery; - queryAllByTestId: QueryAllByQuery; - findByTestId: FindByQuery; - findAllByTestId: FindAllByQuery; + getByTestId: GetByQuery; + getAllByTestId: GetAllByQuery; + queryByTestId: QueryByQuery; + queryAllByTestId: QueryAllByQuery; + findByTestId: FindByQuery; + findAllByTestId: FindAllByQuery; }; export const bindByTestIdQueries = ( diff --git a/src/queries/text.ts b/src/queries/text.ts index 70a73f197..f030cc9cb 100644 --- a/src/queries/text.ts +++ b/src/queries/text.ts @@ -1,13 +1,13 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { Text } from 'react-native'; import * as React from 'react'; -import { filterNodeByType } from '../helpers/filterNodeByType'; import { isHostElementForType, getCompositeParentOfType, } from '../helpers/component-tree'; -import { matches, TextMatch } from '../matches'; +import { filterNodeByType } from '../helpers/filterNodeByType'; import { findAll } from '../helpers/findAll'; +import { matches, TextMatch } from '../matches'; import { makeQueries } from './makeQueries'; import type { FindAllByQuery, @@ -17,7 +17,9 @@ import type { QueryAllByQuery, QueryByQuery, } from './makeQueries'; -import { TextMatchOptions } from './options'; +import { CommonQueryOptions, TextMatchOptions } from './options'; + +type ByTextOptions = CommonQueryOptions & TextMatchOptions; const getChildrenAsText = (children: React.ReactChild[]) => { const textContent: string[] = []; @@ -53,7 +55,7 @@ const getChildrenAsText = (children: React.ReactChild[]) => { const getNodeByText = ( node: ReactTestInstance, text: TextMatch, - options: TextMatchOptions = {} + options: ByTextOptions = {} ) => { const isTextComponent = filterNodeByType(node, Text); if (isTextComponent) { @@ -69,10 +71,7 @@ const getNodeByText = ( const queryAllByText = ( instance: ReactTestInstance -): (( - text: TextMatch, - options?: TextMatchOptions -) => Array) => +): ((text: TextMatch, options?: ByTextOptions) => Array) => function queryAllByTextFn(text, options) { const baseInstance = isHostElementForType(instance, Text) ? getCompositeParentOfType(instance, Text) @@ -103,12 +102,12 @@ const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries( ); export type ByTextQueries = { - getByText: GetByQuery; - getAllByText: GetAllByQuery; - queryByText: QueryByQuery; - queryAllByText: QueryAllByQuery; - findByText: FindByQuery; - findAllByText: FindAllByQuery; + getByText: GetByQuery; + getAllByText: GetAllByQuery; + queryByText: QueryByQuery; + queryAllByText: QueryAllByQuery; + findByText: FindByQuery; + findAllByText: FindAllByQuery; }; export const bindByTextQueries = ( diff --git a/typings/index.flow.js b/typings/index.flow.js index a885ca08e..a639c13a1 100644 --- a/typings/index.flow.js +++ b/typings/index.flow.js @@ -16,7 +16,7 @@ declare type NormalizerConfig = { trim?: boolean, collapseWhitespace?: boolean, }; -declare type TextMatchOptions = CommonQueryOptions & { +declare type TextMatchOptions = { exact?: boolean, normalizer?: NormalizerFn, }; @@ -75,115 +75,123 @@ type WaitForFunction = ( options?: WaitForOptions ) => Promise; +type ByTextOptions = CommonQueryOptions & TextMatchOptions; + interface ByTextQueries { - getByText: (text: TextMatch, options?: TextMatchOptions) => ReactTestInstance; + getByText: (text: TextMatch, options?: ByTextOptions) => ReactTestInstance; getAllByText: ( text: TextMatch, - options?: TextMatchOptions + options?: ByTextOptions ) => Array; queryByText: ( name: TextMatch, - options?: TextMatchOptions + options?: ByTextOptions ) => ReactTestInstance | null; queryAllByText: ( text: TextMatch, - options?: TextMatchOptions + options?: ByTextOptions ) => Array | []; findByText: ( text: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByTextOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByText: ( text: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByTextOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; } +type ByTestIdOptions = CommonQueryOptions & TextMatchOptions; + interface ByTestIdQueries { getByTestId: ( testID: TextMatch, - options?: TextMatchOptions + options?: ByTestIdOptions ) => ReactTestInstance; getAllByTestId: ( testID: TextMatch, - options?: TextMatchOptions + options?: ByTestIdOptions ) => Array; queryByTestId: ( testID: TextMatch, - options?: TextMatchOptions + options?: ByTestIdOptions ) => ReactTestInstance | null; queryAllByTestId: ( testID: TextMatch, - options?: TextMatchOptions + options?: ByTestIdOptions ) => Array | []; findByTestId: ( testID: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByTestIdOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByTestId: ( testID: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByTestIdOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; } +type ByDisplayValueOptions = CommonQueryOptions & TextMatchOptions; + interface ByDisplayValueQueries { getByDisplayValue: ( value: TextMatch, - options?: TextMatchOptions + options?: ByDisplayValueOptions ) => ReactTestInstance; getAllByDisplayValue: ( value: TextMatch, - options?: TextMatchOptions + options?: ByDisplayValueOptions ) => Array; queryByDisplayValue: ( value: TextMatch, - options?: TextMatchOptions + options?: ByDisplayValueOptions ) => ReactTestInstance | null; queryAllByDisplayValue: ( value: TextMatch, - options?: TextMatchOptions + options?: ByDisplayValueOptions ) => Array | []; findByDisplayValue: ( value: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByDisplayValueOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByDisplayValue: ( value: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByDisplayValueOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; } +type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions; + interface ByPlaceholderTextQueries { getByPlaceholderText: ( placeholder: TextMatch, - options?: TextMatchOptions + options?: ByPlaceholderTextOptions ) => ReactTestInstance; getAllByPlaceholderText: ( placeholder: TextMatch, - options?: TextMatchOptions + options?: ByPlaceholderTextOptions ) => Array; queryByPlaceholderText: ( placeholder: TextMatch, - options?: TextMatchOptions + options?: ByPlaceholderTextOptions ) => ReactTestInstance | null; queryAllByPlaceholderText: ( placeholder: TextMatch, - options?: TextMatchOptions + options?: ByPlaceholderTextOptions ) => Array | []; findByPlaceholderText: ( placeholder: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByPlaceholderTextOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByPlaceholderText: ( placeholder: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByPlaceholderTextOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; } @@ -215,77 +223,83 @@ type ByRoleOptions = CommonQueryOptions & { name?: string, }; +type ByLabelTextOptions = CommonQueryOptions & TextMatchOptions; +type ByHintTextOptions = CommonQueryOptions & TextMatchOptions; + interface A11yAPI { // Label - getByLabelText: (matcher: TextMatch, options?: TextMatchOptions) => GetReturn; + getByLabelText: ( + matcher: TextMatch, + options?: ByLabelTextOptions + ) => GetReturn; getAllByLabelText: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByLabelTextOptions ) => GetAllReturn; queryByLabelText: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByLabelTextOptions ) => QueryReturn; queryAllByLabelText: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByLabelTextOptions ) => QueryAllReturn; findByLabelText: ( matcher: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByLabelTextOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByLabelText: ( matcher: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByLabelTextOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; // Hint - getByA11yHint: (matcher: TextMatch, options?: TextMatchOptions) => GetReturn; - getByHintText: (matcher: TextMatch, options?: TextMatchOptions) => GetReturn; + getByA11yHint: (matcher: TextMatch, options?: ByHintTextOptions) => GetReturn; + getByHintText: (matcher: TextMatch, options?: ByHintTextOptions) => GetReturn; getAllByA11yHint: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByHintTextOptions ) => GetAllReturn; getAllByHintText: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByHintTextOptions ) => GetAllReturn; queryByA11yHint: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByHintTextOptions ) => QueryReturn; queryByHintText: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByHintTextOptions ) => QueryReturn; queryAllByA11yHint: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByHintTextOptions ) => QueryAllReturn; queryAllByHintText: ( matcher: TextMatch, - options?: TextMatchOptions + options?: ByHintTextOptions ) => QueryAllReturn; findByA11yHint: ( matcher: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByHintTextOptions, waitForOptions?: WaitForOptions ) => FindReturn; findByHintText: ( matcher: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByHintTextOptions, waitForOptions?: WaitForOptions ) => FindReturn; findAllByA11yHint: ( matcher: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByHintTextOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; findAllByHintText: ( matcher: TextMatch, - queryOptions?: TextMatchOptions, + queryOptions?: ByHintTextOptions, waitForOptions?: WaitForOptions ) => FindAllReturn; diff --git a/website/docs/API.md b/website/docs/API.md index d01aa9158..37040d1db 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -50,8 +50,8 @@ title: API - [Configuration](#configuration) - [`configure`](#configure) - [`asyncUtilTimeout` option](#asyncutiltimeout-option) - - [`defaultDebugOptions` option](#defaultdebugoptions-option) - [`defaultHidden` option](#defaulthidden-option) + - [`defaultDebugOptions` option](#defaultdebugoptions-option) - [`resetToDefaults()`](#resettodefaults) - [Environment variables](#environment-variables) - [`RNTL_SKIP_AUTO_CLEANUP`](#rntl_skip_auto_cleanup) @@ -783,8 +783,8 @@ it('should use context value', () => { ```ts type Config = { asyncUtilTimeout: number; - defaultDebugOptions: Partial; defaultHidden: boolean; + defaultDebugOptions: Partial; }; function configure(options: Partial) {} @@ -793,14 +793,14 @@ function configure(options: Partial) {} Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementToBeRemoved`) and `findBy*` queries. Defaults to 1000 ms. -#### `defaultDebugOptions` option - -Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`. - #### `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. +#### `defaultDebugOptions` option + +Default [debug options](#debug) to be used when calling `debug()`. These default options will be overridden by the ones you specify directly when calling `debug()`. + ### `resetToDefaults()` ```ts diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 62304addd..615891399 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -26,7 +26,7 @@ title: Queries - [Default state for: `disabled`, `selected`, and `busy` keys](#default-state-for-disabled-selected-and-busy-keys) - [Default state for: `checked` and `expanded` keys](#default-state-for-checked-and-expanded-keys) - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) -- [Common query options](#common-query-options) +- [Common options](#common-options) - [`hidden` option](#hidden-option) - [TextMatch](#textmatch) - [Examples](#examples) @@ -357,7 +357,7 @@ render(); const element = screen.getByA11yValue({ min: 40 }); ``` -## Common query options +## Common options ### `hidden` option @@ -370,14 +370,14 @@ An element is considered to be hidden from accessibility based on [`isInaccessib **Examples** ```tsx -render(I am inaccessible); +render(I am hidden from accessibility); // Ignore hidden elements -expect(screen.queryByText("I am inaccessible", { hidden: false })).toBeFalsy(); +expect(screen.queryByText("I am hidden from accessibility", { hidden: false })).toBeFalsy(); // Match hidden elements -expect(screen.getByText("I am inaccessible")).toBeTruthy(); // Defaults to hidden: true for now -expect(screen.getByText("I am inaccessible", { hidden: true})).toBeTruthy(); +expect(screen.getByText("I am hidden from accessibility")).toBeTruthy(); // Defaults to hidden: true for now +expect(screen.getByText("I am hidden from accessibility", { hidden: true})).toBeTruthy(); ``` ## TextMatch From 66b4fcbefdf530b9d9e6fc02acd7a350dbdbd8af Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Fri, 4 Nov 2022 22:31:01 +0100 Subject: [PATCH 31/32] chore: run prettier --- README.md | 6 +- website/docs/API.md | 80 ++++++++++----------- website/docs/EslintPLluginTestingLibrary.md | 3 +- website/docs/FAQ.md | 2 +- website/docs/GettingStarted.md | 4 +- website/docs/Queries.md | 32 +++++---- website/docs/TestingEnvironment.md | 4 +- website/docs/Troubleshooting.md | 6 +- 8 files changed, 72 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 2b8383025..44a2d8d22 100644 --- a/README.md +++ b/README.md @@ -117,8 +117,8 @@ test('form submits two answers', () => { fireEvent.press(screen.getByText('Submit')); expect(mockFn).toBeCalledWith({ - '1': { q: 'q1', a: 'a1' }, - '2': { q: 'q2', a: 'a2' }, + 1: { q: 'q1', a: 'a1' }, + 2: { q: 'q2', a: 'a2' }, }); }); ``` @@ -173,4 +173,4 @@ Supported and used by [Rally Health](https://www.rallyhealth.com/careers-home). [callstack-badge]: https://callstack.com/images/callstack-badge.svg [callstack]: https://callstack.com/open-source/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-testing-library&utm_term=readme [codecov-badge]: https://codecov.io/gh/callstack/react-native-testing-library/branch/main/graph/badge.svg?token=tYVSWro1IP -[codecov]: https://codecov.io/gh/callstack/react-native-testing-library \ No newline at end of file +[codecov]: https://codecov.io/gh/callstack/react-native-testing-library diff --git a/website/docs/API.md b/website/docs/API.md index 37040d1db..d7151b1cf 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -70,7 +70,7 @@ Defined as: ```jsx function render( component: React.Element, - options?: RenderOptions, + options?: RenderOptions ): RenderResult {} ``` @@ -93,7 +93,7 @@ test('should verify two questions', () => { The `render` method returns a `RenderResult` object having properties described below. :::info -Latest `render` result is kept in [`screen`](#screen) variable that can be imported from `@testing-library/react-native` package. +Latest `render` result is kept in [`screen`](#screen) variable that can be imported from `@testing-library/react-native` package. Using `screen` instead of destructuring `render` result is recommended approach. See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details. ::: @@ -125,10 +125,10 @@ unstable_validateStringsRenderedWithinText?: boolean; ``` :::note -This options is experimental, in some cases it might not work as intended, and its behavior might change without observing [SemVer](https://semver.org/) requirements for breaking changes. +This options is experimental, in some cases it might not work as intended, and its behavior might change without observing [SemVer](https://semver.org/) requirements for breaking changes. ::: -This **experimental** option allows you to replicate React Native behavior of throwing `Invariant Violation: Text strings must be rendered within a component` error when you try to render `string` value under components different than ``, e.g. under ``. +This **experimental** option allows you to replicate React Native behavior of throwing `Invariant Violation: Text strings must be rendered within a component` error when you try to render `string` value under components different than ``, e.g. under ``. This check is not enforced by React Test Renderer and hence by default React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests. @@ -174,7 +174,7 @@ Usually you should not need to call `unmount` as it is done automatically if you ### `debug` ```ts -interface DebugOptions { +interface DebugOptions { message?: string; mapProps?: MapPropsFunction; } @@ -182,7 +182,7 @@ interface DebugOptions { debug(options?: DebugOptions | string): void ``` -Pretty prints deeply rendered component passed to `render`. +Pretty prints deeply rendered component passed to `render`. #### `message` option @@ -205,39 +205,37 @@ optional message ``` - #### `mapProps` option -You can use the `mapProps` option to transform the props that will be printed : +You can use the `mapProps` option to transform the props that will be printed : ```jsx -render(); -debug({ mapProps : ({ style, ...props }) => ({ props }) }) +render(); +debug({ mapProps: ({ style, ...props }) => ({ props }) }); ``` -This will log the rendered JSX without the `style` props. +This will log the rendered JSX without the `style` props. The `children` prop cannot be filtered out so the following will print all rendered components with all props but `children` filtered out. - ```ts -debug({ mapProps : props => ({}) }) +debug({ mapProps: (props) => ({}) }); ``` This option can be used to target specific props when debugging a query (for instance keeping only `children` prop when debugging a `getByText` query). - You can also transform prop values so that they are more readable (e.g. flatten styles). +You can also transform prop values so that they are more readable (e.g. flatten styles). - ```ts +```ts import { StyleSheet } from 'react-native'; debug({ mapProps : {({ style, ...props })} => ({ style : StyleSheet.flatten(style), ...props }) }); - ``` +``` Or remove props that have little value when debugging tests, e.g. path prop for svgs ```ts -debug({ mapProps : ({ path, ...props }) => ({ ...props })}); +debug({ mapProps: ({ path, ...props }) => ({ ...props }) }); ``` #### `debug.shallow` @@ -266,15 +264,15 @@ A reference to the rendered root element. let screen: RenderResult; ``` -Hold the value of latest render call for easier access to query and other functions returned by [`render`](#render). +Hold the value of latest render call for easier access to query and other functions returned by [`render`](#render). Its value is automatically cleared after each test by calling [`cleanup`](#cleanup). If no `render` call has been made in a given test then it holds a special object that implements `RenderResult` but throws a helpful error on each property and method access. -This can also be used to build test utils that would normally require to be in render scope, either in a test file or globally for your project. For instance: +This can also be used to build test utils that would normally require to be in render scope, either in a test file or globally for your project. For instance: ```ts // Prints the rendered components omitting all props except children. -const debugText = () => screen.debug({ mapProps : props => ({}) }) +const debugText = () => screen.debug({ mapProps: (props) => ({}) }); ``` ## `cleanup` @@ -557,7 +555,11 @@ function waitForElementToBeRemoved( Waits for non-deterministic periods of time until queried element is removed or times out. `waitForElementToBeRemoved` periodically calls `expectation` every `interval` milliseconds to determine whether the element has been removed or not. ```jsx -import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native'; +import { + render, + screen, + waitForElementToBeRemoved, +} from '@testing-library/react-native'; test('waiting for an Banana to be removed', async () => { render(); @@ -585,13 +587,9 @@ If you receive warnings related to `act()` function consult our [Undestanding Ac Defined as: ```jsx -function within( - element: ReactTestInstance -): Queries {} +function within(element: ReactTestInstance): Queries {} -function getQueriesForElement( - element: ReactTestInstance -): Queries {} +function getQueriesForElement(element: ReactTestInstance): Queries {} ``` `within` (also available as `getQueriesForElement` alias) performs [queries](./Queries.md) scoped to given element. @@ -775,7 +773,6 @@ it('should use context value', () => { }); ``` - ## Configuration ### `configure` @@ -787,8 +784,9 @@ type Config = { defaultDebugOptions: Partial; }; -function configure(options: Partial) {} +function configure(options: Partial) {} ``` + #### `asyncUtilTimeout` option Default timeout, in ms, for async helper functions (`waitFor`, `waitForElementToBeRemoved`) and `findBy*` queries. Defaults to 1000 ms. @@ -807,10 +805,10 @@ Default [debug options](#debug) to be used when calling `debug()`. These default function resetToDefaults() {} ``` - ### Environment variables #### `RNTL_SKIP_AUTO_CLEANUP` + Set to `true` to disable automatic `cleanup()` after each test. It works the same as importing `react-native-testing-library/dont-cleanup-after-each` or using `react-native-testing-library/pure`. ```shell @@ -818,6 +816,7 @@ $ RNTL_SKIP_AUTO_CLEANUP=true jest ``` #### `RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS` + Set to `true` to disable auto-detection of fake timers. This might be useful in rare cases when you want to use non-Jest fake timers. See [issue #886](https://github.com/callstack/react-native-testing-library/issues/886) for more details. ```shell @@ -829,23 +828,22 @@ $ RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS=true jest ### `isInaccessible` ```ts -function isInaccessible( - element: ReactTestInstance | null -): boolean {} +function isInaccessible(element: ReactTestInstance | null): boolean {} ``` -Checks if given element is hidden from assistive technology, e.g. screen readers. +Checks if given element is hidden from assistive technology, e.g. screen readers. :::note -Like [`isInaccessible`](https://testing-library.com/docs/dom-testing-library/api-accessibility/#isinaccessible) function from [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro) this function considers both accessibility elements and presentational elements (regular `View`s) to be accessible, unless they are hidden in terms of host platform. +Like [`isInaccessible`](https://testing-library.com/docs/dom-testing-library/api-accessibility/#isinaccessible) function from [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro) this function considers both accessibility elements and presentational elements (regular `View`s) to be accessible, unless they are hidden in terms of host platform. This covers only part of [ARIA notion of Accessiblity Tree](https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion), as ARIA excludes both hidden and presentational elements from the Accessibility Tree. ::: -For the scope of this function, element is inaccessible when it, or any of its ancestors, meets any of the following conditions: - * it has `display: none` style - * it has [`accessibilityElementsHidden`](https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios) prop set to `true` - * it has [`importantForAccessibility`](https://reactnative.dev/docs/accessibility#importantforaccessibility-android) prop set to `no-hide-descendants` - * it has sibling host element with [`accessibilityViewIsModal`](https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios) prop set to `true` - +For the scope of this function, element is inaccessible when it, or any of its ancestors, meets any of the following conditions: + +- it has `display: none` style +- it has [`accessibilityElementsHidden`](https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios) prop set to `true` +- it has [`importantForAccessibility`](https://reactnative.dev/docs/accessibility#importantforaccessibility-android) prop set to `no-hide-descendants` +- it has sibling host element with [`accessibilityViewIsModal`](https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios) prop set to `true` + Specifying `accessible={false}`, `accessiblityRole="none"`, or `importantForAccessibility="no"` props does not cause the element to become inaccessible. diff --git a/website/docs/EslintPLluginTestingLibrary.md b/website/docs/EslintPLluginTestingLibrary.md index 08cfe4746..0a75d94ee 100644 --- a/website/docs/EslintPLluginTestingLibrary.md +++ b/website/docs/EslintPLluginTestingLibrary.md @@ -3,7 +3,6 @@ id: eslint-plugin-testing-library title: ESLint Plugin Testing Library Compatibility --- - Most of the rules of the [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library) are compatible with this library except the following: - [prefer-user-event](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-user-event.md): `userEvent` requires a DOM environment so it is not compatible with this library @@ -26,4 +25,4 @@ To get the rule [consistent-data-testid](https://github.com/testing-library/esli } ] } -``` \ No newline at end of file +``` diff --git a/website/docs/FAQ.md b/website/docs/FAQ.md index 96001a5bc..bff9d29d6 100644 --- a/website/docs/FAQ.md +++ b/website/docs/FAQ.md @@ -11,7 +11,7 @@ title: FAQ React Native Testing Library does not provide a full React Native runtime since that would require running on physical device or iOS simulator/Android emulator to provision the underlying OS and platform APIs. -Instead of using React Native renderer, it simulates only the JavaScript part of its runtime by +Instead of using React Native renderer, it simulates only the JavaScript part of its runtime by using [React Test Renderer](https://reactjs.org/docs/test-renderer.html) while providing queries and `fireEvent` APIs that mimick certain behaviors from the real runtime. diff --git a/website/docs/GettingStarted.md b/website/docs/GettingStarted.md index 2110ec98c..6391ba9e0 100644 --- a/website/docs/GettingStarted.md +++ b/website/docs/GettingStarted.md @@ -91,8 +91,8 @@ test('form submits two answers', () => { fireEvent.press(screen.getByText('Submit')); expect(mockFn).toBeCalledWith({ - '1': { q: 'q1', a: 'a1' }, - '2': { q: 'q2', a: 'a2' }, + 1: { q: 'q1', a: 'a1' }, + 2: { q: 'q2', a: 'a2' }, }); }); ``` diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 615891399..f22ec9918 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -312,22 +312,26 @@ const element = screen.getByA11yState({ disabled: true }); #### Default state for: `disabled`, `selected`, and `busy` keys -Passing `false` matcher value will match both elements with explicit `false` state value and without explicit state value. +Passing `false` matcher value will match both elements with explicit `false` state value and without explicit state value. For instance, `getByA11yState({ disabled: false })` will match elements with following props: -* `accessibilityState={{ disabled: false, ... }}` -* no `disabled` key under `accessibilityState` prop, e.g. `accessibilityState={{}}` -* no `accessibilityState` prop at all + +- `accessibilityState={{ disabled: false, ... }}` +- no `disabled` key under `accessibilityState` prop, e.g. `accessibilityState={{}}` +- no `accessibilityState` prop at all #### Default state for: `checked` and `expanded` keys + Passing `false` matcher value will only match elements with explicit `false` state value. For instance, `getByA11yState({ checked: false })` will only match elements with: -* `accessibilityState={{ checked: false, ... }}` + +- `accessibilityState={{ checked: false, ... }}` but will not match elements with following props: -* no `checked` key under `accessibilityState` prop, e.g. `accessibilityState={{}}` -* no `accessibilityState` prop at all + +- no `checked` key under `accessibilityState` prop, e.g. `accessibilityState={{}}` +- no `accessibilityState` prop at all The difference in handling default values is made to reflect observed accessibility behaviour on iOS and Android platforms. ::: @@ -361,7 +365,7 @@ const element = screen.getByA11yValue({ min: 40 }); ### `hidden` 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 `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. You can configure the default value with the [`configure` function](API.md#configure). @@ -370,14 +374,18 @@ An element is considered to be hidden from accessibility based on [`isInaccessib **Examples** ```tsx -render(I am hidden from accessibility); +render(I am hidden from accessibility); // Ignore hidden elements -expect(screen.queryByText("I am hidden from accessibility", { hidden: false })).toBeFalsy(); +expect( + screen.queryByText('I am hidden from accessibility', { hidden: 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", { hidden: true})).toBeTruthy(); +expect(screen.getByText('I am hidden from accessibility')).toBeTruthy(); // Defaults to hidden: true for now +expect( + screen.getByText('I am hidden from accessibility', { hidden: true }) +).toBeTruthy(); ``` ## TextMatch diff --git a/website/docs/TestingEnvironment.md b/website/docs/TestingEnvironment.md index 155c29420..5a5d09a4f 100644 --- a/website/docs/TestingEnvironment.md +++ b/website/docs/TestingEnvironment.md @@ -20,7 +20,7 @@ When you run your tests in React Native Testing Library, somewhat contrary to wh ### React Test Renderer -Instead, RNTL uses React Test Renderer which is a specialised renderer that allows rendering to pure JavaScript objects without access to mobile OS, and that can run in a Node.js environment using Jest (or any other JavaScript test runner). +Instead, RNTL uses React Test Renderer which is a specialised renderer that allows rendering to pure JavaScript objects without access to mobile OS, and that can run in a Node.js environment using Jest (or any other JavaScript test runner). Using React Test Renderer has pros and cons. @@ -137,7 +137,7 @@ You should avoid navigating over element tree, as this makes your testing code f When navigating a tree of react elements using `parent` or `children` props of a `ReactTestInstance` element, you will encounter both host and composite elements. You should be careful when navigating the element tree, as the tree structure for 3rd party components and change independently from your code and cause unexpected test failures. -Inside RNTL we have various tree navigation helpers: `getHostParent`, `getHostChildren`, etc. These are intentionally not exported as using them is not a recommended practice. +Inside RNTL we have various tree navigation helpers: `getHostParent`, `getHostChildren`, etc. These are intentionally not exported as using them is not a recommended practice. ### Queries diff --git a/website/docs/Troubleshooting.md b/website/docs/Troubleshooting.md index 2647b664b..1dde5c4b2 100644 --- a/website/docs/Troubleshooting.md +++ b/website/docs/Troubleshooting.md @@ -8,6 +8,7 @@ This guide describes common issues found by users when integrating React Native ## Matching React Native, React & React Test Renderer versions Check that you have matching versions of core dependencies: + - React Native - React - React Test Renderer @@ -19,6 +20,7 @@ React Test Renderer usually has same major & minor version as React, as they are Related issues: [#1061](https://github.com/callstack/react-native-testing-library/issues/1061), [#938](https://github.com/callstack/react-native-testing-library/issues/938), [#920](https://github.com/callstack/react-native-testing-library/issues/920) Errors that might indicate that you are facing this issue: + - `TypeError: Cannot read property 'current' of undefined` when calling `render()` - `TypeError: Cannot read property 'isBatchingLegacy' of undefined` when calling `render()` @@ -32,8 +34,8 @@ In case something does not work in your setup you can refer to this repository f When writing tests you may encounter warnings connected with `act()` function. There are two kinds of these warnings: -* sync `act()` warning - `Warning: An update to Component inside a test was not wrapped in act(...)` -* async `act()` warning - `Warning: You called act(async () => ...) without await` +- sync `act()` warning - `Warning: An update to Component inside a test was not wrapped in act(...)` +- async `act()` warning - `Warning: You called act(async () => ...) without await` You can read more about `act()` function in our [understanding `act` function guide](https://callstack.github.io/react-native-testing-library/docs/understanding-act). From dbccaf524f0f2e078b8e9c3727df9554ee521de4 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Fri, 4 Nov 2022 22:39:03 +0100 Subject: [PATCH 32/32] docs: add hidden option to queries doc --- website/docs/Queries.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/website/docs/Queries.md b/website/docs/Queries.md index f22ec9918..430311c6f 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -101,6 +101,7 @@ getByText( options?: { exact?: boolean; normalizer?: (text: string) => string; + hidden?: boolean; } ): ReactTestInstance; ``` @@ -126,6 +127,7 @@ getByPlaceholderText( options?: { exact?: boolean; normalizer?: (text: string) => string; + hidden?: boolean; } ): ReactTestInstance; ``` @@ -149,6 +151,7 @@ getByDisplayValue( options?: { exact?: boolean; normalizer?: (text: string) => string; + hidden?: boolean; } ): ReactTestInstance; ``` @@ -172,6 +175,7 @@ getByTestId( options?: { exact?: boolean; normalizer?: (text: string) => string; + hidden?: boolean; } ): ReactTestInstance; ``` @@ -199,6 +203,7 @@ getByLabelText( options?: { exact?: boolean; normalizer?: (text: string) => string; + hidden?: boolean; } ): ReactTestInstance; ``` @@ -224,6 +229,7 @@ getByHintText( options?: { exact?: boolean; normalizer?: (text: string) => string; + hidden?: boolean; } ): ReactTestInstance; ``` @@ -248,13 +254,14 @@ Please consult [Apple guidelines on how `accessibilityHint` should be used](http ```ts getByRole( role: TextMatch, - option?: { + options?: { name?: TextMatch disabled?: boolean, selected?: boolean, checked?: boolean | 'mixed', busy?: boolean, expanded?: boolean, + hidden?: boolean; } ): ReactTestInstance; ``` @@ -295,6 +302,9 @@ getByA11yState( checked?: boolean | 'mixed', expanded?: boolean, busy?: boolean, + }, + options?: { + hidden?: boolean; } ): ReactTestInstance; ``` @@ -348,6 +358,9 @@ getByA11yValue( max?: number; now?: number; text?: string; + }, + options?: { + hidden?: boolean; } ): ReactTestInstance; ```