Merge branch 'docs-apollo-testing' into 'master'

Added more instructions to FE GraphQL Development guide about testing

See merge request gitlab-org/gitlab!21557

doc/development/fe_guide/graphql.md

@@ -144,6 +144,8 @@ Read more about local state management with Apollo in the [Vue Apollo documentat
 
 ### Testing
 
+#### Mocking response as component data
+
 With [Vue test utils][vue-test-utils] it is easy to quickly test components that
 fetch GraphQL queries. The simplest way is to use `shallowMount` and then set
 the data on the component
@@ -158,7 +160,100 @@ it('tests apollo component', () => {
 });
 ```
 
-Another possible way is testing queries with mocked GraphQL schema. Read more about this way in [Vue Apollo testing documentation](https://vue-apollo.netlify.com/guide/testing.html#tests-with-mocked-graqhql-schema)
+#### Testing loading state
+
+If we need to test how our component renders when results from the GraphQL API are still loading, we can mock a loading state into respective Apollo queries/mutations:
+
+```javascript
+  function createComponent({
+    loading = false,
+  } = {}) {
+    const $apollo = {
+      queries: {
+        designs: {
+          loading,
+        },
+    };
+
+    wrapper = shallowMount(Index, {
+      sync: false,
+      mocks: { $apollo }
+    });
+  }
+
+  it('renders loading icon', () => {
+  createComponent({ loading: true });
+
+  expect(wrapper.element).toMatchSnapshot();
+})
+```
+
+#### Testing Apollo components
+
+If we use `ApolloQuery` or `ApolloMutation` in our components, in order to test their functionality we need to add a stub first:
+
+```javascript
+import { ApolloMutation } from 'vue-apollo';
+
+function createComponent(props = {}) {
+  wrapper = shallowMount(MyComponent, {
+    sync: false,
+    propsData: {
+      ...props,
+    },
+    stubs: {
+      ApolloMutation,
+    },
+  });
+}
+```
+
+`ApolloMutation` component exposes `mutate` method via scoped slot. If we want to test this method, we need to add it to mocks:
+
+```javascript
+const mutate = jest.fn(() => Promise.resolve());
+const $apollo = {
+  mutate,
+};
+
+function createComponent(props = {}) {
+  wrapper = shallowMount(MyComponent, {
+    sync: false,
+    propsData: {
+      ...props,
+    },
+    stubs: {
+      ApolloMutation,
+    },
+    mocks: {
+      $apollo:
+    }
+  });
+}
+```
+
+Then we can check if `mutate` is called with correct variables:
+
+```javascript
+const mutationVariables = {
+  mutation: createNoteMutation,
+  update: expect.anything(),
+  variables: {
+    input: {
+      noteableId: 'noteable-id',
+      body: 'test',
+      discussionId: '0',
+    },
+  },
+};
+
+it('calls mutation on submitting form ', () => {
+  createComponent()
+  findReplyForm().vm.$emit('submitForm');
+
+  expect(mutate).toHaveBeenCalledWith(mutationVariables);
+});
+```
 
 ## Usage outside of Vue