diff options
Diffstat (limited to 'spec/frontend/design_management/pages')
4 files changed, 96 insertions, 336 deletions
diff --git a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap index 2d29b79e31c..abd455ae750 100644 --- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap @@ -1,240 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Design management index page designs does not render toolbar when there is no permission 1`] = ` -<div - class="gl-mt-5" - data-testid="designs-root" -> - <!----> - - <div - class="gl-mt-6" - > - <ol - class="list-unstyled row" - > - <li - class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3" - data-testid="design-dropzone-wrapper" - > - <design-dropzone-stub - class="design-list-item design-list-item-new" - data-qa-selector="design_dropzone_content" - hasdesigns="true" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-1-name" - id="design-1" - image="design-1-image" - notescount="0" - /> - </design-dropzone-stub> - - <!----> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-2-name" - id="design-2" - image="design-2-image" - notescount="1" - /> - </design-dropzone-stub> - - <!----> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-3-name" - id="design-3" - image="design-3-image" - notescount="0" - /> - </design-dropzone-stub> - - <!----> - </li> - </ol> - </div> - - <router-view-stub - name="default" - /> -</div> -`; - -exports[`Design management index page designs renders designs list and header with upload button 1`] = ` -<div - class="gl-mt-5" - data-testid="designs-root" -> - <header - class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex" - > - <div - class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full" - > - <div> - <span - class="gl-font-weight-bold gl-mr-3" - > - Designs - </span> - - <design-version-dropdown-stub /> - </div> - - <div - class="qa-selector-toolbar gl-display-flex gl-align-items-center" - > - <gl-button-stub - buttontextclasses="" - category="primary" - class="gl-mr-4 js-select-all" - icon="" - size="small" - variant="link" - > - Select all - - </gl-button-stub> - - <div> - <delete-button-stub - buttoncategory="secondary" - buttonclass="gl-mr-3" - buttonsize="small" - buttonvariant="warning" - data-qa-selector="archive_button" - > - - Archive selected - - </delete-button-stub> - </div> - - <upload-button-stub /> - </div> - </div> - </header> - - <div - class="gl-mt-6" - > - <ol - class="list-unstyled row" - > - <li - class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3" - data-testid="design-dropzone-wrapper" - > - <design-dropzone-stub - class="design-list-item design-list-item-new" - data-qa-selector="design_dropzone_content" - hasdesigns="true" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-1-name" - id="design-1" - image="design-1-image" - notescount="0" - /> - </design-dropzone-stub> - - <input - class="design-checkbox" - data-qa-design="design-1-name" - data-qa-selector="design_checkbox" - type="checkbox" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-2-name" - id="design-2" - image="design-2-image" - notescount="1" - /> - </design-dropzone-stub> - - <input - class="design-checkbox" - data-qa-design="design-2-name" - data-qa-selector="design_checkbox" - type="checkbox" - /> - </li> - <li - class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" - > - <design-dropzone-stub - hasdesigns="true" - > - <design-stub - class="gl-bg-white" - event="NONE" - filename="design-3-name" - id="design-3" - image="design-3-image" - notescount="0" - /> - </design-dropzone-stub> - - <input - class="design-checkbox" - data-qa-design="design-3-name" - data-qa-selector="design_checkbox" - type="checkbox" - /> - </li> - </ol> - </div> - - <router-view-stub - name="default" - /> -</div> -`; - exports[`Design management index page designs renders error 1`] = ` <div class="gl-mt-5" @@ -277,7 +42,7 @@ exports[`Design management index page designs renders loading icon 1`] = ` class="gl-mt-6" > <gl-loading-icon-stub - color="orange" + color="dark" label="Loading" size="md" /> @@ -288,34 +53,3 @@ exports[`Design management index page designs renders loading icon 1`] = ` /> </div> `; - -exports[`Design management index page when has no designs renders design dropzone 1`] = ` -<div - class="gl-mt-5" - data-testid="designs-root" -> - <!----> - - <div - class="gl-mt-6" - > - <ol - class="list-unstyled row" - > - <li - class="col-12" - data-testid="design-dropzone-wrapper" - > - <design-dropzone-stub - class="" - data-qa-selector="design_dropzone_content" - /> - </li> - </ol> - </div> - - <router-view-stub - name="default" - /> -</div> -`; 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 3d6c2561ff6..03ae77d4977 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 @@ -136,7 +136,7 @@ exports[`Design management design index page sets loading state 1`] = ` > <gl-loading-icon-stub class="gl-align-self-center" - color="orange" + color="dark" label="Loading" size="xl" /> diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index d9f7146d258..88892bb1878 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -2,7 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueRouter from 'vue-router'; import { GlAlert } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import DesignIndex from '~/design_management/pages/design/index.vue'; import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignPresentation from '~/design_management/components/design_presentation.vue'; @@ -24,7 +24,13 @@ import mockAllVersions from '../../mock_data/all_versions'; jest.mock('~/flash'); const focusInput = jest.fn(); - +const mutate = jest.fn().mockResolvedValue(); +const mockPageLayoutElement = { + classList: { + add: jest.fn(), + remove: jest.fn(), + }, +}; const DesignReplyForm = { template: '<div><textarea ref="textarea"></textarea></div>', methods: { @@ -37,6 +43,32 @@ const mockDesignNoDiscussions = { nodes: [], }, }; +const newComment = 'new comment'; +const annotationCoordinates = { + x: 10, + y: 10, + width: 100, + height: 100, +}; +const createDiscussionMutationVariables = { + mutation: createImageDiffNoteMutation, + update: expect.anything(), + variables: { + input: { + body: newComment, + noteableId: design.id, + position: { + headSha: 'headSha', + baseSha: 'baseSha', + startSha: 'startSha', + paths: { + newPath: 'full-design-path', + }, + ...annotationCoordinates, + }, + }, + }, +}; const localVue = createLocalVue(); localVue.use(VueRouter); @@ -45,35 +77,6 @@ describe('Design management design index page', () => { let wrapper; let router; - const newComment = 'new comment'; - const annotationCoordinates = { - x: 10, - y: 10, - width: 100, - height: 100, - }; - const createDiscussionMutationVariables = { - mutation: createImageDiffNoteMutation, - update: expect.anything(), - variables: { - input: { - body: newComment, - noteableId: design.id, - position: { - headSha: 'headSha', - baseSha: 'baseSha', - startSha: 'startSha', - paths: { - newPath: 'full-design-path', - }, - ...annotationCoordinates, - }, - }, - }, - }; - - const mutate = jest.fn().mockResolvedValue(); - const findDiscussionForm = () => wrapper.find(DesignReplyForm); const findSidebar = () => wrapper.find(DesignSidebar); const findDesignPresentation = () => wrapper.find(DesignPresentation); @@ -122,19 +125,44 @@ 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); + describe('when navigating to component', () => { + it('applies fullscreen layout class', () => { + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); createComponent({ loading: true }); - expect(mockEl.classList.add).toHaveBeenCalledTimes(1); - expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); + expect(mockPageLayoutElement.classList.add).toHaveBeenCalledTimes(1); + expect(mockPageLayoutElement.classList.add).toHaveBeenCalledWith( + ...DESIGN_DETAIL_LAYOUT_CLASSLIST, + ); + }); + }); + + describe('when navigating within the component', () => { + it('`scale` prop of DesignPresentation component is 1', async () => { + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); + createComponent({ loading: false }, { data: { design, scale: 2 } }); + + await wrapper.vm.$nextTick(); + expect(findDesignPresentation().props('scale')).toBe(2); + + DesignIndex.beforeRouteUpdate.call(wrapper.vm, {}, {}, jest.fn()); + await wrapper.vm.$nextTick(); + + expect(findDesignPresentation().props('scale')).toBe(1); + }); + }); + + describe('when navigating away from component', () => { + it('removes fullscreen layout class', async () => { + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); + createComponent({ loading: true }); + + wrapper.vm.$options.beforeRouteLeave[0].call(wrapper.vm, {}, {}, jest.fn()); + + expect(mockPageLayoutElement.classList.remove).toHaveBeenCalledTimes(1); + expect(mockPageLayoutElement.classList.remove).toHaveBeenCalledWith( + ...DESIGN_DETAIL_LAYOUT_CLASSLIST, + ); }); }); @@ -267,7 +295,7 @@ describe('Design management design index page', () => { wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR); + expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR }); expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); @@ -288,7 +316,7 @@ describe('Design management design index page', () => { 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(createFlash).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR }); expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 27a91b11448..05238efd761 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -5,10 +5,12 @@ import VueRouter from 'vue-router'; import { GlEmptyState } from '@gitlab/ui'; import createMockApollo from 'jest/helpers/mock_apollo_helper'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; +import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import Index from '~/design_management/pages/index.vue'; import uploadDesignQuery from '~/design_management/graphql/mutations/upload_design.mutation.graphql'; import DesignDestroyer from '~/design_management/components/design_destroyer.vue'; -import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue'; +import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; import DeleteButton from '~/design_management/components/delete_button.vue'; import Design from '~/design_management/components/list/item.vue'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; @@ -16,10 +18,9 @@ import { EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, } from '~/design_management/utils/error_messages'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; 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'; import { designListQueryResponse, designUploadMutationCreatedResponse, @@ -29,8 +30,6 @@ import { reorderedDesigns, moveDesignMutationResponseWithErrors, } from '../mock_data/apollo_mock'; -import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql'; -import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql'; import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql'; import { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking'; @@ -106,6 +105,8 @@ describe('Design management index page', () => { const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]'); const findDesigns = () => wrapper.findAll(Design); const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs; + const findDesignUploadButton = () => wrapper.find('[data-testid="design-upload-button"]'); + const findDesignToolbarWrapper = () => wrapper.find('[data-testid="design-toolbar-wrapper"]'); async function moveDesigns(localWrapper) { await jest.runOnlyPendingTimers(); @@ -215,13 +216,17 @@ describe('Design management index page', () => { it('renders designs list and header with upload button', () => { createComponent({ allVersions: [mockVersion] }); - expect(wrapper.element).toMatchSnapshot(); + expect(findDesignsWrapper().exists()).toBe(true); + expect(findDesigns().length).toBe(3); + expect(findDesignToolbarWrapper().exists()).toBe(true); + expect(findDesignUploadButton().exists()).toBe(true); }); it('does not render toolbar when there is no permission', () => { createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false }); - expect(wrapper.element).toMatchSnapshot(); + expect(findDesignToolbarWrapper().exists()).toBe(false); + expect(findDesignUploadButton().exists()).toBe(false); }); it('has correct classes applied to design dropzone', () => { @@ -248,7 +253,7 @@ describe('Design management index page', () => { it('renders design dropzone', () => wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); + expect(findDropzone().exists()).toBe(true); })); it('has correct classes applied to design dropzone', () => { @@ -444,10 +449,10 @@ describe('Design management index page', () => { return uploadDesign.then(() => { expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith( - 'Upload skipped. test.jpg did not change.', - 'warning', - ); + expect(createFlash).toHaveBeenCalledWith({ + message: 'Upload skipped. test.jpg did not change.', + types: 'warning', + }); }); }); @@ -483,7 +488,7 @@ describe('Design management index page', () => { designDropzone.vm.$emit('change', eventPayload); expect(createFlash).toHaveBeenCalledTimes(1); - expect(createFlash).toHaveBeenCalledWith(message); + expect(createFlash).toHaveBeenCalledWith({ message }); }); }); @@ -682,13 +687,6 @@ describe('Design management index page', () => { }); describe('when navigating', () => { - it('ensures fullscreen layout is not applied', () => { - createComponent({ loading: true }); - - expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1); - expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); - }); - it('should trigger a scrollIntoView method if designs route is detected', () => { router.replace({ path: '/designs', @@ -755,7 +753,7 @@ describe('Design management index page', () => { await wrapper.vm.$nextTick(); - expect(createFlash).toHaveBeenCalledWith('Houston, we have a problem'); + expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' }); }); it('displays flash if mutation had a non-recoverable error', async () => { @@ -769,9 +767,9 @@ describe('Design management index page', () => { await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises) await wrapper.vm.$nextTick(); // kick off the DOM update for flash - expect(createFlash).toHaveBeenCalledWith( - 'Something went wrong when reordering designs. Please try again', - ); + expect(createFlash).toHaveBeenCalledWith({ + message: 'Something went wrong when reordering designs. Please try again', + }); }); }); }); |