From b8ad10bbf0e82aaa3b87789f4cdbe08add2fe78e Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <NataliaTepluhina@users.noreply.github.com>
Date: Wed, 11 Dec 2019 17:15:10 +0200
Subject: [PATCH] docs: added instructions about mocking loading state (#883)

* docs: add loading state mock instruction

* fix: fixed linting issues
---
 packages/docs/src/guide/testing.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/docs/src/guide/testing.md b/packages/docs/src/guide/testing.md
index 2c429011..e34be18a 100644
--- a/packages/docs/src/guide/testing.md
+++ b/packages/docs/src/guide/testing.md
@@ -41,6 +41,27 @@ test('called Apollo mutation in addHero() method', () => {
 })
 ```
 
+### Testing loading state with mocking $apollo
+If you want to test how your component renders when results from the GraphQL API are still loading, you can also mock a loading state in respective Apollo queries:
+
+```js
+test('renders correctly when loading allHeroes', () => {
+  const wrapper = mount(App, {
+    mocks: {
+      $apollo: {
+        queries: {
+          allHeroes: {
+            loading: true,
+          },
+        },
+      },
+    },
+  })
+
+  expect(wrapper.element).toMatchSnapshot();
+})
+```
+
 ## Tests with mocked GraqhQL schema
 
 You can also make some more deep and complicated tests with [mocked GraphQL schema](https://www.apollographql.com/docs/graphql-tools/mocking.html). This method doesn't include Apollo, but lets you check if certain query will be executed correctly with given schema.