diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-12-12 15:07:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-12-12 15:07:33 +0300 |
commit | 784fae4b9d7e92350075df2a43d06893080ed1e6 (patch) | |
tree | c7a6fd444acd6897622b233b250a34fd176f01da /doc | |
parent | fc53ce8e6ca67bf217470179a1ea6cf139bcffad (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc')
-rw-r--r-- | doc/development/fe_guide/graphql.md | 97 | ||||
-rw-r--r-- | doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md | 2 |
2 files changed, 97 insertions, 2 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 diff --git a/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md b/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md index f693b0b1e72..97c16a9794d 100644 --- a/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md +++ b/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md @@ -68,7 +68,7 @@ list. By default, the diff shows only the parts of a file which are changed. To view more unchanged lines above or below a change click on the -**Expand up** or **Expand down** icons. You can also click on **Show all lines** +**Expand up** or **Expand down** icons. You can also click on **Show unchanged lines** to expand the entire file. ![Incrementally expand merge request diffs](img/incrementally_expand_merge_request_diffs_v12_2.png) |