diff options
Diffstat (limited to 'spec/frontend/design_management/pages/design')
-rw-r--r-- | spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap | 116 | ||||
-rw-r--r-- | spec/frontend/design_management/pages/design/index_spec.js | 137 |
2 files changed, 124 insertions, 129 deletions
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap index 76e481ee518..65c4811536e 100644 --- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap @@ -16,7 +16,7 @@ exports[`Design management design index page renders design index 1`] = ` <!----> <design-presentation-stub - discussions="[object Object]" + discussions="[object Object],[object Object]" image="test.jpg" imagename="test.jpg" scale="1" @@ -33,58 +33,86 @@ exports[`Design management design index page renders design index 1`] = ` class="image-notes" > <h2 - class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0" + class="gl-font-weight-bold gl-mt-0" > - My precious issue - + My precious issue + </h2> <a - class="text-tertiary text-decoration-none mb-3 d-block" + class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" href="full-issue-url" > ull-issue-path </a> <participants-stub - class="mb-4" + class="gl-mb-4" numberoflessparticipants="7" participants="[object Object]" /> - <div - class="design-discussion-wrapper" + <!----> + + <design-discussion-stub + data-testid="unresolved-discussion" + designid="test" + discussion="[object Object]" + discussionwithopenform="" + markdownpreviewpath="//preview_markdown?target_type=Issue" + noteableid="design-id" + /> + + <gl-button-stub + category="tertiary" + class="link-inherit-color gl-text-black-normal gl-text-decoration-none gl-font-weight-bold gl-mb-4" + data-testid="resolved-comments" + icon="chevron-right" + id="resolved-comments" + size="medium" + variant="link" > - <div - class="badge badge-pill" - type="button" - > - 1 - </div> + Resolved Comments (1) + + </gl-button-stub> + + <gl-popover-stub + container="popovercontainer" + cssclasses="" + placement="top" + show="true" + target="resolved-comments" + title="Resolved Comments" + > + <p> + + Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below + + </p> - <div - class="design-discussion bordered-box position-relative" - data-qa-selector="design_discussion_content" + <a + href="#" + rel="noopener noreferrer" + target="_blank" > - <design-note-stub - class="" - markdownpreviewpath="//preview_markdown?target_type=Issue" - note="[object Object]" - /> - - <div - class="reply-wrapper" - > - <reply-placeholder-stub - buttontext="Reply..." - class="qa-discussion-reply" - /> - </div> - </div> - </div> + Learn more about resolving comments + </a> + </gl-popover-stub> + + <gl-collapse-stub + class="gl-mt-3" + > + <design-discussion-stub + data-testid="resolved-discussion" + designid="test" + discussion="[object Object]" + discussionwithopenform="" + markdownpreviewpath="//preview_markdown?target_type=Issue" + noteableid="design-id" + /> + </gl-collapse-stub> - <!----> </div> </div> `; @@ -152,33 +180,37 @@ exports[`Design management design index page with error GlAlert is rendered in c class="image-notes" > <h2 - class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0" + class="gl-font-weight-bold gl-mt-0" > - My precious issue - + My precious issue + </h2> <a - class="text-tertiary text-decoration-none mb-3 d-block" + class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" href="full-issue-url" > ull-issue-path </a> <participants-stub - class="mb-4" + class="gl-mb-4" numberoflessparticipants="7" participants="[object Object]" /> <h2 - class="new-discussion-disclaimer gl-font-base m-0" + class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" + data-testid="new-discussion-disclaimer" > - Click the image where you'd like to start a new discussion - + Click the image where you'd like to start a new discussion + </h2> + + <!----> + </div> </div> `; 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 }); }); }); }); |