Commit da98bc6b authored by Natalia Tepluhina's avatar Natalia Tepluhina Committed by Phil Hughes

Added more instructions to FE GraphQL Development guide about testing

parent 30d5ec8b
...@@ -144,6 +144,8 @@ Read more about local state management with Apollo in the [Vue Apollo documentat ...@@ -144,6 +144,8 @@ Read more about local state management with Apollo in the [Vue Apollo documentat
### Testing ### Testing
#### Mocking response as component data
With [Vue test utils][vue-test-utils] it is easy to quickly test components that 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 fetch GraphQL queries. The simplest way is to use `shallowMount` and then set
the data on the component the data on the component
...@@ -158,7 +160,100 @@ it('tests apollo 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 ## Usage outside of Vue
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment