diff options
Diffstat (limited to 'spec/frontend/design_management/pages/design/index_spec.js')
| -rw-r--r-- | spec/frontend/design_management/pages/design/index_spec.js | 137 |
1 files changed, 50 insertions, 87 deletions
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 9e2f071a983..430cf8722fe 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -1,13 +1,12 @@ -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import VueRouter from 'vue-router'; import { GlAlert } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; import createFlash from '~/flash'; import DesignIndex from '~/design_management/pages/design/index.vue'; -import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; +import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; -import Participants from '~/sidebar/components/participants/participants.vue'; import createImageDiffNoteMutation from '~/design_management/graphql/mutations/createImageDiffNote.mutation.graphql'; -import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; import design from '../../mock_data/design'; import mockResponseWithDesigns from '../../mock_data/designs'; import mockResponseNoDesigns from '../../mock_data/no_designs'; @@ -17,6 +16,9 @@ import { DESIGN_VERSION_NOT_EXIST_ERROR, } from '~/design_management/utils/error_messages'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; +import createRouter from '~/design_management/router'; +import * as utils from '~/design_management/utils/design_management_utils'; +import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; jest.mock('~/flash'); jest.mock('mousetrap', () => ({ @@ -24,8 +26,13 @@ jest.mock('mousetrap', () => ({ unbind: jest.fn(), })); +const localVue = createLocalVue(); +localVue.use(VueRouter); + describe('Design management design index page', () => { let wrapper; + let router; + const newComment = 'new comment'; const annotationCoordinates = { x: 10, @@ -53,23 +60,12 @@ describe('Design management design index page', () => { }, }; - const updateActiveDiscussionMutationVariables = { - mutation: updateActiveDiscussionMutation, - variables: { - id: design.discussions.nodes[0].notes.nodes[0].id, - source: 'discussion', - }, - }; - const mutate = jest.fn().mockResolvedValue(); - const routerPush = jest.fn(); - const findDiscussions = () => wrapper.findAll(DesignDiscussion); const findDiscussionForm = () => wrapper.find(DesignReplyForm); - const findParticipants = () => wrapper.find(Participants); - const findDiscussionsWrapper = () => wrapper.find('.image-notes'); + const findSidebar = () => wrapper.find(DesignSidebar); - function createComponent(loading = false, data = {}, { routeQuery = {} } = {}) { + function createComponent(loading = false, data = {}) { const $apollo = { queries: { design: { @@ -79,20 +75,14 @@ describe('Design management design index page', () => { mutate, }; - const $router = { - push: routerPush, - }; - - const $route = { - query: routeQuery, - }; + router = createRouter(); wrapper = shallowMount(DesignIndex, { propsData: { id: '1' }, - mocks: { $apollo, $router, $route }, + mocks: { $apollo }, stubs: { ApolloMutation, - DesignDiscussion, + DesignSidebar, }, data() { return { @@ -104,6 +94,8 @@ describe('Design management design index page', () => { ...data, }; }, + localVue, + router, }); } @@ -111,6 +103,23 @@ describe('Design management design index page', () => { wrapper.destroy(); }); + describe('when navigating', () => { + it('applies fullscreen layout', () => { + const mockEl = { + classList: { + add: jest.fn(), + remove: jest.fn(), + }, + }; + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockEl); + createComponent(true); + + wrapper.vm.$router.push('/designs/test'); + expect(mockEl.classList.add).toHaveBeenCalledTimes(1); + expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); + }); + }); + it('sets loading state', () => { createComponent(true); @@ -124,63 +133,13 @@ describe('Design management design index page', () => { expect(wrapper.find(GlAlert).exists()).toBe(false); }); - it('renders participants', () => { - createComponent(false, { design }); - - expect(findParticipants().exists()).toBe(true); - }); - - it('passes the correct amount of participants to the Participants component', () => { + it('passes correct props to sidebar component', () => { createComponent(false, { design }); - expect(findParticipants().props('participants')).toHaveLength(1); - }); - - describe('when has no discussions', () => { - beforeEach(() => { - createComponent(false, { - design: { - ...design, - discussions: { - nodes: [], - }, - }, - }); - }); - - it('does not render discussions', () => { - expect(findDiscussions().exists()).toBe(false); - }); - - it('renders a message about possibility to create a new discussion', () => { - expect(wrapper.find('.new-discussion-disclaimer').exists()).toBe(true); - }); - }); - - describe('when has discussions', () => { - beforeEach(() => { - createComponent(false, { design }); - }); - - it('renders correct amount of discussions', () => { - expect(findDiscussions()).toHaveLength(1); - }); - - it('sends a mutation to set an active discussion when clicking on a discussion', () => { - findDiscussions() - .at(0) - .trigger('click'); - - expect(mutate).toHaveBeenCalledWith(updateActiveDiscussionMutationVariables); - }); - - it('sends a mutation to reset an active discussion when clicking outside of discussion', () => { - findDiscussionsWrapper().trigger('click'); - - expect(mutate).toHaveBeenCalledWith({ - ...updateActiveDiscussionMutationVariables, - variables: { id: undefined, source: 'discussion' }, - }); + expect(findSidebar().props()).toEqual({ + design, + markdownPreviewPath: '//preview_markdown?target_type=Issue', + resolvedDiscussionsExpanded: false, }); }); @@ -269,31 +228,35 @@ describe('Design management design index page', () => { describe('with no designs', () => { it('redirects to /designs', () => { createComponent(true); + router.push = jest.fn(); wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR); - expect(routerPush).toHaveBeenCalledTimes(1); - expect(routerPush).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); + expect(router.push).toHaveBeenCalledTimes(1); + expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); }); }); describe('when no design exists for given version', () => { it('redirects to /designs', () => { - // attempt to query for a version of the design that doesn't exist - createComponent(true, {}, { routeQuery: { version: '999' } }); + createComponent(true); wrapper.setData({ allVersions: mockAllVersions, }); + // attempt to query for a version of the design that doesn't exist + router.push({ query: { version: '999' } }); + router.push = jest.fn(); + wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); expect(createFlash).toHaveBeenCalledWith(DESIGN_VERSION_NOT_EXIST_ERROR); - expect(routerPush).toHaveBeenCalledTimes(1); - expect(routerPush).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); + expect(router.push).toHaveBeenCalledTimes(1); + expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); }); }); |