Finish refactoring queries using new query builder makeQueries (#654)

* refactor: extract method filterNodeByType

* feat: use makeQueries for byText

* feat: use makeQueries for byPlaceholderText

* feat: use makeQueries for byDisplayValue

* refactor: renamed method in queryAllByTestId

* refactor: rename method makeQuery to makeA11yQuery

the renaming is done to avoid any confusion with makeQueries which should be the new way to add new queries

* test: add test for errors for byTestId

* sort exports

Co-authored-by: Michał Pierzchała <[email protected]>

Author: MattAgn

src/__tests__/byTestId.test.js

@@ -129,6 +129,13 @@ test('getByTestId, queryByTestId', () => {
 
   expect(getByTestId('bananaFresh')).toBe(component);
   expect(queryByTestId('InExistent')).toBeNull();
+
+  expect(() => getByTestId('duplicateText')).toThrow(
+    'Found multiple elements with testID: duplicateText'
+  );
+  expect(() => queryByTestId('duplicateText')).toThrow(
+    'Found multiple elements with testID: duplicateText'
+  );
 });
 
 test('getAllByTestId, queryAllByTestId', () => {

src/__tests__/render.test.js

@@ -108,14 +108,16 @@ test('getByText, queryByText', () => {
 
   expect(sameButton.props.children).toBe('not fresh');
   expect(() => getByText('InExistent')).toThrow(
-    'No instances found with text "InExistent"'
+    'Unable to find an element with text: InExistent'
   );
 
   const zeroText = getByText('0');
 
   expect(queryByText(/change/i)).toBe(button);
   expect(queryByText('InExistent')).toBeNull();
-  expect(() => queryByText(/fresh/)).toThrow('Expected 1 but found 3');
+  expect(() => queryByText(/fresh/)).toThrow(
+    'Found multiple elements with text: /fresh/'
+  );
   expect(queryByText('0')).toBe(zeroText);
 });
 
@@ -147,7 +149,9 @@ test('getAllByText, queryAllByText', () => {
   const buttons = getAllByText(/fresh/i);
 
   expect(buttons).toHaveLength(3);
-  expect(() => getAllByText('InExistent')).toThrow('No instances found');
+  expect(() => getAllByText('InExistent')).toThrow(
+    'Unable to find an element with text: InExistent'
+  );
 
   expect(queryAllByText(/fresh/i)).toEqual(buttons);
   expect(queryAllByText('InExistent')).toHaveLength(0);
@@ -163,13 +167,13 @@ test('getByPlaceholderText, queryByPlaceholderText', () => {
 
   expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
   expect(() => getByPlaceholderText('no placeholder')).toThrow(
-    'No instances found with placeholder "no placeholder"'
+    'Unable to find an element with placeholder: no placeholder'
   );
 
   expect(queryByPlaceholderText(/add/i)).toBe(input);
   expect(queryByPlaceholderText('no placeholder')).toBeNull();
   expect(() => queryByPlaceholderText(/fresh/)).toThrow(
-    'Expected 1 but found 2'
+    'Found multiple elements with placeholder: /fresh/ '
   );
 });
 
@@ -181,7 +185,7 @@ test('getAllByPlaceholderText, queryAllByPlaceholderText', () => {
 
   expect(inputs).toHaveLength(2);
   expect(() => getAllByPlaceholderText('no placeholder')).toThrow(
-    'No instances found'
+    'Unable to find an element with placeholder: no placeholder'
   );
 
   expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
@@ -198,12 +202,14 @@ test('getByDisplayValue, queryByDisplayValue', () => {
 
   expect(sameInput.props.value).toBe(INPUT_FRESHNESS);
   expect(() => getByDisplayValue('no value')).toThrow(
-    'No instances found with display value "no value"'
+    'Unable to find an element with displayValue: no value'
   );
 
   expect(queryByDisplayValue(/custom/i)).toBe(input);
   expect(queryByDisplayValue('no value')).toBeNull();
-  expect(() => queryByDisplayValue(/fresh/i)).toThrow('Expected 1 but found 2');
+  expect(() => queryByDisplayValue(/fresh/i)).toThrow(
+    'Found multiple elements with display value: /fresh/i'
+  );
 });
 
 test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
@@ -223,7 +229,9 @@ test('getAllByDisplayValue, queryAllByDisplayValue', () => {
   const inputs = getAllByDisplayValue(/fresh/i);
 
   expect(inputs).toHaveLength(2);
-  expect(() => getAllByDisplayValue('no value')).toThrow('No instances found');
+  expect(() => getAllByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
 
   expect(queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
   expect(queryAllByDisplayValue('no value')).toHaveLength(0);

src/helpers/a11yAPI.js

@@ -1,7 +1,7 @@
 // @flow
 import type { A11yRole, A11yStates, A11yState, A11yValue } from '../types.flow';
 import type { WaitForOptions } from '../waitFor';
-import makeQuery from './makeQuery';
+import makeA11yQuery from './makeA11yQuery';
 
 type GetReturn = ReactTestInstance;
 type GetAllReturn = Array<ReactTestInstance>;
@@ -118,7 +118,7 @@ export function matchObject<T: {}>(prop?: T, matcher: T): boolean {
 
 export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
   ({
-    ...makeQuery(
+    ...makeA11yQuery(
       'accessibilityLabel',
       {
         getBy: ['getByA11yLabel', 'getByAccessibilityLabel', 'getByLabelText'],
@@ -150,7 +150,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
       },
       matchStringValue
     )(instance),
-    ...makeQuery(
+    ...makeA11yQuery(
       'accessibilityHint',
       {
         getBy: ['getByA11yHint', 'getByAccessibilityHint', 'getByHintText'],
@@ -178,7 +178,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
       },
       matchStringValue
     )(instance),
-    ...makeQuery(
+    ...makeA11yQuery(
       'accessibilityRole',
       {
         getBy: ['getByA11yRole', 'getByAccessibilityRole', 'getByRole'],
@@ -202,7 +202,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
       },
       matchStringValue
     )(instance),
-    ...makeQuery(
+    ...makeA11yQuery(
       'accessibilityStates',
       {
         getBy: ['getByA11yStates', 'getByAccessibilityStates'],
@@ -214,7 +214,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
       },
       matchArrayValue
     )(instance),
-    ...makeQuery(
+    ...makeA11yQuery(
       'accessibilityState',
       {
         getBy: ['getByA11yState', 'getByAccessibilityState'],
@@ -226,7 +226,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
       },
       matchObject
     )(instance),
-    ...makeQuery(
+    ...makeA11yQuery(
       'accessibilityValue',
       {
         getBy: ['getByA11yValue', 'getByAccessibilityValue'],

src/helpers/byDisplayValue.js

@@ -0,0 +1,56 @@
+// @flow
+import { makeQueries } from './makeQueries';
+import type { Queries } from './makeQueries';
+import { filterNodeByType } from './filterNodeByType';
+import { createLibraryNotSupportedError } from './errors';
+
+const getTextInputNodeByDisplayValue = (node, value) => {
+  try {
+    const { TextInput } = require('react-native');
+    const nodeValue =
+      node.props.value !== undefined
+        ? node.props.value
+        : node.props.defaultValue;
+    return (
+      filterNodeByType(node, TextInput) &&
+      (typeof value === 'string' ? value === nodeValue : value.test(nodeValue))
+    );
+  } catch (error) {
+    throw createLibraryNotSupportedError(error);
+  }
+};
+
+const queryAllByDisplayValue = (
+  instance: ReactTestInstance
+): ((displayValue: string | RegExp) => Array<ReactTestInstance>) =>
+  function queryAllByDisplayValueFn(displayValue) {
+    return instance.findAll((node) =>
+      getTextInputNodeByDisplayValue(node, displayValue)
+    );
+  };
+
+const getMultipleError = (displayValue: string | RegExp) =>
+  `Found multiple elements with display value: ${String(displayValue)} `;
+const getMissingError = (displayValue: string | RegExp) =>
+  `Unable to find an element with displayValue: ${String(displayValue)}`;
+
+const {
+  getBy: getByDisplayValue,
+  getAllBy: getAllByDisplayValue,
+  queryBy: queryByDisplayValue,
+  findBy: findByDisplayValue,
+  findAllBy: findAllByDisplayValue,
+}: Queries<string | RegExp> = makeQueries(
+  queryAllByDisplayValue,
+  getMissingError,
+  getMultipleError
+);
+
+export {
+  findAllByDisplayValue,
+  findByDisplayValue,
+  getAllByDisplayValue,
+  getByDisplayValue,
+  queryAllByDisplayValue,
+  queryByDisplayValue,
+};

src/helpers/byPlaceholderText.js

@@ -0,0 +1,54 @@
+// @flow
+import { makeQueries } from './makeQueries';
+import type { Queries } from './makeQueries';
+import { filterNodeByType } from './filterNodeByType';
+import { createLibraryNotSupportedError } from './errors';
+
+const getTextInputNodeByPlaceholderText = (node, placeholder) => {
+  try {
+    const { TextInput } = require('react-native');
+    return (
+      filterNodeByType(node, TextInput) &&
+      (typeof placeholder === 'string'
+        ? placeholder === node.props.placeholder
+        : placeholder.test(node.props.placeholder))
+    );
+  } catch (error) {
+    throw createLibraryNotSupportedError(error);
+  }
+};
+
+const queryAllByPlaceholderText = (
+  instance: ReactTestInstance
+): ((placeholder: string | RegExp) => Array<ReactTestInstance>) =>
+  function queryAllByPlaceholderFn(placeholder) {
+    return instance.findAll((node) =>
+      getTextInputNodeByPlaceholderText(node, placeholder)
+    );
+  };
+
+const getMultipleError = (placeholder) =>
+  `Found multiple elements with placeholder: ${String(placeholder)} `;
+const getMissingError = (placeholder) =>
+  `Unable to find an element with placeholder: ${String(placeholder)}`;
+
+const {
+  getBy: getByPlaceholderText,
+  getAllBy: getAllByPlaceholderText,
+  queryBy: queryByPlaceholderText,
+  findBy: findByPlaceholderText,
+  findAllBy: findAllByPlaceholderText,
+}: Queries<string | RegExp> = makeQueries(
+  queryAllByPlaceholderText,
+  getMissingError,
+  getMultipleError
+);
+
+export {
+  findAllByPlaceholderText,
+  findByPlaceholderText,
+  getAllByPlaceholderText,
+  getByPlaceholderText,
+  queryAllByPlaceholderText,
+  queryByPlaceholderText,
+};

src/helpers/byTestId.js

@@ -11,7 +11,7 @@ const getNodeByTestId = (node, testID) => {
 const queryAllByTestId = (
   instance: ReactTestInstance
 ): ((testId: string | RegExp) => Array<ReactTestInstance>) =>
-  function getAllByTestIdFn(testId) {
+  function queryAllByTestIdFn(testId) {
     const results = instance
       .findAll((node) => getNodeByTestId(node, testId))
       .filter((element) => typeof element.type === 'string');
@@ -37,10 +37,10 @@ const {
 );
 
 export {
-  getByTestId,
-  getAllByTestId,
-  queryByTestId,
-  findByTestId,
   findAllByTestId,
+  findByTestId,
+  getAllByTestId,
+  getByTestId,
   queryAllByTestId,
+  queryByTestId,
 };

src/helpers/byText.js

@@ -0,0 +1,88 @@
+// @flow
+import * as React from 'react';
+import { makeQueries } from './makeQueries';
+import type { Queries } from './makeQueries';
+import { filterNodeByType } from './filterNodeByType';
+import { createLibraryNotSupportedError } from './errors';
+
+const getChildrenAsText = (children, TextComponent, textContent = []) => {
+  React.Children.forEach(children, (child) => {
+    if (typeof child === 'string') {
+      textContent.push(child);
+      return;
+    }
+
+    if (typeof child === 'number') {
+      textContent.push(child.toString());
+      return;
+    }
+
+    if (child?.props?.children) {
+      // Bail on traversing text children down the tree if current node (child)
+      // has no text. In such situations, react-test-renderer will traverse down
+      // this tree in a separate call and run this query again. As a result, the
+      // query will match the deepest text node that matches requested text.
+      if (filterNodeByType(child, TextComponent) && textContent.length === 0) {
+        return;
+      }
+
+      getChildrenAsText(child.props.children, TextComponent, textContent);
+    }
+  });
+
+  return textContent;
+};
+
+const getNodeByText = (node, text: string | RegExp) => {
+  try {
+    const { Text } = require('react-native');
+    const isTextComponent = filterNodeByType(node, Text);
+    if (isTextComponent) {
+      const textChildren = getChildrenAsText(node.props.children, Text);
+      if (textChildren) {
+        const textToTest = textChildren.join('');
+        return typeof text === 'string'
+          ? text === textToTest
+          : text.test(textToTest);
+      }
+    }
+    return false;
+  } catch (error) {
+    throw createLibraryNotSupportedError(error);
+  }
+};
+
+const queryAllByText = (
+  instance: ReactTestInstance
+): ((text: string | RegExp) => Array<ReactTestInstance>) =>
+  function queryAllByTextFn(text) {
+    const results = instance.findAll((node) => getNodeByText(node, text));
+
+    return results;
+  };
+
+const getMultipleError = (text: string | RegExp) =>
+  `Found multiple elements with text: ${String(text)}`;
+const getMissingError = (text: string | RegExp) =>
+  `Unable to find an element with text: ${String(text)}`;
+
+const {
+  getBy: getByText,
+  getAllBy: getAllByText,
+  queryBy: queryByText,
+  findBy: findByText,
+  findAllBy: findAllByText,
+}: Queries<string | RegExp> = makeQueries(
+  queryAllByText,
+  getMissingError,
+  getMultipleError
+);
+
+export {
+  findAllByText,
+  findByText,
+  getAllByText,
+  getByText,
+  queryAllByText,
+  queryByText,
+};

src/helpers/filterNodeByType.js

@@ -0,0 +1 @@
+export const filterNodeByType = (node, type) => node.type === type;