Organise a11y queries by predicate (#977)

* refactor: make Options generic type optionnal in queries

* refactor: extract byLabelText queries and its tests

* refactor: extract byA11yHint queries and its tests

* refactor: extract byRole queries and its tests

* refactor: extract byA11yState queries and its tests

* refactor: extract byA11yValue queries and its tests

* refactor: extract byA11yStates queries and its tests

* refactor: harmonize component declaration in queries testsx

* refactor: simplify error helpers in queries tests

* refactor: make error helpers more explicit

* chore: remove now unused makeA11yQueries

* refactor: rename AccessibilityStateKeyQueryParam to AccessibilityStateKeys

* refactor: rename param in a11yStates

* refactor: simplify matchObject

* refactor: fix namings in labelText

* refactor: fix namings in a11yHint

* refactor: fix queryAll namings'

* refactor: fix some namings in a11yState

* refactor: fix some namings in role

* refactor: fix some namings in a11yValue

* refactor: extract matchStringValue

* refactor: extract matchObject

* refactor: extract matchArrayValue

* test: add tests for the matchers

* refactor: simplify matchArrayValue to make it more explicit

* refactor: reorder imports and object keys

* refactor: update types

* refactor: small tweaks

* refactor: tweaks

* refactor: clarify matcher naming

* refactor: add missing aliases

* chore: fix ci timeout

* chore: revert jest timeout increase

* chore: revert timeout increase

* chore: fix ci tests

* chore: re-enable disabled tests

* chore: reduce jest paralelizaiton

* chore: ci tweaks

Co-authored-by: Maciej Jastrzebski <mdjastrzebski@gmail.com>

Author: MattAgn

.circleci/config.yml

@@ -54,7 +54,7 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/react-native-testing-library
-      - run: yarn test
+      - run: yarn test:ci
       - store_artifacts:
           path: coverage
           destination: coverage

examples/reactnavigation/jest-setup.js

@@ -11,4 +11,4 @@ jest.mock('react-native-reanimated', () => {
 });
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

jestSetup.js

@@ -0,0 +1 @@
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package.json

@@ -68,6 +68,7 @@
   "scripts": {
     "clean": "del build",
     "test": "jest",
+    "test:ci": "jest --maxWorkers=2",
     "typecheck": "tsc",
     "flow": "flow",
     "copy-flowtypes": "cp typings/index.flow.js build",
@@ -83,6 +84,9 @@
   },
   "jest": {
     "preset": "./jest-preset",
+    "setupFiles": [
+      "./jestSetup.js"
+    ],
     "testPathIgnorePatterns": [
       "timerUtils",
       "examples/"

src/helpers/matchers/__tests__/matchArrayValue.test.ts

@@ -0,0 +1,34 @@
+import { matchArrayProp } from '../matchArrayProp';
+
+test('returns true given 2 identical prop and matcher', () => {
+  expect(matchArrayProp(['banana'], ['banana'])).toEqual(true);
+  expect(matchArrayProp(['banana', 'apple'], ['banana', 'apple'])).toEqual(
+    true
+  );
+});
+
+test('returns true when the prop contains all the values of the matcher', () => {
+  expect(
+    matchArrayProp(['banana', 'apple', 'orange'], ['banana', 'orange'])
+  ).toEqual(true);
+});
+
+test('returns false when the prop does not contain all the values of the matcher', () => {
+  expect(
+    matchArrayProp(['banana', 'apple', 'orange'], ['banana', 'pear'])
+  ).toEqual(false);
+});
+
+test('returns false when prop is undefined', () => {
+  expect(matchArrayProp(undefined, ['banana'])).toEqual(false);
+});
+
+test('returns false when the matcher is an empty list', () => {
+  expect(matchArrayProp(['banana'], [])).toEqual(false);
+});
+
+test('returns false given 2 different prop and matchers', () => {
+  expect(matchArrayProp(['banana', 'apple'], ['banana', 'orange'])).toEqual(
+    false
+  );
+});

src/helpers/matchers/__tests__/matchObject.test.ts

@@ -0,0 +1,37 @@
+import { matchObjectProp } from '../matchObjectProp';
+
+test('returns true given 2 identical objects', () => {
+  expect(matchObjectProp({ fruit: 'banana' }, { fruit: 'banana' })).toEqual(
+    true
+  );
+  expect(
+    matchObjectProp(
+      { fruit: 'banana', isRipe: true },
+      { fruit: 'banana', isRipe: true }
+    )
+  ).toEqual(true);
+});
+
+test('returns false when one of the param is an empty object', () => {
+  expect(matchObjectProp({}, { fruit: 'banana' })).toEqual(false);
+  expect(matchObjectProp({ fruit: 'banana' }, {})).toEqual(false);
+});
+
+test('returns false given an undefined prop', () => {
+  expect(matchObjectProp(undefined, { fruit: 'banana' })).toEqual(false);
+});
+
+test('returns false given 2 different non empty objects', () => {
+  expect(matchObjectProp({ fruit: 'banana' }, { fruits: 'banana' })).toEqual(
+    false
+  );
+  expect(matchObjectProp({ fruit: 'banana' }, { fruit: 'orange' })).toEqual(
+    false
+  );
+  expect(
+    matchObjectProp(
+      { fruit: 'banana', isRipe: true },
+      { fruit: 'banana', ripe: true }
+    )
+  ).toEqual(false);
+});

src/helpers/matchers/__tests__/matchStringValue.test.ts

@@ -0,0 +1,15 @@
+import { matchStringProp } from '../matchStringProp';
+
+test.each`
+  prop         | matcher     | expectedResult
+  ${'hey'}     | ${'hey'}    | ${true}
+  ${'hey'}     | ${/hey/}    | ${true}
+  ${'hey'}     | ${'heyyyy'} | ${false}
+  ${'hey'}     | ${/heyyy/}  | ${false}
+  ${undefined} | ${'hey'}    | ${false}
+`(
+  'returns $expectedResult given prop $prop and matcher $matcher',
+  ({ prop, matcher, expectedResult }) => {
+    expect(matchStringProp(prop, matcher)).toEqual(expectedResult);
+  }
+);

src/helpers/matchers/matchArrayProp.ts

@@ -0,0 +1,21 @@
+/**
+ * Matches whether given array prop contains the given value, or all given values.
+ *
+ * @param prop - The array prop to match.
+ * @param matcher - The value or values to be included in the array.
+ * @returns Whether the array prop contains the given value, or all given values.
+ */
+export function matchArrayProp(
+  prop: Array<string> | undefined,
+  matcher: string | Array<string>
+): boolean {
+  if (!prop || matcher.length === 0) {
+    return false;
+  }
+
+  if (typeof matcher === 'string') {
+    return prop.includes(matcher);
+  }
+
+  return matcher.every((e) => prop.includes(e));
+}

src/helpers/matchers/matchObjectProp.ts

@@ -0,0 +1,25 @@
+/**
+ * check that each key value pair of the objects match
+ * BE CAREFUL it works only for 1 level deep key value pairs
+ * won't work for nested objects
+ */
+
+/**
+ * Matches whether given object prop contains all key/value pairs.
+ * @param prop - The object prop to match.
+ * @param matcher - The key/value pairs to be included in the object.
+ * @returns Whether the object prop contains all key/value pairs.
+ */
+export function matchObjectProp<T extends Record<string, unknown>>(
+  prop: T | undefined,
+  matcher: T
+): boolean {
+  if (!prop || Object.keys(matcher).length === 0) {
+    return false;
+  }
+
+  return (
+    Object.keys(prop).length !== 0 &&
+    Object.keys(matcher).every((key) => prop[key] === matcher[key])
+  );
+}

src/helpers/matchers/matchStringProp.ts

@@ -0,0 +1,23 @@
+import { TextMatch } from '../../matches';
+
+/**
+ * Matches the given string property again string or regex matcher.
+ *
+ * @param prop - The string prop to match.
+ * @param matcher - The string or regex to match.
+ * @returns - Whether the string prop matches the given string or regex.
+ */
+export function matchStringProp(
+  prop: string | undefined,
+  matcher: TextMatch
+): boolean {
+  if (!prop) {
+    return false;
+  }
+
+  if (typeof matcher === 'string') {
+    return prop === matcher;
+  }
+
+  return prop.match(matcher) != null;
+}