summaryrefslogtreecommitdiff
path: root/spec/frontend/design_management
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-08-20 18:42:06 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-08-20 18:42:06 +0000
commit6e4e1050d9dba2b7b2523fdd1768823ab85feef4 (patch)
tree78be5963ec075d80116a932011d695dd33910b4e /spec/frontend/design_management
parent1ce776de4ae122aba3f349c02c17cebeaa8ecf07 (diff)
downloadgitlab-ce-6e4e1050d9dba2b7b2523fdd1768823ab85feef4.tar.gz
Add latest changes from gitlab-org/gitlab@13-3-stable-ee
Diffstat (limited to 'spec/frontend/design_management')
-rw-r--r--spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap14
-rw-r--r--spec/frontend/design_management/components/delete_button_spec.js4
-rw-r--r--spec/frontend/design_management/components/design_notes/design_discussion_spec.js4
-rw-r--r--spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap331
-rw-r--r--spec/frontend/design_management/components/list/item_spec.js51
-rw-r--r--spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap (renamed from spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap)24
-rw-r--r--spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap76
-rw-r--r--spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap28
-rw-r--r--spec/frontend/design_management/components/toolbar/design_navigation_spec.js (renamed from spec/frontend/design_management/components/toolbar/pagination_spec.js)6
-rw-r--r--spec/frontend/design_management/components/toolbar/index_spec.js4
-rw-r--r--spec/frontend/design_management/components/toolbar/pagination_button_spec.js61
-rw-r--r--spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap30
-rw-r--r--spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap158
-rw-r--r--spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap162
-rw-r--r--spec/frontend/design_management/components/upload/design_dropzone_spec.js25
-rw-r--r--spec/frontend/design_management/components/upload/design_version_dropdown_spec.js16
-rw-r--r--spec/frontend/design_management/components/upload/mock_data/all_versions.js12
-rw-r--r--spec/frontend/design_management/mock_data/all_versions.js6
-rw-r--r--spec/frontend/design_management/mock_data/apollo_mock.js106
-rw-r--r--spec/frontend/design_management/mock_data/design.js12
-rw-r--r--spec/frontend/design_management/mock_data/designs.js6
-rw-r--r--spec/frontend/design_management/mock_data/no_designs.js2
-rw-r--r--spec/frontend/design_management/mock_data/versions_list.js0
-rw-r--r--spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap125
-rw-r--r--spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap16
-rw-r--r--spec/frontend/design_management/pages/design/index_spec.js9
-rw-r--r--spec/frontend/design_management/pages/index_apollo_spec.js162
-rw-r--r--spec/frontend/design_management/pages/index_spec.js196
-rw-r--r--spec/frontend/design_management/router_spec.js16
-rw-r--r--spec/frontend/design_management/utils/cache_update_spec.js2
-rw-r--r--spec/frontend/design_management/utils/design_management_utils_spec.js7
-rw-r--r--spec/frontend/design_management/utils/error_messages_spec.js6
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);
});
});