feat: add text match options a.k.a string precision API

src/__tests__/getByApi.test.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { View, Text, TextInput, Button } from 'react-native';
-import { render } from '..';
+import { render, getDefaultNormalizer } from '..';
 
 const MyComponent = () => {
   return <Text>My Component</Text>;
@@ -50,3 +50,114 @@ test('supports a regex matcher', () => {
   expect(getByTestId(/view/)).toBeTruthy();
   expect(getAllByTestId(/text/)).toHaveLength(2);
 });
+
+describe('Supports a TextMatch options', () => {
+  test('getByText, getAllByText', () => {
+    const { getByText, getAllByText } = render(
+      <View>
+        <Text testID="text">Text and details</Text>
+        <Button
+          testID="button"
+          title="Button and a detail"
+          onPress={jest.fn()}
+        />
+      </View>
+    );
+
+    expect(getByText('details', { exact: false })).toBeTruthy();
+    expect(getAllByText('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByPlaceholderText, getAllByPlaceholderText', () => {
+    const { getByPlaceholderText, getAllByPlaceholderText } = render(
+      <View>
+        <TextInput placeholder={'Placeholder with details'} />
+        <TextInput placeholder={'Placeholder with a DETAIL'} />
+      </View>
+    );
+
+    expect(getByPlaceholderText('details', { exact: false })).toBeTruthy();
+    expect(getAllByPlaceholderText('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByDisplayValue, getAllByDisplayValue', () => {
+    const { getByDisplayValue, getAllByDisplayValue } = render(
+      <View>
+        <TextInput value={'Value with details'} />
+        <TextInput value={'Value with a detail'} />
+      </View>
+    );
+
+    expect(getByDisplayValue('details', { exact: false })).toBeTruthy();
+    expect(getAllByDisplayValue('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('with TextMatch option exact === false text search is NOT case sensitive', () => {
+    const { getByText, getAllByText } = render(
+      <View>
+        <Text testID="text">Text and details</Text>
+        <Button
+          testID="button"
+          title="Button and a DeTAil"
+          onPress={jest.fn()}
+        />
+      </View>
+    );
+
+    expect(getByText('DeTaIlS', { exact: false })).toBeTruthy();
+    expect(getAllByText('detail', { exact: false })).toHaveLength(2);
+  });
+});
+
+describe('Supports normalization', () => {
+  test('trims and collapses whitespace by default', () => {
+    const { getByText } = render(
+      <View>
+        <Text>{`  Text     and
+
+
+        whitespace`}</Text>
+      </View>
+    );
+
+    expect(getByText('Text and whitespace')).toBeTruthy();
+  });
+
+  test('trim and collapseWhitespace is customizable by getDefaultNormalizer param', () => {
+    const testTextWithWhitespace = `  Text     and
+
+
+        whitespace`;
+    const { getByText } = render(
+      <View>
+        <Text>{testTextWithWhitespace}</Text>
+      </View>
+    );
+
+    expect(
+      getByText(testTextWithWhitespace, {
+        normalizer: getDefaultNormalizer({
+          trim: false,
+          collapseWhitespace: false,
+        }),
+      })
+    ).toBeTruthy();
+  });
+
+  test('normalizer function is customisable', () => {
+    const testText = 'A TO REMOVE text';
+    const normalizerFn = (textToNormalize: string) =>
+      textToNormalize.replace('TO REMOVE ', '');
+    const { getByText } = render(
+      <View>
+        <Text>{testText}</Text>
+      </View>
+    );
+
+    expect(
+      getByText('A text', {
+        normalizer: normalizerFn,
+      })
+    ).toBeTruthy();
+  });
+});

src/__tests__/queryByApi.test.js

@@ -60,6 +60,7 @@ test('queryByText nested text across multiple <Text> in <Text>', () => {
   );
 
   expect(queryByText('Hello World!')?.props.nativeID).toBe('1');
+  expect(queryByText('hello Wo', { exact: false })?.props.nativeID).toBe('1');
 });
 
 test('queryByText with nested Text components return the closest Text', () => {
@@ -72,6 +73,7 @@ test('queryByText with nested Text components return the closest Text', () => {
   const { queryByText } = render(<NestedTexts />);
 
   expect(queryByText('My text')?.props.nativeID).toBe('2');
+  expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
 });
 
 test('queryByText with nested Text components each with text return the lowest one', () => {
@@ -87,6 +89,19 @@ test('queryByText with nested Text components each with text return the lowest o
   expect(queryByText('My text')?.props.nativeID).toBe('2');
 });
 
+test('queryByText with nested Text components each with text return the top one when using not-exact text match', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+
+  expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('1');
+});
+
 test('queryByText nested <CustomText> in <Text>', () => {
   const CustomText = ({ children }) => {
     return <Text>{children}</Text>;

src/helpers/findByAPI.js

@@ -12,13 +12,18 @@ import {
   getAllByDisplayValue,
 } from './getByAPI';
 import { throwRenamedFunctionError } from './errors';
+import type { TextMatchOptions } from './getByAPI';
 
 const makeFindQuery = <Text, Result>(
   instance: ReactTestInstance,
-  getQuery: (instance: ReactTestInstance) => (text: Text) => Result,
+  getQuery: (
+    instance: ReactTestInstance
+  ) => (text: Text, options?: TextMatchOptions) => Result,
   text: Text,
-  waitForOptions: WaitForOptions
-): Promise<Result> => waitFor(() => getQuery(instance)(text), waitForOptions);
+  waitForOptions: WaitForOptions,
+  queryOptions?: TextMatchOptions
+): Promise<Result> =>
+  waitFor(() => getQuery(instance)(text, queryOptions), waitForOptions);
 
 export const findByTestId = (instance: ReactTestInstance) => (
   testId: string | RegExp,
@@ -32,34 +37,67 @@ export const findAllByTestId = (instance: ReactTestInstance) => (
 
 export const findByText = (instance: ReactTestInstance) => (
   text: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getByText, text, waitForOptions);
+  waitForOptions: WaitForOptions = {},
+  queryOptions?: TextMatchOptions
+) => makeFindQuery(instance, getByText, text, waitForOptions, queryOptions);
 
 export const findAllByText = (instance: ReactTestInstance) => (
   text: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getAllByText, text, waitForOptions);
+  waitForOptions: WaitForOptions = {},
+  queryOptions?: TextMatchOptions
+) => makeFindQuery(instance, getAllByText, text, waitForOptions, queryOptions);
 
 export const findByPlaceholderText = (instance: ReactTestInstance) => (
   placeholder: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getByPlaceholderText, placeholder, waitForOptions);
+  waitForOptions: WaitForOptions = {},
+  queryOptions?: TextMatchOptions
+) =>
+  makeFindQuery(
+    instance,
+    getByPlaceholderText,
+    placeholder,
+    waitForOptions,
+    queryOptions
+  );
 
 export const findAllByPlaceholderText = (instance: ReactTestInstance) => (
   placeholder: string | RegExp,
-  waitForOptions: WaitForOptions = {}
+  waitForOptions: WaitForOptions = {},
+  queryOptions?: TextMatchOptions
 ) =>
-  makeFindQuery(instance, getAllByPlaceholderText, placeholder, waitForOptions);
+  makeFindQuery(
+    instance,
+    getAllByPlaceholderText,
+    placeholder,
+    waitForOptions,
+    queryOptions
+  );
 
 export const findByDisplayValue = (instance: ReactTestInstance) => (
   value: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getByDisplayValue, value, waitForOptions);
+  waitForOptions: WaitForOptions = {},
+  queryOptions?: TextMatchOptions
+) =>
+  makeFindQuery(
+    instance,
+    getByDisplayValue,
+    value,
+    waitForOptions,
+    queryOptions
+  );
 
 export const findAllByDisplayValue = (instance: ReactTestInstance) => (
   value: string | RegExp,
-  waitForOptions: WaitForOptions = {}
-) => makeFindQuery(instance, getAllByDisplayValue, value, waitForOptions);
+  waitForOptions: WaitForOptions = {},
+  queryOptions?: TextMatchOptions
+) =>
+  makeFindQuery(
+    instance,
+    getAllByDisplayValue,
+    value,
+    waitForOptions,
+    queryOptions
+  );
 
 export const findByAPI = (instance: ReactTestInstance) => ({
   findByTestId: findByTestId(instance),