diff options
Diffstat (limited to 'spec/frontend/design_management')
32 files changed, 828 insertions, 849 deletions
diff --git a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap index 4c848256e5b..62a0f675cff 100644 --- a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap +++ b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap @@ -3,13 +3,13 @@ exports[`Design note pin component should match the snapshot of note when repositioning 1`] = ` <button aria-label="Comment form position" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator" style="left: 10px; top: 10px; cursor: move;" type="button" > - <icon-stub + <gl-icon-stub name="image-comment-dark" - size="16" + size="24" /> </button> `; @@ -17,7 +17,7 @@ exports[`Design note pin component should match the snapshot of note when reposi exports[`Design note pin component should match the snapshot of note with index 1`] = ` <button aria-label="Comment '1' position" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill" style="left: 10px; top: 10px;" type="button" > @@ -30,13 +30,13 @@ exports[`Design note pin component should match the snapshot of note with index exports[`Design note pin component should match the snapshot of note without index 1`] = ` <button aria-label="Comment form position" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator" style="left: 10px; top: 10px;" type="button" > - <icon-stub + <gl-icon-stub name="image-comment-dark" - size="16" + size="24" /> </button> `; diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js index 9d3bcd98e44..cd4ef1f0ccd 100644 --- a/spec/frontend/design_management/components/delete_button_spec.js +++ b/spec/frontend/design_management/components/delete_button_spec.js @@ -1,11 +1,11 @@ import { shallowMount } from '@vue/test-utils'; -import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import BatchDeleteButton from '~/design_management/components/delete_button.vue'; describe('Batch delete button component', () => { let wrapper; - const findButton = () => wrapper.find(GlDeprecatedButton); + const findButton = () => wrapper.find(GlButton); const findModal = () => wrapper.find(GlModal); function createComponent(isDeleting = false) { diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js index 102e8e0664c..176c10ea584 100644 --- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js @@ -61,6 +61,10 @@ describe('Design discussions component', () => { ...data, }; }, + provide: { + projectPath: 'project-path', + issueIid: '1', + }, mocks: { $apollo, $route: { diff --git a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap index 9cd427f6aae..d76b6e712fe 100644 --- a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap +++ b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap @@ -8,328 +8,9 @@ exports[`Design management list item component when item appears in view after i /> `; -exports[`Design management list item component with no notes renders item with correct status icon for creation event 1`] = ` -<router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" - to="[object Object]" -> - <div - class="card-body p-0 d-flex-center overflow-hidden position-relative" - > - <div - class="design-event position-absolute" - > - <span - aria-label="Added in this version" - title="Added in this version" - > - <icon-stub - class="text-success-500" - name="file-addition-solid" - size="18" - /> - </span> - </div> - - <gl-intersection-observer-stub - options="[object Object]" - > - <!----> - - <img - alt="test" - class="block mx-auto mw-100 mh-100 design-img" - data-qa-selector="design_image" - src="" - /> - </gl-intersection-observer-stub> - </div> - - <div - class="card-footer d-flex w-100" - > - <div - class="d-flex flex-column str-truncated-100" - > - <span - class="bold str-truncated-100" - data-qa-selector="design_file_name" - > - test - </span> - - <span - class="str-truncated-100" - > - - Updated - <timeago-stub - cssclass="" - time="01-01-2019" - tooltipplacement="bottom" - /> - </span> - </div> - - <!----> - </div> -</router-link-stub> -`; - -exports[`Design management list item component with no notes renders item with correct status icon for deletion event 1`] = ` -<router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" - to="[object Object]" -> - <div - class="card-body p-0 d-flex-center overflow-hidden position-relative" - > - <div - class="design-event position-absolute" - > - <span - aria-label="Deleted in this version" - title="Deleted in this version" - > - <icon-stub - class="text-danger-500" - name="file-deletion-solid" - size="18" - /> - </span> - </div> - - <gl-intersection-observer-stub - options="[object Object]" - > - <!----> - - <img - alt="test" - class="block mx-auto mw-100 mh-100 design-img" - data-qa-selector="design_image" - src="" - /> - </gl-intersection-observer-stub> - </div> - - <div - class="card-footer d-flex w-100" - > - <div - class="d-flex flex-column str-truncated-100" - > - <span - class="bold str-truncated-100" - data-qa-selector="design_file_name" - > - test - </span> - - <span - class="str-truncated-100" - > - - Updated - <timeago-stub - cssclass="" - time="01-01-2019" - tooltipplacement="bottom" - /> - </span> - </div> - - <!----> - </div> -</router-link-stub> -`; - -exports[`Design management list item component with no notes renders item with correct status icon for modification event 1`] = ` -<router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" - to="[object Object]" -> - <div - class="card-body p-0 d-flex-center overflow-hidden position-relative" - > - <div - class="design-event position-absolute" - > - <span - aria-label="Modified in this version" - title="Modified in this version" - > - <icon-stub - class="text-primary-500" - name="file-modified-solid" - size="18" - /> - </span> - </div> - - <gl-intersection-observer-stub - options="[object Object]" - > - <!----> - - <img - alt="test" - class="block mx-auto mw-100 mh-100 design-img" - data-qa-selector="design_image" - src="" - /> - </gl-intersection-observer-stub> - </div> - - <div - class="card-footer d-flex w-100" - > - <div - class="d-flex flex-column str-truncated-100" - > - <span - class="bold str-truncated-100" - data-qa-selector="design_file_name" - > - test - </span> - - <span - class="str-truncated-100" - > - - Updated - <timeago-stub - cssclass="" - time="01-01-2019" - tooltipplacement="bottom" - /> - </span> - </div> - - <!----> - </div> -</router-link-stub> -`; - -exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = ` -<router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" - to="[object Object]" -> - <div - class="card-body p-0 d-flex-center overflow-hidden position-relative" - > - <!----> - - <gl-intersection-observer-stub - options="[object Object]" - > - <!----> - - <img - alt="test" - class="block mx-auto mw-100 mh-100 design-img" - data-qa-selector="design_image" - src="" - /> - </gl-intersection-observer-stub> - </div> - - <div - class="card-footer d-flex w-100" - > - <div - class="d-flex flex-column str-truncated-100" - > - <span - class="bold str-truncated-100" - data-qa-selector="design_file_name" - > - test - </span> - - <span - class="str-truncated-100" - > - - Updated - <timeago-stub - cssclass="" - time="01-01-2019" - tooltipplacement="bottom" - /> - </span> - </div> - - <!----> - </div> -</router-link-stub> -`; - -exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = ` -<router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" - to="[object Object]" -> - <div - class="card-body p-0 d-flex-center overflow-hidden position-relative" - > - <!----> - - <gl-intersection-observer-stub - options="[object Object]" - > - <gl-loading-icon-stub - color="orange" - label="Loading" - size="md" - /> - - <img - alt="test" - class="block mx-auto mw-100 mh-100 design-img" - data-qa-selector="design_image" - src="" - style="display: none;" - /> - </gl-intersection-observer-stub> - </div> - - <div - class="card-footer d-flex w-100" - > - <div - class="d-flex flex-column str-truncated-100" - > - <span - class="bold str-truncated-100" - data-qa-selector="design_file_name" - > - test - </span> - - <span - class="str-truncated-100" - > - - Updated - <timeago-stub - cssclass="" - time="01-01-2019" - tooltipplacement="bottom" - /> - </span> - </div> - - <!----> - </div> -</router-link-stub> -`; - exports[`Design management list item component with notes renders item with multiple comments 1`] = ` <router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" + class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new" to="[object Object]" > <div @@ -337,9 +18,7 @@ exports[`Design management list item component with notes renders item with mult > <!----> - <gl-intersection-observer-stub - options="[object Object]" - > + <gl-intersection-observer-stub> <!----> <img @@ -401,7 +80,7 @@ exports[`Design management list item component with notes renders item with mult exports[`Design management list item component with notes renders item with single comment 1`] = ` <router-link-stub - class="card cursor-pointer text-plain js-design-list-item design-list-item" + class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new" to="[object Object]" > <div @@ -409,9 +88,7 @@ exports[`Design management list item component with notes renders item with sing > <!----> - <gl-intersection-observer-stub - options="[object Object]" - > + <gl-intersection-observer-stub> <!----> <img diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js index 705b532454f..d1c90bd57b0 100644 --- a/spec/frontend/design_management/components/list/item_spec.js +++ b/spec/frontend/design_management/components/list/item_spec.js @@ -1,6 +1,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; import VueRouter from 'vue-router'; +import Icon from '~/vue_shared/components/icon.vue'; import Item from '~/design_management/components/list/item.vue'; const localVue = createLocalVue(); @@ -18,6 +19,10 @@ const DESIGN_VERSION_EVENT = { describe('Design management list item component', () => { let wrapper; + const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]'); + const findEventIcon = () => findDesignEvent().find(Icon); + const findLoadingIcon = () => wrapper.find(GlLoadingIcon); + function createComponent({ notesCount = 0, event = DESIGN_VERSION_EVENT.NO_CHANGE, @@ -134,35 +139,31 @@ describe('Design management list item component', () => { }); }); - describe('with no notes', () => { - it('renders item with no status icon for none event', () => { - createComponent(); - - expect(wrapper.element).toMatchSnapshot(); - }); - - it('renders item with correct status icon for modification event', () => { - createComponent({ event: DESIGN_VERSION_EVENT.MODIFICATION }); - - expect(wrapper.element).toMatchSnapshot(); - }); - - it('renders item with correct status icon for deletion event', () => { - createComponent({ event: DESIGN_VERSION_EVENT.DELETION }); + it('renders loading spinner when isUploading is true', () => { + createComponent({ isUploading: true }); - expect(wrapper.element).toMatchSnapshot(); - }); + expect(findLoadingIcon().exists()).toBe(true); + }); - it('renders item with correct status icon for creation event', () => { - createComponent({ event: DESIGN_VERSION_EVENT.CREATION }); + it('renders item with no status icon for none event', () => { + createComponent(); - expect(wrapper.element).toMatchSnapshot(); - }); - - it('renders loading spinner when isUploading is true', () => { - createComponent({ isUploading: true }); + expect(findDesignEvent().exists()).toBe(false); + }); - expect(wrapper.element).toMatchSnapshot(); + describe('with associated event', () => { + it.each` + event | icon | className + ${DESIGN_VERSION_EVENT.MODIFICATION} | ${'file-modified-solid'} | ${'text-primary-500'} + ${DESIGN_VERSION_EVENT.DELETION} | ${'file-deletion-solid'} | ${'text-danger-500'} + ${DESIGN_VERSION_EVENT.CREATION} | ${'file-addition-solid'} | ${'text-success-500'} + `('renders item with correct status icon for $event event', ({ event, icon, className }) => { + createComponent({ event }); + const eventIcon = findEventIcon(); + + expect(eventIcon.exists()).toBe(true); + expect(eventIcon.props('name')).toBe(icon); + expect(eventIcon.classes()).toContain(className); }); }); }); diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap index 0197b4bff79..a7d6145285c 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap @@ -2,28 +2,34 @@ exports[`Design management pagination component hides components when designs are empty 1`] = `<!---->`; -exports[`Design management pagination component renders pagination buttons 1`] = ` +exports[`Design management pagination component renders navigation buttons 1`] = ` <div class="d-flex align-items-center" > 0 of 2 - <div - class="btn-group ml-3 mr-3" + <gl-button-group-stub + class="ml-3 mr-3" > - <pagination-button-stub + <gl-button-stub + category="primary" class="js-previous-design" - iconname="angle-left" + disabled="true" + icon="angle-left" + size="medium" title="Go to previous design" + variant="default" /> - <pagination-button-stub + <gl-button-stub + category="primary" class="js-next-design" - design="[object Object]" - iconname="angle-right" + icon="angle-right" + size="medium" title="Go to next design" + variant="default" /> - </div> + </gl-button-group-stub> </div> `; diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap index e55cff8de3d..b286a74ebb8 100644 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap @@ -2,60 +2,60 @@ exports[`Design management toolbar component renders design and updated data 1`] = ` <header - class="d-flex p-2 bg-white align-items-center js-design-header" + class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header" > - <a - aria-label="Go back to designs" - class="mr-3 text-plain d-flex justify-content-center align-items-center" - > - <icon-stub - name="close" - size="18" - /> - </a> - <div - class="overflow-hidden d-flex align-items-center" + class="gl-display-flex gl-align-items-center" > - <h2 - class="m-0 str-truncated-100 gl-font-base" + <a + aria-label="Go back to designs" + class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain" + data-testid="close-design" > - test.jpg - </h2> + <gl-icon-stub + name="close" + size="16" + /> + </a> - <small - class="text-secondary" + <div + class="overflow-hidden d-flex align-items-center" > - Updated 1 hour ago by Test Name - </small> + <h2 + class="m-0 str-truncated-100 gl-font-base" + > + test.jpg + </h2> + + <small + class="text-secondary" + > + Updated 1 hour ago by Test Name + </small> + </div> </div> - <pagination-stub + <design-navigation-stub class="ml-auto flex-shrink-0" id="1" /> - <gl-deprecated-button-stub - class="mr-2" + <gl-button-stub + category="primary" href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d" - size="md" - variant="secondary" - > - <icon-stub - name="download" - size="18" - /> - </gl-deprecated-button-stub> + icon="download" + size="medium" + variant="default" + /> <delete-button-stub + buttoncategory="secondary" buttonclass="" - buttonvariant="danger" + buttonicon="archive" + buttonsize="medium" + buttonvariant="warning" + class="gl-ml-3" hasselecteddesigns="true" - > - <icon-stub - name="remove" - size="18" - /> - </delete-button-stub> + /> </header> `; diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap deleted file mode 100644 index 08662a04f15..00000000000 --- a/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Design management pagination button component disables button when no design is passed 1`] = ` -<router-link-stub - aria-label="Test title" - class="btn btn-default disabled" - disabled="true" - to="[object Object]" -> - <icon-stub - name="angle-right" - size="16" - /> -</router-link-stub> -`; - -exports[`Design management pagination button component renders router-link 1`] = ` -<router-link-stub - aria-label="Test title" - class="btn btn-default" - to="[object Object]" -> - <icon-stub - name="angle-right" - size="16" - /> -</router-link-stub> -`; diff --git a/spec/frontend/design_management/components/toolbar/pagination_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js index db5a36dadf6..1c6588a9628 100644 --- a/spec/frontend/design_management/components/toolbar/pagination_spec.js +++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js @@ -1,7 +1,7 @@ /* global Mousetrap */ import 'mousetrap'; import { shallowMount } from '@vue/test-utils'; -import Pagination from '~/design_management/components/toolbar/pagination.vue'; +import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue'; import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; const push = jest.fn(); @@ -18,7 +18,7 @@ describe('Design management pagination component', () => { let wrapper; function createComponent() { - wrapper = shallowMount(Pagination, { + wrapper = shallowMount(DesignNavigation, { propsData: { id: '2', }, @@ -41,7 +41,7 @@ describe('Design management pagination component', () => { expect(wrapper.element).toMatchSnapshot(); }); - it('renders pagination buttons', () => { + it('renders navigation buttons', () => { wrapper.setData({ designs: [{ id: '1' }, { id: '2' }], }); diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js index 2910b2f62ba..2914365b0df 100644 --- a/spec/frontend/design_management/components/toolbar/index_spec.js +++ b/spec/frontend/design_management/components/toolbar/index_spec.js @@ -1,9 +1,9 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueRouter from 'vue-router'; +import { GlButton } from '@gitlab/ui'; import Toolbar from '~/design_management/components/toolbar/index.vue'; import DeleteButton from '~/design_management/components/delete_button.vue'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; -import { GlDeprecatedButton } from '@gitlab/ui'; const localVue = createLocalVue(); localVue.use(VueRouter); @@ -116,7 +116,7 @@ describe('Design management toolbar component', () => { }); it('renders download button with correct link', () => { - expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe( + expect(wrapper.find(GlButton).attributes('href')).toBe( '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d', ); }); diff --git a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js b/spec/frontend/design_management/components/toolbar/pagination_button_spec.js deleted file mode 100644 index b7df201795b..00000000000 --- a/spec/frontend/design_management/components/toolbar/pagination_button_spec.js +++ /dev/null @@ -1,61 +0,0 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import VueRouter from 'vue-router'; -import PaginationButton from '~/design_management/components/toolbar/pagination_button.vue'; -import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; - -const localVue = createLocalVue(); -localVue.use(VueRouter); -const router = new VueRouter(); - -describe('Design management pagination button component', () => { - let wrapper; - - function createComponent(design = null) { - wrapper = shallowMount(PaginationButton, { - localVue, - router, - propsData: { - design, - title: 'Test title', - iconName: 'angle-right', - }, - stubs: ['router-link'], - }); - } - - afterEach(() => { - wrapper.destroy(); - }); - - it('disables button when no design is passed', () => { - createComponent(); - - expect(wrapper.element).toMatchSnapshot(); - }); - - it('renders router-link', () => { - createComponent({ id: '2' }); - - expect(wrapper.element).toMatchSnapshot(); - }); - - describe('designLink', () => { - it('returns empty link when design is null', () => { - createComponent(); - - expect(wrapper.vm.designLink).toEqual({}); - }); - - it('returns design link', () => { - createComponent({ id: '2', filename: 'test' }); - - wrapper.vm.$router.replace('/root/test-project/issues/1/designs/test?version=1'); - - expect(wrapper.vm.designLink).toEqual({ - name: DESIGN_ROUTE_NAME, - params: { id: 'test' }, - query: { version: '1' }, - }); - }); - }); -}); diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap index 27c0ba589e6..3d7939df28e 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap @@ -4,16 +4,18 @@ exports[`Design management upload button component renders inverted upload desig <div isinverted="true" > - <gl-deprecated-button-stub - size="md" + <gl-button-stub + category="primary" + icon="" + size="small" title="Adding a design with the same filename replaces the file in a new version." - variant="success" + variant="default" > Upload designs <!----> - </gl-deprecated-button-stub> + </gl-button-stub> <input accept="image/*" @@ -27,11 +29,13 @@ exports[`Design management upload button component renders inverted upload desig exports[`Design management upload button component renders loading icon 1`] = ` <div> - <gl-deprecated-button-stub + <gl-button-stub + category="primary" disabled="true" - size="md" + icon="" + size="small" title="Adding a design with the same filename replaces the file in a new version." - variant="success" + variant="default" > Upload designs @@ -43,7 +47,7 @@ exports[`Design management upload button component renders loading icon 1`] = ` label="Loading" size="sm" /> - </gl-deprecated-button-stub> + </gl-button-stub> <input accept="image/*" @@ -57,16 +61,18 @@ exports[`Design management upload button component renders loading icon 1`] = ` exports[`Design management upload button component renders upload design button 1`] = ` <div> - <gl-deprecated-button-stub - size="md" + <gl-button-stub + category="primary" + icon="" + size="small" title="Adding a design with the same filename replaces the file in a new version." - variant="success" + variant="default" > Upload designs <!----> - </gl-deprecated-button-stub> + </gl-button-stub> <input accept="image/*" diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap index 0737b9729a2..9284099b40d 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap @@ -5,20 +5,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -43,7 +46,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -56,7 +61,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -74,20 +81,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -112,7 +122,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -125,7 +137,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -143,20 +157,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -180,7 +197,9 @@ exports[`Design management dropzone component when dragging renders correct temp <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -193,7 +212,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -211,20 +232,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -248,7 +272,9 @@ exports[`Design management dropzone component when dragging renders correct temp <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -261,7 +287,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -279,20 +307,23 @@ exports[`Design management dropzone component when dragging renders correct temp class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -316,7 +347,9 @@ exports[`Design management dropzone component when dragging renders correct temp <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -329,7 +362,9 @@ exports[`Design management dropzone component when dragging renders correct temp class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -347,20 +382,23 @@ exports[`Design management dropzone component when no slot provided renders defa class="w-100 position-relative" > <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" > <div - class="d-flex-center flex-column text-center" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" + data-testid="dropzone-area" > <gl-icon-stub - class="mb-4" - name="doc-new" - size="48" + class="gl-mb-2" + name="upload" + size="24" /> - <p> + <p + class="gl-mb-0" + > <gl-sprintf-stub - message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}." + message="Drop or %{linkStart}upload%{linkEnd} designs to attach" /> </p> </div> @@ -384,7 +422,9 @@ exports[`Design management dropzone component when no slot provided renders defa <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -397,7 +437,9 @@ exports[`Design management dropzone component when no slot provided renders defa class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> @@ -428,7 +470,9 @@ exports[`Design management dropzone component when slot provided renders dropzon <div class="mw-50 text-center" > - <h3> + <h3 + class="" + > Oh no! </h3> @@ -441,7 +485,9 @@ exports[`Design management dropzone component when slot provided renders dropzon class="mw-50 text-center" style="display: none;" > - <h3> + <h3 + class="" + > Incoming! </h3> diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap index 00f1a40dfb2..d6fd09eb698 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap @@ -1,111 +1,77 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Design management design version dropdown component renders design version dropdown button 1`] = ` -<gl-dropdown-stub - class="design-version-dropdown" +<gl-new-dropdown-stub + category="tertiary" + headertext="" issueiid="" projectpath="" - text="Showing Latest Version" - variant="link" + size="small" + text="Showing latest version" + variant="default" > - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 2 - - <span> - (latest) - </span> - </strong> - </div> - </div> - - <i - class="fa fa-check pull-right" - /> - </router-link-stub> - </gl-dropdown-item-stub> - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 1 - - <!----> - </strong> - </div> - </div> - - <!----> - </router-link-stub> - </gl-dropdown-item-stub> -</gl-dropdown-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischecked="true" + ischeckitem="true" + secondarytext="" + > + Version + 2 + (latest) + </gl-new-dropdown-item-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischeckitem="true" + secondarytext="" + > + Version + 1 + + </gl-new-dropdown-item-stub> +</gl-new-dropdown-stub> `; exports[`Design management design version dropdown component renders design version list 1`] = ` -<gl-dropdown-stub - class="design-version-dropdown" +<gl-new-dropdown-stub + category="tertiary" + headertext="" issueiid="" projectpath="" - text="Showing Latest Version" - variant="link" + size="small" + text="Showing latest version" + variant="default" > - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 2 - - <span> - (latest) - </span> - </strong> - </div> - </div> - - <i - class="fa fa-check pull-right" - /> - </router-link-stub> - </gl-dropdown-item-stub> - <gl-dropdown-item-stub> - <router-link-stub - class="d-flex js-version-link" - to="[object Object]" - > - <div - class="flex-grow-1 ml-2" - > - <div> - <strong> - Version 1 - - <!----> - </strong> - </div> - </div> - - <!----> - </router-link-stub> - </gl-dropdown-item-stub> -</gl-dropdown-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischecked="true" + ischeckitem="true" + secondarytext="" + > + Version + 2 + (latest) + </gl-new-dropdown-item-stub> + <gl-new-dropdown-item-stub + avatarurl="" + iconcolor="" + iconname="" + iconrightname="" + ischeckitem="true" + secondarytext="" + > + Version + 1 + + </gl-new-dropdown-item-stub> +</gl-new-dropdown-stub> `; diff --git a/spec/frontend/design_management/components/upload/design_dropzone_spec.js b/spec/frontend/design_management/components/upload/design_dropzone_spec.js index 9b86b5b2878..bf97399368f 100644 --- a/spec/frontend/design_management/components/upload/design_dropzone_spec.js +++ b/spec/frontend/design_management/components/upload/design_dropzone_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; import DesignDropzone from '~/design_management/components/upload/design_dropzone.vue'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; jest.mock('~/flash'); @@ -12,10 +13,16 @@ describe('Design management dropzone component', () => { }; const findDropzoneCard = () => wrapper.find('.design-dropzone-card'); + const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]'); + const findIcon = () => wrapper.find(GlIcon); - function createComponent({ slots = {}, data = {} } = {}) { + function createComponent({ slots = {}, data = {}, props = {} } = {}) { wrapper = shallowMount(DesignDropzone, { slots, + propsData: { + hasDesigns: true, + ...props, + }, data() { return data; }, @@ -129,4 +136,18 @@ describe('Design management dropzone component', () => { }); }); }); + + it('applies correct classes when there are no designs or no design saving loader', () => { + createComponent({ props: { hasDesigns: false } }); + expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column'); + expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-500']); + expect(findIcon().props('size')).toBe(16); + }); + + it('applies correct classes when there are designs or design saving loader', () => { + createComponent({ props: { hasDesigns: true } }); + expect(findDropzoneArea().classes()).toContain('gl-flex-direction-column'); + expect(findIcon().classes()).toEqual(['gl-mb-2']); + expect(findIcon().props('size')).toBe(24); + }); }); diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js index 7521b9fad2a..f4206cdaeb3 100644 --- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js +++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; +import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui'; import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import mockAllVersions from './mock_data/all_versions'; const LATEST_VERSION_ID = 3; @@ -30,7 +30,7 @@ describe('Design management design version dropdown component', () => { mocks: { $route, }, - stubs: ['router-link'], + stubs: { GlSprintf }, }); wrapper.setData({ @@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => { wrapper.destroy(); }); - const findVersionLink = index => wrapper.findAll('.js-version-link').at(index); + const findVersionLink = index => wrapper.findAll(GlNewDropdownItem).at(index); it('renders design version dropdown button', () => { createComponent(); @@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => { createComponent(); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); }); }); @@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => { createComponent({ maxVersions: 1 }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); }); }); @@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => { createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing version #1`); }); }); @@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => { createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); + expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); }); }); @@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => { createComponent(); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); + expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); }); }); }); diff --git a/spec/frontend/design_management/components/upload/mock_data/all_versions.js b/spec/frontend/design_management/components/upload/mock_data/all_versions.js index e76bbd261bd..237e1654f9b 100644 --- a/spec/frontend/design_management/components/upload/mock_data/all_versions.js +++ b/spec/frontend/design_management/components/upload/mock_data/all_versions.js @@ -1,14 +1,10 @@ export default [ { - node: { - id: 'gid://gitlab/DesignManagement::Version/3', - sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55', - }, + id: 'gid://gitlab/DesignManagement::Version/3', + sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55', }, { - node: { - id: 'gid://gitlab/DesignManagement::Version/2', - sha: '5b063fef0cd7213b312db65b30e24f057df21b20', - }, + id: 'gid://gitlab/DesignManagement::Version/2', + sha: '5b063fef0cd7213b312db65b30e24f057df21b20', }, ]; diff --git a/spec/frontend/design_management/mock_data/all_versions.js b/spec/frontend/design_management/mock_data/all_versions.js index c389fdb8747..2b216574e27 100644 --- a/spec/frontend/design_management/mock_data/all_versions.js +++ b/spec/frontend/design_management/mock_data/all_versions.js @@ -1,8 +1,6 @@ export default [ { - node: { - id: 'gid://gitlab/DesignManagement::Version/1', - sha: 'b389071a06c153509e11da1f582005b316667001', - }, + id: 'gid://gitlab/DesignManagement::Version/1', + sha: 'b389071a06c153509e11da1f582005b316667001', }, ]; diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js new file mode 100644 index 00000000000..5e2df3877a5 --- /dev/null +++ b/spec/frontend/design_management/mock_data/apollo_mock.js @@ -0,0 +1,106 @@ +export const designListQueryResponse = { + data: { + project: { + id: '1', + issue: { + designCollection: { + designs: { + nodes: [ + { + id: '1', + event: 'NONE', + filename: 'fox_1.jpg', + notesCount: 3, + image: 'image-1', + imageV432x230: 'image-1', + }, + { + id: '2', + event: 'NONE', + filename: 'fox_2.jpg', + notesCount: 2, + image: 'image-2', + imageV432x230: 'image-2', + }, + { + id: '3', + event: 'NONE', + filename: 'fox_3.jpg', + notesCount: 1, + image: 'image-3', + imageV432x230: 'image-3', + }, + ], + }, + versions: { + nodes: [], + }, + }, + }, + }, + }, +}; + +export const permissionsQueryResponse = { + data: { + project: { + id: '1', + issue: { + userPermissions: { createDesign: true }, + }, + }, + }, +}; + +export const reorderedDesigns = [ + { + id: '2', + event: 'NONE', + filename: 'fox_2.jpg', + notesCount: 2, + image: 'image-2', + imageV432x230: 'image-2', + }, + { + id: '1', + event: 'NONE', + filename: 'fox_1.jpg', + notesCount: 3, + image: 'image-1', + imageV432x230: 'image-1', + }, + { + id: '3', + event: 'NONE', + filename: 'fox_3.jpg', + notesCount: 1, + image: 'image-3', + imageV432x230: 'image-3', + }, +]; + +export const moveDesignMutationResponse = { + data: { + designManagementMove: { + designCollection: { + designs: { + nodes: [...reorderedDesigns], + }, + }, + errors: [], + }, + }, +}; + +export const moveDesignMutationResponseWithErrors = { + data: { + designManagementMove: { + designCollection: { + designs: { + nodes: [...reorderedDesigns], + }, + }, + errors: ['Houston, we have a problem'], + }, + }, +}; diff --git a/spec/frontend/design_management/mock_data/design.js b/spec/frontend/design_management/mock_data/design.js index 675198b9408..72be33fef1d 100644 --- a/spec/frontend/design_management/mock_data/design.js +++ b/spec/frontend/design_management/mock_data/design.js @@ -12,14 +12,12 @@ export default { webPath: 'full-issue-path', webUrl: 'full-issue-url', participants: { - edges: [ + nodes: [ { - node: { - name: 'Administrator', - username: 'root', - webUrl: 'link-to-author', - avatarUrl: 'link-to-avatar', - }, + name: 'Administrator', + username: 'root', + webUrl: 'link-to-author', + avatarUrl: 'link-to-avatar', }, ], }, diff --git a/spec/frontend/design_management/mock_data/designs.js b/spec/frontend/design_management/mock_data/designs.js index 07f5c1b7457..98a24081ae6 100644 --- a/spec/frontend/design_management/mock_data/designs.js +++ b/spec/frontend/design_management/mock_data/designs.js @@ -5,11 +5,7 @@ export default { issue: { designCollection: { designs: { - edges: [ - { - node: design, - }, - ], + nodes: [design], }, }, }, diff --git a/spec/frontend/design_management/mock_data/no_designs.js b/spec/frontend/design_management/mock_data/no_designs.js index 9db0ffcade2..0ccb83492fc 100644 --- a/spec/frontend/design_management/mock_data/no_designs.js +++ b/spec/frontend/design_management/mock_data/no_designs.js @@ -3,7 +3,7 @@ export default { issue: { designCollection: { designs: { - edges: [], + nodes: [], }, }, }, diff --git a/spec/frontend/design_management/mock_data/versions_list.js b/spec/frontend/design_management/mock_data/versions_list.js new file mode 100644 index 00000000000..e69de29bb2d --- /dev/null +++ b/spec/frontend/design_management/mock_data/versions_list.js 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 3ba63fd14f0..3881b2d7679 100644 --- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap @@ -1,7 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Design management index page designs does not render toolbar when there is no permission 1`] = ` -<div> +<div + class="gl-mt-5" + data-testid="designs-root" +> <!----> <div @@ -11,18 +14,22 @@ exports[`Design management index page designs does not render toolbar when there class="list-unstyled row" > <li - class="col-md-6 col-lg-4 mb-3" + 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" + class="design-list-item design-list-item-new" + hasdesigns="true" /> </li> - <li - class="col-md-6 col-lg-4 mb-3" + class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > - <design-dropzone-stub> + <design-dropzone-stub + hasdesigns="true" + > <design-stub + class="gl-bg-white" event="NONE" filename="design-1-name" id="design-1" @@ -34,10 +41,13 @@ exports[`Design management index page designs does not render toolbar when there <!----> </li> <li - class="col-md-6 col-lg-4 mb-3" + class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > - <design-dropzone-stub> + <design-dropzone-stub + hasdesigns="true" + > <design-stub + class="gl-bg-white" event="NONE" filename="design-2-name" id="design-2" @@ -49,10 +59,13 @@ exports[`Design management index page designs does not render toolbar when there <!----> </li> <li - class="col-md-6 col-lg-4 mb-3" + class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > - <design-dropzone-stub> + <design-dropzone-stub + hasdesigns="true" + > <design-stub + class="gl-bg-white" event="NONE" filename="design-3-name" id="design-3" @@ -73,35 +86,50 @@ exports[`Design management index page designs does not render toolbar when there `; exports[`Design management index page designs renders designs list and header with upload button 1`] = ` -<div> +<div + class="gl-mt-5" + data-testid="designs-root" +> <header class="row-content-block border-top-0 p-2 d-flex" > <div - class="d-flex justify-content-between align-items-center w-100" + class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full" > - <design-version-dropdown-stub /> + <div> + <span + class="gl-font-weight-bold gl-mr-3" + > + Designs + </span> + + <design-version-dropdown-stub /> + </div> <div - class="qa-selector-toolbar d-flex" + class="qa-selector-toolbar gl-display-flex gl-align-items-center" > - <gl-deprecated-button-stub - class="mr-2 js-select-all" - size="md" + <gl-button-stub + category="primary" + class="gl-mr-3 js-select-all" + icon="" + size="small" variant="link" > Select all - </gl-deprecated-button-stub> + + </gl-button-stub> <div> <delete-button-stub - buttonclass="btn-danger btn-inverted mr-2" - buttonvariant="" + buttoncategory="secondary" + buttonclass="gl-mr-3" + buttonsize="small" + buttonvariant="warning" > - Delete selected - - <!----> + Archive selected + </delete-button-stub> </div> @@ -117,18 +145,22 @@ exports[`Design management index page designs renders designs list and header wi class="list-unstyled row" > <li - class="col-md-6 col-lg-4 mb-3" + 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" + class="design-list-item design-list-item-new" + hasdesigns="true" /> </li> - <li - class="col-md-6 col-lg-4 mb-3" + class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > - <design-dropzone-stub> + <design-dropzone-stub + hasdesigns="true" + > <design-stub + class="gl-bg-white" event="NONE" filename="design-1-name" id="design-1" @@ -143,10 +175,13 @@ exports[`Design management index page designs renders designs list and header wi /> </li> <li - class="col-md-6 col-lg-4 mb-3" + class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > - <design-dropzone-stub> + <design-dropzone-stub + hasdesigns="true" + > <design-stub + class="gl-bg-white" event="NONE" filename="design-2-name" id="design-2" @@ -161,10 +196,13 @@ exports[`Design management index page designs renders designs list and header wi /> </li> <li - class="col-md-6 col-lg-4 mb-3" + class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > - <design-dropzone-stub> + <design-dropzone-stub + hasdesigns="true" + > <design-stub + class="gl-bg-white" event="NONE" filename="design-3-name" id="design-3" @@ -188,7 +226,10 @@ exports[`Design management index page designs renders designs list and header wi `; exports[`Design management index page designs renders error 1`] = ` -<div> +<div + class="gl-mt-5" + data-testid="designs-root" +> <!----> <div @@ -216,7 +257,10 @@ exports[`Design management index page designs renders error 1`] = ` `; exports[`Design management index page designs renders loading icon 1`] = ` -<div> +<div + class="gl-mt-5" + data-testid="designs-root" +> <!----> <div @@ -235,8 +279,11 @@ exports[`Design management index page designs renders loading icon 1`] = ` </div> `; -exports[`Design management index page when has no designs renders empty text 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 @@ -246,13 +293,13 @@ exports[`Design management index page when has no designs renders empty text 1`] class="list-unstyled row" > <li - class="col-md-6 col-lg-4 mb-3" + class="col-12" + data-testid="design-dropzone-wrapper" > <design-dropzone-stub - class="design-list-item" + class="" /> </li> - </ol> </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 65c4811536e..823294efc38 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 @@ -10,7 +10,7 @@ exports[`Design management design index page renders design index 1`] = ` <design-destroyer-stub filenames="test.jpg" iid="1" - projectpath="" + project-path="project-path" /> <!----> @@ -41,7 +41,7 @@ exports[`Design management design index page renders design index 1`] = ` </h2> <a - class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" + class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block" href="full-issue-url" > ull-issue-path @@ -60,13 +60,13 @@ exports[`Design management design index page renders design index 1`] = ` designid="test" discussion="[object Object]" discussionwithopenform="" - markdownpreviewpath="//preview_markdown?target_type=Issue" + markdownpreviewpath="/project-path/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" + category="primary" + class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" data-testid="resolved-comments" icon="chevron-right" id="resolved-comments" @@ -108,7 +108,7 @@ exports[`Design management design index page renders design index 1`] = ` designid="test" discussion="[object Object]" discussionwithopenform="" - markdownpreviewpath="//preview_markdown?target_type=Issue" + markdownpreviewpath="/project-path/preview_markdown?target_type=Issue" noteableid="design-id" /> </gl-collapse-stub> @@ -140,7 +140,7 @@ exports[`Design management design index page with error GlAlert is rendered in c <design-destroyer-stub filenames="test.jpg" iid="1" - projectpath="" + project-path="project-path" /> <div @@ -188,7 +188,7 @@ exports[`Design management design index page with error GlAlert is rendered in c </h2> <a - class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" + class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block" href="full-issue-url" > ull-issue-path diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 82b607eb77d..369c8667f4d 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 createFlash from '~/flash'; +import { deprecatedCreateFlash as 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'; @@ -95,9 +95,12 @@ describe('Design management design index page', () => { DesignSidebar, DesignReplyForm, }, + provide: { + issueIid: '1', + projectPath: 'project-path', + }, data() { return { - issueIid: '1', activeDiscussion: { id: null, source: null, @@ -149,7 +152,7 @@ describe('Design management design index page', () => { expect(findSidebar().props()).toEqual({ design, - markdownPreviewPath: '//preview_markdown?target_type=Issue', + markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue', resolvedDiscussionsExpanded: false, }); }); diff --git a/spec/frontend/design_management/pages/index_apollo_spec.js b/spec/frontend/design_management/pages/index_apollo_spec.js new file mode 100644 index 00000000000..3ea711c2cfa --- /dev/null +++ b/spec/frontend/design_management/pages/index_apollo_spec.js @@ -0,0 +1,162 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { createMockClient } from 'mock-apollo-client'; +import VueApollo from 'vue-apollo'; +import VueRouter from 'vue-router'; +import VueDraggable from 'vuedraggable'; +import { InMemoryCache } from 'apollo-cache-inmemory'; +import Design from '~/design_management/components/list/item.vue'; +import createRouter from '~/design_management/router'; +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 { deprecatedCreateFlash as createFlash } from '~/flash'; +import Index from '~/design_management/pages/index.vue'; +import { + designListQueryResponse, + permissionsQueryResponse, + moveDesignMutationResponse, + reorderedDesigns, + moveDesignMutationResponseWithErrors, +} from '../mock_data/apollo_mock'; + +jest.mock('~/flash'); + +const localVue = createLocalVue(); +localVue.use(VueApollo); + +const router = createRouter(); +localVue.use(VueRouter); + +const designToMove = { + __typename: 'Design', + id: '2', + event: 'NONE', + filename: 'fox_2.jpg', + notesCount: 2, + image: 'image-2', + imageV432x230: 'image-2', +}; + +describe('Design management index page with Apollo mock', () => { + let wrapper; + let mockClient; + let apolloProvider; + let moveDesignHandler; + + async function moveDesigns(localWrapper) { + await jest.runOnlyPendingTimers(); + await localWrapper.vm.$nextTick(); + + localWrapper.find(VueDraggable).vm.$emit('input', reorderedDesigns); + localWrapper.find(VueDraggable).vm.$emit('change', { + moved: { + newIndex: 0, + element: designToMove, + }, + }); + } + + const fragmentMatcher = { match: () => true }; + + const cache = new InMemoryCache({ + fragmentMatcher, + addTypename: false, + }); + + const findDesigns = () => wrapper.findAll(Design); + + function createComponent({ + moveHandler = jest.fn().mockResolvedValue(moveDesignMutationResponse), + }) { + mockClient = createMockClient({ cache }); + + mockClient.setRequestHandler( + getDesignListQuery, + jest.fn().mockResolvedValue(designListQueryResponse), + ); + + mockClient.setRequestHandler( + permissionsQuery, + jest.fn().mockResolvedValue(permissionsQueryResponse), + ); + + moveDesignHandler = moveHandler; + + mockClient.setRequestHandler(moveDesignMutation, moveDesignHandler); + + apolloProvider = new VueApollo({ + defaultClient: mockClient, + }); + + wrapper = shallowMount(Index, { + localVue, + apolloProvider, + router, + stubs: { VueDraggable }, + }); + } + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + mockClient = null; + apolloProvider = null; + }); + + it('has a design with id 1 as a first one', async () => { + createComponent({}); + + await jest.runOnlyPendingTimers(); + await wrapper.vm.$nextTick(); + + expect(findDesigns()).toHaveLength(3); + expect( + findDesigns() + .at(0) + .props('id'), + ).toBe('1'); + }); + + it('calls a mutation with correct parameters and reorders designs', async () => { + createComponent({}); + + await moveDesigns(wrapper); + + expect(moveDesignHandler).toHaveBeenCalled(); + + await wrapper.vm.$nextTick(); + + expect( + findDesigns() + .at(0) + .props('id'), + ).toBe('2'); + }); + + it('displays flash if mutation had a recoverable error', async () => { + createComponent({ + moveHandler: jest.fn().mockResolvedValue(moveDesignMutationResponseWithErrors), + }); + + await moveDesigns(wrapper); + + await wrapper.vm.$nextTick(); + + expect(createFlash).toHaveBeenCalledWith('Houston, we have a problem'); + }); + + it('displays flash if mutation had a non-recoverable error', async () => { + createComponent({ + moveHandler: jest.fn().mockRejectedValue('Error'), + }); + + await moveDesigns(wrapper); + + await jest.runOnlyPendingTimers(); + await wrapper.vm.$nextTick(); + + expect(createFlash).toHaveBeenCalledWith( + 'Something went wrong when reordering designs. Please try again', + ); + }); +}); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index d3761bf09e9..093fa155d2e 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -1,5 +1,6 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import { ApolloMutation } from 'vue-apollo'; +import VueDraggable from 'vuedraggable'; import VueRouter from 'vue-router'; import { GlEmptyState } from '@gitlab/ui'; import Index from '~/design_management/pages/index.vue'; @@ -12,7 +13,7 @@ import { EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, } from '~/design_management/utils/error_messages'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as 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'; @@ -25,6 +26,9 @@ const mockPageEl = { }; jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageEl); +const scrollIntoViewMock = jest.fn(); +HTMLElement.prototype.scrollIntoView = scrollIntoViewMock; + const localVue = createLocalVue(); const router = createRouter(); localVue.use(VueRouter); @@ -54,9 +58,7 @@ const mockDesigns = [ ]; const mockVersion = { - node: { - id: 'gid://gitlab/DesignManagement::Version/1', - }, + id: 'gid://gitlab/DesignManagement::Version/1', }; describe('Design management index page', () => { @@ -68,7 +70,10 @@ describe('Design management index page', () => { const findToolbar = () => wrapper.find('.qa-selector-toolbar'); const findDeleteButton = () => wrapper.find(DeleteButton); const findDropzone = () => wrapper.findAll(DesignDropzone).at(0); + const dropzoneClasses = () => findDropzone().classes(); + const findDropzoneWrapper = () => wrapper.find('[data-testid="design-dropzone-wrapper"]'); const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1); + const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]'); function createComponent({ loading = false, @@ -92,19 +97,23 @@ describe('Design management index page', () => { }; wrapper = shallowMount(Index, { + data() { + return { + designs, + allVersions, + permissions: { + createDesign, + }, + }; + }, mocks: { $apollo }, localVue, router, - stubs: { DesignDestroyer, ApolloMutation, ...stubs }, + stubs: { DesignDestroyer, ApolloMutation, VueDraggable, ...stubs }, attachToDocument: true, - }); - - wrapper.setData({ - designs, - allVersions, - issueIid: '1', - permissions: { - createDesign, + provide: { + projectPath: 'project-path', + issueIid: '1', }, }); } @@ -117,9 +126,7 @@ describe('Design management index page', () => { it('renders loading icon', () => { createComponent({ loading: true }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); - }); + expect(wrapper.element).toMatchSnapshot(); }); it('renders error', () => { @@ -135,25 +142,35 @@ describe('Design management index page', () => { it('renders a toolbar with buttons when there are designs', () => { createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); - return wrapper.vm.$nextTick().then(() => { - expect(findToolbar().exists()).toBe(true); - }); + expect(findToolbar().exists()).toBe(true); }); it('renders designs list and header with upload button', () => { createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); - }); + expect(wrapper.element).toMatchSnapshot(); }); it('does not render toolbar when there is no permission', () => { createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.element).toMatchSnapshot(); - }); + expect(wrapper.element).toMatchSnapshot(); + }); + + it('has correct classes applied to design dropzone', () => { + createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); + expect(dropzoneClasses()).toContain('design-list-item'); + expect(dropzoneClasses()).toContain('design-list-item-new'); + }); + + it('has correct classes applied to dropzone wrapper', () => { + createComponent({ designs: mockDesigns, allVersions: [mockVersion] }); + expect(findDropzoneWrapper().classes()).toEqual([ + 'gl-flex-direction-column', + 'col-md-6', + 'col-lg-3', + 'gl-mb-3', + ]); }); }); @@ -162,11 +179,20 @@ describe('Design management index page', () => { createComponent(); }); - it('renders empty text', () => + it('renders design dropzone', () => wrapper.vm.$nextTick().then(() => { expect(wrapper.element).toMatchSnapshot(); })); + it('has correct classes applied to design dropzone', () => { + expect(dropzoneClasses()).not.toContain('design-list-item'); + expect(dropzoneClasses()).not.toContain('design-list-item-new'); + }); + + it('has correct classes applied to dropzone wrapper', () => { + expect(findDropzoneWrapper().classes()).toEqual(['col-12']); + }); + it('does not render a toolbar with buttons', () => wrapper.vm.$nextTick().then(() => { expect(findToolbar().exists()).toBe(false); @@ -185,7 +211,7 @@ describe('Design management index page', () => { mutation: uploadDesignQuery, variables: { files: [{ name: 'test' }], - projectPath: '', + projectPath: 'project-path', iid: '1', }, optimisticResponse: { @@ -214,13 +240,10 @@ describe('Design management index page', () => { }, versions: { __typename: 'DesignVersionConnection', - edges: { - __typename: 'DesignVersionEdge', - node: { - __typename: 'DesignVersion', - id: expect.anything(), - sha: expect.anything(), - }, + nodes: { + __typename: 'DesignVersion', + id: expect.anything(), + sha: expect.anything(), }, }, }, @@ -231,12 +254,18 @@ describe('Design management index page', () => { }, }; - return wrapper.vm.$nextTick().then(() => { - findDropzone().vm.$emit('change', [{ name: 'test' }]); - expect(mutate).toHaveBeenCalledWith(mutationVariables); - expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]); - expect(wrapper.vm.isSaving).toBeTruthy(); - }); + return wrapper.vm + .$nextTick() + .then(() => { + findDropzone().vm.$emit('change', [{ name: 'test' }]); + expect(mutate).toHaveBeenCalledWith(mutationVariables); + expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]); + expect(wrapper.vm.isSaving).toBeTruthy(); + }) + .then(() => { + expect(dropzoneClasses()).toContain('design-list-item'); + expect(dropzoneClasses()).toContain('design-list-item-new'); + }); }); it('sets isSaving', () => { @@ -384,8 +413,7 @@ describe('Design management index page', () => { it('renders toolbar buttons', () => { expect(findToolbar().exists()).toBe(true); - expect(findToolbar().classes()).toContain('d-flex'); - expect(findToolbar().classes()).not.toContain('d-none'); + expect(findToolbar().isVisible()).toBe(true); }); it('adds two designs to selected designs when their checkboxes are checked', () => { @@ -442,9 +470,9 @@ describe('Design management index page', () => { }); }); - it('on latest version when has no designs does not render toolbar buttons', () => { + it('on latest version when has no designs toolbar buttons are invisible', () => { createComponent({ designs: [], allVersions: [mockVersion] }); - expect(findToolbar().exists()).toBe(false); + expect(findToolbar().isVisible()).toBe(false); }); describe('on non-latest version', () => { @@ -482,6 +510,10 @@ describe('Design management index page', () => { }); event = new Event('paste'); + event.clipboardData = { + files: [{ name: 'image.png', type: 'image/png' }], + getData: () => 'test.png', + }; router.replace({ name: DESIGNS_ROUTE_NAME, @@ -491,43 +523,52 @@ describe('Design management index page', () => { }); }); - it('calls onUploadDesign with valid paste', () => { - event.clipboardData = { - files: [{ name: 'image.png', type: 'image/png' }], - getData: () => 'test.png', - }; - + it('does not call paste event if designs wrapper is not hovered', () => { document.dispatchEvent(event); - expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1); - expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([ - new File([{ name: 'image.png' }], 'test.png'), - ]); + expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled(); }); - it('renames a design if it has an image.png filename', () => { - event.clipboardData = { - files: [{ name: 'image.png', type: 'image/png' }], - getData: () => 'image.png', - }; + describe('when designs wrapper is hovered', () => { + beforeEach(() => { + findDesignsWrapper().trigger('mouseenter'); + }); - document.dispatchEvent(event); + it('calls onUploadDesign with valid paste', () => { + document.dispatchEvent(event); - expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1); - expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([ - new File([{ name: 'image.png' }], `design_${Date.now()}.png`), - ]); - }); + expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1); + expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([ + new File([{ name: 'image.png' }], 'test.png'), + ]); + }); - it('does not call onUploadDesign with invalid paste', () => { - event.clipboardData = { - items: [{ type: 'text/plain' }, { type: 'text' }], - files: [], - }; + it('renames a design if it has an image.png filename', () => { + document.dispatchEvent(event); - document.dispatchEvent(event); + expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1); + expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([ + new File([{ name: 'image.png' }], `design_${Date.now()}.png`), + ]); + }); - expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled(); + it('does not call onUploadDesign with invalid paste', () => { + event.clipboardData = { + items: [{ type: 'text/plain' }, { type: 'text' }], + files: [], + }; + + document.dispatchEvent(event); + + expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled(); + }); + + it('removes onPaste listener after mouseleave event', async () => { + findDesignsWrapper().trigger('mouseleave'); + document.dispatchEvent(event); + + expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled(); + }); }); }); @@ -535,9 +576,18 @@ describe('Design management index page', () => { it('ensures fullscreen layout is not applied', () => { createComponent(true); - wrapper.vm.$router.push('/designs'); + wrapper.vm.$router.push('/'); 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', + }); + createComponent(true); + + expect(scrollIntoViewMock).toHaveBeenCalled(); + }); }); }); diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js index d6488d3837a..2b8c7ee959b 100644 --- a/spec/frontend/design_management/router_spec.js +++ b/spec/frontend/design_management/router_spec.js @@ -5,11 +5,7 @@ import App from '~/design_management/components/app.vue'; import Designs from '~/design_management/pages/index.vue'; import DesignDetail from '~/design_management/pages/design/index.vue'; import createRouter from '~/design_management/router'; -import { - ROOT_ROUTE_NAME, - DESIGNS_ROUTE_NAME, - DESIGN_ROUTE_NAME, -} from '~/design_management/router/constants'; +import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; import '~/commons/bootstrap'; function factory(routeArg) { @@ -49,7 +45,7 @@ describe('Design management router', () => { window.location.hash = ''; }); - describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => { + describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', routeArg => { it('pushes home component', () => { const wrapper = factory(routeArg); @@ -57,14 +53,6 @@ describe('Design management router', () => { }); }); - describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => { - it('pushes designs root component', () => { - const wrapper = factory(routeArg); - - expect(wrapper.find(Designs).exists()).toBe(true); - }); - }); - describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])( 'designs detail route', routeArg => { diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js index 641d35ff9ff..e8a5cf3949d 100644 --- a/spec/frontend/design_management/utils/cache_update_spec.js +++ b/spec/frontend/design_management/utils/cache_update_spec.js @@ -13,7 +13,7 @@ import { UPDATE_IMAGE_DIFF_NOTE_ERROR, } from '~/design_management/utils/error_messages'; import design from '../mock_data/design'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; jest.mock('~/flash.js'); diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js index 478ebadc8f6..e6d836b9157 100644 --- a/spec/frontend/design_management/utils/design_management_utils_spec.js +++ b/spec/frontend/design_management/utils/design_management_utils_spec.js @@ -51,7 +51,7 @@ describe('extractDiscussions', () => { }; }); - it('discards the edges.node artifacts of GraphQL', () => { + it('discards the node artifacts of GraphQL', () => { expect(extractDiscussions(discussions)).toEqual([ { id: 1, notes: ['a'], index: 1 }, { id: 2, notes: ['b'], index: 2 }, @@ -96,10 +96,7 @@ describe('optimistic responses', () => { discussions: { __typename: 'DesignDiscussion', nodes: [] }, versions: { __typename: 'DesignVersionConnection', - edges: { - __typename: 'DesignVersionEdge', - node: { __typename: 'DesignVersion', id: -1, sha: -1 }, - }, + nodes: { __typename: 'DesignVersion', id: -1, sha: -1 }, }, }, ], diff --git a/spec/frontend/design_management/utils/error_messages_spec.js b/spec/frontend/design_management/utils/error_messages_spec.js index 635ff931d7d..f5072c3b6b7 100644 --- a/spec/frontend/design_management/utils/error_messages_spec.js +++ b/spec/frontend/design_management/utils/error_messages_spec.js @@ -10,8 +10,8 @@ const mockFilenames = n => describe('Error message', () => { describe('designDeletionError', () => { - const singularMsg = 'Could not delete a design. Please try again.'; - const pluralMsg = 'Could not delete designs. Please try again.'; + const singularMsg = 'Could not archive a design. Please try again.'; + const pluralMsg = 'Could not archive designs. Please try again.'; describe('when [singular=true]', () => { it.each([[undefined], [true]])('uses singular grammar', singularOption => { @@ -55,7 +55,7 @@ describe('Error message', () => { 'Upload skipped. Some of the designs you tried uploading did not change: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, and 2 more.', ], ])('designUploadSkippedWarning', (uploadedFiles, skippedFiles, expected) => { - test('returns expected warning message', () => { + it('returns expected warning message', () => { expect(designUploadSkippedWarning(uploadedFiles, skippedFiles)).toBe(expected); }); }); |