Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

9 files changed, 44 insertions, 46 deletions

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 9fbd9b2c2a3..77fc70e08d1 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
@@ -108,7 +108,7 @@ describe('Design discussions component', () => {
 
     it('renders correct amount of discussion notes', () => {
       expect(findDesignNotes()).toHaveLength(2);
-      expect(findDesignNotes().wrappers.every(w => w.isVisible())).toBe(true);
+      expect(findDesignNotes().wrappers.every((w) => w.isVisible())).toBe(true);
     });
 
     it('renders reply placeholder', () => {
@@ -150,16 +150,8 @@ describe('Design discussions component', () => {
     });
 
     it('shows only the first note', () => {
-      expect(
-        findDesignNotes()
-          .at(0)
-          .isVisible(),
-      ).toBe(true);
-      expect(
-        findDesignNotes()
-          .at(1)
-          .isVisible(),
-      ).toBe(false);
+      expect(findDesignNotes().at(0).isVisible()).toBe(true);
+      expect(findDesignNotes().at(1).isVisible()).toBe(false);
     });
 
     it('renders resolved message', () => {
@@ -193,11 +185,7 @@ describe('Design discussions component', () => {
       });
 
       it('renders the second note', () => {
-        expect(
-          findDesignNotes()
-            .at(1)
-            .isVisible(),
-        ).toBe(true);
+        expect(findDesignNotes().at(1).isVisible()).toBe(true);
       });
 
       it('renders a reply placeholder', () => {
@@ -263,7 +251,7 @@ describe('Design discussions component', () => {
   describe('when any note from a discussion is active', () => {
     it.each([notes[0], notes[0].discussion.notes.nodes[1]])(
       'applies correct class to all notes in the active discussion',
-      note => {
+      (note) => {
         createComponent(
           { discussion: mockDiscussion },
           {
@@ -277,7 +265,7 @@ describe('Design discussions component', () => {
         expect(
           wrapper
             .findAll(DesignNote)
-            .wrappers.every(designNote => designNote.classes('gl-bg-blue-50')),
+            .wrappers.every((designNote) => designNote.classes('gl-bg-blue-50')),
         ).toBe(true);
       },
     );
diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index 1a80fc4e761..a338a5ef200 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -36,7 +36,7 @@ describe('Design reply form component', () => {
 
   it('textarea has focus after component mount', () => {
     // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-    createComponent({}, { attachToDocument: true });
+    createComponent({}, { attachTo: document.body });
 
     expect(findTextarea().element).toEqual(document.activeElement);
   });
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index f4fd4c70dfc..a026cc39c84 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -13,7 +13,7 @@ describe('Design overlay component', () => {
 
   const findAllNotes = () => wrapper.findAll('.js-image-badge');
   const findCommentBadge = () => wrapper.find('.comment-indicator');
-  const findBadgeAtIndex = noteIndex => findAllNotes().at(noteIndex);
+  const findBadgeAtIndex = (noteIndex) => findAllNotes().at(noteIndex);
   const findFirstBadge = () => findBadgeAtIndex(0);
   const findSecondBadge = () => findBadgeAtIndex(1);
 
@@ -108,7 +108,7 @@ describe('Design overlay component', () => {
       describe('when no discussion is active', () => {
         it('should not apply inactive class to any pins', () => {
           expect(
-            findAllNotes(0).wrappers.every(designNote => designNote.classes('gl-bg-blue-50')),
+            findAllNotes(0).wrappers.every((designNote) => designNote.classes('gl-bg-blue-50')),
           ).toBe(false);
         });
       });
@@ -116,7 +116,7 @@ describe('Design overlay component', () => {
       describe('when a discussion is active', () => {
         it.each([notes[0].discussion.notes.nodes[1], notes[0].discussion.notes.nodes[0]])(
           'should not apply inactive class to the pin for the active discussion',
-          note => {
+          (note) => {
             wrapper.setData({
               activeDiscussion: {
                 id: note.id,
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index d633d00f2ed..31fd154dc4b 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import DesignPresentation from '~/design_management/components/design_presentation.vue';
 import DesignOverlay from '~/design_management/components/design_overlay.vue';
@@ -100,12 +101,12 @@ describe('Design management design presentation component', () => {
           clientY: endCoords.clientY,
         });
 
-        return wrapper.vm.$nextTick();
+        return nextTick();
       })
       .then(() => {
         if (mouseup) {
           addCommentOverlay.trigger(event.mouseup);
-          return wrapper.vm.$nextTick();
+          return nextTick();
         }
 
         return undefined;
@@ -125,7 +126,7 @@ describe('Design management design presentation component', () => {
       mockOverlayData,
     );
 
-    return wrapper.vm.$nextTick().then(() => {
+    return nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
   });
@@ -133,7 +134,7 @@ describe('Design management design presentation component', () => {
   it('renders empty state when no image provided', () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
+    return nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
   });
@@ -149,7 +150,7 @@ describe('Design management design presentation component', () => {
 
     wrapper.vm.openCommentForm({ x: 1, y: 1 });
 
-    return wrapper.vm.$nextTick().then(() => {
+    return nextTick().then(() => {
       expect(wrapper.emitted('openCommentForm')).toEqual([
         [{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
       ]);
@@ -166,7 +167,7 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toBeNull();
         expect(wrapper.element).toMatchSnapshot();
       });
@@ -182,7 +183,7 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toBeNull();
         expect(wrapper.element).toMatchSnapshot();
       });
@@ -206,7 +207,7 @@ describe('Design management design presentation component', () => {
         },
       );
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toEqual({
           x: 1,
           y: 1,
@@ -379,7 +380,7 @@ describe('Design management design presentation component', () => {
   });
 
   describe('onImageResize', () => {
-    it('sets zoom focal point on initial load', () => {
+    beforeEach(() => {
       createComponent(
         {
           image: 'test.jpg',
@@ -388,22 +389,21 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      wrapper.setMethods({
-        shiftZoomFocalPoint: jest.fn(),
-        scaleZoomFocalPoint: jest.fn(),
-        scrollToFocalPoint: jest.fn(),
-      });
-
+      jest.spyOn(wrapper.vm, 'shiftZoomFocalPoint');
+      jest.spyOn(wrapper.vm, 'scaleZoomFocalPoint');
+      jest.spyOn(wrapper.vm, 'scrollToFocalPoint');
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.shiftZoomFocalPoint).toHaveBeenCalled();
-        expect(wrapper.vm.initialLoad).toBe(false);
-      });
+      return nextTick();
+    });
+
+    it('sets zoom focal point on initial load', () => {
+      expect(wrapper.vm.shiftZoomFocalPoint).toHaveBeenCalled();
+      expect(wrapper.vm.initialLoad).toBe(false);
     });
 
     it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', () => {
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
         expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
       });
@@ -506,7 +506,7 @@ describe('Design management design presentation component', () => {
         .$nextTick()
         .then(() => {
           addCommentOverlay.trigger('mouseup');
-          return wrapper.vm.$nextTick();
+          return nextTick();
         })
         .then(() => {
           expect(wrapper.emitted('openCommentForm')).toBeDefined();
diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js
index 290ec3a18e3..40f53e8d0bf 100644
--- a/spec/frontend/design_management/components/design_scaler_spec.js
+++ b/spec/frontend/design_management/components/design_scaler_spec.js
@@ -10,7 +10,7 @@ describe('Design management design scaler component', () => {
   const getResetScaleButton = () => getButtons().at(1);
   const getIncreaseScaleButton = () => getButtons().at(2);
 
-  const setScale = scale => wrapper.vm.setScale(scale);
+  const setScale = (scale) => wrapper.vm.setScale(scale);
 
   const createComponent = () => {
     wrapper = shallowMount(DesignScaler);
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 de276bd300b..36a2ffd19c3 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
@@ -10,7 +10,10 @@ exports[`Design management list item component when item appears in view after i
 
 exports[`Design management list item component with notes renders item with multiple comments 1`] = `
 <router-link-stub
+  ariacurrentvalue="page"
   class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+  event="click"
+  tag="a"
   to="[object Object]"
 >
   <div
@@ -81,7 +84,10 @@ 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
+  ariacurrentvalue="page"
   class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+  event="click"
+  tag="a"
   to="[object Object]"
 >
   <div
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 2914365b0df..6ac088a2c53 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -116,6 +116,8 @@ describe('Design management toolbar component', () => {
   });
 
   it('renders download button with correct link', () => {
+    createComponent();
+
     expect(wrapper.find(GlButton).attributes('href')).toBe(
       '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
     );
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 8c6b446794f..63afc3f000d 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
@@ -4,6 +4,7 @@ exports[`Design management design version dropdown component renders design vers
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   issueiid=""
   projectpath=""
   size="small"
@@ -44,6 +45,7 @@ exports[`Design management design version dropdown component renders design vers
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   issueiid=""
   projectpath=""
   size="small"
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 4ef787ac754..d841aabf2f3 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
@@ -6,7 +6,7 @@ import mockAllVersions from './mock_data/all_versions';
 const LATEST_VERSION_ID = 3;
 const PREVIOUS_VERSION_ID = 2;
 
-const designRouteFactory = versionId => ({
+const designRouteFactory = (versionId) => ({
   path: `/designs?version=${versionId}`,
   query: {
     version: `${versionId}`,
@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findVersionLink = index => wrapper.findAll(GlDropdownItem).at(index);
+  const findVersionLink = (index) => wrapper.findAll(GlDropdownItem).at(index);
 
   it('renders design version dropdown button', () => {
     createComponent();