diff options
Diffstat (limited to 'spec/frontend/design_management/components')
17 files changed, 320 insertions, 686 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', }, ]; |