From fb8a6fc7e241df6e05a8a517dcd33a3b286c53b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Tue, 11 Jun 2019 13:32:26 +0200
Subject: [PATCH] chore(docs): improve examples to use better APIs

---
 README.md              |  4 ++--
 docs/API.md            | 16 ++++++++++++----
 docs/GettingStarted.md |  5 +++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 83c622e0..0d92a59b 100644
--- a/README.md
+++ b/README.md
@@ -44,8 +44,8 @@ function setAnswer(question, answer) {
 }
 
 test('should verify two questions', () => {
-  const { getAllByType, getByText } = render(<QuestionsBoard {...props} />);
-  const allQuestions = getAllByType(Question);
+  const { getAllByA11yRole, getByText } = render(<QuestionsBoard {...props} />);
+  const allQuestions = getAllByA11yRole('header');
 
   setAnswer(allQuestions[0], 'a1');
   setAnswer(allQuestions[1], 'a2');
diff --git a/docs/API.md b/docs/API.md
index 25299db8..ac5b480a 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -27,10 +27,18 @@ Deeply renders given React element and returns helpers to query the output compo
 
 ```jsx
 import { render } from 'react-native-testing-library';
+import { QuestionsBoard } from '../QuestionsBoard';
 
-const { getByTestId, getByText /*...*/ } = render(<Component />);
+test('should verify two questions', () => {
+  const { queryAllByA11yRole } = render(<QuestionsBoard {...props} />);
+  const allQuestions = queryAllByA11yRole('header');
+
+  expect(allQuestions).toHaveLength(2);
+});
 ```
 
+> When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://testing-library.com/docs/react-testing-library/setup#custom-render).
+
 The `render` method returns a `RenderResult` object that has a few properties:
 
 ### `...queries`
@@ -42,7 +50,9 @@ See [Queries](./Queries.md) for a complete list.
 #### Example
 
 ```jsx
-const { getByText, queryByA11yRole } = render(<Component />);
+import { render } from 'react-native-testing-library';
+
+const { getByText, queryByA11yStates } = render(<Component />);
 ```
 
 ### `update`
@@ -66,8 +76,6 @@ unmount(): void
 
 Unmount the in-memory tree, triggering the appropriate lifecycle events
 
-When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
-
 ### `debug`
 
 ```ts
diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md
index c666a0f1..d465e95e 100644
--- a/docs/GettingStarted.md
+++ b/docs/GettingStarted.md
@@ -29,8 +29,9 @@ function setAnswer(question, answer) {
 }
 
 test('should verify two questions', () => {
-  const { getAllByType, getByText } = render(<QuestionsBoard {...props} />);
-  const allQuestions = getAllByType(Question);
+  jest.spyOn(props, 'verifyQuestions');
+  const { getAllByA11yRole, getByText } = render(<QuestionsBoard {...props} />);
+  const allQuestions = getAllByA11yRole('header');
 
   setAnswer(allQuestions[0], 'a1');
   setAnswer(allQuestions[1], 'a2');