diff --git a/src/__tests__/byDisplayValue.test.js b/src/__tests__/byDisplayValue.test.js new file mode 100644 index 000000000..4bdc743d9 --- /dev/null +++ b/src/__tests__/byDisplayValue.test.js @@ -0,0 +1,102 @@ +// @flow +import * as React from 'react'; +import { View, TextInput } from 'react-native'; + +import { render } from '..'; + +const PLACEHOLDER_FRESHNESS = 'Add custom freshness'; +const PLACEHOLDER_CHEF = 'Who inspected freshness?'; +const INPUT_FRESHNESS = 'Custom Freshie'; +const INPUT_CHEF = 'I inspected freshie'; +const DEFAULT_INPUT_CHEF = 'What did you inspect?'; +const DEFAULT_INPUT_CUSTOMER = 'What banana?'; + +const Banana = () => ( + + + + + + +); + +test('getByDisplayValue, queryByDisplayValue', () => { + const { getByDisplayValue, queryByDisplayValue } = render(); + const input = getByDisplayValue(/custom/i); + + expect(input.props.value).toBe(INPUT_FRESHNESS); + + const sameInput = getByDisplayValue(INPUT_FRESHNESS); + + expect(sameInput.props.value).toBe(INPUT_FRESHNESS); + expect(() => getByDisplayValue('no value')).toThrow( + '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( + 'Found multiple elements with display value: /fresh/i' + ); +}); + +test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => { + const { getByDisplayValue, queryByDisplayValue } = render(); + expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrow(); + expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull(); + + expect(() => getByDisplayValue('hello')).toThrow(); + expect(queryByDisplayValue('hello')).toBeNull(); + + expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy(); + expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy(); +}); + +test('getAllByDisplayValue, queryAllByDisplayValue', () => { + const { getAllByDisplayValue, queryAllByDisplayValue } = render(); + const inputs = getAllByDisplayValue(/fresh/i); + + expect(inputs).toHaveLength(2); + 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); +}); + +test('findBy queries work asynchronously', async () => { + const options = { timeout: 10 }; // Short timeout so that this test runs quickly + const { rerender, findByDisplayValue, findAllByDisplayValue } = render( + + ); + + await expect( + findByDisplayValue('Display Value', options) + ).rejects.toBeTruthy(); + await expect( + findAllByDisplayValue('Display Value', options) + ).rejects.toBeTruthy(); + + setTimeout( + () => + rerender( + + + + ), + 20 + ); + + await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy(); + await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1); +}, 20000); diff --git a/src/__tests__/byPlaceholderText.test.js b/src/__tests__/byPlaceholderText.test.js new file mode 100644 index 000000000..6e4ee1c00 --- /dev/null +++ b/src/__tests__/byPlaceholderText.test.js @@ -0,0 +1,61 @@ +// @flow +import * as React from 'react'; +import { View, TextInput } from 'react-native'; +import { render } from '..'; + +const PLACEHOLDER_FRESHNESS = 'Add custom freshness'; +const PLACEHOLDER_CHEF = 'Who inspected freshness?'; +const INPUT_FRESHNESS = 'Custom Freshie'; +const INPUT_CHEF = 'I inspected freshie'; +const DEFAULT_INPUT_CHEF = 'What did you inspect?'; + +const Banana = () => ( + + + + +); + +test('getByPlaceholderText, queryByPlaceholderText', () => { + const { getByPlaceholderText, queryByPlaceholderText } = render(); + const input = getByPlaceholderText(/custom/i); + + expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS); + + const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS); + + expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS); + expect(() => getByPlaceholderText('no placeholder')).toThrow( + 'Unable to find an element with placeholder: no placeholder' + ); + + expect(queryByPlaceholderText(/add/i)).toBe(input); + expect(queryByPlaceholderText('no placeholder')).toBeNull(); + expect(() => queryByPlaceholderText(/fresh/)).toThrow( + 'Found multiple elements with placeholder: /fresh/ ' + ); +}); + +test('getAllByPlaceholderText, queryAllByPlaceholderText', () => { + const { getAllByPlaceholderText, queryAllByPlaceholderText } = render( + + ); + const inputs = getAllByPlaceholderText(/fresh/i); + + expect(inputs).toHaveLength(2); + expect(() => getAllByPlaceholderText('no placeholder')).toThrow( + 'Unable to find an element with placeholder: no placeholder' + ); + + expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs); + expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0); +}); diff --git a/src/__tests__/byTestId.test.js b/src/__tests__/byTestId.test.js index f24ea7016..3f8363e5a 100644 --- a/src/__tests__/byTestId.test.js +++ b/src/__tests__/byTestId.test.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import { View, Text, TextInput, TouchableOpacity, Button } from 'react-native'; +import { View, Text, TextInput, Button } from 'react-native'; import { render } from '..'; const PLACEHOLDER_FRESHNESS = 'Add custom freshness'; @@ -8,71 +8,26 @@ const PLACEHOLDER_CHEF = 'Who inspected freshness?'; const INPUT_FRESHNESS = 'Custom Freshie'; const INPUT_CHEF = 'I inspected freshie'; -class MyButton extends React.Component { - render() { - return ( - - {this.props.children} - - ); - } -} - -class Banana extends React.Component { - state = { - fresh: false, - }; - - componentDidUpdate() { - if (this.props.onUpdate) { - this.props.onUpdate(); - } - } - - componentWillUnmount() { - if (this.props.onUnmount) { - this.props.onUnmount(); - } - } - - changeFresh = () => { - this.setState((state) => ({ - fresh: !state.fresh, - })); - }; - - render() { - const test = 0; - return ( - - Is the banana fresh? - - {this.state.fresh ? 'fresh' : 'not fresh'} - - - - - Change freshness! - - First Text - Second Text - {test} - - ); - } -} - -const MyComponent = () => { - return My Component; -}; +const Banana = () => ( + + Is the banana fresh? + not fresh + + + First Text + Second Text + +); + +const MyComponent = () => My Component; test('getByTestId returns only native elements', () => { const { getByTestId, getAllByTestId } = render( diff --git a/src/__tests__/byText.test.js b/src/__tests__/byText.test.js new file mode 100644 index 000000000..987cc197e --- /dev/null +++ b/src/__tests__/byText.test.js @@ -0,0 +1,218 @@ +// @flow +import * as React from 'react'; +import { View, Text, TouchableOpacity, Image } from 'react-native'; +import { render } from '..'; + +const MyButton = ({ children, onPress }) => ( + + {children} + +); + +const Banana = () => { + const test = 0; + return ( + + Is the banana fresh? + not fresh + + + Change freshness! + + First Text + Second Text + {test} + + ); +}; + +test('getByText, queryByText', () => { + const { getByText, queryByText } = render(); + const button = getByText(/change/i); + + expect(button.props.children).toBe('Change freshness!'); + + const sameButton = getByText('not fresh'); + + expect(sameButton.props.children).toBe('not fresh'); + expect(() => getByText('InExistent')).toThrow( + '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( + 'Found multiple elements with text: /fresh/' + ); + expect(queryByText('0')).toBe(zeroText); +}); + +test('getByText, queryByText with children as Array', () => { + const BananaCounter = ({ numBananas }) => ( + There are {numBananas} bananas in the bunch + ); + + const BananaStore = () => ( + + + + + + ); + + const { getByText } = render(); + + const threeBananaBunch = getByText('There are 3 bananas in the bunch'); + expect(threeBananaBunch.props.children).toEqual([ + 'There are ', + 3, + ' bananas in the bunch', + ]); +}); + +test('getAllByText, queryAllByText', () => { + const { getAllByText, queryAllByText } = render(); + const buttons = getAllByText(/fresh/i); + + expect(buttons).toHaveLength(3); + expect(() => getAllByText('InExistent')).toThrow( + 'Unable to find an element with text: InExistent' + ); + + expect(queryAllByText(/fresh/i)).toEqual(buttons); + expect(queryAllByText('InExistent')).toHaveLength(0); +}); + +test('findByText queries work asynchronously', async () => { + const options = { timeout: 10 }; // Short timeout so that this test runs quickly + const { rerender, findByText, findAllByText } = render(); + await expect(findByText('Some Text', options)).rejects.toBeTruthy(); + await expect(findAllByText('Some Text', options)).rejects.toBeTruthy(); + + setTimeout( + () => + rerender( + + Some Text + + ), + 20 + ); + + await expect(findByText('Some Text')).resolves.toBeTruthy(); + await expect(findAllByText('Some Text')).resolves.toHaveLength(1); +}, 20000); + +test('queryByText nested in at start', () => { + expect( + render( + + + Hello + + ).queryByText('Hello') + ).toBeTruthy(); +}); + +test('queryByText nested in at end', () => { + expect( + render( + + Hello + + + ).queryByText('Hello') + ).toBeTruthy(); +}); + +test('queryByText nested in in middle', () => { + expect( + render( + + Hello + + World + + ).queryByText('HelloWorld') + ).toBeTruthy(); +}); + +test('queryByText not found', () => { + expect( + render( + + Hello + + + ).queryByText('SomethingElse') + ).toBeFalsy(); +}); + +test('queryByText nested text across multiple in ', () => { + const { queryByText } = render( + + Hello{' '} + + World + !{true} + + + ); + + expect(queryByText('Hello World!')?.props.nativeID).toBe('1'); +}); + +test('queryByText with nested Text components return the closest Text', () => { + const NestedTexts = () => ( + + My text + + ); + + const { queryByText } = render(); + + expect(queryByText('My text')?.props.nativeID).toBe('2'); +}); + +test('queryByText with nested Text components each with text return the lowest one', () => { + const NestedTexts = () => ( + + bob + My text + + ); + + const { queryByText } = render(); + + expect(queryByText('My text')?.props.nativeID).toBe('2'); +}); + +test('queryByText nested in ', () => { + const CustomText = ({ children }) => { + return {children}; + }; + + expect( + render( + + Hello World! + + ).queryByText('Hello World!') + ).toBeTruthy(); +}); + +test('queryByText nested deep in ', () => { + const CustomText = ({ children }) => { + return {children}; + }; + + expect( + render( + + Hello World! + + ).queryByText('Hello World!') + ).toBeTruthy(); +}); diff --git a/src/__tests__/findByApi.test.js b/src/__tests__/findByApi.test.js deleted file mode 100644 index e0020f9e1..000000000 --- a/src/__tests__/findByApi.test.js +++ /dev/null @@ -1,52 +0,0 @@ -// @flow -import * as React from 'react'; -import { View, Text, TextInput } from 'react-native'; -import { render } from '..'; - -test('findBy queries work asynchronously', async () => { - const options = { timeout: 10 }; // Short timeout so that this test runs quickly - const { - rerender, - findByText, - findAllByText, - findByPlaceholderText, - findAllByPlaceholderText, - findByDisplayValue, - findAllByDisplayValue, - } = render(); - await expect(findByText('Some Text', options)).rejects.toBeTruthy(); - await expect(findAllByText('Some Text', options)).rejects.toBeTruthy(); - await expect( - findByPlaceholderText('Placeholder Text', options) - ).rejects.toBeTruthy(); - await expect( - findAllByPlaceholderText('Placeholder Text', options) - ).rejects.toBeTruthy(); - await expect( - findByDisplayValue('Display Value', options) - ).rejects.toBeTruthy(); - await expect( - findAllByDisplayValue('Display Value', options) - ).rejects.toBeTruthy(); - - setTimeout( - () => - rerender( - - Some Text - - - - ), - 20 - ); - - await expect(findByText('Some Text')).resolves.toBeTruthy(); - await expect(findAllByText('Some Text')).resolves.toHaveLength(1); - await expect(findByPlaceholderText('Placeholder Text')).resolves.toBeTruthy(); - await expect( - findAllByPlaceholderText('Placeholder Text') - ).resolves.toHaveLength(1); - await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy(); - await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1); -}, 20000); diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js deleted file mode 100644 index 82e89bf6e..000000000 --- a/src/__tests__/queryByApi.test.js +++ /dev/null @@ -1,116 +0,0 @@ -// @flow -import * as React from 'react'; -import { Text, Image } from 'react-native'; -import { render } from '..'; - -test('queryByText nested in at start', () => { - expect( - render( - - - Hello - - ).queryByText('Hello') - ).toBeTruthy(); -}); - -test('queryByText nested in at end', () => { - expect( - render( - - Hello - - - ).queryByText('Hello') - ).toBeTruthy(); -}); - -test('queryByText nested in in middle', () => { - expect( - render( - - Hello - - World - - ).queryByText('HelloWorld') - ).toBeTruthy(); -}); - -test('queryByText not found', () => { - expect( - render( - - Hello - - - ).queryByText('SomethingElse') - ).toBeFalsy(); -}); - -test('queryByText nested text across multiple in ', () => { - const { queryByText } = render( - - Hello{' '} - - World - !{true} - - - ); - - expect(queryByText('Hello World!')?.props.nativeID).toBe('1'); -}); - -test('queryByText with nested Text components return the closest Text', () => { - const NestedTexts = () => ( - - My text - - ); - - const { queryByText } = render(); - - expect(queryByText('My text')?.props.nativeID).toBe('2'); -}); - -test('queryByText with nested Text components each with text return the lowest one', () => { - const NestedTexts = () => ( - - bob - My text - - ); - - const { queryByText } = render(); - - expect(queryByText('My text')?.props.nativeID).toBe('2'); -}); - -test('queryByText nested in ', () => { - const CustomText = ({ children }) => { - return {children}; - }; - - expect( - render( - - Hello World! - - ).queryByText('Hello World!') - ).toBeTruthy(); -}); - -test('queryByText nested deep in ', () => { - const CustomText = ({ children }) => { - return {children}; - }; - - expect( - render( - - Hello World! - - ).queryByText('Hello World!') - ).toBeTruthy(); -}); diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index a6f7d6437..6f279ae21 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -98,145 +98,6 @@ test('UNSAFE_getAllByType, UNSAFE_queryAllByType', () => { expect(UNSAFE_queryAllByType(InExistent)).toHaveLength(0); }); -test('getByText, queryByText', () => { - const { getByText, queryByText } = render(); - const button = getByText(/change/i); - - expect(button.props.children).toBe('Change freshness!'); - - const sameButton = getByText('not fresh'); - - expect(sameButton.props.children).toBe('not fresh'); - expect(() => getByText('InExistent')).toThrow( - '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( - 'Found multiple elements with text: /fresh/' - ); - expect(queryByText('0')).toBe(zeroText); -}); - -test('getByText, queryByText with children as Array', () => { - const BananaCounter = ({ numBananas }) => ( - There are {numBananas} bananas in the bunch - ); - - const BananaStore = () => ( - - - - - - ); - - const { getByText } = render(); - - const threeBananaBunch = getByText('There are 3 bananas in the bunch'); - expect(threeBananaBunch.props.children).toEqual([ - 'There are ', - 3, - ' bananas in the bunch', - ]); -}); - -test('getAllByText, queryAllByText', () => { - const { getAllByText, queryAllByText } = render(); - const buttons = getAllByText(/fresh/i); - - expect(buttons).toHaveLength(3); - expect(() => getAllByText('InExistent')).toThrow( - 'Unable to find an element with text: InExistent' - ); - - expect(queryAllByText(/fresh/i)).toEqual(buttons); - expect(queryAllByText('InExistent')).toHaveLength(0); -}); - -test('getByPlaceholderText, queryByPlaceholderText', () => { - const { getByPlaceholderText, queryByPlaceholderText } = render(); - const input = getByPlaceholderText(/custom/i); - - expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS); - - const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS); - - expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS); - expect(() => getByPlaceholderText('no placeholder')).toThrow( - 'Unable to find an element with placeholder: no placeholder' - ); - - expect(queryByPlaceholderText(/add/i)).toBe(input); - expect(queryByPlaceholderText('no placeholder')).toBeNull(); - expect(() => queryByPlaceholderText(/fresh/)).toThrow( - 'Found multiple elements with placeholder: /fresh/ ' - ); -}); - -test('getAllByPlaceholderText, queryAllByPlaceholderText', () => { - const { getAllByPlaceholderText, queryAllByPlaceholderText } = render( - - ); - const inputs = getAllByPlaceholderText(/fresh/i); - - expect(inputs).toHaveLength(2); - expect(() => getAllByPlaceholderText('no placeholder')).toThrow( - 'Unable to find an element with placeholder: no placeholder' - ); - - expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs); - expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0); -}); - -test('getByDisplayValue, queryByDisplayValue', () => { - const { getByDisplayValue, queryByDisplayValue } = render(); - const input = getByDisplayValue(/custom/i); - - expect(input.props.value).toBe(INPUT_FRESHNESS); - - const sameInput = getByDisplayValue(INPUT_FRESHNESS); - - expect(sameInput.props.value).toBe(INPUT_FRESHNESS); - expect(() => getByDisplayValue('no value')).toThrow( - '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( - 'Found multiple elements with display value: /fresh/i' - ); -}); - -test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => { - const { getByDisplayValue, queryByDisplayValue } = render(); - expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrow(); - expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull(); - - expect(() => getByDisplayValue('hello')).toThrow(); - expect(queryByDisplayValue('hello')).toBeNull(); - - expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy(); - expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy(); -}); - -test('getAllByDisplayValue, queryAllByDisplayValue', () => { - const { getAllByDisplayValue, queryAllByDisplayValue } = render(); - const inputs = getAllByDisplayValue(/fresh/i); - - expect(inputs).toHaveLength(2); - 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); -}); - test('UNSAFE_getByProps, UNSAFE_queryByProps', () => { const { UNSAFE_getByProps, UNSAFE_queryByProps } = render(); const primaryType = UNSAFE_getByProps({ type: 'primary' });