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 <[email protected]>

Author: ryanjwessel

CONTRIBUTING.md

@@ -13,7 +13,7 @@ The core team works directly on GitHub and all work is public.
 > **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).
 
 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/)).
-2. Run `yarn` to setup the developement environment.
+2. Run `yarn` to setup the development environment.
 3. Do the changes you want and test them out in the example app before sending a pull request.
 
 ### Commit message convention
@@ -32,7 +32,7 @@ Our pre-commit hooks verify that your commit message matches this format when co
 
 ### Linting and tests
 
-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:
+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:
 
 - `yarn flow`: run flow on all files.
 - `yarn lint`: run eslint and prettier.

src/__tests__/a11yAPI.test.js

@@ -90,7 +90,7 @@ test('getByA11yLabel, queryByA11yLabel, findByA11yLabel', async () => {
   );
 });
 
-test('getAllByA11yLabel, queryAllByA11yLabel', async () => {
+test('getAllByA11yLabel, queryAllByA11yLabel, findAllByA11yLabel', async () => {
   const { getAllByA11yLabel, queryAllByA11yLabel, findAllByA11yLabel } = render(
     <Section />
   );
@@ -134,7 +134,7 @@ test('getByA11yHint, queryByA11yHint, findByA11yHint', async () => {
   );
 });
 
-test('getAllByA11yHint, queryAllByA11yHint', async () => {
+test('getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint', async () => {
   const { getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint } = render(
     <Section />
   );
@@ -345,3 +345,78 @@ test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => {
   );
   await expect(findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2);
 });
+
+test('a11y label queries have aliases', () => {
+  const {
+    getByA11yLabel,
+    getByLabelText,
+    queryByA11yLabel,
+    queryByLabelText,
+    findByA11yLabel,
+    findByLabelText,
+    getAllByA11yLabel,
+    getAllByLabelText,
+    queryAllByA11yLabel,
+    queryAllByLabelText,
+    findAllByA11yLabel,
+    findAllByLabelText,
+  } = render(<Section />);
+
+  // Assert that query aliases are referencing the same function
+  expect(getByA11yLabel).toBe(getByLabelText);
+  expect(queryByA11yLabel).toBe(queryByLabelText);
+  expect(findByA11yLabel).toBe(findByLabelText);
+  expect(getAllByA11yLabel).toBe(getAllByLabelText);
+  expect(queryAllByA11yLabel).toBe(queryAllByLabelText);
+  expect(findAllByA11yLabel).toBe(findAllByLabelText);
+});
+
+test('a11y hint queries have aliases', () => {
+  const {
+    getByA11yHint,
+    getByHintText,
+    queryByA11yHint,
+    queryByHintText,
+    findByA11yHint,
+    findByHintText,
+    getAllByA11yHint,
+    getAllByHintText,
+    queryAllByA11yHint,
+    queryAllByHintText,
+    findAllByA11yHint,
+    findAllByHintText,
+  } = render(<Section />);
+
+  // Assert that query aliases are referencing the same function
+  expect(getByA11yHint).toBe(getByHintText);
+  expect(queryByA11yHint).toBe(queryByHintText);
+  expect(findByA11yHint).toBe(findByHintText);
+  expect(getAllByA11yHint).toBe(getAllByHintText);
+  expect(queryAllByA11yHint).toBe(queryAllByHintText);
+  expect(findAllByA11yHint).toBe(findAllByHintText);
+});
+
+test('a11y role queries have aliases', () => {
+  const {
+    getByA11yRole,
+    getByRole,
+    queryByA11yRole,
+    queryByRole,
+    findByA11yRole,
+    findByRole,
+    getAllByA11yRole,
+    getAllByRole,
+    queryAllByA11yRole,
+    queryAllByRole,
+    findAllByA11yRole,
+    findAllByRole,
+  } = render(<Section />);
+
+  // Assert that query aliases are referencing the same function
+  expect(getByA11yRole).toBe(getByRole);
+  expect(queryByA11yRole).toBe(queryByRole);
+  expect(findByA11yRole).toBe(findByRole);
+  expect(getAllByA11yRole).toBe(getAllByRole);
+  expect(queryAllByA11yRole).toBe(queryAllByRole);
+  expect(findAllByA11yRole).toBe(findAllByRole);
+});

src/helpers/a11yAPI.js

@@ -13,27 +13,45 @@ type FindAllReturn = Promise<GetAllReturn>;
 type A11yAPI = {|
   // Label
   getByA11yLabel: (string | RegExp) => GetReturn,
+  getByLabelText: (string | RegExp) => GetReturn,
   getAllByA11yLabel: (string | RegExp) => GetAllReturn,
+  getAllByLabelText: (string | RegExp) => GetAllReturn,
   queryByA11yLabel: (string | RegExp) => QueryReturn,
+  queryByLabelText: (string | RegExp) => QueryReturn,
   queryAllByA11yLabel: (string | RegExp) => QueryAllReturn,
+  queryAllByLabelText: (string | RegExp) => QueryAllReturn,
   findByA11yLabel: (string | RegExp, ?WaitForOptions) => FindReturn,
+  findByLabelText: (string | RegExp, ?WaitForOptions) => FindReturn,
   findAllByA11yLabel: (string | RegExp, ?WaitForOptions) => FindAllReturn,
+  findAllByLabelText: (string | RegExp, ?WaitForOptions) => FindAllReturn,
 
   // Hint
   getByA11yHint: (string | RegExp) => GetReturn,
+  getByHintText: (string | RegExp) => GetReturn,
   getAllByA11yHint: (string | RegExp) => GetAllReturn,
+  getAllByHintText: (string | RegExp) => GetAllReturn,
   queryByA11yHint: (string | RegExp) => QueryReturn,
+  queryByHintText: (string | RegExp) => QueryReturn,
   queryAllByA11yHint: (string | RegExp) => QueryAllReturn,
+  queryAllByHintText: (string | RegExp) => QueryAllReturn,
   findByA11yHint: (string | RegExp, ?WaitForOptions) => FindReturn,
+  findByHintText: (string | RegExp, ?WaitForOptions) => FindReturn,
   findAllByA11yHint: (string | RegExp, ?WaitForOptions) => FindAllReturn,
+  findAllByHintText: (string | RegExp, ?WaitForOptions) => FindAllReturn,
 
   // Role
   getByA11yRole: (A11yRole | RegExp) => GetReturn,
+  getByRole: (A11yRole | RegExp) => GetReturn,
   getAllByA11yRole: (A11yRole | RegExp) => GetAllReturn,
+  getAllByRole: (A11yRole | RegExp) => GetAllReturn,
   queryByA11yRole: (A11yRole | RegExp) => QueryReturn,
+  queryByRole: (A11yRole | RegExp) => QueryReturn,
   queryAllByA11yRole: (A11yRole | RegExp) => QueryAllReturn,
+  queryAllByRole: (A11yRole | RegExp) => QueryAllReturn,
   findByA11yRole: (A11yRole, ?WaitForOptions) => FindReturn,
+  findByRole: (A11yRole, ?WaitForOptions) => FindReturn,
   findAllByA11yRole: (A11yRole, ?WaitForOptions) => FindAllReturn,
+  findAllByRole: (A11yRole, ?WaitForOptions) => FindAllReturn,
 
   // States
   getByA11yStates: (A11yStates | Array<A11yStates>) => GetReturn,
@@ -103,36 +121,84 @@ const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
     ...makeQuery(
       'accessibilityLabel',
       {
-        getBy: ['getByA11yLabel', 'getByAccessibilityLabel'],
-        getAllBy: ['getAllByA11yLabel', 'getAllByAccessibilityLabel'],
-        queryBy: ['queryByA11yLabel', 'queryByAccessibilityLabel'],
-        queryAllBy: ['queryAllByA11yLabel', 'queryAllByAccessibilityLabel'],
-        findBy: ['findByA11yLabel', 'findByAccessibilityLabel'],
-        findAllBy: ['findAllByA11yLabel', 'findAllByAccessibilityLabel'],
+        getBy: ['getByA11yLabel', 'getByAccessibilityLabel', 'getByLabelText'],
+        getAllBy: [
+          'getAllByA11yLabel',
+          'getAllByAccessibilityLabel',
+          'getAllByLabelText',
+        ],
+        queryBy: [
+          'queryByA11yLabel',
+          'queryByAccessibilityLabel',
+          'queryByLabelText',
+        ],
+        queryAllBy: [
+          'queryAllByA11yLabel',
+          'queryAllByAccessibilityLabel',
+          'queryAllByLabelText',
+        ],
+        findBy: [
+          'findByA11yLabel',
+          'findByAccessibilityLabel',
+          'findByLabelText',
+        ],
+        findAllBy: [
+          'findAllByA11yLabel',
+          'findAllByAccessibilityLabel',
+          'findAllByLabelText',
+        ],
       },
       matchStringValue
     )(instance),
     ...makeQuery(
       'accessibilityHint',
       {
-        getBy: ['getByA11yHint', 'getByAccessibilityHint'],
-        getAllBy: ['getAllByA11yHint', 'getAllByAccessibilityHint'],
-        queryBy: ['queryByA11yHint', 'queryByAccessibilityHint'],
-        queryAllBy: ['queryAllByA11yHint', 'queryAllByAccessibilityHint'],
-        findBy: ['findByA11yHint', 'findByAccessibilityHint'],
-        findAllBy: ['findAllByA11yHint', 'findAllByAccessibilityHint'],
+        getBy: ['getByA11yHint', 'getByAccessibilityHint', 'getByHintText'],
+        getAllBy: [
+          'getAllByA11yHint',
+          'getAllByAccessibilityHint',
+          'getAllByHintText',
+        ],
+        queryBy: [
+          'queryByA11yHint',
+          'queryByAccessibilityHint',
+          'queryByHintText',
+        ],
+        queryAllBy: [
+          'queryAllByA11yHint',
+          'queryAllByAccessibilityHint',
+          'queryAllByHintText',
+        ],
+        findBy: ['findByA11yHint', 'findByAccessibilityHint', 'findByHintText'],
+        findAllBy: [
+          'findAllByA11yHint',
+          'findAllByAccessibilityHint',
+          'findAllByHintText',
+        ],
       },
       matchStringValue
     )(instance),
     ...makeQuery(
       'accessibilityRole',
       {
-        getBy: ['getByA11yRole', 'getByAccessibilityRole'],
-        getAllBy: ['getAllByA11yRole', 'getAllByAccessibilityRole'],
-        queryBy: ['queryByA11yRole', 'queryByAccessibilityRole'],
-        queryAllBy: ['queryAllByA11yRole', 'queryAllByAccessibilityRole'],
-        findBy: ['findByA11yRole', 'findByAccessibilityRole'],
-        findAllBy: ['findAllByA11yRole', 'findAllByAccessibilityRole'],
+        getBy: ['getByA11yRole', 'getByAccessibilityRole', 'getByRole'],
+        getAllBy: [
+          'getAllByA11yRole',
+          'getAllByAccessibilityRole',
+          'getAllByRole',
+        ],
+        queryBy: ['queryByA11yRole', 'queryByAccessibilityRole', 'queryByRole'],
+        queryAllBy: [
+          'queryAllByA11yRole',
+          'queryAllByAccessibilityRole',
+          'queryAllByRole',
+        ],
+        findBy: ['findByA11yRole', 'findByAccessibilityRole', 'findByRole'],
+        findAllBy: [
+          'findAllByA11yRole',
+          'findAllByAccessibilityRole',
+          'findAllByRole',
+        ],
       },
       matchStringValue
     )(instance),