From cf5decf562778918db7084bb1d26c6d10d2b662a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Thu, 23 Apr 2020 15:56:58 +0200
Subject: [PATCH] chore: update GettingStarted example with something you can
 run

---
 docs/GettingStarted.md               | 25 ++++++------
 src/__tests__/questionsBoard.test.js | 58 ++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 src/__tests__/questionsBoard.test.js

diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md
index 41c5ba0a0..9b11eddf3 100644
--- a/docs/GettingStarted.md
+++ b/docs/GettingStarted.md
@@ -22,29 +22,30 @@ This library is a replacement for [Enzyme](http://airbnb.io/enzyme/).
 ```jsx
 import { render, fireEvent } from 'react-native-testing-library';
 import { QuestionsBoard } from '../QuestionsBoard';
-import { Question } from '../Question';
 
-function setAnswer(question, answer) {
-  fireEvent.changeText(question, answer);
-}
+test('form submits two answers', () => {
+  const allQuestions = ['q1', 'q2'];
+  const mockFn = jest.fn();
 
-test('should verify two questions', () => {
-  jest.spyOn(props, 'verifyQuestions');
-  const { getAllByA11yRole, getByText } = render(<QuestionsBoard {...props} />);
-  const allQuestions = getAllByA11yRole('header');
+  const { getAllByA11yLabel, getByText } = render(
+    <QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
+  );
 
-  setAnswer(allQuestions[0], 'a1');
-  setAnswer(allQuestions[1], 'a2');
+  const answerInputs = getAllByA11yLabel('answer input');
 
-  fireEvent.press(getByText('submit'));
+  fireEvent.changeText(answerInputs[0], 'a1');
+  fireEvent.changeText(answerInputs[1], 'a2');
+  fireEvent.press(getByText('Submit'));
 
-  expect(props.verifyQuestions).toBeCalledWith({
+  expect(mockFn).toBeCalledWith({
     '1': { q: 'q1', a: 'a1' },
     '2': { q: 'q2', a: 'a2' },
   });
 });
 ```
 
+You can find the source of `QuestionsBoard` component and this example [here](../src/__tests__/questionsBoard.test.js).
+
 ## Installation
 
 Open a Terminal in your project's folder and run:
diff --git a/src/__tests__/questionsBoard.test.js b/src/__tests__/questionsBoard.test.js
new file mode 100644
index 000000000..6bef268df
--- /dev/null
+++ b/src/__tests__/questionsBoard.test.js
@@ -0,0 +1,58 @@
+// @flow
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  ScrollView,
+  TextInput,
+} from 'react-native';
+import { render, fireEvent } from '..';
+
+function QuestionsBoard({ questions, onSubmit }) {
+  const [data, setData] = React.useState({});
+
+  return (
+    <ScrollView>
+      {questions.map((q, index) => {
+        return (
+          <View key={q}>
+            <Text>{q}</Text>
+            <TextInput
+              accessibilityLabel="answer input"
+              onChangeText={text => {
+                setData(state => ({
+                  ...state,
+                  [index + 1]: { q, a: text },
+                }));
+              }}
+            />
+          </View>
+        );
+      })}
+      <TouchableOpacity onPress={() => onSubmit(data)}>
+        <Text>Submit</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+
+test('form submits two answers', () => {
+  const allQuestions = ['q1', 'q2'];
+  const mockFn = jest.fn();
+
+  const { getAllByA11yLabel, getByText } = render(
+    <QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
+  );
+
+  const answerInputs = getAllByA11yLabel('answer input');
+
+  fireEvent.changeText(answerInputs[0], 'a1');
+  fireEvent.changeText(answerInputs[1], 'a2');
+  fireEvent.press(getByText('Submit'));
+
+  expect(mockFn).toBeCalledWith({
+    '1': { q: 'q1', a: 'a1' },
+    '2': { q: 'q2', a: 'a2' },
+  });
+});