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

104 files changed, 940 insertions, 769 deletions

diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
index 63d38e7587a..1bf757ea312 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   right="true"
   size="medium"
   text="Clone"
diff --git a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
index dd88ba9a6fb..c4f351eb58d 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
@@ -4,6 +4,7 @@ exports[`SplitButton renders actionItems 1`] = `
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   menu-class=""
   size="medium"
   split="true"
diff --git a/spec/frontend/vue_shared/components/actions_button_spec.js b/spec/frontend/vue_shared/components/actions_button_spec.js
index 6e7ed9d612b..2ac4bfda29a 100644
--- a/spec/frontend/vue_shared/components/actions_button_spec.js
+++ b/spec/frontend/vue_shared/components/actions_button_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownDivider, GlButton } from '@gitlab/ui';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
 
@@ -40,7 +40,7 @@ describe('Actions button component', () => {
     wrapper.destroy();
   });
 
-  const getTooltip = child => {
+  const getTooltip = (child) => {
     const directiveBinding = getBinding(child.element, 'gl-tooltip');
 
     return directiveBinding.value;
@@ -52,8 +52,8 @@ describe('Actions button component', () => {
   const parseDropdownItems = () =>
     findDropdown()
       .findAll('gl-dropdown-item-stub,gl-dropdown-divider-stub')
-      .wrappers.map(x => {
-        if (x.is('gl-dropdown-divider-stub')) {
+      .wrappers.map((x) => {
+        if (x.is(GlDropdownDivider)) {
           return { type: 'divider' };
         }
 
diff --git a/spec/frontend/vue_shared/components/alert_details_table_spec.js b/spec/frontend/vue_shared/components/alert_details_table_spec.js
index ef7815f9e9e..49b82cb4d4e 100644
--- a/spec/frontend/vue_shared/components/alert_details_table_spec.js
+++ b/spec/frontend/vue_shared/components/alert_details_table_spec.js
@@ -45,13 +45,13 @@ describe('AlertDetails', () => {
 
   const findTableComponent = () => wrapper.find(GlTable);
   const findTableKeys = () => findTableComponent().findAll('tbody td:first-child');
-  const findTableFieldValueByKey = fieldKey =>
+  const findTableFieldValueByKey = (fieldKey) =>
     findTableComponent()
       .findAll('tbody tr')
-      .filter(row => row.text().includes(fieldKey))
+      .filter((row) => row.text().includes(fieldKey))
       .at(0)
       .find('td:nth-child(2)');
-  const findTableField = (fields, fieldName) => fields.filter(row => row.text() === fieldName);
+  const findTableField = (fields, fieldName) => fields.filter((row) => row.text() === fieldName);
 
   describe('Alert details', () => {
     describe('empty state', () => {
diff --git a/spec/frontend/vue_shared/components/awards_list_spec.js b/spec/frontend/vue_shared/components/awards_list_spec.js
index d20de81c446..550ac4a9d38 100644
--- a/spec/frontend/vue_shared/components/awards_list_spec.js
+++ b/spec/frontend/vue_shared/components/awards_list_spec.js
@@ -58,10 +58,10 @@ describe('vue_shared/components/awards_list', () => {
 
     wrapper = mount(AwardsList, { propsData: props });
   };
-  const matchingEmojiTag = name => expect.stringMatching(`gl-emoji data-name="${name}"`);
+  const matchingEmojiTag = (name) => expect.stringMatching(`gl-emoji data-name="${name}"`);
   const findAwardButtons = () => wrapper.findAll('[data-testid="award-button"]');
   const findAwardsData = () =>
-    findAwardButtons().wrappers.map(x => {
+    findAwardButtons().wrappers.map((x) => {
       return {
         classes: x.classes(),
         title: x.attributes('title'),
@@ -135,9 +135,7 @@ describe('vue_shared/components/awards_list', () => {
     it('with award clicked, it emits award', () => {
       expect(wrapper.emitted().award).toBeUndefined();
 
-      findAwardButtons()
-        .at(2)
-        .vm.$emit('click');
+      findAwardButtons().at(2).vm.$emit('click');
 
       expect(wrapper.emitted().award).toEqual([[EMOJI_SMILE]]);
     });
@@ -162,9 +160,7 @@ describe('vue_shared/components/awards_list', () => {
     it('when clicked, it emits award as number', () => {
       expect(wrapper.emitted().award).toBeUndefined();
 
-      findAwardButtons()
-        .at(0)
-        .vm.$emit('click');
+      findAwardButtons().at(0).vm.$emit('click');
 
       expect(wrapper.emitted().award).toEqual([[Number(EMOJI_100)]]);
     });
@@ -209,7 +205,7 @@ describe('vue_shared/components/awards_list', () => {
       const buttons = findAwardButtons();
 
       expect(buttons.length).toBe(7);
-      expect(buttons.wrappers.every(x => x.classes('disabled'))).toBe(true);
+      expect(buttons.wrappers.every((x) => x.classes('disabled'))).toBe(true);
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
index f656bb0b60d..a633ef65aa4 100644
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
@@ -81,7 +81,7 @@ describe('CI Badge Link Component', () => {
   });
 
   it('should render each status badge', () => {
-    Object.keys(statuses).map(status => {
+    Object.keys(statuses).map((status) => {
       vm = mountComponent(CIBadge, { status: statuses[status] });
 
       expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path);
diff --git a/spec/frontend/vue_shared/components/clipboard_button_spec.js b/spec/frontend/vue_shared/components/clipboard_button_spec.js
index ac0be1537b7..0d4266ce82f 100644
--- a/spec/frontend/vue_shared/components/clipboard_button_spec.js
+++ b/spec/frontend/vue_shared/components/clipboard_button_spec.js
@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import initCopyToClipboard from '~/behaviors/copy_to_clipboard';
 
 describe('clipboard button', () => {
   let wrapper;
@@ -87,4 +88,25 @@ describe('clipboard button', () => {
 
     expect(onClick).toHaveBeenCalled();
   });
+
+  describe('integration', () => {
+    it('actually copies to clipboard', () => {
+      initCopyToClipboard();
+
+      document.execCommand = () => {};
+      jest.spyOn(document, 'execCommand').mockImplementation(() => true);
+
+      createWrapper(
+        {
+          text: 'copy me',
+          title: 'Copy this value',
+        },
+        { attachTo: document.body },
+      );
+
+      findButton().trigger('click');
+
+      expect(document.execCommand).toHaveBeenCalledWith('copy');
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js b/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js
index a50a4b742b3..c8fe6c3131c 100644
--- a/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js
+++ b/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js
@@ -130,9 +130,7 @@ describe('ColorPicker', () => {
 
     it('has preset color selected', async () => {
       createComponent();
-      await presetColors()
-        .at(0)
-        .trigger('click');
+      await presetColors().at(0).trigger('click');
 
       expect(wrapper.vm.$data.selectedColor).toBe(setColor);
     });
diff --git a/spec/frontend/vue_shared/components/commit_spec.js b/spec/frontend/vue_shared/components/commit_spec.js
index 9b5c0941a0d..6f3c97f7194 100644
--- a/spec/frontend/vue_shared/components/commit_spec.js
+++ b/spec/frontend/vue_shared/components/commit_spec.js
@@ -7,14 +7,14 @@ describe('Commit component', () => {
   let props;
   let wrapper;
 
-  const findIcon = name => {
-    const icons = wrapper.findAll(GlIcon).filter(c => c.attributes('name') === name);
+  const findIcon = (name) => {
+    const icons = wrapper.findAll(GlIcon).filter((c) => c.attributes('name') === name);
     return icons.length ? icons.at(0) : icons;
   };
 
   const findUserAvatar = () => wrapper.find(UserAvatarLink);
 
-  const createComponent = propsData => {
+  const createComponent = (propsData) => {
     wrapper = shallowMount(CommitComponent, {
       propsData,
     });
@@ -43,12 +43,7 @@ describe('Commit component', () => {
       },
     });
 
-    expect(
-      wrapper
-        .find('.icon-container')
-        .find(GlIcon)
-        .exists(),
-    ).toBe(true);
+    expect(wrapper.find('.icon-container').find(GlIcon).exists()).toBe(true);
   });
 
   describe('Given all the props', () => {
diff --git a/spec/frontend/vue_shared/components/confirm_modal_spec.js b/spec/frontend/vue_shared/components/confirm_modal_spec.js
index 96ccf56cbc6..db8d0674121 100644
--- a/spec/frontend/vue_shared/components/confirm_modal_spec.js
+++ b/spec/frontend/vue_shared/components/confirm_modal_spec.js
@@ -53,7 +53,7 @@ describe('vue_shared/components/confirm_modal', () => {
   const findFormData = () =>
     findForm()
       .findAll('input')
-      .wrappers.map(x => ({ name: x.attributes('name'), value: x.attributes('value') }));
+      .wrappers.map((x) => ({ name: x.attributes('name'), value: x.attributes('value') }));
 
   describe('template', () => {
     describe('when modal data is set', () => {
diff --git a/spec/frontend/vue_shared/components/content_viewer/viewers/markdown_viewer_spec.js b/spec/frontend/vue_shared/components/content_viewer/viewers/markdown_viewer_spec.js
index c75891c9ed3..22ee6acfed8 100644
--- a/spec/frontend/vue_shared/components/content_viewer/viewers/markdown_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/content_viewer/viewers/markdown_viewer_spec.js
@@ -9,7 +9,7 @@ describe('MarkdownViewer', () => {
   let wrapper;
   let mock;
 
-  const createComponent = props => {
+  const createComponent = (props) => {
     wrapper = mount(MarkdownViewer, {
       propsData: {
         ...props,
diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
index e46c63a1a32..10eacff630d 100644
--- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
+++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
@@ -71,7 +71,7 @@ describe('date time picker lib', () => {
       '2019-19-23',
       '2019-09-23 x',
       '2019-09-29 24:24:24',
-    ].forEach(input => {
+    ].forEach((input) => {
       it(`throws error for invalid input like ${input}`, () => {
         expect(() => inputStringToIsoDate(input)).toThrow();
       });
diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
index afd1f1a3123..33667a1bb71 100644
--- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
+++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
@@ -17,7 +17,7 @@ describe('DateTimePicker', () => {
   const applyButtonElement = () => wrapper.find('button.btn-success').element;
   const findQuickRangeItems = () => wrapper.findAll('.dropdown-item');
 
-  const createComponent = props => {
+  const createComponent = (props) => {
     wrapper = mount(DateTimePicker, {
       propsData: {
         ...props,
@@ -235,7 +235,7 @@ describe('DateTimePicker', () => {
 
     it('unchecks quick range when text is input is clicked', () => {
       const findActiveItems = () =>
-        findQuickRangeItems().filter(w => w.classes().includes('active'));
+        findQuickRangeItems().filter((w) => w.classes().includes('active'));
 
       expect(findActiveItems().length).toBe(1);
 
diff --git a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
new file mode 100644
index 00000000000..b812ced72c9
--- /dev/null
+++ b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
@@ -0,0 +1,103 @@
+import { shallowMount } from '@vue/test-utils';
+import DeployBoardInstance from '~/vue_shared/components/deployment_instance.vue';
+import { folder } from './mock_data';
+
+describe('Deploy Board Instance', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) =>
+    shallowMount(DeployBoardInstance, {
+      propsData: {
+        status: 'succeeded',
+        ...props,
+      },
+    });
+
+  describe('as a non-canary deployment', () => {
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should render a div with the correct css status and tooltip data', () => {
+      wrapper = createComponent({
+        logsPath: folder.logs_path,
+        tooltipText: 'This is a pod',
+      });
+
+      expect(wrapper.classes('deployment-instance-succeeded')).toBe(true);
+      expect(wrapper.attributes('title')).toEqual('This is a pod');
+    });
+
+    it('should render a div without tooltip data', (done) => {
+      wrapper = createComponent({
+        status: 'deploying',
+        tooltipText: '',
+      });
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.classes('deployment-instance-deploying')).toBe(true);
+        expect(wrapper.attributes('title')).toEqual('');
+        done();
+      });
+    });
+
+    it('should have a log path computed with a pod name as a parameter', () => {
+      wrapper = createComponent({
+        logsPath: folder.logs_path,
+        podName: 'tanuki-1',
+      });
+
+      expect(wrapper.vm.computedLogPath).toEqual(
+        '/root/review-app/-/logs?environment_name=foo&pod_name=tanuki-1',
+      );
+    });
+  });
+
+  describe('as a canary deployment', () => {
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should render a div with canary class when stable prop is provided as false', (done) => {
+      wrapper = createComponent({
+        stable: false,
+      });
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.classes('deployment-instance-canary')).toBe(true);
+        done();
+      });
+    });
+  });
+
+  describe('as a legend item', () => {
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should not be a link without a logsPath prop', (done) => {
+      wrapper = createComponent({
+        stable: false,
+        logsPath: '',
+      });
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.computedLogPath).toBeNull();
+        expect(wrapper.vm.isLink).toBeFalsy();
+        done();
+      });
+    });
+
+    it('should render a link without href if path is not passed', () => {
+      wrapper = createComponent();
+
+      expect(wrapper.attributes('href')).toBeUndefined();
+    });
+
+    it('should not have a tooltip', () => {
+      wrapper = createComponent();
+
+      expect(wrapper.attributes('title')).toEqual('');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/deployment_instance/mock_data.js b/spec/frontend/vue_shared/components/deployment_instance/mock_data.js
new file mode 100644
index 00000000000..6618c57948c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/deployment_instance/mock_data.js
@@ -0,0 +1,144 @@
+export const environmentsList = [
+  {
+    name: 'DEV',
+    size: 1,
+    id: 7,
+    state: 'available',
+    external_url: null,
+    environment_type: null,
+    last_deployment: null,
+    has_stop_action: false,
+    environment_path: '/root/review-app/environments/7',
+    stop_path: '/root/review-app/environments/7/stop',
+    created_at: '2017-01-31T10:53:46.894Z',
+    updated_at: '2017-01-31T10:53:46.894Z',
+    project_path: '/root/review-app',
+    rollout_status: {},
+  },
+  {
+    folderName: 'build',
+    size: 5,
+    id: 12,
+    name: 'build/update-README',
+    state: 'available',
+    external_url: null,
+    environment_type: 'build',
+    last_deployment: null,
+    has_stop_action: false,
+    environment_path: '/root/review-app/environments/12',
+    stop_path: '/root/review-app/environments/12/stop',
+    created_at: '2017-02-01T19:42:18.400Z',
+    updated_at: '2017-02-01T19:42:18.400Z',
+    project_path: '/root/review-app',
+    rollout_status: {},
+  },
+];
+
+export const serverData = [
+  {
+    name: 'DEV',
+    size: 1,
+    latest: {
+      id: 7,
+      name: 'DEV',
+      state: 'available',
+      external_url: null,
+      environment_type: null,
+      last_deployment: null,
+      has_stop_action: false,
+      environment_path: '/root/review-app/environments/7',
+      stop_path: '/root/review-app/environments/7/stop',
+      created_at: '2017-01-31T10:53:46.894Z',
+      updated_at: '2017-01-31T10:53:46.894Z',
+      rollout_status: {},
+    },
+  },
+  {
+    name: 'build',
+    size: 5,
+    latest: {
+      id: 12,
+      name: 'build/update-README',
+      state: 'available',
+      external_url: null,
+      environment_type: 'build',
+      last_deployment: null,
+      has_stop_action: false,
+      environment_path: '/root/review-app/environments/12',
+      stop_path: '/root/review-app/environments/12/stop',
+      created_at: '2017-02-01T19:42:18.400Z',
+      updated_at: '2017-02-01T19:42:18.400Z',
+    },
+  },
+  {
+    name: 'build',
+    size: 1,
+    latest: {
+      id: 12,
+      name: 'build/update-README',
+      state: 'available',
+      external_url: null,
+      environment_type: 'build',
+      last_deployment: null,
+      has_stop_action: false,
+      environment_path: '/root/review-app/environments/12',
+      stop_path: '/root/review-app/environments/12/stop',
+      created_at: '2017-02-01T19:42:18.400Z',
+      updated_at: '2017-02-01T19:42:18.400Z',
+    },
+  },
+];
+
+export const deployBoardMockData = {
+  instances: [
+    { status: 'finished', tooltip: 'tanuki-2334 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2335 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2336 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2337 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2338 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2339 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2340 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2334 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2335 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2336 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2337 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2338 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2339 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'finished', tooltip: 'tanuki-2340 Finished', pod_name: 'production-tanuki-1' },
+    { status: 'deploying', tooltip: 'tanuki-2341 Deploying', pod_name: 'production-tanuki-1' },
+    { status: 'deploying', tooltip: 'tanuki-2342 Deploying', pod_name: 'production-tanuki-1' },
+    { status: 'deploying', tooltip: 'tanuki-2343 Deploying', pod_name: 'production-tanuki-1' },
+    { status: 'failed', tooltip: 'tanuki-2344 Failed', pod_name: 'production-tanuki-1' },
+    { status: 'ready', tooltip: 'tanuki-2345 Ready', pod_name: 'production-tanuki-1' },
+    { status: 'ready', tooltip: 'tanuki-2346 Ready', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2348 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2349 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2350 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'preparing', tooltip: 'tanuki-2353 Preparing', pod_name: 'production-tanuki-1' },
+    { status: 'waiting', tooltip: 'tanuki-2354 Waiting', pod_name: 'production-tanuki-1' },
+    { status: 'waiting', tooltip: 'tanuki-2355 Waiting', pod_name: 'production-tanuki-1' },
+    { status: 'waiting', tooltip: 'tanuki-2356 Waiting', pod_name: 'production-tanuki-1' },
+  ],
+  abort_url: 'url',
+  rollback_url: 'url',
+  completion: 100,
+  status: 'found',
+};
+
+export const folder = {
+  folderName: 'build',
+  size: 5,
+  id: 12,
+  name: 'build/update-README',
+  state: 'available',
+  external_url: null,
+  environment_type: 'build',
+  last_deployment: null,
+  has_stop_action: false,
+  environment_path: '/root/review-app/environments/12',
+  stop_path: '/root/review-app/environments/12/stop',
+  created_at: '2017-02-01T19:42:18.400Z',
+  updated_at: '2017-02-01T19:42:18.400Z',
+  rollout_status: {},
+  logs_path: '/root/review-app/-/logs?environment_name=foo',
+};
diff --git a/spec/frontend/vue_shared/components/deprecated_modal_2_spec.js b/spec/frontend/vue_shared/components/deprecated_modal_2_spec.js
deleted file mode 100644
index c37a44df6f8..00000000000
--- a/spec/frontend/vue_shared/components/deprecated_modal_2_spec.js
+++ /dev/null
@@ -1,258 +0,0 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-
-const modalComponent = Vue.extend(DeprecatedModal2);
-
-describe('DeprecatedModal2', () => {
-  let vm;
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('props', () => {
-    describe('with id', () => {
-      const props = {
-        id: 'my-modal',
-      };
-
-      beforeEach(() => {
-        vm = mountComponent(modalComponent, props);
-      });
-
-      it('assigns the id to the modal', () => {
-        expect(vm.$el.id).toBe(props.id);
-      });
-    });
-
-    describe('without id', () => {
-      beforeEach(() => {
-        vm = mountComponent(modalComponent, {});
-      });
-
-      it('does not add an id attribute to the modal', () => {
-        expect(vm.$el.hasAttribute('id')).toBe(false);
-      });
-    });
-
-    describe('with headerTitleText', () => {
-      const props = {
-        headerTitleText: 'my title text',
-      };
-
-      beforeEach(() => {
-        vm = mountComponent(modalComponent, props);
-      });
-
-      it('sets the modal title', () => {
-        const modalTitle = vm.$el.querySelector('.modal-title');
-
-        expect(modalTitle.innerHTML.trim()).toBe(props.headerTitleText);
-      });
-    });
-
-    describe('with footerPrimaryButtonVariant', () => {
-      const props = {
-        footerPrimaryButtonVariant: 'danger',
-      };
-
-      beforeEach(() => {
-        vm = mountComponent(modalComponent, props);
-      });
-
-      it('sets the primary button class', () => {
-        const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type');
-
-        expect(primaryButton).toHaveClass(`btn-${props.footerPrimaryButtonVariant}`);
-      });
-    });
-
-    describe('with footerPrimaryButtonText', () => {
-      const props = {
-        footerPrimaryButtonText: 'my button text',
-      };
-
-      beforeEach(() => {
-        vm = mountComponent(modalComponent, props);
-      });
-
-      it('sets the primary button text', () => {
-        const primaryButton = vm.$el.querySelector('.js-modal-primary-action .gl-button-text');
-
-        expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText);
-      });
-    });
-  });
-
-  it('works with data-toggle="modal"', () => {
-    setFixtures(`
-      <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
-      <div id="modal-container"></div>
-    `);
-
-    const modalContainer = document.getElementById('modal-container');
-    const modalButton = document.getElementById('modal-button');
-    vm = mountComponent(
-      modalComponent,
-      {
-        id: 'my-modal',
-      },
-      modalContainer,
-    );
-    const modalElement = document.getElementById('my-modal');
-
-    modalButton.click();
-
-    expect(modalElement).not.toHaveClass('show');
-
-    // let the modal fade in
-    jest.runOnlyPendingTimers();
-
-    expect(modalElement).toHaveClass('show');
-  });
-
-  describe('methods', () => {
-    const dummyEvent = 'not really an event';
-
-    beforeEach(() => {
-      vm = mountComponent(modalComponent, {});
-      jest.spyOn(vm, '$emit').mockImplementation(() => {});
-    });
-
-    describe('emitCancel', () => {
-      it('emits a cancel event', () => {
-        vm.emitCancel(dummyEvent);
-
-        expect(vm.$emit).toHaveBeenCalledWith('cancel', dummyEvent);
-      });
-    });
-
-    describe('emitSubmit', () => {
-      it('emits a submit event', () => {
-        vm.emitSubmit(dummyEvent);
-
-        expect(vm.$emit).toHaveBeenCalledWith('submit', dummyEvent);
-      });
-    });
-
-    describe('opened', () => {
-      it('emits a open event', () => {
-        vm.opened();
-
-        expect(vm.$emit).toHaveBeenCalledWith('open');
-      });
-    });
-
-    describe('closed', () => {
-      it('emits a closed event', () => {
-        vm.closed();
-
-        expect(vm.$emit).toHaveBeenCalledWith('closed');
-      });
-    });
-  });
-
-  describe('slots', () => {
-    const slotContent = 'this should go into the slot';
-
-    const modalWithSlot = slot => {
-      return Vue.extend({
-        components: {
-          DeprecatedModal2,
-        },
-        render: h =>
-          h('deprecated-modal-2', [slot ? h('template', { slot }, slotContent) : slotContent]),
-      });
-    };
-
-    describe('default slot', () => {
-      beforeEach(() => {
-        vm = mountComponent(modalWithSlot());
-      });
-
-      it('sets the modal body', () => {
-        const modalBody = vm.$el.querySelector('.modal-body');
-
-        expect(modalBody.innerHTML).toBe(slotContent);
-      });
-    });
-
-    describe('header slot', () => {
-      beforeEach(() => {
-        vm = mountComponent(modalWithSlot('header'));
-      });
-
-      it('sets the modal header', () => {
-        const modalHeader = vm.$el.querySelector('.modal-header');
-
-        expect(modalHeader.innerHTML).toBe(slotContent);
-      });
-    });
-
-    describe('title slot', () => {
-      beforeEach(() => {
-        vm = mountComponent(modalWithSlot('title'));
-      });
-
-      it('sets the modal title', () => {
-        const modalTitle = vm.$el.querySelector('.modal-title');
-
-        expect(modalTitle.innerHTML).toBe(slotContent);
-      });
-    });
-
-    describe('footer slot', () => {
-      beforeEach(() => {
-        vm = mountComponent(modalWithSlot('footer'));
-      });
-
-      it('sets the modal footer', () => {
-        const modalFooter = vm.$el.querySelector('.modal-footer');
-
-        expect(modalFooter.innerHTML).toBe(slotContent);
-      });
-    });
-  });
-
-  describe('handling sizes', () => {
-    it('should render modal-sm', () => {
-      vm = mountComponent(modalComponent, {
-        modalSize: 'sm',
-      });
-
-      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true);
-    });
-
-    it('should render modal-lg', () => {
-      vm = mountComponent(modalComponent, {
-        modalSize: 'lg',
-      });
-
-      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
-    });
-
-    it('should render modal-xl', () => {
-      vm = mountComponent(modalComponent, {
-        modalSize: 'xl',
-      });
-
-      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true);
-    });
-
-    it('should not add modal size classes when md size is passed', () => {
-      vm = mountComponent(modalComponent, {
-        modalSize: 'md',
-      });
-
-      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false);
-    });
-
-    it('should not add modal size classes by default', () => {
-      vm = mountComponent(modalComponent, {});
-
-      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false);
-      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false);
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
index a6e4d812c3c..68e3ee11a0d 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
@@ -26,7 +26,7 @@ describe('DiffViewer', () => {
     vm.$destroy();
   });
 
-  it('renders image diff', done => {
+  it('renders image diff', (done) => {
     window.gon = {
       relative_url_root: '',
     };
@@ -46,7 +46,7 @@ describe('DiffViewer', () => {
     });
   });
 
-  it('renders fallback download diff display', done => {
+  it('renders fallback download diff display', (done) => {
     createComponent({
       ...requiredProps,
       diffViewerMode: 'added',
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
index f364f374887..b6bffbcc6f3 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
@@ -51,7 +51,7 @@ describe('ImageDiffViewer', () => {
     wrapper.destroy();
   });
 
-  it('renders image diff for replaced', done => {
+  it('renders image diff for replaced', (done) => {
     createComponent({ ...allProps });
 
     vm.$nextTick(() => {
@@ -78,7 +78,7 @@ describe('ImageDiffViewer', () => {
     });
   });
 
-  it('renders image diff for new', done => {
+  it('renders image diff for new', (done) => {
     createComponent({ ...allProps, diffMode: 'new', oldPath: '' });
 
     setImmediate(() => {
@@ -91,7 +91,7 @@ describe('ImageDiffViewer', () => {
     });
   });
 
-  it('renders image diff for deleted', done => {
+  it('renders image diff for deleted', (done) => {
     createComponent({ ...allProps, diffMode: 'deleted', newPath: '' });
 
     setImmediate(() => {
@@ -104,7 +104,7 @@ describe('ImageDiffViewer', () => {
     });
   });
 
-  it('renders image diff for renamed', done => {
+  it('renders image diff for renamed', (done) => {
     vm = new Vue({
       components: {
         imageDiffViewer,
@@ -139,7 +139,7 @@ describe('ImageDiffViewer', () => {
   });
 
   describe('swipeMode', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       createComponent({ ...requiredProps });
 
       setImmediate(() => {
@@ -147,7 +147,7 @@ describe('ImageDiffViewer', () => {
       });
     });
 
-    it('switches to Swipe Mode', done => {
+    it('switches to Swipe Mode', (done) => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click();
 
       vm.$nextTick(() => {
@@ -158,7 +158,7 @@ describe('ImageDiffViewer', () => {
   });
 
   describe('onionSkin', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       createComponent({ ...requiredProps });
 
       setImmediate(() => {
@@ -166,7 +166,7 @@ describe('ImageDiffViewer', () => {
       });
     });
 
-    it('switches to Onion Skin Mode', done => {
+    it('switches to Onion Skin Mode', (done) => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
 
       vm.$nextTick(() => {
@@ -177,7 +177,7 @@ describe('ImageDiffViewer', () => {
       });
     });
 
-    it('has working drag handler', done => {
+    it('has working drag handler', (done) => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
 
       vm.$nextTick(() => {
diff --git a/spec/frontend/vue_shared/components/dismissible_container_spec.js b/spec/frontend/vue_shared/components/dismissible_container_spec.js
index e49ca1e2285..2c0e363fa0e 100644
--- a/spec/frontend/vue_shared/components/dismissible_container_spec.js
+++ b/spec/frontend/vue_shared/components/dismissible_container_spec.js
@@ -43,7 +43,7 @@ describe('DismissibleContainer', () => {
       default: 'default slot',
     };
 
-    it.each(Object.keys(slots))('renders the %s slot', slot => {
+    it.each(Object.keys(slots))('renders the %s slot', (slot) => {
       const slotContent = slots[slot];
       wrapper = shallowMount(dismissibleContainer, {
         propsData,
diff --git a/spec/frontend/vue_shared/components/editor_lite_spec.js b/spec/frontend/vue_shared/components/editor_lite_spec.js
index 52502fcf64f..70fdd8e24a5 100644
--- a/spec/frontend/vue_shared/components/editor_lite_spec.js
+++ b/spec/frontend/vue_shared/components/editor_lite_spec.js
@@ -7,20 +7,22 @@ jest.mock('~/editor/editor_lite');
 
 describe('Editor Lite component', () => {
   let wrapper;
-  const onDidChangeModelContent = jest.fn();
-  const updateModelLanguage = jest.fn();
-  const getValue = jest.fn();
-  const setValue = jest.fn();
+  let mockInstance;
+
   const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const fileName = 'lorem.txt';
   const fileGlobalId = 'snippet_777';
-  const createInstanceMock = jest.fn().mockImplementation(() => ({
-    onDidChangeModelContent,
-    updateModelLanguage,
-    getValue,
-    setValue,
-    dispose: jest.fn(),
-  }));
+  const createInstanceMock = jest.fn().mockImplementation(() => {
+    mockInstance = {
+      onDidChangeModelContent: jest.fn(),
+      updateModelLanguage: jest.fn(),
+      getValue: jest.fn(),
+      setValue: jest.fn(),
+      dispose: jest.fn(),
+    };
+    return mockInstance;
+  });
+
   Editor.mockImplementation(() => {
     return {
       createInstance: createInstanceMock,
@@ -45,9 +47,9 @@ describe('Editor Lite component', () => {
     wrapper.destroy();
   });
 
-  const triggerChangeContent = val => {
-    getValue.mockReturnValue(val);
-    const [cb] = onDidChangeModelContent.mock.calls[0];
+  const triggerChangeContent = (val) => {
+    mockInstance.getValue.mockReturnValue(val);
+    const [cb] = mockInstance.onDidChangeModelContent.mock.calls[0];
 
     cb();
 
@@ -92,12 +94,12 @@ describe('Editor Lite component', () => {
       });
 
       return nextTick().then(() => {
-        expect(updateModelLanguage).toHaveBeenCalledWith(newFileName);
+        expect(mockInstance.updateModelLanguage).toHaveBeenCalledWith(newFileName);
       });
     });
 
     it('registers callback with editor onChangeContent', () => {
-      expect(onDidChangeModelContent).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockInstance.onDidChangeModelContent).toHaveBeenCalledWith(expect.any(Function));
     });
 
     it('emits input event when the blob content is changed', () => {
@@ -117,6 +119,10 @@ describe('Editor Lite component', () => {
       expect(wrapper.emitted()['editor-ready']).toBeDefined();
     });
 
+    it('component API `getEditor()` returns the editor instance', () => {
+      expect(wrapper.vm.getEditor()).toBe(mockInstance);
+    });
+
     describe('reaction to the value update', () => {
       it('reacts to the changes in the passed value', async () => {
         const newValue = 'New Value';
@@ -126,7 +132,7 @@ describe('Editor Lite component', () => {
         });
 
         await nextTick();
-        expect(setValue).toHaveBeenCalledWith(newValue);
+        expect(mockInstance.setValue).toHaveBeenCalledWith(newValue);
       });
 
       it("does not update value if the passed one is exactly the same as the editor's content", async () => {
@@ -137,7 +143,7 @@ describe('Editor Lite component', () => {
         });
 
         await nextTick();
-        expect(setValue).not.toHaveBeenCalled();
+        expect(mockInstance.setValue).not.toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/expand_button_spec.js b/spec/frontend/vue_shared/components/expand_button_spec.js
index aea90e5b31f..724405a109f 100644
--- a/spec/frontend/vue_shared/components/expand_button_spec.js
+++ b/spec/frontend/vue_shared/components/expand_button_spec.js
@@ -41,12 +41,7 @@ describe('Expand button', () => {
   });
 
   it('does not render expanded text', () => {
-    expect(
-      wrapper
-        .find(ExpandButton)
-        .text()
-        .trim(),
-    ).not.toBe(text.short);
+    expect(wrapper.find(ExpandButton).text().trim()).not.toBe(text.short);
   });
 
   describe('when short text is provided', () => {
@@ -60,12 +55,7 @@ describe('Expand button', () => {
     });
 
     it('renders short text', () => {
-      expect(
-        wrapper
-          .find(ExpandButton)
-          .text()
-          .trim(),
-      ).toBe(text.short);
+      expect(wrapper.find(ExpandButton).text().trim()).toBe(text.short);
     });
 
     it('renders button before text', () => {
@@ -76,7 +66,7 @@ describe('Expand button', () => {
   });
 
   describe('on click', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       expanderPrependEl().trigger('click');
       Vue.nextTick(done);
     });
@@ -95,7 +85,7 @@ describe('Expand button', () => {
     });
 
     describe('when short text is provided', () => {
-      beforeEach(done => {
+      beforeEach((done) => {
         factory({
           slots: {
             expanded: `<p>${text.expanded}</p>`,
@@ -108,12 +98,7 @@ describe('Expand button', () => {
       });
 
       it('only renders expanded text', () => {
-        expect(
-          wrapper
-            .find(ExpandButton)
-            .text()
-            .trim(),
-        ).toBe(text.expanded);
+        expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
       });
 
       it('renders button after text', () => {
@@ -125,7 +110,7 @@ describe('Expand button', () => {
   });
 
   describe('append button', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       expanderPrependEl().trigger('click');
       Vue.nextTick(done);
     });
@@ -140,26 +125,16 @@ describe('Expand button', () => {
     });
 
     it('clicking hides expanded text', () => {
-      expect(
-        wrapper
-          .find(ExpandButton)
-          .text()
-          .trim(),
-      ).toBe(text.expanded);
+      expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
       expanderAppendEl().trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(
-          wrapper
-            .find(ExpandButton)
-            .text()
-            .trim(),
-        ).not.toBe(text.expanded);
+        expect(wrapper.find(ExpandButton).text().trim()).not.toBe(text.expanded);
       });
     });
 
     describe('when short text is provided', () => {
-      beforeEach(done => {
+      beforeEach((done) => {
         factory({
           slots: {
             expanded: `<p>${text.expanded}</p>`,
@@ -172,21 +147,11 @@ describe('Expand button', () => {
       });
 
       it('clicking reveals short text', () => {
-        expect(
-          wrapper
-            .find(ExpandButton)
-            .text()
-            .trim(),
-        ).toBe(text.expanded);
+        expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
         expanderAppendEl().trigger('click');
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(
-            wrapper
-              .find(ExpandButton)
-              .text()
-              .trim(),
-          ).toBe(text.short);
+          expect(wrapper.find(ExpandButton).text().trim()).toBe(text.short);
         });
       });
     });
diff --git a/spec/frontend/vue_shared/components/file_finder/index_spec.js b/spec/frontend/vue_shared/components/file_finder/index_spec.js
index 40026021777..238a5440664 100644
--- a/spec/frontend/vue_shared/components/file_finder/index_spec.js
+++ b/spec/frontend/vue_shared/components/file_finder/index_spec.js
@@ -31,7 +31,7 @@ describe('File finder item spec', () => {
   });
 
   describe('with entries', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       createComponent({
         files: [
           {
@@ -57,7 +57,7 @@ describe('File finder item spec', () => {
       expect(vm.$el.textContent).not.toContain('folder');
     });
 
-    it('filters entries', done => {
+    it('filters entries', (done) => {
       vm.searchText = 'index';
 
       setImmediate(() => {
@@ -68,7 +68,7 @@ describe('File finder item spec', () => {
       });
     });
 
-    it('shows clear button when searchText is not empty', done => {
+    it('shows clear button when searchText is not empty', (done) => {
       vm.searchText = 'index';
 
       setImmediate(() => {
@@ -79,7 +79,7 @@ describe('File finder item spec', () => {
       });
     });
 
-    it('clear button resets searchText', done => {
+    it('clear button resets searchText', (done) => {
       vm.searchText = 'index';
 
       waitForPromises()
@@ -94,7 +94,7 @@ describe('File finder item spec', () => {
         .catch(done.fail);
     });
 
-    it('clear button focuses search input', done => {
+    it('clear button focuses search input', (done) => {
       jest.spyOn(vm.$refs.searchInput, 'focus').mockImplementation(() => {});
       vm.searchText = 'index';
 
@@ -111,7 +111,7 @@ describe('File finder item spec', () => {
     });
 
     describe('listShowCount', () => {
-      it('returns 1 when no filtered entries exist', done => {
+      it('returns 1 when no filtered entries exist', (done) => {
         vm.searchText = 'testing 123';
 
         setImmediate(() => {
@@ -131,7 +131,7 @@ describe('File finder item spec', () => {
         expect(vm.listHeight).toBe(55);
       });
 
-      it('returns 33 when entries dont exist', done => {
+      it('returns 33 when entries dont exist', (done) => {
         vm.searchText = 'testing 123';
 
         setImmediate(() => {
@@ -143,7 +143,7 @@ describe('File finder item spec', () => {
     });
 
     describe('filteredBlobsLength', () => {
-      it('returns length of filtered blobs', done => {
+      it('returns length of filtered blobs', (done) => {
         vm.searchText = 'index';
 
         setImmediate(() => {
@@ -156,7 +156,7 @@ describe('File finder item spec', () => {
 
     describe('watches', () => {
       describe('searchText', () => {
-        it('resets focusedIndex when updated', done => {
+        it('resets focusedIndex when updated', (done) => {
           vm.focusedIndex = 1;
           vm.searchText = 'test';
 
@@ -169,7 +169,7 @@ describe('File finder item spec', () => {
       });
 
       describe('visible', () => {
-        it('returns searchText when false', done => {
+        it('returns searchText when false', (done) => {
           vm.searchText = 'test';
           vm.visible = true;
 
@@ -206,7 +206,7 @@ describe('File finder item spec', () => {
     });
 
     describe('onKeyup', () => {
-      it('opens file on enter key', done => {
+      it('opens file on enter key', (done) => {
         const event = new CustomEvent('keyup');
         event.keyCode = ENTER_KEY_CODE;
 
@@ -221,7 +221,7 @@ describe('File finder item spec', () => {
         });
       });
 
-      it('closes file finder on esc key', done => {
+      it('closes file finder on esc key', (done) => {
         const event = new CustomEvent('keyup');
         event.keyCode = ESC_KEY_CODE;
 
@@ -300,7 +300,7 @@ describe('File finder item spec', () => {
   });
 
   describe('keyboard shortcuts', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       createComponent();
 
       jest.spyOn(vm, 'toggle').mockImplementation(() => {});
@@ -308,7 +308,7 @@ describe('File finder item spec', () => {
       vm.$nextTick(done);
     });
 
-    it('calls toggle on `t` key press', done => {
+    it('calls toggle on `t` key press', (done) => {
       Mousetrap.trigger('t');
 
       vm.$nextTick()
@@ -319,7 +319,7 @@ describe('File finder item spec', () => {
         .catch(done.fail);
     });
 
-    it('calls toggle on `mod+p` key press', done => {
+    it('calls toggle on `mod+p` key press', (done) => {
       Mousetrap.trigger('mod+p');
 
       vm.$nextTick()
diff --git a/spec/frontend/vue_shared/components/file_finder/item_spec.js b/spec/frontend/vue_shared/components/file_finder/item_spec.js
index 5a45a5dbba1..c60e6335389 100644
--- a/spec/frontend/vue_shared/components/file_finder/item_spec.js
+++ b/spec/frontend/vue_shared/components/file_finder/item_spec.js
@@ -37,7 +37,7 @@ describe('File finder item spec', () => {
       expect(vm.$el.classList).toContain('is-focused');
     });
 
-    it('does not have is-focused class when not focused', done => {
+    it('does not have is-focused class when not focused', (done) => {
       vm.focused = false;
 
       vm.$nextTick(() => {
@@ -53,7 +53,7 @@ describe('File finder item spec', () => {
       expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null);
     });
 
-    it('renders when a changed file', done => {
+    it('renders when a changed file', (done) => {
       vm.file.changed = true;
 
       vm.$nextTick(() => {
@@ -63,7 +63,7 @@ describe('File finder item spec', () => {
       });
     });
 
-    it('renders when a temp file', done => {
+    it('renders when a temp file', (done) => {
       vm.file.tempFile = true;
 
       vm.$nextTick(() => {
@@ -85,7 +85,7 @@ describe('File finder item spec', () => {
   describe('path', () => {
     let el;
 
-    beforeEach(done => {
+    beforeEach((done) => {
       vm.searchText = 'file';
 
       el = vm.$el.querySelector('.diff-changed-file-path');
@@ -97,7 +97,7 @@ describe('File finder item spec', () => {
       expect(el.querySelectorAll('.highlighted').length).toBe(4);
     });
 
-    it('adds ellipsis to long text', done => {
+    it('adds ellipsis to long text', (done) => {
       vm.file.path = new Array(70)
         .fill()
         .map((_, i) => `${i}-`)
@@ -113,7 +113,7 @@ describe('File finder item spec', () => {
   describe('name', () => {
     let el;
 
-    beforeEach(done => {
+    beforeEach((done) => {
       vm.searchText = 'file';
 
       el = vm.$el.querySelector('.diff-changed-file-name');
@@ -125,7 +125,7 @@ describe('File finder item spec', () => {
       expect(el.querySelectorAll('.highlighted').length).toBe(4);
     });
 
-    it('does not add ellipsis to long text', done => {
+    it('does not add ellipsis to long text', (done) => {
       vm.file.name = new Array(70)
         .fill()
         .map((_, i) => `${i}-`)
diff --git a/spec/frontend/vue_shared/components/file_tree_spec.js b/spec/frontend/vue_shared/components/file_tree_spec.js
index 38979d9d844..7a4982fd29b 100644
--- a/spec/frontend/vue_shared/components/file_tree_spec.js
+++ b/spec/frontend/vue_shared/components/file_tree_spec.js
@@ -28,7 +28,7 @@ describe('File Tree component', () => {
   const findFileRow = () => wrapper.find(MockFileRow);
   const findChildrenTrees = () => wrapper.findAll(FileTree).wrappers.slice(1);
   const findChildrenTreeProps = () =>
-    findChildrenTrees().map(x => ({
+    findChildrenTrees().map((x) => ({
       ...x.props(),
       ...pick(x.attributes(), Object.keys(TEST_EXTA_ARGS)),
     }));
@@ -61,7 +61,7 @@ describe('File Tree component', () => {
   describe('file tree', () => {
     const createChildren = () => [{ id: 1 }, { id: 2 }];
     const createChildrenExpectation = (props = {}) =>
-      createChildren().map(file => ({
+      createChildren().map((file) => ({
         fileRowComponent: MockFileRow,
         file,
         ...TEST_EXTA_ARGS,
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index 8cc5d6775a7..b58ce0083c0 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -25,10 +25,11 @@ import {
   tokenValueLabel,
   tokenValueMilestone,
   tokenValueMembership,
+  tokenValueConfidential,
 } from './mock_data';
 
 jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
-  uniqueTokens: jest.fn().mockImplementation(tokens => tokens),
+  uniqueTokens: jest.fn().mockImplementation((tokens) => tokens),
   stripQuotes: jest.requireActual(
     '~/vue_shared/components/filtered_search_bar/filtered_search_utils',
   ).stripQuotes,
@@ -227,12 +228,13 @@ describe('FilteredSearchBarRoot', () => {
     });
 
     describe('removeQuotesEnclosure', () => {
-      const mockFilters = [tokenValueAuthor, tokenValueLabel, 'foo'];
+      const mockFilters = [tokenValueAuthor, tokenValueLabel, tokenValueConfidential, 'foo'];
 
       it('returns filter array with unescaped strings for values which have spaces', () => {
         expect(wrapper.vm.removeQuotesEnclosure(mockFilters)).toEqual([
           tokenValueAuthor,
           tokenValueLabel,
+          tokenValueConfidential,
           'foo',
         ]);
       });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_utils_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_utils_spec.js
index 4869e75a2f3..9e96c154546 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_utils_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_utils_spec.js
@@ -82,7 +82,10 @@ describe('prepareTokens', () => {
     ],
     [
       'assignees',
-      [{ value: 'krillin', operator: '=' }, { value: 'piccolo', operator: '!=' }],
+      [
+        { value: 'krillin', operator: '=' },
+        { value: 'piccolo', operator: '!=' },
+      ],
       [
         { type: 'assignees', value: { data: 'krillin', operator: '=' } },
         { type: 'assignees', value: { data: 'piccolo', operator: '!=' } },
@@ -90,7 +93,10 @@ describe('prepareTokens', () => {
     ],
     [
       'foo',
-      [{ value: 'bar', operator: '!=' }, { value: 'baz', operator: '!=' }],
+      [
+        { value: 'bar', operator: '!=' },
+        { value: 'baz', operator: '!=' },
+      ],
       [
         { type: 'foo', value: { data: 'bar', operator: '!=' } },
         { type: 'foo', value: { data: 'baz', operator: '!=' } },
@@ -112,7 +118,10 @@ describe('processFilters', () => {
 
     expect(result).toStrictEqual({
       foo: [{ value: 'foo', operator: '=' }],
-      bar: [{ value: 'bar1', operator: '=' }, { value: 'bar2', operator: '!=' }],
+      bar: [
+        { value: 'bar1', operator: '=' },
+        { value: 'bar2', operator: '!=' },
+      ],
     });
   });
 
@@ -164,17 +173,26 @@ describe('filterToQueryObject', () => {
     ],
     [
       'foo',
-      [{ value: 'bar', operator: '=' }, { value: 'baz', operator: '=' }],
+      [
+        { value: 'bar', operator: '=' },
+        { value: 'baz', operator: '=' },
+      ],
       { foo: ['bar', 'baz'], 'not[foo]': null },
     ],
     [
       'foo',
-      [{ value: 'bar', operator: '!=' }, { value: 'baz', operator: '!=' }],
+      [
+        { value: 'bar', operator: '!=' },
+        { value: 'baz', operator: '!=' },
+      ],
       { foo: null, 'not[foo]': ['bar', 'baz'] },
     ],
     [
       'foo',
-      [{ value: 'bar', operator: '!=' }, { value: 'baz', operator: '=' }],
+      [
+        { value: 'bar', operator: '!=' },
+        { value: 'baz', operator: '=' },
+      ],
       { foo: ['baz'], 'not[foo]': ['bar'] },
     ],
   ])('gathers filter values %s=%j into query object=%j', (token, value, result) => {
@@ -200,15 +218,30 @@ describe('urlQueryToFilter', () => {
     ['not[foo]=bar&foo=baz', { foo: { value: 'baz', operator: '=' } }],
     [
       'foo[]=bar&foo[]=baz&not[foo]=',
-      { foo: [{ value: 'bar', operator: '=' }, { value: 'baz', operator: '=' }] },
+      {
+        foo: [
+          { value: 'bar', operator: '=' },
+          { value: 'baz', operator: '=' },
+        ],
+      },
     ],
     [
       'foo[]=&not[foo][]=bar&not[foo][]=baz',
-      { foo: [{ value: 'bar', operator: '!=' }, { value: 'baz', operator: '!=' }] },
+      {
+        foo: [
+          { value: 'bar', operator: '!=' },
+          { value: 'baz', operator: '!=' },
+        ],
+      },
     ],
     [
       'foo[]=baz&not[foo][]=bar',
-      { foo: [{ value: 'baz', operator: '=' }, { value: 'bar', operator: '!=' }] },
+      {
+        foo: [
+          { value: 'baz', operator: '=' },
+          { value: 'bar', operator: '!=' },
+        ],
+      },
     ],
     ['not[foo][]=bar', { foo: [{ value: 'bar', operator: '!=' }] }],
   ])('gathers filter values %s into query object=%j', (query, result) => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
index 64fbe70696d..7606b3bd91c 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
@@ -110,7 +110,10 @@ export const mockMembershipToken = {
   token: GlFilteredSearchToken,
   unique: true,
   operators: [{ value: '=', description: 'is' }],
-  options: [{ value: 'exclude', title: 'Direct' }, { value: 'only', title: 'Inherited' }],
+  options: [
+    { value: 'exclude', title: 'Direct' },
+    { value: 'only', title: 'Inherited' },
+  ],
 };
 
 export const mockMembershipTokenOptionsWithoutTitles = {
@@ -152,6 +155,14 @@ export const tokenValueMembership = {
   },
 };
 
+export const tokenValueConfidential = {
+  type: 'confidential',
+  value: {
+    operator: '=',
+    data: true,
+  },
+};
+
 export const tokenValuePlain = {
   type: 'filtered-search-term',
   value: { data: 'foo' },
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/test_helper.js b/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/test_helper.js
index 1b7c80a5252..84297923df3 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/test_helper.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/test_helper.js
@@ -1,11 +1,11 @@
 export function getFilterParams(tokens, options = {}) {
   const { key = 'value', operator = '=', prop = 'title' } = options;
-  return tokens.map(token => {
+  return tokens.map((token) => {
     return { [key]: token[prop], operator };
   });
 }
 
 export function getFilterValues(tokens, options = {}) {
   const { prop = 'title' } = options;
-  return tokens.map(token => token[prop]);
+  return tokens.map((token) => token[prop]);
 }
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
index 3fd1d8b7f42..3997d6a99a6 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
@@ -189,8 +189,8 @@ describe('AuthorToken', () => {
       suggestionsSegment.vm.$emit('activate');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
-      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
 
     it('renders `DEFAULT_LABEL_ANY` as default suggestions', async () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
index 5b7f7d242e9..35f487330be 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
@@ -189,8 +189,8 @@ describe('BranchToken', () => {
       });
       await showSuggestions();
 
-      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
-      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
 
     it('renders no suggestions as default', async () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
index 74172db81c2..dda0ad39bbc 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
@@ -181,12 +181,9 @@ describe('LabelToken', () => {
 
       expect(tokenSegments).toHaveLength(3); // Label, =, "Foo Label"
       expect(tokenSegments.at(2).text()).toBe(`~${mockRegularLabel.title}`); // "Foo Label"
-      expect(
-        tokenSegments
-          .at(2)
-          .find('.gl-token')
-          .attributes('style'),
-      ).toBe('background-color: rgb(186, 218, 85); color: rgb(255, 255, 255);');
+      expect(tokenSegments.at(2).find('.gl-token').attributes('style')).toBe(
+        'background-color: rgb(186, 218, 85); color: rgb(255, 255, 255);',
+      );
     });
 
     it('renders provided defaultLabels as suggestions', async () => {
@@ -219,8 +216,8 @@ describe('LabelToken', () => {
       suggestionsSegment.vm.$emit('activate');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
-      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
 
     it('renders `DEFAULT_LABELS` as default suggestions', async () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
index 67f9a9c70cc..164561f6244 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
@@ -140,7 +140,10 @@ describe('MilestoneToken', () => {
   });
 
   describe('template', () => {
-    const defaultMilestones = [{ text: 'foo', value: 'foo' }, { text: 'bar', value: 'baz' }];
+    const defaultMilestones = [
+      { text: 'foo', value: 'foo' },
+      { text: 'bar', value: 'baz' },
+    ];
 
     beforeEach(async () => {
       wrapper = createComponent({ value: { data: `"${mockRegularMilestone.title}"` } });
@@ -193,8 +196,8 @@ describe('MilestoneToken', () => {
       suggestionsSegment.vm.$emit('activate');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
-      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
 
     it('renders `DEFAULT_MILESTONES` as default suggestions', async () => {
diff --git a/spec/frontend/vue_shared/components/gfm_autocomplete/__snapshots__/utils_spec.js.snap b/spec/frontend/vue_shared/components/gfm_autocomplete/__snapshots__/utils_spec.js.snap
index d0fa2086fdc..d8e6e37bb89 100644
--- a/spec/frontend/vue_shared/components/gfm_autocomplete/__snapshots__/utils_spec.js.snap
+++ b/spec/frontend/vue_shared/components/gfm_autocomplete/__snapshots__/utils_spec.js.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`gfm_autocomplete/utils emojis config shows the emoji name and icon in the menu item 1`] = `
+"raised_hands 
+    <gl-emoji
+      
+      data-name=\\"raised_hands\\"></gl-emoji>
+  "
+`;
+
 exports[`gfm_autocomplete/utils issues config shows the iid and title in the menu item within a project context 1`] = `"<small>123456</small> Project context issue title &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;"`;
 
 exports[`gfm_autocomplete/utils issues config shows the reference and title in the menu item within a group context 1`] = `"<small>gitlab#987654</small> Group context issue title &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;"`;
@@ -44,4 +52,9 @@ exports[`gfm_autocomplete/utils merge requests config shows the reference and ti
 
 exports[`gfm_autocomplete/utils milestones config shows the title in the menu item 1`] = `"13.2 &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;"`;
 
