From 921a5d9eabef1cc63840d5ce2fad3828512d7802 Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 15:49:09 +0100 Subject: [PATCH 1/8] test: extract byText related tests --- src/__tests__/byText.test.js | 267 +++++++++++++++++++++++++++++++ src/__tests__/findByApi.test.js | 6 - src/__tests__/queryByApi.test.js | 116 -------------- src/__tests__/render.test.js | 59 ------- 4 files changed, 267 insertions(+), 181 deletions(-) create mode 100644 src/__tests__/byText.test.js delete mode 100644 src/__tests__/queryByApi.test.js diff --git a/src/__tests__/byText.test.js b/src/__tests__/byText.test.js new file mode 100644 index 000000000..18a55346c --- /dev/null +++ b/src/__tests__/byText.test.js @@ -0,0 +1,267 @@ +// @flow +import * as React from 'react'; +import { View, Text, TextInput, TouchableOpacity, Image } 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?'; + +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} + + ); + } +} + +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 index e0020f9e1..8d8f18d87 100644 --- a/src/__tests__/findByApi.test.js +++ b/src/__tests__/findByApi.test.js @@ -7,15 +7,11 @@ 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(); @@ -41,8 +37,6 @@ test('findBy queries work asynchronously', async () => { 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') 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..66659958f 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -98,65 +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); From f5bc068392a6118c8ec0fd007190ac7fde6c9b0c Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 15:52:51 +0100 Subject: [PATCH 2/8] test: extract byDisplayValue related tests --- src/__tests__/byDisplayValue.test.js | 149 +++++++++++++++++++++++++++ src/__tests__/findByApi.test.js | 18 +--- src/__tests__/render.test.js | 45 -------- 3 files changed, 152 insertions(+), 60 deletions(-) create mode 100644 src/__tests__/byDisplayValue.test.js diff --git a/src/__tests__/byDisplayValue.test.js b/src/__tests__/byDisplayValue.test.js new file mode 100644 index 000000000..96fdfca6b --- /dev/null +++ b/src/__tests__/byDisplayValue.test.js @@ -0,0 +1,149 @@ +// @flow +import * as React from 'react'; +import { View, Text, TextInput, TouchableOpacity } 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?'; + +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} + + ); + } +} + +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__/findByApi.test.js b/src/__tests__/findByApi.test.js index 8d8f18d87..72459acfb 100644 --- a/src/__tests__/findByApi.test.js +++ b/src/__tests__/findByApi.test.js @@ -5,25 +5,15 @@ import { render } from '..'; test('findBy queries work asynchronously', async () => { const options = { timeout: 10 }; // Short timeout so that this test runs quickly - const { - rerender, - findByPlaceholderText, - findAllByPlaceholderText, - findByDisplayValue, - findAllByDisplayValue, - } = render(); + const { rerender, findByPlaceholderText, findAllByPlaceholderText } = render( + + ); 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( () => @@ -41,6 +31,4 @@ test('findBy queries work asynchronously', async () => { 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__/render.test.js b/src/__tests__/render.test.js index 66659958f..14bd45f5c 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -133,51 +133,6 @@ test('getAllByPlaceholderText, queryAllByPlaceholderText', () => { 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' }); From bdc11bf0098ee79324dcd59e5c0d4f1d4fb9e924 Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 15:55:33 +0100 Subject: [PATCH 3/8] test: extract byPlaceholderTest related tests --- src/__tests__/byPlaceholderText.test.js | 111 ++++++++++++++++++++++++ src/__tests__/findByApi.test.js | 34 -------- src/__tests__/render.test.js | 35 -------- 3 files changed, 111 insertions(+), 69 deletions(-) create mode 100644 src/__tests__/byPlaceholderText.test.js delete mode 100644 src/__tests__/findByApi.test.js diff --git a/src/__tests__/byPlaceholderText.test.js b/src/__tests__/byPlaceholderText.test.js new file mode 100644 index 000000000..77c007ea4 --- /dev/null +++ b/src/__tests__/byPlaceholderText.test.js @@ -0,0 +1,111 @@ +// @flow +import * as React from 'react'; +import { View, Text, TextInput, TouchableOpacity } 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?'; + +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} + + ); + } +} + +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__/findByApi.test.js b/src/__tests__/findByApi.test.js deleted file mode 100644 index 72459acfb..000000000 --- a/src/__tests__/findByApi.test.js +++ /dev/null @@ -1,34 +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, findByPlaceholderText, findAllByPlaceholderText } = render( - - ); - await expect( - findByPlaceholderText('Placeholder Text', options) - ).rejects.toBeTruthy(); - await expect( - findAllByPlaceholderText('Placeholder Text', options) - ).rejects.toBeTruthy(); - - setTimeout( - () => - rerender( - - Some Text - - - - ), - 20 - ); - - await expect(findByPlaceholderText('Placeholder Text')).resolves.toBeTruthy(); - await expect( - findAllByPlaceholderText('Placeholder Text') - ).resolves.toHaveLength(1); -}, 20000); diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index 14bd45f5c..6f279ae21 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -98,41 +98,6 @@ test('UNSAFE_getAllByType, UNSAFE_queryAllByType', () => { expect(UNSAFE_queryAllByType(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('UNSAFE_getByProps, UNSAFE_queryByProps', () => { const { UNSAFE_getByProps, UNSAFE_queryByProps } = render(); const primaryType = UNSAFE_getByProps({ type: 'primary' }); From bfc02cd12f5c3e7a585eb3adc690d87bb1f6fa67 Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 17:27:49 +0100 Subject: [PATCH 4/8] test: delete unused code in byText test --- src/__tests__/byText.test.js | 51 +++--------------------------------- 1 file changed, 4 insertions(+), 47 deletions(-) diff --git a/src/__tests__/byText.test.js b/src/__tests__/byText.test.js index 18a55346c..5ba344bbe 100644 --- a/src/__tests__/byText.test.js +++ b/src/__tests__/byText.test.js @@ -1,15 +1,8 @@ // @flow import * as React from 'react'; -import { View, Text, TextInput, TouchableOpacity, Image } from 'react-native'; +import { View, Text, TouchableOpacity, Image } 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?'; - class MyButton extends React.Component { render() { return ( @@ -21,50 +14,14 @@ class MyButton extends React.Component { } 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'} - - - - - - + not fresh + + Change freshness! First Text From 7d9426dcf8705cce8c5df67892fc502240c944ab Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 17:30:41 +0100 Subject: [PATCH 5/8] test: delete unused code in byTest tests --- src/__tests__/byTestId.test.js | 47 +++------------------------------- 1 file changed, 3 insertions(+), 44 deletions(-) diff --git a/src/__tests__/byTestId.test.js b/src/__tests__/byTestId.test.js index f24ea7016..f5d20b1fa 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,47 +8,12 @@ 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'} - + not fresh { placeholder={PLACEHOLDER_CHEF} value={INPUT_CHEF} /> - - Change freshness! - First Text Second Text - {test} ); } } -const MyComponent = () => { - return My Component; -}; +const MyComponent = () => My Component; test('getByTestId returns only native elements', () => { const { getByTestId, getAllByTestId } = render( From a2b5c424236b71a147cb60cfe3f0a312118d234a Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 17:32:14 +0100 Subject: [PATCH 6/8] test: delete unused code in byDisplayValue tests --- src/__tests__/byDisplayValue.test.js | 45 +--------------------------- 1 file changed, 1 insertion(+), 44 deletions(-) diff --git a/src/__tests__/byDisplayValue.test.js b/src/__tests__/byDisplayValue.test.js index 96fdfca6b..a17403902 100644 --- a/src/__tests__/byDisplayValue.test.js +++ b/src/__tests__/byDisplayValue.test.js @@ -1,6 +1,6 @@ // @flow import * as React from 'react'; -import { View, Text, TextInput, TouchableOpacity } from 'react-native'; +import { View, TextInput } from 'react-native'; import { render } from '..'; @@ -11,47 +11,10 @@ const INPUT_CHEF = 'I inspected freshie'; const DEFAULT_INPUT_CHEF = 'What did you inspect?'; const DEFAULT_INPUT_CUSTOMER = 'What banana?'; -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} ); } From a5fb0ce67d44b4c832628c6c96170c78a29d6fec Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 17:33:08 +0100 Subject: [PATCH 7/8] test: delete unused code in byPlaceholderText tests --- src/__tests__/byPlaceholderText.test.js | 48 +------------------------ 1 file changed, 1 insertion(+), 47 deletions(-) diff --git a/src/__tests__/byPlaceholderText.test.js b/src/__tests__/byPlaceholderText.test.js index 77c007ea4..f7fbac0c6 100644 --- a/src/__tests__/byPlaceholderText.test.js +++ b/src/__tests__/byPlaceholderText.test.js @@ -1,6 +1,6 @@ // @flow import * as React from 'react'; -import { View, Text, TextInput, TouchableOpacity } from 'react-native'; +import { View, TextInput } from 'react-native'; import { render } from '..'; const PLACEHOLDER_FRESHNESS = 'Add custom freshness'; @@ -8,49 +8,11 @@ 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?'; - -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'} - { value={INPUT_CHEF} defaultValue={DEFAULT_INPUT_CHEF} /> - - - - Change freshness! - - First Text - Second Text - {test} ); } From 8862de56670e6604b1d4a979e2baf5f63e820225 Mon Sep 17 00:00:00 2001 From: MattAgn Date: Sun, 7 Feb 2021 17:36:22 +0100 Subject: [PATCH 8/8] test: replace class components with function components --- src/__tests__/byDisplayValue.test.js | 38 +++++++++---------- src/__tests__/byPlaceholderText.test.js | 34 ++++++++--------- src/__tests__/byTestId.test.js | 40 +++++++++----------- src/__tests__/byText.test.js | 50 +++++++++++-------------- 4 files changed, 72 insertions(+), 90 deletions(-) diff --git a/src/__tests__/byDisplayValue.test.js b/src/__tests__/byDisplayValue.test.js index a17403902..4bdc743d9 100644 --- a/src/__tests__/byDisplayValue.test.js +++ b/src/__tests__/byDisplayValue.test.js @@ -11,27 +11,23 @@ const INPUT_CHEF = 'I inspected freshie'; const DEFAULT_INPUT_CHEF = 'What did you inspect?'; const DEFAULT_INPUT_CUSTOMER = 'What banana?'; -class Banana extends React.Component { - render() { - return ( - - - - - - - ); - } -} +const Banana = () => ( + + + + + + +); test('getByDisplayValue, queryByDisplayValue', () => { const { getByDisplayValue, queryByDisplayValue } = render(); diff --git a/src/__tests__/byPlaceholderText.test.js b/src/__tests__/byPlaceholderText.test.js index f7fbac0c6..6e4ee1c00 100644 --- a/src/__tests__/byPlaceholderText.test.js +++ b/src/__tests__/byPlaceholderText.test.js @@ -9,25 +9,21 @@ const INPUT_FRESHNESS = 'Custom Freshie'; const INPUT_CHEF = 'I inspected freshie'; const DEFAULT_INPUT_CHEF = 'What did you inspect?'; -class Banana extends React.Component { - render() { - return ( - - - - - ); - } -} +const Banana = () => ( + + + + +); test('getByPlaceholderText, queryByPlaceholderText', () => { const { getByPlaceholderText, queryByPlaceholderText } = render(); diff --git a/src/__tests__/byTestId.test.js b/src/__tests__/byTestId.test.js index f5d20b1fa..3f8363e5a 100644 --- a/src/__tests__/byTestId.test.js +++ b/src/__tests__/byTestId.test.js @@ -8,28 +8,24 @@ const PLACEHOLDER_CHEF = 'Who inspected freshness?'; const INPUT_FRESHNESS = 'Custom Freshie'; const INPUT_CHEF = 'I inspected freshie'; -class Banana extends React.Component { - render() { - return ( - - Is the banana fresh? - not fresh - - - First Text - Second Text - - ); - } -} +const Banana = () => ( + + Is the banana fresh? + not fresh + + + First Text + Second Text + +); const MyComponent = () => My Component; diff --git a/src/__tests__/byText.test.js b/src/__tests__/byText.test.js index 5ba344bbe..987cc197e 100644 --- a/src/__tests__/byText.test.js +++ b/src/__tests__/byText.test.js @@ -3,34 +3,28 @@ import * as React from 'react'; import { View, Text, TouchableOpacity, Image } from 'react-native'; import { render } from '..'; -class MyButton extends React.Component { - render() { - return ( - - {this.props.children} - - ); - } -} - -class Banana extends React.Component { - render() { - const test = 0; - return ( - - Is the banana fresh? - not fresh - - - Change freshness! - - First Text - Second Text - {test} - - ); - } -} +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();