Skip to content

Commit ffda1de

Browse files
MattAgnMattAgn
authored
Extract tests by queries (#666)
* test: extract byText related tests * test: extract byDisplayValue related tests * test: extract byPlaceholderTest related tests * test: delete unused code in byText test * test: delete unused code in byTest tests * test: delete unused code in byDisplayValue tests * test: delete unused code in byPlaceholderText tests * test: replace class components with function components
1 parent e716cc4 commit ffda1de

7 files changed

+402
-373
lines changed

‎src/__tests__/byDisplayValue.test.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// @flow
2+
import * as React from 'react';
3+
import { View, TextInput } from 'react-native';
4+
5+
import { render } from '..';
6+
7+
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
8+
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
9+
const INPUT_FRESHNESS = 'Custom Freshie';
10+
const INPUT_CHEF = 'I inspected freshie';
11+
const DEFAULT_INPUT_CHEF = 'What did you inspect?';
12+
const DEFAULT_INPUT_CUSTOMER = 'What banana?';
13+
14+
const Banana = () => (
15+
<View>
16+
<TextInput
17+
testID="bananaCustomFreshness"
18+
placeholder={PLACEHOLDER_FRESHNESS}
19+
value={INPUT_FRESHNESS}
20+
/>
21+
<TextInput
22+
testID="bananaChef"
23+
placeholder={PLACEHOLDER_CHEF}
24+
value={INPUT_CHEF}
25+
defaultValue={DEFAULT_INPUT_CHEF}
26+
/>
27+
<TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
28+
<TextInput defaultValue={'hello'} value="" />
29+
</View>
30+
);
31+
32+
test('getByDisplayValue, queryByDisplayValue', () => {
33+
const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
34+
const input = getByDisplayValue(/custom/i);
35+
36+
expect(input.props.value).toBe(INPUT_FRESHNESS);
37+
38+
const sameInput = getByDisplayValue(INPUT_FRESHNESS);
39+
40+
expect(sameInput.props.value).toBe(INPUT_FRESHNESS);
41+
expect(() => getByDisplayValue('no value')).toThrow(
42+
'Unable to find an element with displayValue: no value'
43+
);
44+
45+
expect(queryByDisplayValue(/custom/i)).toBe(input);
46+
expect(queryByDisplayValue('no value')).toBeNull();
47+
expect(() => queryByDisplayValue(/fresh/i)).toThrow(
48+
'Found multiple elements with display value: /fresh/i'
49+
);
50+
});
51+
52+
test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
53+
const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
54+
expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrow();
55+
expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
56+
57+
expect(() => getByDisplayValue('hello')).toThrow();
58+
expect(queryByDisplayValue('hello')).toBeNull();
59+
60+
expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
61+
expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
62+
});
63+
64+
test('getAllByDisplayValue, queryAllByDisplayValue', () => {
65+
const { getAllByDisplayValue, queryAllByDisplayValue } = render(<Banana />);
66+
const inputs = getAllByDisplayValue(/fresh/i);
67+
68+
expect(inputs).toHaveLength(2);
69+
expect(() => getAllByDisplayValue('no value')).toThrow(
70+
'Unable to find an element with displayValue: no value'
71+
);
72+
73+
expect(queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
74+
expect(queryAllByDisplayValue('no value')).toHaveLength(0);
75+
});
76+
77+
test('findBy queries work asynchronously', async () => {
78+
const options = { timeout: 10 }; // Short timeout so that this test runs quickly
79+
const { rerender, findByDisplayValue, findAllByDisplayValue } = render(
80+
<View />
81+
);
82+
83+
await expect(
84+
findByDisplayValue('Display Value', options)
85+
).rejects.toBeTruthy();
86+
await expect(
87+
findAllByDisplayValue('Display Value', options)
88+
).rejects.toBeTruthy();
89+
90+
setTimeout(
91+
() =>
92+
rerender(
93+
<View>
94+
<TextInput value="Display Value" />
95+
</View>
96+
),
97+
20
98+
);
99+
100+
await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy();
101+
await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
102+
}, 20000);

‎src/__tests__/byPlaceholderText.test.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// @flow
2+
import * as React from 'react';
3+
import { View, TextInput } from 'react-native';
4+
import { render } from '..';
5+
6+
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
7+
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
8+
const INPUT_FRESHNESS = 'Custom Freshie';
9+
const INPUT_CHEF = 'I inspected freshie';
10+
const DEFAULT_INPUT_CHEF = 'What did you inspect?';
11+
12+
const Banana = () => (
13+
<View>
14+
<TextInput
15+
testID="bananaCustomFreshness"
16+
placeholder={PLACEHOLDER_FRESHNESS}
17+
value={INPUT_FRESHNESS}
18+
/>
19+
<TextInput
20+
testID="bananaChef"
21+
placeholder={PLACEHOLDER_CHEF}
22+
value={INPUT_CHEF}
23+
defaultValue={DEFAULT_INPUT_CHEF}
24+
/>
25+
</View>
26+
);
27+
28+
test('getByPlaceholderText, queryByPlaceholderText', () => {
29+
const { getByPlaceholderText, queryByPlaceholderText } = render(<Banana />);
30+
const input = getByPlaceholderText(/custom/i);
31+
32+
expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
33+
34+
const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS);
35+
36+
expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
37+
expect(() => getByPlaceholderText('no placeholder')).toThrow(
38+
'Unable to find an element with placeholder: no placeholder'
39+
);
40+
41+
expect(queryByPlaceholderText(/add/i)).toBe(input);
42+
expect(queryByPlaceholderText('no placeholder')).toBeNull();
43+
expect(() => queryByPlaceholderText(/fresh/)).toThrow(
44+
'Found multiple elements with placeholder: /fresh/ '
45+
);
46+
});
47+
48+
test('getAllByPlaceholderText, queryAllByPlaceholderText', () => {
49+
const { getAllByPlaceholderText, queryAllByPlaceholderText } = render(
50+
<Banana />
51+
);
52+
const inputs = getAllByPlaceholderText(/fresh/i);
53+
54+
expect(inputs).toHaveLength(2);
55+
expect(() => getAllByPlaceholderText('no placeholder')).toThrow(
56+
'Unable to find an element with placeholder: no placeholder'
57+
);
58+
59+
expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
60+
expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0);
61+
});

