Skip to content

Commit 61a83e9

Browse files
authored
chore: update GettingStarted example with something you can run (#284)
1 parent b0e5e1b commit 61a83e9

File tree

2 files changed

+71
-12
lines changed

2 files changed

+71
-12
lines changed

docs/GettingStarted.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,29 +22,30 @@ This library is a replacement for [Enzyme](http://airbnb.io/enzyme/).
2222
```jsx
2323
import { render, fireEvent } from 'react-native-testing-library';
2424
import { QuestionsBoard } from '../QuestionsBoard';
25-
import { Question } from '../Question';
2625

27-
function setAnswer(question, answer) {
28-
fireEvent.changeText(question, answer);
29-
}
26+
test('form submits two answers', () => {
27+
const allQuestions = ['q1', 'q2'];
28+
const mockFn = jest.fn();
3029

31-
test('should verify two questions', () => {
32-
jest.spyOn(props, 'verifyQuestions');
33-
const { getAllByA11yRole, getByText } = render(<QuestionsBoard {...props} />);
34-
const allQuestions = getAllByA11yRole('header');
30+
const { getAllByA11yLabel, getByText } = render(
31+
<QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
32+
);
3533

36-
setAnswer(allQuestions[0], 'a1');
37-
setAnswer(allQuestions[1], 'a2');
34+
const answerInputs = getAllByA11yLabel('answer input');
3835

39-
fireEvent.press(getByText('submit'));
36+
fireEvent.changeText(answerInputs[0], 'a1');
37+
fireEvent.changeText(answerInputs[1], 'a2');
38+
fireEvent.press(getByText('Submit'));
4039

41-
expect(props.verifyQuestions).toBeCalledWith({
40+
expect(mockFn).toBeCalledWith({
4241
'1': { q: 'q1', a: 'a1' },
4342
'2': { q: 'q2', a: 'a2' },
4443
});
4544
});
4645
```
4746

47+
You can find the source of `QuestionsBoard` component and this example [here](../src/__tests__/questionsBoard.test.js).
48+
4849
## Installation
4950

5051
Open a Terminal in your project's folder and run:

src/__tests__/questionsBoard.test.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// @flow
2+
import React from 'react';
3+
import {
4+
View,
5+
TouchableOpacity,
6+
Text,
7+
ScrollView,
8+
TextInput,
9+
} from 'react-native';
10+
import { render, fireEvent } from '..';
11+
12+
function QuestionsBoard({ questions, onSubmit }) {
13+
const [data, setData] = React.useState({});
14+
15+
return (
16+
<ScrollView>
17+
{questions.map((q, index) => {
18+
return (
19+
<View key={q}>
20+
<Text>{q}</Text>
21+
<TextInput
22+
accessibilityLabel="answer input"
23+
onChangeText={text => {
24+
setData(state => ({
25+
...state,
26+
[index + 1]: { q, a: text },
27+
}));
28+
}}
29+
/>
30+
</View>
31+
);
32+
})}
33+
<TouchableOpacity onPress={() => onSubmit(data)}>
34+
<Text>Submit</Text>
35+
</TouchableOpacity>
36+
</ScrollView>
37+
);
38+
}
39+
40+
test('form submits two answers', () => {
41+
const allQuestions = ['q1', 'q2'];
42+
const mockFn = jest.fn();
43+
44+
const { getAllByA11yLabel, getByText } = render(
45+
<QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
46+
);
47+
48+
const answerInputs = getAllByA11yLabel('answer input');
49+
50+
fireEvent.changeText(answerInputs[0], 'a1');
51+
fireEvent.changeText(answerInputs[1], 'a2');
52+
fireEvent.press(getByText('Submit'));
53+
54+
expect(mockFn).toBeCalledWith({
55+
'1': { q: 'q1', a: 'a1' },
56+
'2': { q: 'q2', a: 'a2' },
57+
});
58+
});

0 commit comments

Comments
 (0)