+exports[`gfm_autocomplete/utils quick actions config shows the name, aliases, params and description in the menu item 1`] = `
+"<div>/unlabel <small>(or /remove_label)</small> <small>~label1 ~\\"label 2\\"</small></div>
+          <div><small><em>Remove all or specific label(s)</em></small></div>"
+`;
+
 exports[`gfm_autocomplete/utils snippets config shows the id and title in the menu item 1`] = `"<small>123456</small> Snippet title &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;"`;
diff --git a/spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js b/spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js
index 647f8c6e000..7ec3fbd4e3b 100644
--- a/spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js
+++ b/spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js
@@ -2,6 +2,31 @@ import { escape, last } from 'lodash';
 import { GfmAutocompleteType, tributeConfig } from '~/vue_shared/components/gfm_autocomplete/utils';
 
 describe('gfm_autocomplete/utils', () => {
+  describe('emojis config', () => {
+    const emojisConfig = tributeConfig[GfmAutocompleteType.Emojis].config;
+    const emoji = 'raised_hands';
+
+    it('uses : as the trigger', () => {
+      expect(emojisConfig.trigger).toBe(':');
+    });
+
+    it('searches using the emoji name', () => {
+      expect(emojisConfig.lookup(emoji)).toBe(emoji);
+    });
+
+    it('limits the number of rendered items to 100', () => {
+      expect(emojisConfig.menuItemLimit).toBe(100);
+    });
+
+    it('shows the emoji name and icon in the menu item', () => {
+      expect(emojisConfig.menuItemTemplate({ original: emoji })).toMatchSnapshot();
+    });
+
+    it('inserts the emoji name on autocomplete selection', () => {
+      expect(emojisConfig.selectTemplate({ original: emoji })).toBe(`:${emoji}:`);
+    });
+  });
+
   describe('issues config', () => {
     const issuesConfig = tributeConfig[GfmAutocompleteType.Issues].config;
     const groupContextIssue = {
@@ -26,6 +51,10 @@ describe('gfm_autocomplete/utils', () => {
       );
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(issuesConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the reference and title in the menu item within a group context', () => {
       expect(issuesConfig.menuItemTemplate({ original: groupContextIssue })).toMatchSnapshot();
     });
@@ -77,6 +106,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(labelsConfig.lookup).toBe('title');
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(labelsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the title in the menu item', () => {
       expect(labelsConfig.menuItemTemplate({ original: label })).toMatchSnapshot();
     });
@@ -180,6 +213,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(membersConfig.lookup(groupMember)).toBe(last(groupMember.name.split(' / ')));
     });
 
+    it('limits the items in the autocomplete menu to 10', () => {
+      expect(membersConfig.menuItemLimit).toBe(10);
+    });
+
     it('shows the avatar, name and username in the menu item for a user', () => {
       expect(membersConfig.menuItemTemplate({ original: userMember })).toMatchSnapshot();
     });
@@ -266,6 +303,10 @@ describe('gfm_autocomplete/utils', () => {
       );
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(mergeRequestsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the reference and title in the menu item within a group context', () => {
       expect(
         mergeRequestsConfig.menuItemTemplate({ original: groupContextMergeRequest }),
@@ -307,6 +348,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(milestonesConfig.lookup).toBe('title');
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(milestonesConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the title in the menu item', () => {
       expect(milestonesConfig.menuItemTemplate({ original: milestone })).toMatchSnapshot();
     });
@@ -318,6 +363,40 @@ describe('gfm_autocomplete/utils', () => {
     });
   });
 
+  describe('quick actions config', () => {
+    const quickActionsConfig = tributeConfig[GfmAutocompleteType.QuickActions].config;
+    const quickAction = {
+      name: 'unlabel',
+      aliases: ['remove_label'],
+      description: 'Remove all or specific label(s)',
+      warning: '',
+      icon: '',
+      params: ['~label1 ~"label 2"'],
+    };
+
+    it('uses / as the trigger', () => {
+      expect(quickActionsConfig.trigger).toBe('/');
+    });
+
+    it('inserts the name on autocomplete selection', () => {
+      expect(quickActionsConfig.fillAttr).toBe('name');
+    });
+
+    it('searches using both the name and aliases', () => {
+      expect(quickActionsConfig.lookup(quickAction)).toBe(
+        `${quickAction.name}${quickAction.aliases.join(', /')}`,
+      );
+    });
+
+    it('limits the number of rendered items to 100', () => {
+      expect(quickActionsConfig.menuItemLimit).toBe(100);
+    });
+
+    it('shows the name, aliases, params and description in the menu item', () => {
+      expect(quickActionsConfig.menuItemTemplate({ original: quickAction })).toMatchSnapshot();
+    });
+  });
+
   describe('snippets config', () => {
     const snippetsConfig = tributeConfig[GfmAutocompleteType.Snippets].config;
     const snippet = {
@@ -337,6 +416,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(snippetsConfig.lookup(snippet)).toBe(`${snippet.id}${snippet.title}`);
     });
 
+    it('limits the number of rendered items to 100', () => {
+      expect(snippetsConfig.menuItemLimit).toBe(100);
+    });
+
     it('shows the id and title in the menu item', () => {
       expect(snippetsConfig.menuItemTemplate({ original: snippet })).toMatchSnapshot();
     });
diff --git a/spec/frontend/vue_shared/components/gl_countdown_spec.js b/spec/frontend/vue_shared/components/gl_countdown_spec.js
index 365c9fad478..fcc5c0cd310 100644
--- a/spec/frontend/vue_shared/components/gl_countdown_spec.js
+++ b/spec/frontend/vue_shared/components/gl_countdown_spec.js
@@ -17,21 +17,19 @@ describe('GlCountdown', () => {
   });
 
   describe('when there is time remaining', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       vm = mountComponent(Component, {
         endDateString: '2000-01-01T01:02:03Z',
       });
 
-      Vue.nextTick()
-        .then(done)
-        .catch(done.fail);
+      Vue.nextTick().then(done).catch(done.fail);
     });
 
     it('displays remaining time', () => {
       expect(vm.$el.textContent).toContain('01:02:03');
     });
 
-    it('updates remaining time', done => {
+    it('updates remaining time', (done) => {
       now = '2000-01-01T00:00:01Z';
       jest.advanceTimersByTime(1000);
 
@@ -45,14 +43,12 @@ describe('GlCountdown', () => {
   });
 
   describe('when there is no time remaining', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       vm = mountComponent(Component, {
         endDateString: '1900-01-01T00:00:00Z',
       });
 
-      Vue.nextTick()
-        .then(done)
-        .catch(done.fail);
+      Vue.nextTick().then(done).catch(done.fail);
     });
 
     it('displays 00:00:00', () => {
diff --git a/spec/frontend/vue_shared/components/gl_modal_vuex_spec.js b/spec/frontend/vue_shared/components/gl_modal_vuex_spec.js
index 93f4db5df18..6802499ed52 100644
--- a/spec/frontend/vue_shared/components/gl_modal_vuex_spec.js
+++ b/spec/frontend/vue_shared/components/gl_modal_vuex_spec.js
@@ -118,7 +118,7 @@ describe('GlModalVuex', () => {
     expect(actions.hide).toHaveBeenCalledTimes(1);
   });
 
-  it('calls bootstrap show when isVisible changes', done => {
+  it('calls bootstrap show when isVisible changes', (done) => {
     state.isVisible = false;
 
     factory();
@@ -135,7 +135,7 @@ describe('GlModalVuex', () => {
       .catch(done.fail);
   });
 
-  it('calls bootstrap hide when isVisible changes', done => {
+  it('calls bootstrap hide when isVisible changes', (done) => {
     state.isVisible = true;
 
     factory();
@@ -154,7 +154,7 @@ describe('GlModalVuex', () => {
 
   it.each(['ok', 'cancel'])(
     'passes an "%s" handler to the "modal-footer" slot scope',
-    handlerName => {
+    (handlerName) => {
       state.isVisible = true;
 
       const modalFooterSlotContent = jest.fn();
diff --git a/spec/frontend/vue_shared/components/issuable/issuable_header_warnings_spec.js b/spec/frontend/vue_shared/components/issuable/issuable_header_warnings_spec.js
index 2f910a10bc6..a03a3915e1b 100644
--- a/spec/frontend/vue_shared/components/issuable/issuable_header_warnings_spec.js
+++ b/spec/frontend/vue_shared/components/issuable/issuable_header_warnings_spec.js
@@ -17,13 +17,13 @@ describe('IssuableHeaderWarnings', () => {
   const findConfidentialIcon = () => wrapper.find('[data-testid="confidential"]');
   const findLockedIcon = () => wrapper.find('[data-testid="locked"]');
 
-  const renderTestMessage = renders => (renders ? 'renders' : 'does not render');
+  const renderTestMessage = (renders) => (renders ? 'renders' : 'does not render');
 
-  const setLock = locked => {
+  const setLock = (locked) => {
     store.getters.getNoteableData.discussion_locked = locked;
   };
 
-  const setConfidential = confidential => {
+  const setConfidential = (confidential) => {
     store.getters.getNoteableData.confidential = confidential;
   };
 
diff --git a/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js b/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
index 192e33d8b00..5f614bfc751 100644
--- a/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
+++ b/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
@@ -11,7 +11,7 @@ describe('IssueAssigneesComponent', () => {
   let wrapper;
   let vm;
 
-  const factory = props => {
+  const factory = (props) => {
     wrapper = shallowMount(IssueAssignees, {
       propsData: {
         assignees: mockAssigneesList,
@@ -99,11 +99,11 @@ describe('IssueAssigneesComponent', () => {
     });
 
     it('renders assignee', () => {
-      const data = findAvatars().wrappers.map(x => ({
+      const data = findAvatars().wrappers.map((x) => ({
         ...x.props(),
       }));
 
-      const expected = mockAssigneesList.slice(0, TEST_MAX_VISIBLE - 1).map(x =>
+      const expected = mockAssigneesList.slice(0, TEST_MAX_VISIBLE - 1).map((x) =>
         expect.objectContaining({
           linkHref: x.web_url,
           imgAlt: `Avatar for ${x.name}`,
diff --git a/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js b/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
index d1bfc180082..ffcb891c4fc 100644
--- a/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
+++ b/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
@@ -19,7 +19,7 @@ describe('IssueMilestoneComponent', () => {
   let wrapper;
   let vm;
 
-  beforeEach(done => {
+  beforeEach((done) => {
     wrapper = createComponent();
 
     ({ vm } = wrapper);
diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
index 2319bf61482..3dc34583118 100644
--- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { TEST_HOST } from 'jest/helpers/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
@@ -115,9 +115,7 @@ describe('RelatedIssuableItem', () => {
     const tokenMetadata = () => wrapper.find('.item-meta');
 
     it('renders item path and ID', () => {
-      const pathAndID = tokenMetadata()
-        .find('.item-path-id')
-        .text();
+      const pathAndID = tokenMetadata().find('.item-path-id').text();
 
       expect(pathAndID).toContain('gitlab-org/gitlab-test');
       expect(pathAndID).toContain('#1');
diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_mock_data.js b/spec/frontend/vue_shared/components/issue/related_issuable_mock_data.js
index 17813f2833d..6cdb945ec20 100644
--- a/spec/frontend/vue_shared/components/issue/related_issuable_mock_data.js
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_mock_data.js
@@ -1,4 +1,4 @@
-import { TEST_HOST } from 'jest/helpers/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 
 export const defaultProps = {
   endpoint: '/foo/bar/issues/1/related_issues',
diff --git a/spec/frontend/vue_shared/components/local_storage_sync_spec.js b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
index 464fe3411dd..4c5a0c1e601 100644
--- a/spec/frontend/vue_shared/components/local_storage_sync_spec.js
+++ b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
@@ -49,7 +49,7 @@ describe('Local Storage Sync', () => {
 
     it.each('foo', 3, true, ['foo', 'bar'], { foo: 'bar' })(
       'saves updated value to localStorage',
-      newValue => {
+      (newValue) => {
         createComponent({
           props: {
             storageKey,
diff --git a/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap b/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap
index b8a9143bc79..c454166e30b 100644
--- a/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap
+++ b/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap
@@ -7,6 +7,7 @@ exports[`Suggestion Diff component matches snapshot 1`] = `
   <suggestion-diff-header-stub
     batchsuggestionscount="1"
     class="qa-suggestion-diff-header js-suggestion-diff-header"
+    defaultcommitmessage="Apply suggestion"
     helppagepath="path_to_docs"
     isapplyingbatch="true"
     isbatched="true"
diff --git a/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js b/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js
index 0598506891b..b9f0d88548d 100644
--- a/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js
@@ -3,10 +3,10 @@ import { GlDropdown, GlFormTextarea, GlButton } from '@gitlab/ui';
 import ApplySuggestionComponent from '~/vue_shared/components/markdown/apply_suggestion.vue';
 
 describe('Apply Suggestion component', () => {
-  const propsData = { fileName: 'test.js', disabled: false };
+  const propsData = { defaultCommitMessage: 'Apply suggestion', disabled: false };
   let wrapper;
 
-  const createWrapper = props => {
+  const createWrapper = (props) => {
     wrapper = shallowMount(ApplySuggestionComponent, { propsData: { ...propsData, ...props } });
   };
 
@@ -27,7 +27,6 @@ describe('Apply Suggestion component', () => {
 
       expect(dropdown.exists()).toBe(true);
       expect(dropdown.props('text')).toBe('Apply suggestion');
-      expect(dropdown.props('headerText')).toBe('Apply suggestion commit message');
       expect(dropdown.props('disabled')).toBe(false);
     });
 
@@ -35,7 +34,7 @@ describe('Apply Suggestion component', () => {
       const textArea = findTextArea();
 
       expect(textArea.exists()).toBe(true);
-      expect(textArea.attributes('placeholder')).toBe('Apply suggestion on test.js');
+      expect(textArea.attributes('placeholder')).toBe('Apply suggestion');
     });
 
     it('renders an apply button', () => {
@@ -55,11 +54,11 @@ describe('Apply Suggestion component', () => {
   });
 
   describe('apply suggestion', () => {
-    it('emits an apply event with a default message if no message was added', () => {
+    it('emits an apply event with no message if no message was added', () => {
       findTextArea().vm.$emit('input', null);
       findApplyButton().vm.$emit('click');
 
-      expect(wrapper.emitted('apply')).toEqual([['Apply suggestion on test.js']]);
+      expect(wrapper.emitted('apply')).toEqual([[null]]);
     });
 
     it('emits an apply event with a user-defined message', () => {
diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index 82bc9b9fe08..077c2174571 100644
--- a/spec/frontend/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -6,7 +6,7 @@ import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
 describe('Markdown field header component', () => {
   let wrapper;
 
-  const createWrapper = props => {
+  const createWrapper = (props) => {
     wrapper = shallowMount(HeaderComponent, {
       propsData: {
         previewMarkdown: false,
@@ -18,7 +18,7 @@ describe('Markdown field header component', () => {
   const findToolbarButtons = () => wrapper.findAll(ToolbarButton);
   const findToolbarButtonByProp = (prop, value) =>
     findToolbarButtons()
-      .filter(button => button.props(prop) === value)
+      .filter((button) => button.props(prop) === value)
       .at(0);
 
   beforeEach(() => {
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
index c0a000690f8..bf65adc866d 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -9,6 +9,7 @@ const DEFAULT_PROPS = {
   isBatched: false,
   isApplyingBatch: false,
   helpPagePath: 'path_to_docs',
+  defaultCommitMessage: 'Apply suggestion',
 };
 
 describe('Suggestion Diff component', () => {
@@ -91,7 +92,7 @@ describe('Suggestion Diff component', () => {
     });
 
     it('emits apply', () => {
-      expect(wrapper.emitted().apply).toEqual([[expect.any(Function)]]);
+      expect(wrapper.emitted().apply).toEqual([[expect.any(Function), undefined]]);
     });
 
     it('does not render apply suggestion and add to batch buttons', () => {
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js
index b67f4cf12bf..f9a8b64f89b 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js
@@ -61,11 +61,7 @@ describe('SuggestionDiffRow', () => {
       });
 
       expect(wrapper.classes()).toContain('line_holder');
-      expect(
-        findSuggestionContent()
-          .find('span')
-          .classes(),
-      ).toContain('line');
+      expect(findSuggestionContent().find('span').classes()).toContain('line');
     });
 
     it('renders the rich text when it is available', () => {
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
index 232feb126dc..5bd6bda2d2c 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -42,6 +42,7 @@ const MOCK_DATA = {
     is_applying_batch: true,
   },
   helpPagePath: 'path_to_docs',
+  defaultCommitMessage: 'Apply suggestion',
   batchSuggestionsInfo: [{ suggestionId }],
 };
 
diff --git a/spec/frontend/vue_shared/components/markdown/suggestions_spec.js b/spec/frontend/vue_shared/components/markdown/suggestions_spec.js
index 34ccdf38b00..6fcac2df0b6 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestions_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestions_spec.js
@@ -44,13 +44,14 @@ const MOCK_DATA = {
   `,
   isApplied: false,
   helpPagePath: 'path_to_docs',
+  defaultCommitMessage: 'Apply suggestion',
 };
 
 describe('Suggestion component', () => {
   let vm;
   let diffTable;
 
-  beforeEach(done => {
+  beforeEach((done) => {
     const Component = Vue.extend(SuggestionsComponent);
 
     vm = new Component({
@@ -86,7 +87,7 @@ describe('Suggestion component', () => {
     });
 
     it('generates a diff table that contains contents the suggested lines', () => {
-      MOCK_DATA.suggestions[0].diff_lines.forEach(line => {
+      MOCK_DATA.suggestions[0].diff_lines.forEach((line) => {
         const text = line.text.substring(1);
 
         expect(diffTable.innerHTML.includes(text)).toBe(true);
diff --git a/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js b/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
index 8a7946fd7b1..786dfabb990 100644
--- a/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
@@ -10,7 +10,7 @@ describe('toolbar_button', () => {
     tag: 'test tag',
   };
 
-  const createComponent = propUpdates => {
+  const createComponent = (propUpdates) => {
     wrapper = shallowMount(ToolbarButton, {
       propsData: {
         ...defaultProps,
diff --git a/spec/frontend/vue_shared/components/navigation_tabs_spec.js b/spec/frontend/vue_shared/components/navigation_tabs_spec.js
index 561456d614e..b1119bfb150 100644
--- a/spec/frontend/vue_shared/components/navigation_tabs_spec.js
+++ b/spec/frontend/vue_shared/components/navigation_tabs_spec.js
@@ -1,64 +1,68 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import navigationTabs from '~/vue_shared/components/navigation_tabs.vue';
+import { mount } from '@vue/test-utils';
+import { GlTab } from '@gitlab/ui';
+import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 
 describe('navigation tabs component', () => {
-  let vm;
-  let Component;
-  let data;
+  let wrapper;
 
-  beforeEach(() => {
-    data = [
-      {
-        name: 'All',
-        scope: 'all',
-        count: 1,
-        isActive: true,
-      },
-      {
-        name: 'Pending',
-        scope: 'pending',
-        count: 0,
-        isActive: false,
-      },
-      {
-        name: 'Running',
-        scope: 'running',
-        isActive: false,
+  const data = [
+    {
+      name: 'All',
+      scope: 'all',
+      count: 1,
+      isActive: true,
+    },
+    {
+      name: 'Pending',
+      scope: 'pending',
+      count: 0,
+      isActive: false,
+    },
+    {
+      name: 'Running',
+      scope: 'running',
+      isActive: false,
+    },
+  ];
+
+  const createComponent = () => {
+    wrapper = mount(NavigationTabs, {
+      propsData: {
+        tabs: data,
+        scope: 'pipelines',
       },
-    ];
+    });
+  };
 
-    Component = Vue.extend(navigationTabs);
-    vm = mountComponent(Component, { tabs: data, scope: 'pipelines' });
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('should render tabs', () => {
-    expect(vm.$el.querySelectorAll('li').length).toEqual(data.length);
+    expect(wrapper.findAll(GlTab)).toHaveLength(data.length);
   });
 
   it('should render active tab', () => {
-    expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined();
+    expect(wrapper.find('.js-pipelines-tab-all').classes('active')).toBe(true);
   });
 
   it('should render badge', () => {
-    expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1');
-    expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual(
-      '0',
-    );
+    expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('1');
+    expect(wrapper.find('.js-pipelines-tab-pending').text()).toContain('0');
   });
 
   it('should not render badge', () => {
-    expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null);
+    expect(wrapper.find('.js-pipelines-tab-running .badge').exists()).toBe(false);
   });
 
-  it('should trigger onTabClick', () => {
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-    vm.$el.querySelector('.js-pipelines-tab-pending').click();
+  it('should trigger onTabClick', async () => {
+    await wrapper.find('.js-pipelines-tab-pending').trigger('click');
 
-    expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending');
+    expect(wrapper.emitted('onChangeTab')).toEqual([['pending']]);
   });
 });
diff --git a/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js b/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
index 61660f79b71..cc9f05beb06 100644
--- a/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
+++ b/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
@@ -10,7 +10,7 @@ describe('Issue Warning Component', () => {
   const findConfidentialBlock = (w = wrapper) => w.find({ ref: 'confidential' });
   const findLockedAndConfidentialBlock = (w = wrapper) => w.find({ ref: 'lockedAndConfidential' });
 
-  const createComponent = props =>
+  const createComponent = (props) =>
     shallowMount(NoteableWarning, {
       propsData: {
         ...props,
diff --git a/spec/frontend/vue_shared/components/ordered_layout_spec.js b/spec/frontend/vue_shared/components/ordered_layout_spec.js
index eec153c3792..21588569d6a 100644
--- a/spec/frontend/vue_shared/components/ordered_layout_spec.js
+++ b/spec/frontend/vue_shared/components/ordered_layout_spec.js
@@ -29,7 +29,7 @@ describe('Ordered Layout', () => {
   const verifyOrder = () =>
     wrapper
       .findAll('footer,header')
-      .wrappers.map(x => (x.element.tagName === 'FOOTER' ? 'footer' : 'header'));
+      .wrappers.map((x) => (x.element.tagName === 'FOOTER' ? 'footer' : 'header'));
 
   const createComponent = (props = {}) => {
     wrapper = mount(TestComponent, {
diff --git a/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js b/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
index 0f7c8e97635..491f783622a 100644
--- a/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
+++ b/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
@@ -124,7 +124,10 @@ describe('AlertManagementEmptyState', () => {
     it('renders the tabs selection with valid tabs', () => {
       mountComponent({
         props: {
-          statusTabs: [{ status: 'opened', title: 'Open' }, { status: 'closed', title: 'Closed' }],
+          statusTabs: [
+            { status: 'opened', title: 'Open' },
+            { status: 'closed', title: 'Closed' },
+          ],
         },
       });
 
@@ -216,12 +219,7 @@ describe('AlertManagementEmptyState', () => {
         findPagination().vm.$emit('input', 3);
 
         await wrapper.vm.$nextTick();
-        expect(
-          findPagination()
-            .findAll('.page-item')
-            .at(0)
-            .text(),
-        ).toBe('Prev');
+        expect(findPagination().findAll('.page-item').at(0).text()).toBe('Prev');
       });
 
       it('returns prevPage number', async () => {
@@ -244,12 +242,7 @@ describe('AlertManagementEmptyState', () => {
         findPagination().vm.$emit('input', 3);
 
         await wrapper.vm.$nextTick();
-        expect(
-          findPagination()
-            .findAll('.page-item')
-            .at(1)
-            .text(),
-        ).toBe('Next');
+        expect(findPagination().findAll('.page-item').at(1).text()).toBe('Next');
       });
 
       it('returns nextPage number', async () => {
diff --git a/spec/frontend/vue_shared/components/pagination_links_spec.js b/spec/frontend/vue_shared/components/pagination_links_spec.js
index bf004c83c4f..ad82aee0098 100644
--- a/spec/frontend/vue_shared/components/pagination_links_spec.js
+++ b/spec/frontend/vue_shared/components/pagination_links_spec.js
@@ -49,7 +49,7 @@ describe('Pagination links component', () => {
   });
 
   it('should provide translated text to GitLab UI pagination', () => {
-    Object.entries(translations).forEach(entry => {
+    Object.entries(translations).forEach((entry) => {
       expect(glPagination.vm[entry[0]]).toBe(entry[1]);
     });
   });
diff --git a/spec/frontend/vue_shared/components/pikaday_spec.js b/spec/frontend/vue_shared/components/pikaday_spec.js
index 639b4828a09..1c6876c282c 100644
--- a/spec/frontend/vue_shared/components/pikaday_spec.js
+++ b/spec/frontend/vue_shared/components/pikaday_spec.js
@@ -1,42 +1,41 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlDatepicker } from '@gitlab/ui';
 import datePicker from '~/vue_shared/components/pikaday.vue';
 
 describe('datePicker', () => {
   let wrapper;
-  beforeEach(() => {
+
+  const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(datePicker, {
-      propsData: {
-        label: 'label',
-      },
-      attachToDocument: true,
+      propsData,
     });
-  });
+  };
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
+  it('should emit newDateSelected when GlDatePicker emits the input event', () => {
+    const minDate = new Date();
+    const maxDate = new Date();
+    const selectedDate = new Date();
+    const theDate = selectedDate.toISOString().slice(0, 10);
 
-  it('should render label text', () => {
-    expect(
-      wrapper
-        .find('.dropdown-toggle-text')
-        .text()
-        .trim(),
-    ).toEqual('label');
-  });
+    buildWrapper({ minDate, maxDate, selectedDate });
 
-  it('should show calendar', () => {
-    expect(wrapper.find('.pika-single').element).toBeDefined();
+    expect(wrapper.find(GlDatepicker).props()).toMatchObject({
+      minDate,
+      maxDate,
+      value: selectedDate,
+    });
+    wrapper.find(GlDatepicker).vm.$emit('input', selectedDate);
+    expect(wrapper.emitted('newDateSelected')[0][0]).toBe(theDate);
   });
+  it('should emit the hidePicker event when GlDatePicker emits the close event', () => {
+    buildWrapper();
 
-  it('should emit hidePicker event when dropdown is clicked', () => {
-    // Removing the bootstrap data-toggle property,
-    // because it interfers with our click event
-    delete wrapper.find('.dropdown-menu-toggle').element.dataset.toggle;
-
-    wrapper.find('.dropdown-menu-toggle').trigger('click');
+    wrapper.find(GlDatepicker).vm.$emit('close');
 
-    expect(wrapper.emitted('hidePicker')).toEqual([[]]);
+    expect(wrapper.emitted('hidePicker')).toHaveLength(1);
   });
 });
diff --git a/spec/frontend/vue_shared/components/project_avatar/default_spec.js b/spec/frontend/vue_shared/components/project_avatar/default_spec.js
index 090f8b69213..0daadeebc20 100644
--- a/spec/frontend/vue_shared/components/project_avatar/default_spec.js
+++ b/spec/frontend/vue_shared/components/project_avatar/default_spec.js
@@ -19,7 +19,7 @@ describe('ProjectAvatarDefault component', () => {
     vm.$destroy();
   });
 
-  it('renders identicon if project has no avatar_url', done => {
+  it('renders identicon if project has no avatar_url', (done) => {
     const expectedText = getFirstCharacterCapitalized(projectData.name);
 
     vm.project = {
@@ -38,7 +38,7 @@ describe('ProjectAvatarDefault component', () => {
       .catch(done.fail);
   });
 
-  it('renders avatar image if project has avatar_url', done => {
+  it('renders avatar image if project has avatar_url', (done) => {
     const avatarUrl = `${TEST_HOST}/images/home/nasa.svg`;
 
     vm.project = {
diff --git a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
index 6d1ebe85aa0..016622fd0bb 100644
--- a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
+++ b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
@@ -18,6 +18,13 @@ describe('ProjectSelector component', () => {
   selected = selected.concat(allProjects.slice(0, 3)).concat(allProjects.slice(5, 8));
 
   const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input');
+  const findLegendText = () => wrapper.find('[data-testid="legend-text"]').text();
+  const search = (query) => {
+    const searchInput = findSearchInput();
+
+    searchInput.setValue(query);
+    searchInput.trigger('input');
+  };
 
   beforeEach(() => {
     wrapper = mount(Vue.extend(ProjectSelector), {
@@ -31,7 +38,7 @@ describe('ProjectSelector component', () => {
         showSearchErrorMessage: false,
         totalResults: searchResults.length,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
     ({ vm } = wrapper);
@@ -48,10 +55,7 @@ describe('ProjectSelector component', () => {
   it(`triggers a search when the search input value changes`, () => {
     jest.spyOn(vm, '$emit').mockImplementation(() => {});
     const query = 'my test query!';
-    const searchInput = findSearchInput();
-
-    searchInput.setValue(query);
-    searchInput.trigger('input');
+    search(query);
 
     expect(vm.$emit).toHaveBeenCalledWith('searched', query);
   });
@@ -121,15 +125,21 @@ describe('ProjectSelector component', () => {
     `(
       'is "$expected" given $count results are showing out of $total',
       ({ count, total, expected }) => {
+        search('gitlab ui');
+
         wrapper.setProps({
           projectSearchResults: searchResults.slice(0, count),
           totalResults: total,
         });
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.text()).toContain(expected);
+          expect(findLegendText()).toBe(expected);
         });
       },
     );
+
+    it('is not rendered without searching', () => {
+      expect(findLegendText()).toBe('');
+    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/registry/details_row_spec.js b/spec/frontend/vue_shared/components/registry/details_row_spec.js
index 16a55b84787..09dacfae363 100644
--- a/spec/frontend/vue_shared/components/registry/details_row_spec.js
+++ b/spec/frontend/vue_shared/components/registry/details_row_spec.js
@@ -8,7 +8,7 @@ describe('DetailsRow', () => {
   const findIcon = () => wrapper.find(GlIcon);
   const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]');
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(component, {
       propsData: {
         icon: 'clock',
diff --git a/spec/frontend/vue_shared/components/registry/list_item_spec.js b/spec/frontend/vue_shared/components/registry/list_item_spec.js
index 2a48bf4f2d6..33c9c808dc3 100644
--- a/spec/frontend/vue_shared/components/registry/list_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/list_item_spec.js
@@ -11,7 +11,7 @@ describe('list item', () => {
   const findRightPrimarySlot = () => wrapper.find('[data-testid="right-primary"]');
   const findRightSecondarySlot = () => wrapper.find('[data-testid="right-secondary"]');
   const findRightActionSlot = () => wrapper.find('[data-testid="right-action"]');
-  const findDetailsSlot = name => wrapper.find(`[data-testid="${name}"]`);
+  const findDetailsSlot = (name) => wrapper.find(`[data-testid="${name}"]`);
   const findToggleDetailsButton = () => wrapper.find(GlButton);
 
   const mountComponent = (propsData, slots) => {
@@ -74,14 +74,14 @@ describe('list item', () => {
       findToggleDetailsButton().vm.$emit('click');
 
       await wrapper.vm.$nextTick();
-      slotNames.forEach(name => {
+      slotNames.forEach((name) => {
         expect(findDetailsSlot(name).exists()).toBe(true);
       });
     });
     it('are not visible when details are not shown', () => {
       mountComponent({}, slotMocks);
 
-      slotNames.forEach(name => {
+      slotNames.forEach((name) => {
         expect(findDetailsSlot(name).exists()).toBe(false);
       });
     });
diff --git a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
index ff968ff1831..3d3cfbe13e3 100644
--- a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLink } from '@gitlab/ui';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import component from '~/vue_shared/components/registry/metadata_item.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
@@ -12,6 +13,9 @@ describe('Metadata Item', () => {
   const mountComponent = (propsData = defaultProps) => {
     wrapper = shallowMount(component, {
       propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -24,8 +28,9 @@ describe('Metadata Item', () => {
   const findLink = (w = wrapper) => w.find(GlLink);
   const findText = () => wrapper.find('[data-testid="metadata-item-text"]');
   const findTooltipOnTruncate = (w = wrapper) => w.find(TooltipOnTruncate);
+  const findTextTooltip = () => wrapper.find('[data-testid="text-tooltip-container"]');
 
-  describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', size => {
+  describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', (size) => {
     const className = `mw-${size}`;
 
     it(`${size} is assigned correctly to text`, () => {
@@ -55,6 +60,22 @@ describe('Metadata Item', () => {
       expect(tooltip.exists()).toBe(true);
       expect(tooltip.attributes('title')).toBe(defaultProps.text);
     });
+
+    describe('with tooltip prop set to something', () => {
+      const textTooltip = 'foo';
+      it('hides tooltip_on_truncate', () => {
+        mountComponent({ ...defaultProps, textTooltip });
+
+        expect(findTooltipOnTruncate(findText()).exists()).toBe(false);
+      });
+
+      it('set the tooltip on the text', () => {
+        mountComponent({ ...defaultProps, textTooltip });
+
+        const tooltip = getBinding(findTextTooltip().element, 'gl-tooltip');
+        expect(tooltip.value.title).toBe(textTooltip);
+      });
+    });
   });
 
   describe('link', () => {
diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js
index b743a663f06..fb0009ebb8d 100644
--- a/spec/frontend/vue_shared/components/registry/title_area_spec.js
+++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js
@@ -1,4 +1,4 @@
-import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import component from '~/vue_shared/components/registry/title_area.vue';
 
@@ -9,12 +9,13 @@ describe('title area', () => {
 
   const findSubHeaderSlot = () => wrapper.find('[data-testid="sub-header"]');
   const findRightActionsSlot = () => wrapper.find('[data-testid="right-actions"]');
-  const findMetadataSlot = name => wrapper.find(`[data-testid="${name}"]`);
+  const findMetadataSlot = (name) => wrapper.find(`[data-testid="${name}"]`);
   const findTitle = () => wrapper.find('[data-testid="title"]');
   const findAvatar = () => wrapper.find(GlAvatar);
   const findInfoMessages = () => wrapper.findAll('[data-testid="info-message"]');
   const findDynamicSlot = () => wrapper.find(`[data-testid="${DYNAMIC_SLOT}`);
   const findSlotOrderElements = () => wrapper.findAll('[slot-test]');
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
 
   const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => {
     wrapper = shallowMount(component, {
@@ -96,10 +97,33 @@ describe('title area', () => {
       mountComponent({ slots: slotMocks });
 
       await wrapper.vm.$nextTick();
-      slotNames.forEach(name => {
+      slotNames.forEach((name) => {
         expect(findMetadataSlot(name).exists()).toBe(true);
       });
     });
+
+    it('is/are hidden when metadata-loading is true', async () => {
+      mountComponent({ slots: slotMocks, propsData: { title: 'foo', metadataLoading: true } });
+
+      await wrapper.vm.$nextTick();
+      slotNames.forEach((name) => {
+        expect(findMetadataSlot(name).exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('metadata skeleton loader', () => {
+    it('is hidden when metadata loading is false', () => {
+      mountComponent();
+
+      expect(findSkeletonLoader().exists()).toBe(false);
+    });
+
+    it('is shown when metadata loading is true', () => {
+      mountComponent({ propsData: { metadataLoading: true } });
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
   });
 
   describe('dynamic slots', () => {
@@ -142,16 +166,8 @@ describe('title area', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(
-        findSlotOrderElements()
-          .at(0)
-          .attributes('data-testid'),
-      ).toBe(DYNAMIC_SLOT);
-      expect(
-        findSlotOrderElements()
-          .at(1)
-          .attributes('data-testid'),
-      ).toBe('metadata-foo');
+      expect(findSlotOrderElements().at(0).attributes('data-testid')).toBe(DYNAMIC_SLOT);
+      expect(findSlotOrderElements().at(1).attributes('data-testid')).toBe('metadata-foo');
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js
index d79df4d0557..51619cd9578 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js
@@ -20,7 +20,7 @@ describe('Editor Service', () => {
   let mockInstance;
   let event;
   let handler;
-  const parseHtml = str => {
+  const parseHtml = (str) => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = str;
     return wrapper.firstChild;
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab_spec.js
index ded490b2568..81fd059ce4f 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab_spec.js
@@ -10,7 +10,7 @@ describe('Upload Image Tab', () => {
 
   afterEach(() => wrapper.destroy());
 
-  const triggerInputEvent = size => {
+  const triggerInputEvent = (size) => {
     const file = { size, name: 'file-name.png' };
     const mockEvent = new Event('input');
 
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/modals/insert_video_modal_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/modals/insert_video_modal_spec.js
index be3a4030b1d..d59d4cc1de9 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/modals/insert_video_modal_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/modals/insert_video_modal_spec.js
@@ -8,7 +8,7 @@ describe('Insert Video Modal', () => {
   const findModal = () => wrapper.find(GlModal);
   const findUrlInput = () => wrapper.find({ ref: 'urlInput' });
 
-  const triggerInsertVideo = url => {
+  const triggerInsertVideo = (url) => {
     const preventDefault = jest.fn();
     findUrlInput().vm.$emit('input', url);
     findModal().vm.$emit('primary', { preventDefault });
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
index cd1157a1c2e..2eb353a1801 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { mockEditorApi } from '@toast-ui/vue-editor';
+import { Editor, mockEditorApi } from '@toast-ui/vue-editor';
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import AddImageModal from '~/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue';
 import InsertVideoModal from '~/vue_shared/components/rich_content_editor/modals/insert_video_modal.vue';
@@ -17,16 +17,17 @@ import {
   insertVideo,
   registerHTMLToMarkdownRenderer,
   getEditorOptions,
+  getMarkdown,
 } from '~/vue_shared/components/rich_content_editor/services/editor_service';
 
 jest.mock('~/vue_shared/components/rich_content_editor/services/editor_service', () => ({
-  ...jest.requireActual('~/vue_shared/components/rich_content_editor/services/editor_service'),
   addCustomEventListener: jest.fn(),
   removeCustomEventListener: jest.fn(),
   addImage: jest.fn(),
   insertVideo: jest.fn(),
   registerHTMLToMarkdownRenderer: jest.fn(),
   getEditorOptions: jest.fn(),
+  getMarkdown: jest.fn(),
 }));
 
 describe('Rich Content Editor', () => {
@@ -38,9 +39,12 @@ describe('Rich Content Editor', () => {
   const findAddImageModal = () => wrapper.find(AddImageModal);
   const findInsertVideoModal = () => wrapper.find(InsertVideoModal);
 
-  const buildWrapper = () => {
+  const buildWrapper = async () => {
     wrapper = shallowMount(RichContentEditor, {
       propsData: { content, imageRoot },
+      stubs: {
+        ToastEditor: Editor,
+      },
     });
   };
 
@@ -89,9 +93,8 @@ describe('Rich Content Editor', () => {
 
     it('emits an input event with the changed content', () => {
       const changedMarkdown = '## Changed Markdown';
-      const getMarkdownMock = jest.fn().mockReturnValueOnce(changedMarkdown);
+      getMarkdown.mockReturnValueOnce(changedMarkdown);
 
-      findEditor().setMethods({ invoke: getMarkdownMock });
       findEditor().vm.$emit('change');
 
       expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
@@ -147,6 +150,7 @@ describe('Rich Content Editor', () => {
     });
 
     it('emits load event with the markdown formatted by Toast UI', () => {
+      mockEditorApi.getMarkdown.mockReturnValueOnce(formattedMarkdown);
       expect(mockEditorApi.getMarkdown).toHaveBeenCalled();
       expect(wrapper.emitted('load')[0]).toEqual([{ formattedMarkdown }]);
     });
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer_spec.js
index 85516eae4cf..3caf03dabba 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer_spec.js
@@ -8,9 +8,9 @@ describe('rich_content_editor/services/html_to_markdown_renderer', () => {
 
   beforeEach(() => {
     baseRenderer = {
-      trim: jest.fn(input => `trimmed ${input}`),
-      getSpaceCollapsedText: jest.fn(input => `space collapsed ${input}`),
-      getSpaceControlled: jest.fn(input => `space controlled ${input}`),
+      trim: jest.fn((input) => `trimmed ${input}`),
+      getSpaceCollapsedText: jest.fn((input) => `space collapsed ${input}`),
+      getSpaceControlled: jest.fn((input) => `space controlled ${input}`),
       convert: jest.fn(),
     };
 
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/mock_data.js b/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/mock_data.js
index 5cf3961819e..407072fb596 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/mock_data.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/mock_data.js
@@ -1,12 +1,12 @@
 // Node spec helpers
 
-export const buildMockTextNode = literal => ({ literal, type: 'text' });
+export const buildMockTextNode = (literal) => ({ literal, type: 'text' });
 
 export const normalTextNode = buildMockTextNode('This is just normal text.');
 
 // Token spec helpers
 
-const buildMockUneditableOpenToken = type => {
+const buildMockUneditableOpenToken = (type) => {
   return {
     type: 'openTag',
     tagName: type,
@@ -17,7 +17,7 @@ const buildMockUneditableOpenToken = type => {
   };
 };
 
-const buildMockTextToken = content => {
+const buildMockTextToken = (content) => {
   return {
     type: 'text',
     tagName: null,
@@ -25,7 +25,7 @@ const buildMockTextToken = content => {
   };
 };
 
-const buildMockUneditableCloseToken = type => ({ type: 'closeTag', tagName: type });
+const buildMockUneditableCloseToken = (type) => ({ type: 'closeTag', tagName: type });
 
 export const originToken = buildMockTextToken('{:.no_toc .hidden-md .hidden-lg}');
 const uneditableOpenToken = buildMockUneditableOpenToken('div');
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_instance_text_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_instance_text_spec.js
index 2897929f1bf..521885f5687 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_instance_text_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_instance_text_spec.js
@@ -36,7 +36,7 @@ describe('Render Identifier Instance Text renderer', () => {
     `(
       'should return inline editable, uneditable, and editable tokens in sequence',
       ({ start, middle, end }) => {
-        const buildMockTextToken = content => ({ type: 'text', tagName: null, content });
+        const buildMockTextToken = (content) => ({ type: 'text', tagName: null, content });
 
         const startToken = buildMockTextToken(start);
         const middleToken = buildMockTextToken(middle);
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph_spec.js
index b3d9576f38b..470cf9bddaa 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_identifier_paragraph_spec.js
@@ -2,7 +2,7 @@ import renderer from '~/vue_shared/components/rich_content_editor/services/rende
 
 import { buildMockTextNode } from './mock_data';
 
-const buildMockParagraphNode = literal => {
+const buildMockParagraphNode = (literal) => {
   return {
     firstChild: buildMockTextNode(literal),
     type: 'paragraph',
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
index 2db15a71215..0e6f951bd53 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
@@ -9,7 +9,7 @@ describe('Toolbar Item', () => {
   const findIcon = () => wrapper.find(GlIcon);
   const findButton = () => wrapper.find('button');
 
-  const buildWrapper = propsData => {
+  const buildWrapper = (propsData) => {
     wrapper = shallowMount(ToolbarItem, {
       propsData,
       directives: {
diff --git a/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js b/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js
index 60203493cbd..ae86106d86e 100644
--- a/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js
+++ b/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js
@@ -8,7 +8,7 @@ const discoverProjectSecurityPath = '/discoverProjectSecurityPath';
 describe('HelpIcon component', () => {
   let wrapper;
 
-  const createWrapper = props => {
+  const createWrapper = (props) => {
     wrapper = shallowMount(HelpIcon, {
       propsData: {
         helpPath,
diff --git a/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js b/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js
index e57152c3cbf..f186eb848f2 100644
--- a/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js
+++ b/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js
@@ -6,7 +6,7 @@ import { groupedTextBuilder } from '~/vue_shared/security_reports/store/utils';
 describe('SecuritySummary component', () => {
   let wrapper;
 
-  const createWrapper = message => {
+  const createWrapper = (message) => {
     wrapper = shallowMount(SecuritySummary, {
       propsData: { message },
       stubs: {
@@ -26,7 +26,7 @@ describe('SecuritySummary component', () => {
     groupedTextBuilder({ reportType: 'Security scanning', critical: 1, high: 0, total: 1 }),
     groupedTextBuilder({ reportType: 'Security scanning', critical: 0, high: 1, total: 1 }),
     groupedTextBuilder({ reportType: 'Security scanning', critical: 1, high: 2, total: 3 }),
-  ])('given the message %p', message => {
+  ])('given the message %p', (message) => {
     beforeEach(() => {
       createWrapper(message);
     });
diff --git a/spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
index 08fc822577e..230442ec547 100644
--- a/spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
@@ -12,7 +12,7 @@ describe('collapsedGroupedDatePicker', () => {
   });
 
   describe('toggleCollapse events', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       jest.spyOn(vm, 'toggleSidebar').mockImplementation(() => {});
       vm.minDate = new Date('07/17/2016');
       Vue.nextTick(done);
@@ -26,7 +26,7 @@ describe('collapsedGroupedDatePicker', () => {
   });
 
   describe('minDate and maxDate', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       vm.minDate = new Date('07/17/2016');
       vm.maxDate = new Date('07/17/2017');
       Vue.nextTick(done);
@@ -42,7 +42,7 @@ describe('collapsedGroupedDatePicker', () => {
   });
 
   describe('minDate', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       vm.minDate = new Date('07/17/2016');
       Vue.nextTick(done);
     });
@@ -56,7 +56,7 @@ describe('collapsedGroupedDatePicker', () => {
   });
 
   describe('maxDate', () => {
-    beforeEach(done => {
+    beforeEach((done) => {
       vm.maxDate = new Date('07/17/2017');
       Vue.nextTick(done);
     });
diff --git a/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
index 47edfbe3115..fc1fa3fc1c1 100644
--- a/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
@@ -46,12 +46,7 @@ describe('SidebarDatePicker', () => {
   it('should render None if there is no selectedDate', () => {
     mountComponent();
 
-    expect(
-      wrapper
-        .find('.value-content span')
-        .text()
-        .trim(),
-    ).toEqual('None');
+    expect(wrapper.find('.value-content span').text().trim()).toEqual('None');
   });
 
   it('should render date-picker when editing', () => {
@@ -63,12 +58,7 @@ describe('SidebarDatePicker', () => {
   it('should render label', () => {
     const label = 'label';
     mountComponent({ label });
-    expect(
-      wrapper
-        .find('.title')
-        .text()
-        .trim(),
-    ).toEqual(label);
+    expect(wrapper.find('.title').text().trim()).toEqual(label);
   });
 
   it('should render loading-icon when isLoading', () => {
@@ -82,12 +72,7 @@ describe('SidebarDatePicker', () => {
     });
 
     it('should render edit button', () => {
-      expect(
-        wrapper
-          .find('.title .btn-blank')
-          .text()
-          .trim(),
-      ).toEqual('Edit');
+      expect(wrapper.find('.title .btn-blank').text().trim()).toEqual('Edit');
     });
 
     it('should enable editing when edit button is clicked', async () => {
@@ -102,12 +87,7 @@ describe('SidebarDatePicker', () => {
   it('should render date if selectedDate', () => {
     mountComponent({ selectedDate: new Date('07/07/2017') });
 
-    expect(
-      wrapper
-        .find('.value-content strong')
-        .text()
-        .trim(),
-    ).toEqual('Jul 7, 2017');
+    expect(wrapper.find('.value-content strong').text().trim()).toEqual('Jul 7, 2017');
   });
 
   describe('selectedDate and editable', () => {
@@ -116,12 +96,7 @@ describe('SidebarDatePicker', () => {
     });
 
     it('should render remove button if selectedDate and editable', () => {
-      expect(
-        wrapper
-          .find('.value-content .btn-blank')
-          .text()
-          .trim(),
-      ).toEqual('remove');
+      expect(wrapper.find('.value-content .btn-blank').text().trim()).toEqual('remove');
     });
 
     it('should emit saveDate with null when remove button is clicked', () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js b/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
index a97e26caf53..256b3cff525 100644
--- a/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
@@ -184,11 +184,7 @@ describe('IssuableMoveDropdown', () => {
       });
 
       it('renders gl-dropdown-form component', () => {
-        expect(
-          findDropdownEl()
-            .find(GlDropdownForm)
-            .exists(),
-        ).toBe(true);
+        expect(findDropdownEl().find(GlDropdownForm).exists()).toBe(true);
       });
 
       it('renders header element', () => {
@@ -216,11 +212,7 @@ describe('IssuableMoveDropdown', () => {
 
         await wrapper.vm.$nextTick();
 
-        expect(
-          findDropdownEl()
-            .find(GlLoadingIcon)
-            .exists(),
-        ).toBe(true);
+        expect(findDropdownEl().find(GlLoadingIcon).exists()).toBe(true);
       });
 
       it('renders gl-dropdown-item components for available projects', async () => {
@@ -288,10 +280,7 @@ describe('IssuableMoveDropdown', () => {
         await wrapper.vm.$nextTick();
 
         expect(
-          wrapper
-            .find('[data-testid="footer"]')
-            .find(GlButton)
-            .attributes('disabled'),
+          wrapper.find('[data-testid="footer"]').find(GlButton).attributes('disabled'),
         ).not.toBeDefined();
       });
     });
@@ -331,10 +320,7 @@ describe('IssuableMoveDropdown', () => {
       });
 
       it('close icon in dropdown header closes the dropdown when clicked', () => {
-        wrapper
-          .find('[data-testid="header"]')
-          .find(GlButton)
-          .vm.$emit('click', mockEvent);
+        wrapper.find('[data-testid="header"]').find(GlButton).vm.$emit('click', mockEvent);
 
         expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalled();
       });
@@ -346,10 +332,7 @@ describe('IssuableMoveDropdown', () => {
 
         await wrapper.vm.$nextTick();
 
-        wrapper
-          .findAll(GlDropdownItem)
-          .at(0)
-          .vm.$emit('click', mockEvent);
+        wrapper.findAll(GlDropdownItem).at(0).vm.$emit('click', mockEvent);
 
         expect(wrapper.vm.selectedProject).toBe(mockProjects[0]);
       });
@@ -361,10 +344,7 @@ describe('IssuableMoveDropdown', () => {
 
         await wrapper.vm.$nextTick();
 
-        wrapper
-          .find('[data-testid="footer"]')
-          .find(GlButton)
-          .vm.$emit('click');
+        wrapper.find('[data-testid="footer"]').find(GlButton).vm.$emit('click');
 
         expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalled();
         expect(wrapper.emitted('move-issuable')).toBeTruthy();
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js
index 596cb22fca5..a55ad37c498 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js
@@ -15,7 +15,7 @@ describe('BaseComponent', () => {
   let wrapper;
   let vm;
 
-  beforeEach(done => {
+  beforeEach((done) => {
     wrapper = createComponent();
 
     ({ vm } = wrapper);
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
index c2091a681f2..4b4d265800b 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
@@ -5,7 +5,7 @@ import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels
 
 import { mockSuggestedColors } from './mock_data';
 
-const createComponent = headerTitle => {
+const createComponent = (headerTitle) => {
   const Component = Vue.extend(dropdownCreateLabelComponent);
 
   return mountComponent(Component, {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
index 71c040c6633..003f3d2b4e6 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
@@ -37,7 +37,7 @@ describe('DropdownValueCollapsedComponent', () => {
         const labels = mockLabels.concat(mockLabels);
         const vmMoreLabels = createComponent(labels);
 
-        const expectedText = labels.map(label => label.title).join(', ');
+        const expectedText = labels.map((label) => label.title).join(', ');
 
         expect(vmMoreLabels.labelsList).toBe(expectedText);
         vmMoreLabels.$destroy();
@@ -53,7 +53,7 @@ describe('DropdownValueCollapsedComponent', () => {
 
         const expectedText = `${mockMoreLabels
           .slice(0, 5)
-          .map(label => label.title)
+          .map((label) => label.title)
           .join(', ')}, and ${mockMoreLabels.length - 5} more`;
 
         expect(vmMoreLabels.labelsList).toBe(expectedText);
@@ -61,7 +61,7 @@ describe('DropdownValueCollapsedComponent', () => {
       });
 
       it('returns first label name when `labels` prop has only one item present', () => {
-        const text = mockLabels.map(label => label.title).join(', ');
+        const text = mockLabels.map((label) => label.title).join(', ');
 
         expect(vm.labelsList).toBe(text);
       });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
index 53e8a0e1278..ecb3c3a42c8 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
@@ -71,12 +71,7 @@ describe('DropdownValueComponent', () => {
     it('render slot content inside component when `labels` prop is empty', () => {
       const vmEmptyLabels = createComponent([]);
 
-      expect(
-        vmEmptyLabels
-          .find('.text-secondary')
-          .text()
-          .trim(),
-      ).toBe(mockConfig.emptyValueText);
+      expect(vmEmptyLabels.find('.text-secondary').text().trim()).toBe(mockConfig.emptyValueText);
       vmEmptyLabels.destroy();
     });
 
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
index 04320a72be6..0f49fe4fc5b 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
@@ -24,7 +24,7 @@ const createComponent = (initialState = mockConfig) => {
 
 describe('DropdownContentsCreateView', () => {
   let wrapper;
-  const colors = Object.keys(mockSuggestedColors).map(color => ({
+  const colors = Object.keys(mockSuggestedColors).map((color) => ({
     [color]: mockSuggestedColors[color],
   }));
 
@@ -125,10 +125,7 @@ describe('DropdownContentsCreateView', () => {
     });
 
     it('renders dropdown back button element', () => {
-      const backBtnEl = wrapper
-        .find('.dropdown-title')
-        .findAll(GlButton)
-        .at(0);
+      const backBtnEl = wrapper.find('.dropdown-title').findAll(GlButton).at(0);
 
       expect(backBtnEl.exists()).toBe(true);
       expect(backBtnEl.attributes('aria-label')).toBe('Go back');
@@ -143,10 +140,7 @@ describe('DropdownContentsCreateView', () => {
     });
 
     it('renders dropdown close button element', () => {
-      const closeBtnEl = wrapper
-        .find('.dropdown-title')
-        .findAll(GlButton)
-        .at(1);
+      const closeBtnEl = wrapper.find('.dropdown-title').findAll(GlButton).at(1);
 
       expect(closeBtnEl.exists()).toBe(true);
       expect(closeBtnEl.attributes('aria-label')).toBe('Close');
@@ -190,10 +184,7 @@ describe('DropdownContentsCreateView', () => {
     });
 
     it('renders create button element', () => {
-      const createBtnEl = wrapper
-        .find('.dropdown-actions')
-        .findAll(GlButton)
-        .at(0);
+      const createBtnEl = wrapper.find('.dropdown-actions').findAll(GlButton).at(0);
 
       expect(createBtnEl.exists()).toBe(true);
       expect(createBtnEl.text()).toContain('Create');
@@ -211,10 +202,7 @@ describe('DropdownContentsCreateView', () => {
     });
 
     it('renders cancel button element', () => {
-      const cancelBtnEl = wrapper
-        .find('.dropdown-actions')
-        .findAll(GlButton)
-        .at(1);
+      const cancelBtnEl = wrapper.find('.dropdown-actions').findAll(GlButton).at(1);
 
       expect(cancelBtnEl.exists()).toBe(true);
       expect(cancelBtnEl.text()).toContain('Cancel');
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
index 78367b3a5b4..989cd256e26 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -371,9 +371,7 @@ describe('DropdownContentsLabelsView', () => {
       wrapper.vm.$store.state.allowLabelCreate = false;
 
       return wrapper.vm.$nextTick(() => {
-        const createLabelLink = findDropdownFooter()
-          .findAll(GlLink)
-          .at(0);
+        const createLabelLink = findDropdownFooter().findAll(GlLink).at(0);
 
         expect(createLabelLink.text()).not.toBe('Create label');
       });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
index c742220ba8a..4909c43bc96 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
@@ -19,7 +19,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('setInitialState', () => {
-    it('sets initial store state', done => {
+    it('sets initial store state', (done) => {
       testAction(
         actions.setInitialState,
         mockInitialState,
@@ -32,7 +32,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('toggleDropdownButton', () => {
-    it('toggles dropdown button', done => {
+    it('toggles dropdown button', (done) => {
       testAction(
         actions.toggleDropdownButton,
         {},
@@ -45,7 +45,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('toggleDropdownContents', () => {
-    it('toggles dropdown contents', done => {
+    it('toggles dropdown contents', (done) => {
       testAction(
         actions.toggleDropdownContents,
         {},
@@ -58,7 +58,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('toggleDropdownContentsCreateView', () => {
-    it('toggles dropdown create view', done => {
+    it('toggles dropdown create view', (done) => {
       testAction(
         actions.toggleDropdownContentsCreateView,
         {},
@@ -71,13 +71,13 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('requestLabels', () => {
-    it('sets value of `state.labelsFetchInProgress` to `true`', done => {
+    it('sets value of `state.labelsFetchInProgress` to `true`', (done) => {
       testAction(actions.requestLabels, {}, state, [{ type: types.REQUEST_LABELS }], [], done);
     });
   });
 
   describe('receiveLabelsSuccess', () => {
-    it('sets provided labels to `state.labels`', done => {
+    it('sets provided labels to `state.labels`', (done) => {
       const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
 
       testAction(
@@ -96,7 +96,7 @@ describe('LabelsSelect Actions', () => {
       setFixtures('<div class="flash-container"></div>');
     });
 
-    it('sets value `state.labelsFetchInProgress` to `false`', done => {
+    it('sets value `state.labelsFetchInProgress` to `false`', (done) => {
       testAction(
         actions.receiveLabelsFailure,
         {},
@@ -129,7 +129,7 @@ describe('LabelsSelect Actions', () => {
     });
 
     describe('on success', () => {
-      it('dispatches `requestLabels` & `receiveLabelsSuccess` actions', done => {
+      it('dispatches `requestLabels` & `receiveLabelsSuccess` actions', (done) => {
         const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
         mock.onGet(/labels.json/).replyOnce(200, labels);
 
@@ -145,7 +145,7 @@ describe('LabelsSelect Actions', () => {
     });
 
     describe('on failure', () => {
-      it('dispatches `requestLabels` & `receiveLabelsFailure` actions', done => {
+      it('dispatches `requestLabels` & `receiveLabelsFailure` actions', (done) => {
         mock.onGet(/labels.json/).replyOnce(500, {});
 
         testAction(
@@ -161,7 +161,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('requestCreateLabel', () => {
-    it('sets value `state.labelCreateInProgress` to `true`', done => {
+    it('sets value `state.labelCreateInProgress` to `true`', (done) => {
       testAction(
         actions.requestCreateLabel,
         {},
@@ -174,7 +174,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('receiveCreateLabelSuccess', () => {
-    it('sets value `state.labelCreateInProgress` to `false`', done => {
+    it('sets value `state.labelCreateInProgress` to `false`', (done) => {
       testAction(
         actions.receiveCreateLabelSuccess,
         {},
@@ -191,7 +191,7 @@ describe('LabelsSelect Actions', () => {
       setFixtures('<div class="flash-container"></div>');
     });
 
-    it('sets value `state.labelCreateInProgress` to `false`', done => {
+    it('sets value `state.labelCreateInProgress` to `false`', (done) => {
       testAction(
         actions.receiveCreateLabelFailure,
         {},
@@ -224,7 +224,7 @@ describe('LabelsSelect Actions', () => {
     });
 
     describe('on success', () => {
-      it('dispatches `requestCreateLabel`, `receiveCreateLabelSuccess` & `toggleDropdownContentsCreateView` actions', done => {
+      it('dispatches `requestCreateLabel`, `receiveCreateLabelSuccess` & `toggleDropdownContentsCreateView` actions', (done) => {
         const label = { id: 1 };
         mock.onPost(/labels.json/).replyOnce(200, label);
 
@@ -244,7 +244,7 @@ describe('LabelsSelect Actions', () => {
     });
 
     describe('on failure', () => {
-      it('dispatches `requestCreateLabel` & `receiveCreateLabelFailure` actions', done => {
+      it('dispatches `requestCreateLabel` & `receiveCreateLabelFailure` actions', (done) => {
         mock.onPost(/labels.json/).replyOnce(500, {});
 
         testAction(
@@ -260,7 +260,7 @@ describe('LabelsSelect Actions', () => {
   });
 
   describe('updateSelectedLabels', () => {
-    it('updates `state.labels` based on provided `labels` param', done => {
+    it('updates `state.labels` based on provided `labels` param', (done) => {
       const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
 
       testAction(
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
index 52116f757c5..1f899e84897 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
@@ -26,7 +26,10 @@ describe('LabelsSelect Getters', () => {
     });
 
     it('returns first label title and remaining labels count when state.labels has more than 1 label', () => {
-      const labels = [{ id: 1, title: 'Foo', set: true }, { id: 2, title: 'Bar', set: true }];
+      const labels = [
+        { id: 1, title: 'Foo', set: true },
+        { id: 2, title: 'Bar', set: true },
+      ];
 
       expect(getters.dropdownButtonText({ labels }, { isDropdownVariantSidebar: true })).toBe(
         'Foo +1 more',
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
index 8081806e314..208f2f2d42d 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
@@ -93,14 +93,14 @@ describe('LabelsSelect Mutations', () => {
     });
 
     it('sets provided `labels` to `state.labels` along with `set` prop based on `state.selectedLabels`', () => {
-      const selectedLabelIds = selectedLabels.map(label => label.id);
+      const selectedLabelIds = selectedLabels.map((label) => label.id);
       const state = {
         selectedLabels,
         labelsFetchInProgress: true,
       };
       mutations[types.RECEIVE_SET_LABELS_SUCCESS](state, labels);
 
-      state.labels.forEach(label => {
+      state.labels.forEach((label) => {
         if (selectedLabelIds.includes(label.id)) {
           expect(label.set).toBe(true);
         }
@@ -162,7 +162,7 @@ describe('LabelsSelect Mutations', () => {
       };
       mutations[types.UPDATE_SELECTED_LABELS](state, { labels: [{ id: 2 }] });
 
-      state.labels.forEach(label => {
+      state.labels.forEach((label) => {
         if (updatedLabelIds.includes(label.id)) {
           expect(label.touched).toBe(true);
           expect(label.set).toBe(true);
diff --git a/spec/frontend/vue_shared/components/slot_switch_spec.js b/spec/frontend/vue_shared/components/slot_switch_spec.js
index 73307b5573f..f25b9877aba 100644
--- a/spec/frontend/vue_shared/components/slot_switch_spec.js
+++ b/spec/frontend/vue_shared/components/slot_switch_spec.js
@@ -10,14 +10,14 @@ describe('SlotSwitch', () => {
 
   let wrapper;
 
-  const createComponent = propsData => {
+  const createComponent = (propsData) => {
     wrapper = shallowMount(SlotSwitch, {
       propsData,
       slots,
     });
   };
 
-  const getChildrenHtml = () => wrapper.findAll('* *').wrappers.map(c => c.html());
+  const getChildrenHtml = () => wrapper.findAll('* *').wrappers.map((c) => c.html());
 
   afterEach(() => {
     if (wrapper) {
diff --git a/spec/frontend/vue_shared/components/split_button_spec.js b/spec/frontend/vue_shared/components/split_button_spec.js
index e09bc073042..ad11e6519c4 100644
--- a/spec/frontend/vue_shared/components/split_button_spec.js
+++ b/spec/frontend/vue_shared/components/split_button_spec.js
@@ -19,18 +19,15 @@ const mockActionItems = [
 describe('SplitButton', () => {
   let wrapper;
 
-  const createComponent = propsData => {
+  const createComponent = (propsData) => {
     wrapper = shallowMount(SplitButton, {
       propsData,
     });
   };
 
   const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownItem = (index = 0) =>
-    findDropdown()
-      .findAll(GlDropdownItem)
-      .at(index);
-  const selectItem = index => {
+  const findDropdownItem = (index = 0) => findDropdown().findAll(GlDropdownItem).at(index);
+  const selectItem = (index) => {
     findDropdownItem(index).vm.$emit('click');
 
     return wrapper.vm.$nextTick();
@@ -87,7 +84,7 @@ describe('SplitButton', () => {
 
     const addChangeEventHandler = () => {
       changeEventHandler = jest.fn();
-      wrapper.vm.$once('change', item => changeEventHandler(item));
+      wrapper.vm.$once('change', (item) => changeEventHandler(item));
     };
 
     it('defaults to first actionItems event', () => {
diff --git a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
index 0786882f527..c6f01efa71a 100644
--- a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
 
-const createComponent = config => {
+const createComponent = (config) => {
   const Component = Vue.extend(stackedProgressBarComponent);
   const defaultConfig = {
     successLabel: 'Synced',
@@ -29,11 +29,12 @@ describe('StackedProgressBarComponent', () => {
     vm.$destroy();
   });
 
-  const findSuccessBarText = wrapper => wrapper.$el.querySelector('.status-green').innerText.trim();
-  const findNeutralBarText = wrapper =>
+  const findSuccessBarText = (wrapper) =>
+    wrapper.$el.querySelector('.status-green').innerText.trim();
+  const findNeutralBarText = (wrapper) =>
     wrapper.$el.querySelector('.status-neutral').innerText.trim();
-  const findFailureBarText = wrapper => wrapper.$el.querySelector('.status-red').innerText.trim();
-  const findUnavailableBarText = wrapper =>
+  const findFailureBarText = (wrapper) => wrapper.$el.querySelector('.status-red').innerText.trim();
+  const findUnavailableBarText = (wrapper) =>
     wrapper.$el.querySelector('.status-unavailable').innerText.trim();
 
   describe('computed', () => {
diff --git a/spec/frontend/vue_shared/components/table_pagination_spec.js b/spec/frontend/vue_shared/components/table_pagination_spec.js
index 058dfcdbde2..12c47637358 100644
--- a/spec/frontend/vue_shared/components/table_pagination_spec.js
+++ b/spec/frontend/vue_shared/components/table_pagination_spec.js
@@ -6,7 +6,7 @@ describe('Pagination component', () => {
   let wrapper;
   let spy;
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(TablePagination, {
       propsData: props,
     });
diff --git a/spec/frontend/vue_shared/components/tabs/tab_spec.js b/spec/frontend/vue_shared/components/tabs/tab_spec.js
index 8cf07a9177c..ee0c983c764 100644
--- a/spec/frontend/vue_shared/components/tabs/tab_spec.js
+++ b/spec/frontend/vue_shared/components/tabs/tab_spec.js
@@ -10,7 +10,7 @@ describe('Tab component', () => {
     vm = mountComponent(Component);
   });
 
-  it('sets localActive to equal active', done => {
+  it('sets localActive to equal active', (done) => {
     vm.active = true;
 
     vm.$nextTick(() => {
@@ -20,7 +20,7 @@ describe('Tab component', () => {
     });
   });
 
-  it('sets active class', done => {
+  it('sets active class', (done) => {
     vm.active = true;
 
     vm.$nextTick(() => {
diff --git a/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js b/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
index 175abf5aae0..27c9b099306 100644
--- a/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
+++ b/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
@@ -18,7 +18,7 @@ describe('TooltipOnTruncate component', () => {
 
   const createComponent = ({ propsData, ...options } = {}) => {
     wrapper = shallowMount(TooltipOnTruncate, {
-      attachToDocument: true,
+      attachTo: document.body,
       propsData: {
         ...propsData,
       },
@@ -44,7 +44,7 @@ describe('TooltipOnTruncate component', () => {
       },
       {
         propsData: { ...propsData },
-        attachToDocument: true,
+        attachTo: document.body,
         ...options,
       },
     );
@@ -139,7 +139,7 @@ describe('TooltipOnTruncate component', () => {
       createComponent({
         propsData: {
           title: DUMMY_TEXT,
-          truncateTarget: el => el.childNodes[1],
+          truncateTarget: (el) => el.childNodes[1],
         },
         slots: {
           default: [createChildElement(), createChildElement()],
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
index 663d0af4cc4..2c3fc70e116 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
@@ -91,11 +91,11 @@ describe('User Avatar Image Component', () => {
     });
 
     it('renders the tooltip slot', () => {
-      expect(wrapper.find('.js-user-avatar-image-toolip').exists()).toBe(true);
+      expect(wrapper.find('.js-user-avatar-image-tooltip').exists()).toBe(true);
     });
 
     it('renders the tooltip content', () => {
-      expect(wrapper.find('.js-user-avatar-image-toolip').text()).toContain(slots.default[0]);
+      expect(wrapper.find('.js-user-avatar-image-tooltip').text()).toContain(slots.default[0]);
     });
 
     it('does not render tooltip data attributes for on avatar image', () => {
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
index 84e7a6a162e..d151cd15bc4 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -20,7 +20,7 @@ describe('User Avatar Link Component', () => {
     username: 'username',
   };
 
-  const createWrapper = props => {
+  const createWrapper = (props) => {
     wrapper = shallowMount(UserAvatarLink, {
       propsData: {
         ...defaultProps,
@@ -83,7 +83,7 @@ describe('User Avatar Link Component', () => {
 
   describe('username', () => {
     it('should not render avatar image tooltip', () => {
-      expect(wrapper.find('.js-user-avatar-image-toolip').exists()).toBe(false);
+      expect(wrapper.find('.js-user-avatar-image-tooltip').exists()).toBe(false);
     });
 
     it('should render username prop in <span>', () => {
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
index 6f66d1cafb9..e3cd2bb9aaa 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
@@ -9,13 +9,13 @@ const TEST_BREAKPOINT = 5;
 const TEST_EMPTY_MESSAGE = 'Lorem ipsum empty';
 const DEFAULT_EMPTY_MESSAGE = 'None';
 
-const createUser = id => ({
+const createUser = (id) => ({
   id,
   name: 'Lorem',
   web_url: `${TEST_HOST}/${id}`,
   avatar_url: `${TEST_HOST}/${id}/avatar`,
 });
-const createList = n =>
+const createList = (n) =>
   Array(n)
     .fill(1)
     .map((x, id) => createUser(id));
@@ -79,10 +79,10 @@ describe('UserAvatarList', () => {
       factory({ propsData: { items } });
 
       const links = wrapper.findAll(UserAvatarLink);
-      const linkProps = links.wrappers.map(x => x.props());
+      const linkProps = links.wrappers.map((x) => x.props());
 
       expect(linkProps).toEqual(
-        items.map(x =>
+        items.map((x) =>
           expect.objectContaining({
             linkHref: x.web_url,
             imgSrc: x.avatar_url,
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index 7d58a865ba3..435c3a5406e 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -33,7 +33,7 @@ describe('User Popover Component', () => {
     wrapper.destroy();
   });
 
-  const findByTestId = testid => wrapper.find(`[data-testid="${testid}"]`);
+  const findByTestId = (testid) => wrapper.find(`[data-testid="${testid}"]`);
   const findUserStatus = () => wrapper.find('.js-user-status');
   const findTarget = () => document.querySelector('.js-user-link');
   const findAvailabilityStatus = () => wrapper.find(UserAvailabilityStatus);
@@ -81,6 +81,7 @@ describe('User Popover Component', () => {
     });
 
     it('shows icon for location', () => {
+      createWrapper();
       const iconEl = wrapper.find(GlIcon);
 
       expect(iconEl.props('name')).toEqual('location');
@@ -147,7 +148,7 @@ describe('User Popover Component', () => {
       createWrapper({ user });
 
       expect(
-        wrapper.findAll(GlIcon).filter(icon => icon.props('name') === 'profile').length,
+        wrapper.findAll(GlIcon).filter((icon) => icon.props('name') === 'profile').length,
       ).toEqual(1);
     });
 
@@ -159,9 +160,9 @@ describe('User Popover Component', () => {
 
       createWrapper({ user });
 
-      expect(wrapper.findAll(GlIcon).filter(icon => icon.props('name') === 'work').length).toEqual(
-        1,
-      );
+      expect(
+        wrapper.findAll(GlIcon).filter((icon) => icon.props('name') === 'work').length,
+      ).toEqual(1);
     });
   });
 
diff --git a/spec/frontend/vue_shared/directives/tooltip_spec.js b/spec/frontend/vue_shared/directives/tooltip_spec.js
index 4217b8d3c02..28ec23ad4c1 100644
--- a/spec/frontend/vue_shared/directives/tooltip_spec.js
+++ b/spec/frontend/vue_shared/directives/tooltip_spec.js
@@ -19,7 +19,7 @@ describe('Tooltip directive', () => {
         data: () => ({ tooltip: text }),
         template,
       },
-      { attachToDocument: true },
+      { attachTo: document.body },
     );
   }
 
@@ -151,11 +151,7 @@ describe('Tooltip directive', () => {
     });
 
     it('should have tooltip plugin applied to all instances', () => {
-      expect(
-        $(wrapper.vm.$el)
-          .find('.js-look-for-tooltip')
-          .data('bs.tooltip'),
-      ).toBeDefined();
+      expect($(wrapper.vm.$el).find('.js-look-for-tooltip').data('bs.tooltip')).toBeDefined();
     });
   });
 });
diff --git a/spec/frontend/vue_shared/directives/validation_spec.js b/spec/frontend/vue_shared/directives/validation_spec.js
index 814d6f43589..2764a71d204 100644
--- a/spec/frontend/vue_shared/directives/validation_spec.js
+++ b/spec/frontend/vue_shared/directives/validation_spec.js
@@ -36,7 +36,7 @@ describe('validation directive', () => {
       `,
     };
 
-    wrapper = shallowMount(component, { attachToDocument: true });
+    wrapper = shallowMount(component, { attachTo: document.body });
   };
 
   afterEach(() => {
@@ -50,7 +50,7 @@ describe('validation directive', () => {
 
   describe.each([true, false])(
     'with fields untouched and "showValidation" set to "%s"',
-    showValidation => {
+    (showValidation) => {
       beforeEach(() => {
         createComponent({ showValidation });
       });
@@ -78,7 +78,7 @@ describe('validation directive', () => {
   `(
     'with input-attributes set to $inputAttributes',
     ({ inputAttributes, validValue, invalidValue }) => {
-      const setValueAndTriggerValidation = value => {
+      const setValueAndTriggerValidation = (value) => {
         const input = findInput();
         input.setValue(value);
         input.trigger('blur');
diff --git a/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js b/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js
index 7e70407655a..9138d2d3f4c 100644
--- a/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js
+++ b/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js
@@ -6,7 +6,7 @@ describe('SecurityReportDownloadDropdown component', () => {
   let wrapper;
   let artifacts;
 
-  const createComponent = props => {
+  const createComponent = (props) => {
     wrapper = shallowMount(SecurityReportDownloadDropdown, {
       propsData: { ...props },
     });
diff --git a/spec/frontend/vue_shared/security_reports/mock_data.js b/spec/frontend/vue_shared/security_reports/mock_data.js
index e93ca8329e7..b3ff7daef2b 100644
--- a/spec/frontend/vue_shared/security_reports/mock_data.js
+++ b/spec/frontend/vue_shared/security_reports/mock_data.js
@@ -392,6 +392,33 @@ export const securityReportDownloadPathsQueryResponse = {
               },
               __typename: 'CiJob',
             },
+            {
+              name: 'all_artifacts',
+              artifacts: {
+                nodes: [
+                  {
+                    downloadPath:
+                      '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=archive',
+                    fileType: 'ARCHIVE',
+                    __typename: 'CiJobArtifact',
+                  },
+                  {
+                    downloadPath:
+                      '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=trace',
+                    fileType: 'TRACE',
+                    __typename: 'CiJobArtifact',
+                  },
+                  {
+                    downloadPath:
+                      '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=metadata',
+                    fileType: 'METADATA',
+                    __typename: 'CiJobArtifact',
+                  },
+                ],
+                __typename: 'CiJobArtifactConnection',
+              },
+              __typename: 'CiJob',
+            },
           ],
           __typename: 'CiJobConnection',
         },
@@ -435,3 +462,51 @@ export const expectedDownloadDropdownProps = {
   loading: false,
   artifacts: [...secretDetectionArtifacts, ...sastArtifacts],
 };
+
+/**
+ * These correspond to any jobs with zip archives in the securityReportDownloadPathsQueryResponse above.
+ */
+export const archiveArtifacts = [
+  {
+    name: 'all_artifacts Archive',
+    path: '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=archive',
+    reportType: 'ARCHIVE',
+  },
+];
+
+/**
+ * These correspond to any jobs with trace data in the securityReportDownloadPathsQueryResponse above.
+ */
+export const traceArtifacts = [
+  {
+    name: 'secret_detection Trace',
+    path: '/gitlab-org/secrets-detection-test/-/jobs/1399/artifacts/download?file_type=trace',
+    reportType: 'TRACE',
+  },
+  {
+    name: 'bandit-sast Trace',
+    path: '/gitlab-org/secrets-detection-test/-/jobs/1400/artifacts/download?file_type=trace',
+    reportType: 'TRACE',
+  },
+  {
+    name: 'eslint-sast Trace',
+    path: '/gitlab-org/secrets-detection-test/-/jobs/1401/artifacts/download?file_type=trace',
+    reportType: 'TRACE',
+  },
+  {
+    name: 'all_artifacts Trace',
+    path: '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=trace',
+    reportType: 'TRACE',
+  },
+];
+
+/**
+ * These correspond to any jobs with metadata data in the securityReportDownloadPathsQueryResponse above.
+ */
+export const metadataArtifacts = [
+  {
+    name: 'all_artifacts Metadata',
+    path: '/gitlab-org/secrets-detection-test/-/jobs/1402/artifacts/download?file_type=metadata',
+    reportType: 'METADATA',
+  },
+];
diff --git a/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js b/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
index c440081a0c4..50d1d130675 100644
--- a/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
+++ b/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
-import createMockApollo from 'jest/helpers/mock_apollo_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { trimText } from 'helpers/text_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -42,7 +42,7 @@ describe('Security reports app', () => {
     discoverProjectSecurityPath: '/discoverProjectSecurityPath',
   };
 
-  const createComponent = options => {
+  const createComponent = (options) => {
     wrapper = mount(
       SecurityReportsApp,
       merge(
@@ -61,7 +61,7 @@ describe('Security reports app', () => {
   const pendingHandler = () => new Promise(() => {});
   const successHandler = () => Promise.resolve({ data: securityReportDownloadPathsQueryResponse });
   const failureHandler = () => Promise.resolve({ errors: [{ message: 'some error' }] });
-  const createMockApolloProvider = handler => {
+  const createMockApolloProvider = (handler) => {
     localVue.use(VueApollo);
 
     const requestHandlers = [[securityReportDownloadPathsQuery, handler]];
@@ -74,7 +74,7 @@ describe('Security reports app', () => {
   const findDownloadDropdown = () => wrapper.find(SecurityReportDownloadDropdown);
   const findPipelinesTabAnchor = () => wrapper.find('[data-testid="show-pipelines"]');
   const findHelpIconComponent = () => wrapper.find(HelpIcon);
-  const setupMockJobArtifact = reportType => {
+  const setupMockJobArtifact = (reportType) => {
     jest
       .spyOn(Api, 'pipelineJobs')
       .mockResolvedValue({ data: [{ artifacts: [{ file_type: reportType }] }] });
@@ -93,8 +93,8 @@ describe('Security reports app', () => {
 
   describe.each([false, true])(
     'given the coreSecurityMrWidgetCounts feature flag is %p',
-    coreSecurityMrWidgetCounts => {
-      const createComponentWithFlag = options =>
+    (coreSecurityMrWidgetCounts) => {
+      const createComponentWithFlag = (options) =>
         createComponent(
           merge(
             {
@@ -108,7 +108,7 @@ describe('Security reports app', () => {
           ),
         );
 
-      describe.each(SecurityReportsApp.reportTypes)('given a report type %p', reportType => {
+      describe.each(SecurityReportsApp.reportTypes)('given a report type %p', (reportType) => {
         beforeEach(() => {
           window.mrTabs = { tabShown: jest.fn() };
           setupMockJobArtifact(reportType);
@@ -245,7 +245,7 @@ describe('Security reports app', () => {
   describe('given the coreSecurityMrWidgetCounts feature flag is enabled', () => {
     let mock;
 
-    const createComponentWithFlagEnabled = options =>
+    const createComponentWithFlagEnabled = (options) =>
       createComponent(
         merge(options, {
           provide: {
@@ -350,7 +350,7 @@ describe('Security reports app', () => {
   });
 
   describe('given coreSecurityMrWidgetDownloads feature flag is enabled', () => {
-    const createComponentWithFlagEnabled = options =>
+    const createComponentWithFlagEnabled = (options) =>
       createComponent(
         merge(options, {
           provide: {
@@ -371,7 +371,7 @@ describe('Security reports app', () => {
       // TODO: Remove this assertion as part of
       // https://gitlab.com/gitlab-org/gitlab/-/issues/273431
       it('initially renders nothing', () => {
-        expect(wrapper.isEmpty()).toBe(true);
+        expect(wrapper.html()).toBe('');
       });
     });
 
@@ -415,7 +415,7 @@ describe('Security reports app', () => {
       // TODO: Remove this assertion as part of
       // https://gitlab.com/gitlab-org/gitlab/-/issues/273431
       it('renders nothing', () => {
-        expect(wrapper.isEmpty()).toBe(true);
+        expect(wrapper.html()).toBe('');
       });
     });
   });
diff --git a/spec/frontend/vue_shared/security_reports/store/getters_spec.js b/spec/frontend/vue_shared/security_reports/store/getters_spec.js
index 8de704be455..b146a281d7b 100644
--- a/spec/frontend/vue_shared/security_reports/store/getters_spec.js
+++ b/spec/frontend/vue_shared/security_reports/store/getters_spec.js
@@ -13,7 +13,7 @@ import {
 } from '~/vue_shared/security_reports/store/getters';
 import { CRITICAL, HIGH, LOW } from '~/vulnerabilities/constants';
 
-const generateVuln = severity => ({ severity });
+const generateVuln = (severity) => ({ severity });
 
 describe('Security reports getters', () => {
   let state;
diff --git a/spec/frontend/vue_shared/security_reports/store/modules/sast/actions_spec.js b/spec/frontend/vue_shared/security_reports/store/modules/sast/actions_spec.js
index a11f4e05913..c9d1db8a504 100644
--- a/spec/frontend/vue_shared/security_reports/store/modules/sast/actions_spec.js
+++ b/spec/frontend/vue_shared/security_reports/store/modules/sast/actions_spec.js
@@ -26,7 +26,7 @@ describe('sast report actions', () => {
   });
 
   describe('setDiffEndpoint', () => {
-    it(`should commit ${types.SET_DIFF_ENDPOINT} with the correct path`, done => {
+    it(`should commit ${types.SET_DIFF_ENDPOINT} with the correct path`, (done) => {
       testAction(
         actions.setDiffEndpoint,
         diffEndpoint,
@@ -44,13 +44,13 @@ describe('sast report actions', () => {
   });
 
   describe('requestDiff', () => {
-    it(`should commit ${types.REQUEST_DIFF}`, done => {
+    it(`should commit ${types.REQUEST_DIFF}`, (done) => {
       testAction(actions.requestDiff, {}, state, [{ type: types.REQUEST_DIFF }], [], done);
     });
   });
 
   describe('receiveDiffSuccess', () => {
-    it(`should commit ${types.RECEIVE_DIFF_SUCCESS} with the correct response`, done => {
+    it(`should commit ${types.RECEIVE_DIFF_SUCCESS} with the correct response`, (done) => {
       testAction(
         actions.receiveDiffSuccess,
         reports,
@@ -68,7 +68,7 @@ describe('sast report actions', () => {
   });
 
   describe('receiveDiffError', () => {
-    it(`should commit ${types.RECEIVE_DIFF_ERROR} with the correct response`, done => {
+    it(`should commit ${types.RECEIVE_DIFF_ERROR} with the correct response`, (done) => {
       testAction(
         actions.receiveDiffError,
         error,
@@ -107,7 +107,7 @@ describe('sast report actions', () => {
           .replyOnce(200, reports.enrichData);
       });
 
-      it('should dispatch the `receiveDiffSuccess` action', done => {
+      it('should dispatch the `receiveDiffSuccess` action', (done) => {
         const { diff, enrichData } = reports;
         testAction(
           actions.fetchDiff,
@@ -135,7 +135,7 @@ describe('sast report actions', () => {
         mock.onGet(diffEndpoint).replyOnce(200, reports.diff);
       });
 
-      it('should dispatch the `receiveDiffSuccess` action with empty enrich data', done => {
+      it('should dispatch the `receiveDiffSuccess` action with empty enrich data', (done) => {
         const { diff } = reports;
         const enrichData = [];
         testAction(
@@ -167,7 +167,7 @@ describe('sast report actions', () => {
           .replyOnce(404);
       });
 
-      it('should dispatch the `receiveError` action', done => {
+      it('should dispatch the `receiveError` action', (done) => {
         testAction(
           actions.fetchDiff,
           {},
@@ -188,7 +188,7 @@ describe('sast report actions', () => {
           .replyOnce(200, reports.enrichData);
       });
 
-      it('should dispatch the `receiveDiffError` action', done => {
+      it('should dispatch the `receiveDiffError` action', (done) => {
         testAction(
           actions.fetchDiff,
           {},
diff --git a/spec/frontend/vue_shared/security_reports/store/modules/secret_detection/actions_spec.js b/spec/frontend/vue_shared/security_reports/store/modules/secret_detection/actions_spec.js
index bbcdfb5cd99..beda1a55438 100644
--- a/spec/frontend/vue_shared/security_reports/store/modules/secret_detection/actions_spec.js
+++ b/spec/frontend/vue_shared/security_reports/store/modules/secret_detection/actions_spec.js
@@ -26,7 +26,7 @@ describe('secret detection report actions', () => {
   });
 
   describe('setDiffEndpoint', () => {
-    it(`should commit ${types.SET_DIFF_ENDPOINT} with the correct path`, done => {
+    it(`should commit ${types.SET_DIFF_ENDPOINT} with the correct path`, (done) => {
       testAction(
         actions.setDiffEndpoint,
         diffEndpoint,
@@ -44,13 +44,13 @@ describe('secret detection report actions', () => {
   });
 
   describe('requestDiff', () => {
-    it(`should commit ${types.REQUEST_DIFF}`, done => {
+    it(`should commit ${types.REQUEST_DIFF}`, (done) => {
       testAction(actions.requestDiff, {}, state, [{ type: types.REQUEST_DIFF }], [], done);
     });
   });
 
   describe('receiveDiffSuccess', () => {
-    it(`should commit ${types.RECEIVE_DIFF_SUCCESS} with the correct response`, done => {
+    it(`should commit ${types.RECEIVE_DIFF_SUCCESS} with the correct response`, (done) => {
       testAction(
         actions.receiveDiffSuccess,
         reports,
@@ -68,7 +68,7 @@ describe('secret detection report actions', () => {
   });
 
   describe('receiveDiffError', () => {
-    it(`should commit ${types.RECEIVE_DIFF_ERROR} with the correct response`, done => {
+    it(`should commit ${types.RECEIVE_DIFF_ERROR} with the correct response`, (done) => {
       testAction(
         actions.receiveDiffError,
         error,
@@ -107,7 +107,7 @@ describe('secret detection report actions', () => {
           .replyOnce(200, reports.enrichData);
       });
 
-      it('should dispatch the `receiveDiffSuccess` action', done => {
+      it('should dispatch the `receiveDiffSuccess` action', (done) => {
         const { diff, enrichData } = reports;
         testAction(
           actions.fetchDiff,
@@ -135,7 +135,7 @@ describe('secret detection report actions', () => {
         mock.onGet(diffEndpoint).replyOnce(200, reports.diff);
       });
 
-      it('should dispatch the `receiveDiffSuccess` action with empty enrich data', done => {
+      it('should dispatch the `receiveDiffSuccess` action with empty enrich data', (done) => {
         const { diff } = reports;
         const enrichData = [];
         testAction(
@@ -167,7 +167,7 @@ describe('secret detection report actions', () => {
           .replyOnce(404);
       });
 
-      it('should dispatch the `receiveDiffError` action', done => {
+      it('should dispatch the `receiveDiffError` action', (done) => {
         testAction(
           actions.fetchDiff,
           {},
@@ -188,7 +188,7 @@ describe('secret detection report actions', () => {
           .replyOnce(200, reports.enrichData);
       });
 
-      it('should dispatch the `receiveDiffError` action', done => {
+      it('should dispatch the `receiveDiffError` action', (done) => {
         testAction(
           actions.fetchDiff,
           {},
diff --git a/spec/frontend/vue_shared/security_reports/utils_spec.js b/spec/frontend/vue_shared/security_reports/utils_spec.js
index ea54644796a..7e5a27694ef 100644
--- a/spec/frontend/vue_shared/security_reports/utils_spec.js
+++ b/spec/frontend/vue_shared/security_reports/utils_spec.js
@@ -2,11 +2,15 @@ import { extractSecurityReportArtifacts } from '~/vue_shared/security_reports/ut
 import {
   REPORT_TYPE_SAST,
   REPORT_TYPE_SECRET_DETECTION,
+  REPORT_FILE_TYPES,
 } from '~/vue_shared/security_reports/constants';
 import {
   securityReportDownloadPathsQueryResponse,
   sastArtifacts,
   secretDetectionArtifacts,
+  archiveArtifacts,
+  traceArtifacts,
+  metadataArtifacts,
 } from './mock_data';
 
 describe('extractSecurityReportArtifacts', () => {
@@ -17,6 +21,9 @@ describe('extractSecurityReportArtifacts', () => {
     ${[REPORT_TYPE_SAST]}                               | ${sastArtifacts}
     ${[REPORT_TYPE_SECRET_DETECTION]}                   | ${secretDetectionArtifacts}
     ${[REPORT_TYPE_SAST, REPORT_TYPE_SECRET_DETECTION]} | ${[...secretDetectionArtifacts, ...sastArtifacts]}
+    ${[REPORT_FILE_TYPES.ARCHIVE]}                      | ${archiveArtifacts}
+    ${[REPORT_FILE_TYPES.TRACE]}                        | ${traceArtifacts}
+    ${[REPORT_FILE_TYPES.METADATA]}                     | ${metadataArtifacts}
   `(
     'returns the expected artifacts given report types $reportTypes',
     ({ reportTypes, expectedArtifacts }) => {