diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-14 00:17:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-14 00:17:21 +0300 |
commit | b2e3da6a38f143a8c782dae4baceae3ed764733d (patch) | |
tree | 243bb5191b3c961a9b2951c3e99768fda02d251c /spec/frontend/design_management | |
parent | 53d77359a0e6bf78bfc8ef8c72995eebe1f9e63b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/design_management')
3 files changed, 83 insertions, 65 deletions
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap index b5a69b28a88..934bda570d4 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap @@ -7,7 +7,7 @@ exports[`Design management pagination component renders navigation buttons 1`] = class="gl-display-flex gl-align-items-center" > - 0 of 2 + 0 of 3 <gl-button-group-stub class="gl-mx-5" diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js index 8427d83ceee..46eb4c16af8 100644 --- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js +++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js @@ -1,9 +1,15 @@ /* global Mousetrap */ import 'mousetrap'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import { GlButtonGroup } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { nextTick } from 'vue'; import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue'; import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import { designListQueryResponse, designListQueryResponseNodes } from '../../mock_data/apollo_mock'; const push = jest.fn(); const $router = { @@ -18,11 +24,24 @@ const $route = { describe('Design management pagination component', () => { let wrapper; - function createComponent() { + const buildMockHandler = (nodes = designListQueryResponseNodes) => { + designListQueryResponse.data.project.issue.designCollection.designs.nodes = nodes; + return jest.fn().mockResolvedValue(designListQueryResponse); + }; + + const createMockApolloProvider = (handler) => { + Vue.use(VueApollo); + + return createMockApollo([[getDesignListQuery, handler]]); + }; + + function createComponent({ propsData = {}, handler = buildMockHandler() } = {}) { wrapper = shallowMount(DesignNavigation, { propsData: { id: '2', + ...propsData, }, + apolloProvider: createMockApolloProvider(handler), mocks: { $router, $route, @@ -30,48 +49,45 @@ describe('Design management pagination component', () => { }); } - beforeEach(() => { - createComponent(); - }); + const findGlButtonGroup = () => wrapper.findComponent(GlButtonGroup); + + it('hides components when designs are empty', async () => { + createComponent({ handler: buildMockHandler([]) }); + await waitForPromises(); - it('hides components when designs are empty', () => { + expect(findGlButtonGroup().exists()).toBe(false); expect(wrapper.element).toMatchSnapshot(); }); it('renders navigation buttons', async () => { - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ - designCollection: { designs: [{ id: '1' }, { id: '2' }] }, - }); + createComponent({ handler: buildMockHandler() }); + await waitForPromises(); - await nextTick(); + expect(findGlButtonGroup().exists()).toBe(true); expect(wrapper.element).toMatchSnapshot(); }); describe('keyboard buttons navigation', () => { - beforeEach(() => { - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ - designCollection: { designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }] }, - }); - }); + it('routes to previous design on Left button', async () => { + createComponent({ propsData: { id: designListQueryResponseNodes[1].filename } }); + await waitForPromises(); - it('routes to previous design on Left button', () => { Mousetrap.trigger('left'); expect(push).toHaveBeenCalledWith({ name: DESIGN_ROUTE_NAME, - params: { id: '1' }, + params: { id: designListQueryResponseNodes[0].filename }, query: {}, }); }); - it('routes to next design on Right button', () => { + it('routes to next design on Right button', async () => { + createComponent({ propsData: { id: designListQueryResponseNodes[1].filename } }); + await waitForPromises(); + Mousetrap.trigger('right'); expect(push).toHaveBeenCalledWith({ name: DESIGN_ROUTE_NAME, - params: { id: '3' }, + params: { id: designListQueryResponseNodes[2].filename }, query: {}, }); }); diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js index 2b99dcf14da..a7355719141 100644 --- a/spec/frontend/design_management/mock_data/apollo_mock.js +++ b/spec/frontend/design_management/mock_data/apollo_mock.js @@ -1,3 +1,45 @@ +export const designListQueryResponseNodes = [ + { + __typename: 'Design', + id: '1', + event: 'NONE', + filename: 'fox_1.jpg', + notesCount: 3, + image: 'image-1', + imageV432x230: 'image-1', + currentUserTodos: { + __typename: 'ToDo', + nodes: [], + }, + }, + { + __typename: 'Design', + id: '2', + event: 'NONE', + filename: 'fox_2.jpg', + notesCount: 2, + image: 'image-2', + imageV432x230: 'image-2', + currentUserTodos: { + __typename: 'ToDo', + nodes: [], + }, + }, + { + __typename: 'Design', + id: '3', + event: 'NONE', + filename: 'fox_3.jpg', + notesCount: 1, + image: 'image-3', + imageV432x230: 'image-3', + currentUserTodos: { + __typename: 'ToDo', + nodes: [], + }, + }, +]; + export const designListQueryResponse = { data: { project: { @@ -11,47 +53,7 @@ export const designListQueryResponse = { copyState: 'READY', designs: { __typename: 'DesignConnection', - nodes: [ - { - __typename: 'Design', - id: '1', - event: 'NONE', - filename: 'fox_1.jpg', - notesCount: 3, - image: 'image-1', - imageV432x230: 'image-1', - currentUserTodos: { - __typename: 'ToDo', - nodes: [], - }, - }, - { - __typename: 'Design', - id: '2', - event: 'NONE', - filename: 'fox_2.jpg', - notesCount: 2, - image: 'image-2', - imageV432x230: 'image-2', - currentUserTodos: { - __typename: 'ToDo', - nodes: [], - }, - }, - { - __typename: 'Design', - id: '3', - event: 'NONE', - filename: 'fox_3.jpg', - notesCount: 1, - image: 'image-3', - imageV432x230: 'image-3', - currentUserTodos: { - __typename: 'ToDo', - nodes: [], - }, - }, - ], + nodes: designListQueryResponseNodes, }, versions: { __typename: 'DesignVersion', |