From 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 18 Feb 2021 10:34:06 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-9-stable-ee

---
 .../components/delete_button_spec.js               |  2 +-
 .../design_notes/design_discussion_spec.js         |  6 +--
 .../components/design_notes/design_note_spec.js    |  4 +-
 .../design_notes/toggle_replies_widget_spec.js     |  4 +-
 .../components/design_overlay_spec.js              |  2 +-
 .../components/design_presentation_spec.js         |  4 +-
 .../components/design_scaler_spec.js               |  2 +-
 .../components/design_sidebar_spec.js              |  8 ++--
 .../components/design_todo_button_spec.js          |  4 +-
 .../design_management/components/image_spec.js     |  2 +-
 .../list/__snapshots__/item_spec.js.snap           | 10 ++++-
 .../design_management/components/list/item_spec.js | 52 +++++++++++++---------
 .../components/toolbar/index_spec.js               |  4 +-
 .../components/upload/button_spec.js               |  2 +-
 .../upload/design_version_dropdown_spec.js         |  2 +-
 15 files changed, 62 insertions(+), 46 deletions(-)

(limited to 'spec/frontend/design_management/components')

diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js
index 961f5bdd2ae..8f7d8e0b214 100644
--- a/spec/frontend/design_management/components/delete_button_spec.js
+++ b/spec/frontend/design_management/components/delete_button_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import BatchDeleteButton from '~/design_management/components/delete_button.vue';
 
 describe('Batch delete button component', () => {
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 77fc70e08d1..92e188f4bcc 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
@@ -1,14 +1,14 @@
-import { mount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
-import notes from '../../mock_data/notes';
+import { mount } from '@vue/test-utils';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
+import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue';
 import createNoteMutation from '~/design_management/graphql/mutations/create_note.mutation.graphql';
 import toggleResolveDiscussionMutation from '~/design_management/graphql/mutations/toggle_resolve_discussion.mutation.graphql';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
-import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue';
 import mockDiscussion from '../../mock_data/discussion';
+import notes from '../../mock_data/notes';
 
 const defaultMockDiscussion = {
   id: '0',
diff --git a/spec/frontend/design_management/components/design_notes/design_note_spec.js b/spec/frontend/design_management/components/design_notes/design_note_spec.js
index 043091e3dc2..1cd556eabb4 100644
--- a/spec/frontend/design_management/components/design_notes/design_note_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_note_spec.js
@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 const scrollIntoViewMock = jest.fn();
 const note = {
diff --git a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
index 7eda294d2d3..f87228663b6 100644
--- a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
+++ b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
@@ -1,7 +1,7 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlIcon, GlButton, GlLink } from '@gitlab/ui';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { shallowMount } from '@vue/test-utils';
 import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import notes from '../../mock_data/notes';
 
 describe('Toggle replies widget component', () => {
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index a026cc39c84..d3119be7159 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import DesignOverlay from '~/design_management/components/design_overlay.vue';
+import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants';
 import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
 import notes from '../mock_data/notes';
-import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants';
 
 const mutate = jest.fn(() => Promise.resolve());
 
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index 31fd154dc4b..edf8b965153 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -1,7 +1,7 @@
-import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import DesignPresentation from '~/design_management/components/design_presentation.vue';
+import { nextTick } from 'vue';
 import DesignOverlay from '~/design_management/components/design_overlay.vue';
+import DesignPresentation from '~/design_management/components/design_presentation.vue';
 
 const mockOverlayData = {
   overlayDimensions: {
diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js
index 40f53e8d0bf..8a123b2d1e5 100644
--- a/spec/frontend/design_management/components/design_scaler_spec.js
+++ b/spec/frontend/design_management/components/design_scaler_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import DesignScaler from '~/design_management/components/design_scaler.vue';
 
 describe('Design management design scaler component', () => {
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index 60266883fcd..8eb993ec7b5 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -1,12 +1,12 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlCollapse, GlPopover } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
+import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
+import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
+import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
 import Participants from '~/sidebar/components/participants/participants.vue';
-import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import design from '../mock_data/design';
-import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
-import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
 
 const scrollIntoViewMock = jest.fn();
 HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js
index 9ebc6ca26a2..20686d0ae6c 100644
--- a/spec/frontend/design_management/components/design_todo_button_spec.js
+++ b/spec/frontend/design_management/components/design_todo_button_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import TodoButton from '~/vue_shared/components/todo_button.vue';
 import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
 import createDesignTodoMutation from '~/design_management/graphql/mutations/create_design_todo.mutation.graphql';
 import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
+import TodoButton from '~/vue_shared/components/todo_button.vue';
 import mockDesign from '../mock_data/design';
 
 const mockDesignWithPendingTodos = {
@@ -111,7 +111,7 @@ describe('Design management design todo button', () => {
     });
 
     it('renders correct button text', () => {
-      expect(wrapper.text()).toBe('Add a To Do');
+      expect(wrapper.text()).toBe('Add a to do');
     });
 
     describe('when clicked', () => {
diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js
index 52d60b04a8a..765d902f9a6 100644
--- a/spec/frontend/design_management/components/image_spec.js
+++ b/spec/frontend/design_management/components/image_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import DesignImage from '~/design_management/components/image.vue';
 
 describe('Design management large image component', () => {
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 36a2ffd19c3..8fe3e92360a 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
@@ -26,9 +26,10 @@ exports[`Design management list item component with notes renders item with mult
        
       <img
         alt="test"
-        class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img"
         data-qa-filename="test"
         data-qa-selector="design_image"
+        data-testid="design-img-1"
         src=""
       />
     </gl-intersection-observer-stub>
@@ -43,6 +44,8 @@ exports[`Design management list item component with notes renders item with mult
       <span
         class="gl-font-weight-bold str-truncated-100"
         data-qa-selector="design_file_name"
+        data-testid="design-img-filename-1"
+        title="test"
       >
         test
       </span>
@@ -100,9 +103,10 @@ exports[`Design management list item component with notes renders item with sing
        
       <img
         alt="test"
-        class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        class="gl-display-block gl-mx-auto gl-max-w-full gl-max-h-full design-img"
         data-qa-filename="test"
         data-qa-selector="design_image"
+        data-testid="design-img-1"
         src=""
       />
     </gl-intersection-observer-stub>
@@ -117,6 +121,8 @@ exports[`Design management list item component with notes renders item with sing
       <span
         class="gl-font-weight-bold str-truncated-100"
         data-qa-selector="design_file_name"
+        data-testid="design-img-filename-1"
+        title="test"
       >
         test
       </span>
diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js
index 55c6ecbc26b..caf0f8bb5bc 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 { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Item from '~/design_management/components/list/item.vue';
 
 const localVue = createLocalVue();
@@ -17,8 +18,11 @@ const DESIGN_VERSION_EVENT = {
 
 describe('Design management list item component', () => {
   let wrapper;
+  const imgId = 1;
+  const imgFilename = 'test';
 
-  const findDesignEvent = () => wrapper.find('[data-testid="designEvent"]');
+  const findDesignEvent = () => wrapper.findByTestId('design-event');
+  const findImgFilename = (id = imgId) => wrapper.findByTestId(`design-img-filename-${id}`);
   const findEventIcon = () => findDesignEvent().find(GlIcon);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
@@ -28,25 +32,27 @@ describe('Design management list item component', () => {
     isUploading = false,
     imageLoading = false,
   } = {}) {
-    wrapper = shallowMount(Item, {
-      localVue,
-      router,
-      propsData: {
-        id: 1,
-        filename: 'test',
-        image: 'http://via.placeholder.com/300',
-        isUploading,
-        event,
-        notesCount,
-        updatedAt: '01-01-2019',
-      },
-      data() {
-        return {
-          imageLoading,
-        };
-      },
-      stubs: ['router-link'],
-    });
+    wrapper = extendedWrapper(
+      shallowMount(Item, {
+        localVue,
+        router,
+        propsData: {
+          id: imgId,
+          filename: imgFilename,
+          image: 'http://via.placeholder.com/300',
+          isUploading,
+          event,
+          notesCount,
+          updatedAt: '01-01-2019',
+        },
+        data() {
+          return {
+            imageLoading,
+          };
+        },
+        stubs: ['router-link'],
+      }),
+    );
   }
 
   afterEach(() => {
@@ -75,6 +81,10 @@ describe('Design management list item component', () => {
       return wrapper.vm.$nextTick();
     });
 
+    it('renders a tooltip', () => {
+      expect(findImgFilename().attributes('title')).toEqual(imgFilename);
+    });
+
     describe('before image is loaded', () => {
       it('renders loading spinner', () => {
         expect(wrapper.find(GlLoadingIcon)).toExist();
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 6ac088a2c53..44c865d976d 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -1,8 +1,8 @@
+import { GlButton } from '@gitlab/ui';
 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 Toolbar from '~/design_management/components/toolbar/index.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
 
 const localVue = createLocalVue();
diff --git a/spec/frontend/design_management/components/upload/button_spec.js b/spec/frontend/design_management/components/upload/button_spec.js
index ea738496ad6..d123db43ce6 100644
--- a/spec/frontend/design_management/components/upload/button_spec.js
+++ b/spec/frontend/design_management/components/upload/button_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import UploadButton from '~/design_management/components/upload/button.vue';
 
 describe('Design management upload button component', () => {
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 d841aabf2f3..1b01a363688 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,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
 import mockAllVersions from './mock_data/all_versions';
 
-- 
cgit v1.2.1