‎src/__tests__/byTestId.test.js

+21-66
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,33 @@
11
// @flow
22
import React from 'react';
3-
import { View, Text, TextInput, TouchableOpacity, Button } from 'react-native';
3+
import { View, Text, TextInput, Button } from 'react-native';
44
import { render } from '..';
55

66
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
77
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
88
const INPUT_FRESHNESS = 'Custom Freshie';
99
const INPUT_CHEF = 'I inspected freshie';
1010

11-
class MyButton extends React.Component<any> {
12-
render() {
13-
return (
14-
<TouchableOpacity onPress={this.props.onPress}>
15-
<Text>{this.props.children}</Text>
16-
</TouchableOpacity>
17-
);
18-
}
19-
}
20-
21-
class Banana extends React.Component<any, any> {
22-
state = {
23-
fresh: false,
24-
};
25-
26-
componentDidUpdate() {
27-
if (this.props.onUpdate) {
28-
this.props.onUpdate();
29-
}
30-
}
31-
32-
componentWillUnmount() {
33-
if (this.props.onUnmount) {
34-
this.props.onUnmount();
35-
}
36-
}
37-
38-
changeFresh = () => {
39-
this.setState((state) => ({
40-
fresh: !state.fresh,
41-
}));
42-
};
43-
44-
render() {
45-
const test = 0;
46-
return (
47-
<View>
48-
<Text>Is the banana fresh?</Text>
49-
<Text testID="bananaFresh">
50-
{this.state.fresh ? 'fresh' : 'not fresh'}
51-
</Text>
52-
<TextInput
53-
testID="bananaCustomFreshness"
54-
placeholder={PLACEHOLDER_FRESHNESS}
55-
value={INPUT_FRESHNESS}
56-
/>
57-
<TextInput
58-
testID="bananaChef"
59-
placeholder={PLACEHOLDER_CHEF}
60-
value={INPUT_CHEF}
61-
/>
62-
<MyButton onPress={this.changeFresh} type="primary">
63-
Change freshness!
64-
</MyButton>
65-
<Text testID="duplicateText">First Text</Text>
66-
<Text testID="duplicateText">Second Text</Text>
67-
<Text>{test}</Text>
68-
</View>
69-
);
70-
}
71-
}
72-
73-
const MyComponent = () => {
74-
return <Text>My Component</Text>;
75-
};
11+
const Banana = () => (
12+
<View>
13+
<Text>Is the banana fresh?</Text>
14+
<Text testID="bananaFresh">not fresh</Text>
15+
<TextInput
16+
testID="bananaCustomFreshness"
17+
placeholder={PLACEHOLDER_FRESHNESS}
18+
value={INPUT_FRESHNESS}
19+
/>
20+
<TextInput
21+
testID="bananaChef"
22+
placeholder={PLACEHOLDER_CHEF}
23+
value={INPUT_CHEF}
24+
/>
25+
<Text testID="duplicateText">First Text</Text>
26+
<Text testID="duplicateText">Second Text</Text>
27+
</View>
28+
);
29+
30+
const MyComponent = () => <Text>My Component</Text>;
7631

7732
test('getByTestId returns only native elements', () => {
7833
const { getByTestId, getAllByTestId } = render(

0 commit comments

Comments
 (0)