Skip to content

Commit 61359c7

Browse files
ryanjwesselryanjwessel
authored
feat: introduce ByLabelText, ByRole and ByHintText a11y aliases (#445)
* feat: Add alias accessibilityLabel queries to assist in migrating from @testing-library/react-native * feat: Add alias accessibilityHint queries to assist in migrating from @testing-library/react-native * feat: Add alias accessibilityRole queries to assist in migrating from @testing-library/react-native * feat: Add to A11yAPI types to include the newly-aliased queries for label, hint, and role * test: Add tests for newly-aliased label, hint, and role a11y queries * test: Add newly-alised a11y queries to the index typings test file * docs: Add query aliases for testing library migrators to Queries documentation * test: Consolidate aliased query tests into shared tests. FIXME's where there are errors * test: Update a11yAPI tests to assert referential equality for query aliases * refactor: apply Prettier formatting to a11yAPI test file * fix: address typos in CONTRIBUTING.md * test: Separate referential quality assertion tests for query aliases into their own tests Co-authored-by: Ryan Wessel <rwessel@dataminr.com>
1 parent 1537de3 commit 61359c7

File tree

6 files changed

+245
-25
lines changed

6 files changed

+245
-25
lines changed

‎CONTRIBUTING.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The core team works directly on GitHub and all work is public.
1313
> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
1414
1515
1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
16-
2. Run `yarn` to setup the developement environment.
16+
2. Run `yarn` to setup the development environment.
1717
3. Do the changes you want and test them out in the example app before sending a pull request.
1818

1919
### Commit message convention
@@ -32,7 +32,7 @@ Our pre-commit hooks verify that your commit message matches this format when co
3232

3333
### Linting and tests
3434

35-
We use `flow` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when commiting. You can also run the following commands manually:
35+
We use `flow` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when committing. You can also run the following commands manually:
3636

3737
- `yarn flow`: run flow on all files.
3838
- `yarn lint`: run eslint and prettier.

‎src/__tests__/a11yAPI.test.js‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ test('getByA11yLabel, queryByA11yLabel, findByA11yLabel', async () => {
9090
);
9191
});
9292

