diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-12-12 12:07:33 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-12-12 12:07:33 +0000 |
commit | 784fae4b9d7e92350075df2a43d06893080ed1e6 (patch) | |
tree | c7a6fd444acd6897622b233b250a34fd176f01da /doc/development/fe_guide/graphql.md | |
parent | fc53ce8e6ca67bf217470179a1ea6cf139bcffad (diff) | |
download | gitlab-ce-784fae4b9d7e92350075df2a43d06893080ed1e6.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc/development/fe_guide/graphql.md')
-rw-r--r-- | doc/development/fe_guide/graphql.md | 97 |
1 files changed, 96 insertions, 1 deletions
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md index b813ea24750..40df5f3265a 100644 --- a/doc/development/fe_guide/graphql.md +++ b/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 |