Skip to content

Finish refactoring queries using new query builder makeQueries #654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Feb 5, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/__tests__/byTestId.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
26 changes: 17 additions & 9 deletions src/__tests__/render.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand Down Expand Up @@ -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);
Expand All @@ -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/ '
);
});

Expand All @@ -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);
Expand All @@ -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', () => {
Expand All @@ -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);
Expand Down
14 changes: 7 additions & 7 deletions src/helpers/a11yAPI.js
Original file line number Diff line number Diff line change
@@ -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>;
Expand Down Expand Up @@ -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'],
Expand Down Expand Up @@ -150,7 +150,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
},
matchStringValue
)(instance),
...makeQuery(
...makeA11yQuery(
'accessibilityHint',
{
getBy: ['getByA11yHint', 'getByAccessibilityHint', 'getByHintText'],
Expand Down Expand Up @@ -178,7 +178,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
},
matchStringValue
)(instance),
...makeQuery(
...makeA11yQuery(
'accessibilityRole',
{
getBy: ['getByA11yRole', 'getByAccessibilityRole', 'getByRole'],
Expand All @@ -202,7 +202,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
},
matchStringValue
)(instance),
...makeQuery(
...makeA11yQuery(
'accessibilityStates',
{
getBy: ['getByA11yStates', 'getByAccessibilityStates'],
Expand All @@ -214,7 +214,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
},
matchArrayValue
)(instance),
...makeQuery(
...makeA11yQuery(
'accessibilityState',
{
getBy: ['getByA11yState', 'getByAccessibilityState'],
Expand All @@ -226,7 +226,7 @@ export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
},
matchObject
)(instance),
...makeQuery(
...makeA11yQuery(
'accessibilityValue',
{
getBy: ['getByA11yValue', 'getByAccessibilityValue'],
Expand Down
56 changes: 56 additions & 0 deletions src/helpers/byDisplayValue.js
Original file line number Diff line number Diff line change
@@ -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,
};
54 changes: 54 additions & 0 deletions src/helpers/byPlaceholderText.js
Original file line number Diff line number Diff line change
@@ -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,
};
10 changes: 5 additions & 5 deletions src/helpers/byTestId.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -37,10 +37,10 @@ const {
);

export {
getByTestId,
getAllByTestId,
queryByTestId,
findByTestId,
findAllByTestId,
findByTestId,
getAllByTestId,
getByTestId,
queryAllByTestId,
queryByTestId,
};
88 changes: 88 additions & 0 deletions src/helpers/byText.js
Original file line number Diff line number Diff line change
@@ -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,
};
1 change: 1 addition & 0 deletions src/helpers/filterNodeByType.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const filterNodeByType = (node, type) => node.type === type;
Loading