93-
test('getAllByA11yLabel, queryAllByA11yLabel', async () => {
93+
test('getAllByA11yLabel, queryAllByA11yLabel, findAllByA11yLabel', async () => {
9494
const { getAllByA11yLabel, queryAllByA11yLabel, findAllByA11yLabel } = render(
9595
<Section />
9696
);
@@ -134,7 +134,7 @@ test('getByA11yHint, queryByA11yHint, findByA11yHint', async () => {
134134
);
135135
});
136136

137-
test('getAllByA11yHint, queryAllByA11yHint', async () => {
137+
test('getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint', async () => {
138138
const { getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint } = render(
139139
<Section />
140140
);
@@ -345,3 +345,78 @@ test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => {
345345
);
346346
await expect(findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2);
347347
});
348+
349+
test('a11y label queries have aliases', () => {
350+
const {
351+
getByA11yLabel,
352+
getByLabelText,
353+
queryByA11yLabel,
354+
queryByLabelText,
355+
findByA11yLabel,
356+
findByLabelText,
357+
getAllByA11yLabel,
358+
getAllByLabelText,
359+
queryAllByA11yLabel,
360+
queryAllByLabelText,
361+
findAllByA11yLabel,
362+
findAllByLabelText,
363+
} = render(<Section />);
364+
365+
// Assert that query aliases are referencing the same function
366+
expect(getByA11yLabel).toBe(getByLabelText);
367+
expect(queryByA11yLabel).toBe(queryByLabelText);
368+
expect(findByA11yLabel).toBe(findByLabelText);
369+
expect(getAllByA11yLabel).toBe(getAllByLabelText);
370+
expect(queryAllByA11yLabel).toBe(queryAllByLabelText);
371+
expect(findAllByA11yLabel).toBe(findAllByLabelText);
372+
});
373+
374+
test('a11y hint queries have aliases', () => {
375+
const {
376+
getByA11yHint,
377+
getByHintText,
378+
queryByA11yHint,
379+
queryByHintText,
380+
findByA11yHint,
381+
findByHintText,
382+
getAllByA11yHint,
383+
getAllByHintText,
384+
queryAllByA11yHint,
385+
queryAllByHintText,
386+
findAllByA11yHint,
387+
findAllByHintText,
388+
} = render(<Section />);
389+
390+
// Assert that query aliases are referencing the same function
391+
expect(getByA11yHint).toBe(getByHintText);
392+
expect(queryByA11yHint).toBe(queryByHintText);
393+
expect(findByA11yHint).toBe(findByHintText);
394+
expect(getAllByA11yHint).toBe(getAllByHintText);
395+
expect(queryAllByA11yHint).toBe(queryAllByHintText);
396+
expect(findAllByA11yHint).toBe(findAllByHintText);
397+
});
398+
399+
test('a11y role queries have aliases', () => {
400+
const {
401+
getByA11yRole,
402+
getByRole,
403+
queryByA11yRole,
404+
queryByRole,
405+
findByA11yRole,
406+
findByRole,
407+
getAllByA11yRole,
408+
getAllByRole,
409+
queryAllByA11yRole,
410+
queryAllByRole,
411+
findAllByA11yRole,
412+
findAllByRole,
413+
} = render(<Section />);
414+
415+
// Assert that query aliases are referencing the same function
416+
expect(getByA11yRole).toBe(getByRole);
417+
expect(queryByA11yRole).toBe(queryByRole);
418+
expect(findByA11yRole).toBe(findByRole);
419+
expect(getAllByA11yRole).toBe(getAllByRole);
420+
expect(queryAllByA11yRole).toBe(queryAllByRole);
421+
expect(findAllByA11yRole).toBe(findAllByRole);
422+
});

‎src/helpers/a11yAPI.js‎

Lines changed: 84 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,45 @@ type FindAllReturn = Promise<GetAllReturn>;
1313
type A11yAPI = {|
1414
// Label
1515
getByA11yLabel: (string | RegExp) => GetReturn,
16+
getByLabelText: (string | RegExp) => GetReturn,
1617
getAllByA11yLabel: (string | RegExp) => GetAllReturn,
18+
getAllByLabelText: (string | RegExp) => GetAllReturn,
1719
queryByA11yLabel: (string | RegExp) => QueryReturn,
20+
queryByLabelText: (string | RegExp) => QueryReturn,
1821
queryAllByA11yLabel: (string | RegExp) => QueryAllReturn,
22+
queryAllByLabelText: (string | RegExp) => QueryAllReturn,
1923
findByA11yLabel: (string | RegExp, ?WaitForOptions) => FindReturn,
24+
findByLabelText: (string | RegExp, ?WaitForOptions) => FindReturn,
2025
findAllByA11yLabel: (string | RegExp, ?WaitForOptions) => FindAllReturn,
26+
findAllByLabelText: (string | RegExp, ?WaitForOptions) => FindAllReturn,
2127

2228
// Hint
2329
getByA11yHint: (string | RegExp) => GetReturn,
30+
getByHintText: (string | RegExp) => GetReturn,
2431
getAllByA11yHint: (string | RegExp) => GetAllReturn,
32+
getAllByHintText: (string | RegExp) => GetAllReturn,
2533
queryByA11yHint: (string | RegExp) => QueryReturn,
34+
queryByHintText: (string | RegExp) => QueryReturn,
2635
queryAllByA11yHint: (string | RegExp) => QueryAllReturn,
36+
queryAllByHintText: (string | RegExp) => QueryAllReturn,
2737
findByA11yHint: (string | RegExp, ?WaitForOptions) => FindReturn,
38+
findByHintText: (string | RegExp, ?WaitForOptions) => FindReturn,
2839
findAllByA11yHint: (string | RegExp, ?WaitForOptions) => FindAllReturn,
40+
findAllByHintText: (string | RegExp, ?WaitForOptions) => FindAllReturn,
2941

3042
// Role
3143
getByA11yRole: (A11yRole | RegExp) => GetReturn,
44+
getByRole: (A11yRole | RegExp) => GetReturn,
3245
getAllByA11yRole: (A11yRole | RegExp) => GetAllReturn,
46+
getAllByRole: (A11yRole | RegExp) => GetAllReturn,
3347
queryByA11yRole: (A11yRole | RegExp) => QueryReturn,
48+
queryByRole: (A11yRole | RegExp) => QueryReturn,
3449
queryAllByA11yRole: (A11yRole | RegExp) => QueryAllReturn,
50+
queryAllByRole: (A11yRole | RegExp) => QueryAllReturn,
3551
findByA11yRole: (A11yRole, ?WaitForOptions) => FindReturn,
52+
findByRole: (A11yRole, ?WaitForOptions) => FindReturn,
3653
findAllByA11yRole: (A11yRole, ?WaitForOptions) => FindAllReturn,
54+
findAllByRole: (A11yRole, ?WaitForOptions) => FindAllReturn,
3755

3856
// States
3957
getByA11yStates: (A11yStates | Array<A11yStates>) => GetReturn,
@@ -103,36 +121,84 @@ const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
103121
...makeQuery(
104122
'accessibilityLabel',
105123
{
106-
getBy: ['getByA11yLabel', 'getByAccessibilityLabel'],
107-
getAllBy: ['getAllByA11yLabel', 'getAllByAccessibilityLabel'],
108-
queryBy: ['queryByA11yLabel', 'queryByAccessibilityLabel'],
109-
queryAllBy: ['queryAllByA11yLabel', 'queryAllByAccessibilityLabel'],
110-
findBy: ['findByA11yLabel', 'findByAccessibilityLabel'],
111-
findAllBy: ['findAllByA11yLabel', 'findAllByAccessibilityLabel'],
124+
getBy: ['getByA11yLabel', 'getByAccessibilityLabel', 'getByLabelText'],
125+
getAllBy: [
126+
'getAllByA11yLabel',
127+
'getAllByAccessibilityLabel',
128+
'getAllByLabelText',
129+
],
130+
queryBy: [
131+
'queryByA11yLabel',
132+
'queryByAccessibilityLabel',
133+
'queryByLabelText',
134+
],
135+
queryAllBy: [
136+
'queryAllByA11yLabel',
137+
'queryAllByAccessibilityLabel',
138+
'queryAllByLabelText',
139+
],
140+
findBy: [
141+
'findByA11yLabel',
142+
'findByAccessibilityLabel',
143+
'findByLabelText',
144+
],
145+
findAllBy: [
146+
'findAllByA11yLabel',
147+
'findAllByAccessibilityLabel',
148+
'findAllByLabelText',
149+
],
112150
},
113151
matchStringValue
114152
)(instance),
115153
...makeQuery(
116154
'accessibilityHint',
117155
{
118-
getBy: ['getByA11yHint', 'getByAccessibilityHint'],
119-
getAllBy: ['getAllByA11yHint', 'getAllByAccessibilityHint'],
120-
queryBy: ['queryByA11yHint', 'queryByAccessibilityHint'],
121-
queryAllBy: ['queryAllByA11yHint', 'queryAllByAccessibilityHint'],
122-
findBy: ['findByA11yHint', 'findByAccessibilityHint'],
123-
findAllBy: ['findAllByA11yHint', 'findAllByAccessibilityHint'],
156+
getBy: ['getByA11yHint', 'getByAccessibilityHint', 'getByHintText'],
157+
getAllBy: [
158+
'getAllByA11yHint',
159+
'getAllByAccessibilityHint',
160+
'getAllByHintText',
161+
],
162+
queryBy: [
163+
'queryByA11yHint',
164+
'queryByAccessibilityHint',
165+
'queryByHintText',
166+
],
167+
queryAllBy: [
168+
'queryAllByA11yHint',
169+
'queryAllByAccessibilityHint',
170+
'queryAllByHintText',
171+
],
172+
findBy: ['findByA11yHint', 'findByAccessibilityHint', 'findByHintText'],
173+
findAllBy: [
174+
'findAllByA11yHint',
175+
'findAllByAccessibilityHint',
176+
'findAllByHintText',
177+
],
124178
},
125179
matchStringValue
126180
)(instance),
127181
...makeQuery(
128182
'accessibilityRole',
129183
{
130-
getBy: ['getByA11yRole', 'getByAccessibilityRole'],
131-
getAllBy: ['getAllByA11yRole', 'getAllByAccessibilityRole'],
132-
queryBy: ['queryByA11yRole', 'queryByAccessibilityRole'],
133-
queryAllBy: ['queryAllByA11yRole', 'queryAllByAccessibilityRole'],
134-
findBy: ['findByA11yRole', 'findByAccessibilityRole'],
135-
findAllBy: ['findAllByA11yRole', 'findAllByAccessibilityRole'],
184+
getBy: ['getByA11yRole', 'getByAccessibilityRole', 'getByRole'],
185+
getAllBy: [
186+
'getAllByA11yRole',
187+
'getAllByAccessibilityRole',
188+
'getAllByRole',
189+
],
190+
queryBy: ['queryByA11yRole', 'queryByAccessibilityRole', 'queryByRole'],
191+
queryAllBy: [
192+
'queryAllByA11yRole',
193+
'queryAllByAccessibilityRole',
194+
'queryAllByRole',
195+
],
196+
findBy: ['findByA11yRole', 'findByAccessibilityRole', 'findByRole'],
197+
findAllBy: [
198+
'findAllByA11yRole',
199+
'findAllByAccessibilityRole',
200+
'findAllByRole',
201+
],
136202
},
137203
matchStringValue
138204
)(instance),

0 commit comments

Comments
 (0)