Merge branch 'vs-migrate-ee-vue-shared-to-jest' into 'master'

Migrate ee/vue_shared tests to Jest

Closes #194310

See merge request gitlab-org/gitlab!29337

ee/spec/javascripts/vue_shared/components/linked_pipelines_mini_list_spec.js → ee/spec/frontend/vue_shared/components/linked_pipelines_mini_list_spec.js

@@ -4,10 +4,12 @@ import mockData from './linked_pipelines_mock_data';
 
 const ListComponent = Vue.extend(LinkedPipelinesMiniList);
 
-describe('Linked pipeline mini list', function() {
+describe('Linked pipeline mini list', () => {
+  let component;
+
   describe('when passed an upstream pipeline as prop', () => {
     beforeEach(() => {
-      this.component = new ListComponent({
+      component = new ListComponent({
         propsData: {
           triggeredBy: [mockData.triggered_by],
         },
@@ -15,55 +17,55 @@ describe('Linked pipeline mini list', function() {
     });
 
     it('should render one linked pipeline item', () => {
-      expect(this.component.$el.querySelectorAll('.linked-pipeline-mini-item').length).toBe(1);
+      expect(component.$el.querySelectorAll('.linked-pipeline-mini-item').length).toBe(1);
     });
 
     it('should render a linked pipeline with the correct href', () => {
-      const linkElement = this.component.$el.querySelector('.linked-pipeline-mini-item');
+      const linkElement = component.$el.querySelector('.linked-pipeline-mini-item');
 
       expect(linkElement.getAttribute('href')).toBe('/gitlab-org/gitlab-foss/pipelines/129');
     });
 
     it('should render one ci status icon', () => {
-      expect(this.component.$el.querySelectorAll('.linked-pipeline-mini-item svg').length).toBe(1);
+      expect(component.$el.querySelectorAll('.linked-pipeline-mini-item svg').length).toBe(1);
     });
 
     it('should render the correct ci status icon', () => {
-      const iconElement = this.component.$el.querySelector('.linked-pipeline-mini-item');
+      const iconElement = component.$el.querySelector('.linked-pipeline-mini-item');
 
       expect(iconElement.classList.contains('ci-status-icon-running')).toBe(true);
       expect(iconElement.innerHTML).toContain('<svg');
     });
 
     it('should render an arrow icon', () => {
-      const iconElement = this.component.$el.querySelector('.arrow-icon');
+      const iconElement = component.$el.querySelector('.arrow-icon');
 
       expect(iconElement).not.toBeNull();
       expect(iconElement.innerHTML).toContain('long-arrow');
     });
 
     it('should have an activated tooltip', () => {
-      const itemElement = this.component.$el.querySelector('.linked-pipeline-mini-item');
+      const itemElement = component.$el.querySelector('.linked-pipeline-mini-item');
 
       expect(itemElement.getAttribute('data-original-title')).toBe('GitLabCE - running');
     });
 
     it('should correctly set is-upstream', () => {
-      expect(this.component.$el.classList.contains('is-upstream')).toBe(true);
+      expect(component.$el.classList.contains('is-upstream')).toBe(true);
     });
 
     it('should correctly compute shouldRenderCounter', () => {
-      expect(this.component.shouldRenderCounter).toBe(false);
+      expect(component.shouldRenderCounter).toBe(false);
     });
 
     it('should not render the pipeline counter', () => {
-      expect(this.component.$el.querySelector('.linked-pipelines-counter')).toBeNull();
+      expect(component.$el.querySelector('.linked-pipelines-counter')).toBeNull();
     });
   });
 
   describe('when passed downstream pipelines as props', () => {
     beforeEach(() => {
-      this.component = new ListComponent({
+      component = new ListComponent({
         propsData: {
           triggered: mockData.triggered,
           pipelinePath: 'my/pipeline/path',
@@ -73,65 +75,64 @@ describe('Linked pipeline mini list', function() {
 
     it('should render one linked pipeline item', () => {
       expect(
-        this.component.$el.querySelectorAll(
-          '.linked-pipeline-mini-item:not(.linked-pipelines-counter)',
-        ).length,
+        component.$el.querySelectorAll('.linked-pipeline-mini-item:not(.linked-pipelines-counter)')
+          .length,
       ).toBe(3);
     });
 
     it('should render three ci status icons', () => {
-      expect(this.component.$el.querySelectorAll('.linked-pipeline-mini-item svg').length).toBe(3);
+      expect(component.$el.querySelectorAll('.linked-pipeline-mini-item svg').length).toBe(3);
     });
 
     it('should render the correct ci status icon', () => {
-      const iconElement = this.component.$el.querySelector('.linked-pipeline-mini-item');
+      const iconElement = component.$el.querySelector('.linked-pipeline-mini-item');
 
       expect(iconElement.classList.contains('ci-status-icon-running')).toBe(true);
       expect(iconElement.innerHTML).toContain('<svg');
     });
 
     it('should render an arrow icon', () => {
-      const iconElement = this.component.$el.querySelector('.arrow-icon');
+      const iconElement = component.$el.querySelector('.arrow-icon');
 
       expect(iconElement).not.toBeNull();
       expect(iconElement.innerHTML).toContain('long-arrow');
     });
 
     it('should have prepped tooltips', () => {
-      const itemElement = this.component.$el.querySelectorAll('.linked-pipeline-mini-item')[2];
+      const itemElement = component.$el.querySelectorAll('.linked-pipeline-mini-item')[2];
 
       expect(itemElement.getAttribute('data-original-title')).toBe('GitLabCE - running');
     });
 
     it('should correctly set is-downstream', () => {
-      expect(this.component.$el.classList.contains('is-downstream')).toBe(true);
+      expect(component.$el.classList.contains('is-downstream')).toBe(true);
     });
 
     it('should correctly compute shouldRenderCounter', () => {
-      expect(this.component.shouldRenderCounter).toBe(true);
+      expect(component.shouldRenderCounter).toBe(true);
     });
 
     it('should correctly trim linkedPipelines', () => {
-      expect(this.component.triggered.length).toBe(6);
-      expect(this.component.linkedPipelinesTrimmed.length).toBe(3);
+      expect(component.triggered.length).toBe(6);
+      expect(component.linkedPipelinesTrimmed.length).toBe(3);
     });
 
     it('should render the pipeline counter', () => {
-      expect(this.component.$el.querySelector('.linked-pipelines-counter')).not.toBeNull();
+      expect(component.$el.querySelector('.linked-pipelines-counter')).not.toBeNull();
     });
 
     it('should set the correct pipeline path', () => {
-      expect(
-        this.component.$el.querySelector('.linked-pipelines-counter').getAttribute('href'),
-      ).toBe('my/pipeline/path');
+      expect(component.$el.querySelector('.linked-pipelines-counter').getAttribute('href')).toBe(
+        'my/pipeline/path',
+      );
     });
 
     it('should render the correct counterTooltipText', () => {
       expect(
-        this.component.$el
+        component.$el
           .querySelector('.linked-pipelines-counter')
           .getAttribute('data-original-title'),
-      ).toBe(this.component.counterTooltipText);
+      ).toBe(component.counterTooltipText);
     });
   });
 });

ee/spec/javascripts/vue_shared/components/reports/report_issues_spec.js → ee/spec/frontend/vue_shared/components/reports/report_issues_spec.js

 import Vue from 'vue';
 import { componentNames } from 'ee/reports/components/issue_body';
 import store from 'ee/vue_shared/security_reports/store';
-import mountComponent, { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { codequalityParsedIssues } from 'ee_spec/vue_mr_widget/mock_data';
+import mountComponent, { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { codequalityParsedIssues } from 'ee_jest/vue_mr_widget/mock_data';
 import {
   sastParsedIssues,
   dockerReportParsed,
   parsedDast,
   secretScanningParsedIssues,
-} from 'ee_spec/vue_shared/security_reports/mock_data';
+} from 'ee_jest/vue_shared/security_reports/mock_data';
 import { STATUS_FAILED, STATUS_SUCCESS } from '~/reports/constants';
 import reportIssues from '~/reports/components/report_item.vue';
 

ee/spec/javascripts/vue_shared/components/reports/report_item_spec.js → ee/spec/frontend/vue_shared/components/reports/report_item_spec.js

 import Vue from 'vue';
 import { componentNames } from 'ee/reports/components/issue_body';
 import store from 'ee/vue_shared/security_reports/store';
-import mountComponent, { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { codequalityParsedIssues } from 'ee_spec/vue_mr_widget/mock_data';
+import mountComponent, { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { codequalityParsedIssues } from 'ee_jest/vue_mr_widget/mock_data';
 import {
   sastParsedIssues,
   dockerReportParsed,
   parsedDast,
   secretScanningParsedIssues,
-} from 'ee_spec/vue_shared/security_reports/mock_data';
+} from 'ee_jest/vue_shared/security_reports/mock_data';
 import { STATUS_FAILED, STATUS_SUCCESS } from '~/reports/constants';
 import reportIssue from '~/reports/components/report_item.vue';
 

ee/spec/javascripts/vue_shared/components/safe_link_spec.js → ee/spec/frontend/vue_shared/components/safe_link_spec.js

 import SafeLink from 'ee/vue_shared/components/safe_link.vue';
-import { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'spec/test_constants';
+import { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import Vue from 'vue';
 
 describe('SafeLink', () => {

ee/spec/javascripts/vue_shared/dashboards/components/alerts_spec.js → ee/spec/frontend/vue_shared/dashboards/components/alerts_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 
-const localVue = createLocalVue();
-
 describe('alerts component', () => {
-  const AlertsComponent = localVue.extend(Alerts);
   let wrapper;
 
   const mount = (propsData = {}) =>
-    shallowMount(AlertsComponent, {
+    shallowMount(Alerts, {
       propsData,
     });
 

ee/spec/javascripts/vue_shared/dashboards/components/project_pipeline_spec.js → ee/spec/frontend/vue_shared/dashboards/components/project_pipeline_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ProjectPipeline from 'ee/vue_shared/dashboards/components/project_pipeline.vue';
-import { mockPipelineData } from '../mock_data';
-
-const localVue = createLocalVue();
+import { mockPipelineData } from 'ee_jest/vue_shared/dashboards/mock_data';
 
 describe('project pipeline component', () => {
-  const ProjectPipelineComponent = localVue.extend(ProjectPipeline);
   let wrapper;
 
   const mountComponent = (propsData = {}) =>
-    mount(ProjectPipelineComponent, {
+    mount(ProjectPipeline, {
       propsData,
     });
 

ee/spec/javascripts/vue_shared/dashboards/components/time_ago_spec.js → ee/spec/frontend/vue_shared/dashboards/components/time_ago_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
 
-const localVue = createLocalVue();
-
 describe('time ago component', () => {
-  const TimeAgoComponent = localVue.extend(TimeAgo);
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallowMount(TimeAgoComponent, {
-      localVue,
+    wrapper = shallowMount(TimeAgo, {
       propsData: {
         time: new Date(Date.now() - 86400000).toISOString(),
         tooltipText: 'Finished',

ee/spec/javascripts/vue_shared/dashboards/store/actions_spec.js → ee/spec/frontend/vue_shared/dashboards/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import createStore from 'ee/vue_shared/dashboards/store/index';
 import * as types from 'ee/vue_shared/dashboards/store/mutation_types';
-import defaultActions, * as actions from 'ee/vue_shared/dashboards/store/actions';
-import testAction from 'spec/helpers/vuex_action_helper';
+import * as actions from 'ee/vue_shared/dashboards/store/actions';
+import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+
 import clearState from '../helpers';
-import { mockHeaders, mockText, mockProjectData } from '../mock_data';
+import { mockHeaders, mockText, mockProjectData } from 'ee_jest/vue_shared/dashboards/mock_data';
+
+jest.mock('~/flash');
 
 describe('actions', () => {
   const mockAddEndpoint = 'mock-add_endpoint';
@@ -28,13 +32,13 @@ describe('actions', () => {
   });
 
   describe('addProjectsToDashboard', () => {
-    it('posts selected project ids to project add endpoint', done => {
+    it('posts selected project ids to project add endpoint', () => {
       store.state.projectEndpoints.add = mockAddEndpoint;
       store.state.selectedProjects = mockProjects;
 
       mockAxios.onPost(mockAddEndpoint).replyOnce(200, mockResponse);
 
-      testAction(
+      return testAction(
         actions.addProjectsToDashboard,
         null,
         store.state,
@@ -45,27 +49,25 @@ describe('actions', () => {
             payload: mockResponse,
           },
         ],
-        done,
       );
     });
 
-    it('calls addProjectsToDashboard error handler on error', done => {
+    it('calls addProjectsToDashboard error handler on error', () => {
       mockAxios.onPost(mockAddEndpoint).replyOnce(500);
 
-      testAction(
+      return testAction(
         actions.addProjectsToDashboard,
         null,
         store.state,
         [],
         [{ type: 'receiveAddProjectsToDashboardError' }],
-        done,
       );
     });
   });
 
   describe('toggleSelectedProject', () => {
-    it(`adds a project to selectedProjects if it doesn't already exist in the list`, done => {
-      testAction(
+    it(`adds a project to selectedProjects if it doesn't already exist in the list`, () => {
+      return testAction(
         actions.toggleSelectedProject,
         mockOneProject,
         store.state,
@@ -76,14 +78,13 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
 
-    it(`removes a project from selectedProjects if it already exist in the list`, done => {
+    it(`removes a project from selectedProjects if it already exist in the list`, () => {
       store.state.selectedProjects = mockProjects;
 
-      testAction(
+      return testAction(
         actions.toggleSelectedProject,
         mockOneProject,
         store.state,
@@ -94,14 +95,13 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('receiveAddProjectsToDashboardSuccess', () => {
-    it('fetches projects when new projects are added to the dashboard', done => {
-      testAction(
+    it('fetches projects when new projects are added to the dashboard', () => {
+      return testAction(
         actions.receiveAddProjectsToDashboardSuccess,
         {
           added: [1],
@@ -115,7 +115,6 @@ describe('actions', () => {
             type: 'forceProjectsRequest',
           },
         ],
-        done,
       );
     });
 
@@ -137,27 +136,26 @@ describe('actions', () => {
       });
 
     it('displays an error when user tries to add one invalid project to dashboard', () => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
       selectProjects(1);
       addInvalidProjects([0]);
 
-      expect(spy).toHaveBeenCalledWith(`Unable to add mock-name. ${errorMessage}`);
+      expect(createFlash).toHaveBeenCalledWith(`Unable to add mock-name. ${errorMessage}`);
     });
 
     it('displays an error when user tries to add two invalid projects to dashboard', () => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
       selectProjects(2);
       addInvalidProjects([0, 1]);
 
-      expect(spy).toHaveBeenCalledWith(`Unable to add mock-name and mock-name. ${errorMessage}`);
+      expect(createFlash).toHaveBeenCalledWith(
+        `Unable to add mock-name and mock-name. ${errorMessage}`,
+      );
     });
 
     it('displays an error when user tries to add more than two invalid projects to dashboard', () => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
       selectProjects(3);
       addInvalidProjects([0, 1, 2]);
 
-      expect(spy).toHaveBeenCalledWith(
+      expect(createFlash).toHaveBeenCalledWith(
         `Unable to add mock-name, mock-name, and mock-name. ${errorMessage}`,
       );
     });
@@ -165,18 +163,17 @@ describe('actions', () => {
 
   describe('receiveAddProjectsToDashboardError', () => {
     it('shows error message', () => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
       store.dispatch('receiveAddProjectsToDashboardError');
 
-      expect(spy).toHaveBeenCalledWith(mockText.ADD_PROJECTS_ERROR);
+      expect(createFlash).toHaveBeenCalledWith(mockText.ADD_PROJECTS_ERROR);
     });
   });
 
   describe('clearSearchResults', () => {
-    it('clears all project search results', done => {
+    it('clears all project search results', () => {
       store.state.projectSearchResults = mockProjects;
 
-      testAction(
+      return testAction(
         actions.clearSearchResults,
         null,
         store.state,
@@ -186,57 +183,53 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('fetchProjects', () => {
-    it('calls project list endpoint', done => {
+    it('calls project list endpoint', () => {
       store.state.projectEndpoints.list = mockListEndpoint;
       mockAxios.onGet(mockListEndpoint).replyOnce(200);
 
-      testAction(
+      return testAction(
         actions.fetchProjects,
         null,
         store.state,
         [],
         [{ type: 'requestProjects' }, { type: 'receiveProjectsSuccess' }],
-        done,
       );
     });
 
-    it('handles response errors', done => {
+    it('handles response errors', () => {
       store.state.projectEndpoints.list = mockListEndpoint;
       mockAxios.onGet(mockListEndpoint).replyOnce(500);
 
-      testAction(
+      return testAction(
         actions.fetchProjects,
         null,
         store.state,
         [],
         [{ type: 'requestProjects' }, { type: 'receiveProjectsError' }],
-        done,
       );
     });
   });
 
   describe('requestProjects', () => {
-    it('toggles project loading state', done => {
-      testAction(
+    it('toggles project loading state', () => {
+      return testAction(
         actions.requestProjects,
         null,
         store.state,
         [{ type: types.REQUEST_PROJECTS }],
         [],
-        done,
       );
     });
   });
 
   describe('receiveProjectsSuccess', () => {
-    it('sets projects from data on success', done => {
-      testAction(
+    it('sets projects from data on success', () => {
+      return testAction(
         actions.receiveProjectsSuccess,
         { projects: mockProjects },
         store.state,
@@ -247,14 +240,12 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('receiveProjectsError', () => {
-    it('clears projects and alerts user of error', done => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
+    it('clears projects and alerts user of error', () => {
       store.state.projects = mockProjects;
 
       testAction(
@@ -267,71 +258,65 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
 
-      expect(spy).toHaveBeenCalledWith(mockText.RECEIVE_PROJECTS_ERROR);
+      expect(createFlash).toHaveBeenCalledWith(mockText.RECEIVE_PROJECTS_ERROR);
     });
   });
 
   describe('removeProject', () => {
     const mockRemovePath = 'mock-removePath';
 
-    it('calls project removal path and fetches projects on success', done => {
+    it('calls project removal path and fetches projects on success', () => {
       mockAxios.onDelete(mockRemovePath).replyOnce(200);
 
-      testAction(
+      return testAction(
         actions.removeProject,
         mockRemovePath,
         null,
         [],
         [{ type: 'receiveRemoveProjectSuccess' }],
-        done,
       );
     });
 
-    it('passes off handling of project removal errors', done => {
+    it('passes off handling of project removal errors', () => {
       mockAxios.onDelete(mockRemovePath).replyOnce(500);
 
-      testAction(
+      return testAction(
         actions.removeProject,
         mockRemovePath,
         null,
         [],
         [{ type: 'receiveRemoveProjectError' }],
-        done,
       );
     });
   });
 
   describe('receiveRemoveProjectSuccess', () => {
-    it('fetches dashboard projects', done => {
-      testAction(
+    it('fetches dashboard projects', () => {
+      return testAction(
         actions.receiveRemoveProjectSuccess,
         null,
         null,
         [],
         [{ type: 'forceProjectsRequest' }],
-        done,
       );
     });
   });
 
   describe('receiveRemoveProjectError', () => {
-    it('displays project removal error', done => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
-
-      testAction(actions.receiveRemoveProjectError, null, null, [], [], done);
-
-      expect(spy).toHaveBeenCalledWith(mockText.REMOVE_PROJECT_ERROR);
+    it('displays project removal error', () => {
+      return testAction(actions.receiveRemoveProjectError, null, null, [], []).then(() => {
+        expect(createFlash).toHaveBeenCalledWith(mockText.REMOVE_PROJECT_ERROR);
+      });
     });
   });
 
   describe('fetchSearchResults', () => {
-    it('dispatches minimumQueryMessage if the search query is falsy', done => {
+    it('dispatches minimumQueryMessage if the search query is falsy', () => {
       const searchQueries = [null, undefined, false, NaN];
 
-      Promise.all(
+      return Promise.all(
         searchQueries.map(searchQuery => {
           store.state.searchQuery = searchQuery;
 
@@ -350,15 +335,13 @@ describe('actions', () => {
             ],
           );
         }),
-      )
-        .then(done)
-        .catch(done.fail);
+      );
     });
 
-    it('dispatches minimumQueryMessage if the search query was empty', done => {
+    it('dispatches minimumQueryMessage if the search query was empty', () => {
       store.state.searchQuery = '';
 
-      testAction(
+      return testAction(
         actions.fetchSearchResults,
         null,
         store.state,
@@ -371,14 +354,13 @@ describe('actions', () => {
             type: 'minimumQueryMessage',
           },
         ],
-        done,
       );
     });
 
-    it(`dispatches minimumQueryMessage if the search query wasn't long enough`, done => {
+    it(`dispatches minimumQueryMessage if the search query wasn't long enough`, () => {
       store.state.searchQuery = 'a';
 
-      testAction(
+      return testAction(
         actions.fetchSearchResults,
         null,
         store.state,
@@ -391,15 +373,14 @@ describe('actions', () => {
             type: 'minimumQueryMessage',
           },
         ],
-        done,
       );
     });
 
-    it(`dispatches the correct actions when the query is valid`, done => {
+    it(`dispatches the correct actions when the query is valid`, () => {
       mockAxios.onAny().reply(200, mockProjects, mockHeaders);
       store.state.searchQuery = 'mock-query';
 
-      testAction(
+      return testAction(
         actions.fetchSearchResults,
         null,
         store.state,
@@ -413,16 +394,16 @@ describe('actions', () => {
             payload: { data: mockProjects, headers: mockHeaders },
           },
         ],
-        done,
       );
     });
   });
 
   describe('fetchNextPage', () => {
-    it(`fetches the next page`, done => {
+    it(`fetches the next page`, () => {
       mockAxios.onAny().reply(200, mockProjects, mockHeaders);
       store.state.pageInfo = mockHeaders.pageInfo;
-      testAction(
+
+      return testAction(
         actions.fetchNextPage,
         null,
         store.state,
@@ -433,21 +414,21 @@ describe('actions', () => {
             payload: { data: mockProjects, headers: mockHeaders },
           },
         ],
-        done,
       );
     });
 
-    it(`stops fetching if current page is the last page`, done => {
+    it(`stops fetching if current page is the last page`, () => {
       mockAxios.onAny().reply(200, mockProjects, mockHeaders);
       store.state.pageInfo.totalPages = 3;
       store.state.pageInfo.currentPage = 3;
-      testAction(actions.fetchNextPage, mockHeaders, store.state, [], [], done);
+
+      return testAction(actions.fetchNextPage, mockHeaders, store.state, [], []);
     });
   });
 
   describe('requestSearchResults', () => {
-    it(`commits the REQUEST_SEARCH_RESULTS mutation`, done => {
-      testAction(
+    it(`commits the REQUEST_SEARCH_RESULTS mutation`, () => {
+      return testAction(
         actions.requestSearchResults,
         null,
         store.state,
@@ -457,14 +438,13 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('receiveNextPageSuccess', () => {
-    it(`commits the RECEIVE_NEXT_PAGE_SUCCESS mutation`, done => {
-      testAction(
+    it(`commits the RECEIVE_NEXT_PAGE_SUCCESS mutation`, () => {
+      return testAction(
         actions.receiveNextPageSuccess,
         mockHeaders,
         store.state,
@@ -475,14 +455,13 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('receiveSearchResultsSuccess', () => {
-    it('commits the RECEIVE_SEARCH_RESULTS_SUCCESS mutation', done => {
-      testAction(
+    it('commits the RECEIVE_SEARCH_RESULTS_SUCCESS mutation', () => {
+      return testAction(
         actions.receiveSearchResultsSuccess,
         mockProjects,
         store.state,
@@ -493,14 +472,13 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('receiveSearchResultsError', () => {
-    it('commits the RECEIVE_SEARCH_RESULTS_ERROR mutation', done => {
-      testAction(
+    it('commits the RECEIVE_SEARCH_RESULTS_ERROR mutation', () => {
+      return testAction(
         actions.receiveSearchResultsError,
         ['error'],
         store.state,
@@ -510,14 +488,13 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('setProjectEndpoints', () => {
-    it('commits project list and add endpoints', done => {
-      testAction(
+    it('commits project list and add endpoints', () => {
+      return testAction(
         actions.setProjectEndpoints,
         {
           add: mockAddEndpoint,
@@ -535,7 +512,6 @@ describe('actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });

ee/spec/javascripts/vue_shared/dashboards/store/mutations_spec.js → ee/spec/frontend/vue_shared/dashboards/store/mutations_spec.js

 import state from 'ee/vue_shared/dashboards/store/state';
 import mutations from 'ee/vue_shared/dashboards/store/mutations';
 import * as types from 'ee/vue_shared/dashboards/store/mutation_types';
-import { mockProjectData } from '../mock_data';
+import { mockProjectData } from 'ee_jest/vue_shared/dashboards/mock_data';
+import createFlash from '~/flash';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+
+jest.mock('~/flash');
 
 describe('mutations', () => {
+  useLocalStorageSpy();
+
   const projects = mockProjectData(3);
   const projectIds = projects.map(p => p.id);
   const mockEndpoint = 'https://mock-endpoint';
@@ -35,8 +41,6 @@ describe('mutations', () => {
     });
 
     it('sets projects', () => {
-      spyOn(window.localStorage, 'setItem');
-
       mutations[types.SET_PROJECTS](localState, projects);
 
       expect(localState.projects).toEqual(projects);
@@ -44,16 +48,15 @@ describe('mutations', () => {
     });
 
     it('stores project IDs in localstorage', () => {
-      const saveToLocalStorage = spyOn(window.localStorage, 'setItem');
-
       mutations[types.SET_PROJECTS](localState, projects);
 
-      expect(saveToLocalStorage).toHaveBeenCalledWith('listEndpoint', projectIds);
+      expect(window.localStorage.setItem).toHaveBeenCalledWith('listEndpoint', projectIds);
     });
 
     it('shows warning Alert if localStorage not available', () => {
-      spyOn(window.localStorage, 'setItem').and.throwError('QUOTA_EXCEEDED_ERR: DOM Exception 22');
-      const createFlash = spyOnDependency(mutations, 'createFlash');
+      jest.spyOn(window.localStorage, 'setItem').mockImplementation(() => {
+        throw new Error('QUOTA_EXCEEDED_ERR: DOM Exception 22');
+      });
 
       mutations[types.SET_PROJECTS](localState, projects);
 
@@ -112,11 +115,9 @@ describe('mutations', () => {
 
   describe('RECEIVE_PROJECTS_SUCCESS', () => {
     const projectListEndpoint = 'projectListEndpoint';
-    let saveToLocalStorage;
 
     beforeEach(() => {
       localState.projectEndpoints.list = projectListEndpoint;
-      saveToLocalStorage = spyOn(window.localStorage, 'setItem');
     });
 
     it('sets the project list and clears the loading status', () => {
@@ -129,11 +130,11 @@ describe('mutations', () => {
     it('saves projects to localStorage', () => {
       mutations[types.RECEIVE_PROJECTS_SUCCESS](localState, projects);
 
-      expect(saveToLocalStorage).toHaveBeenCalledWith(projectListEndpoint, projectIds);
+      expect(window.localStorage.setItem).toHaveBeenCalledWith(projectListEndpoint, projectIds);
     });
 
     it('orders the projects from localstorage', () => {
-      spyOn(window.localStorage, 'getItem').and.callFake(key => {
+      jest.spyOn(window.localStorage, 'getItem').mockImplementation(key => {
         if (key === projectListEndpoint) {
           return '2,0,1';
         }
@@ -147,7 +148,7 @@ describe('mutations', () => {
     });
 
     it('places unsorted projects after sorted ones', () => {
-      spyOn(window.localStorage, 'getItem').and.callFake(key => {
+      jest.spyOn(window.localStorage, 'getItem').mockImplementation(key => {
         if (key === projectListEndpoint) {
           return '1,2';
         }

ee/spec/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body_spec.js → ee/spec/frontend/vue_shared/metrics_reports/components/metrics_reports_issue_body_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import MetricReportsIssueBody from 'ee/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue';
 
-const localVue = createLocalVue();
-
 describe('Metrics reports issue body', () => {
-  const Component = localVue.extend(MetricReportsIssueBody);
   let wrapper;
 
   afterEach(() => {
@@ -15,8 +12,7 @@ describe('Metrics reports issue body', () => {
 
   describe('when metric did not change', () => {
     it('should render metric with no changes text', () => {
-      wrapper = shallowMount(Component, {
-        localVue,
+      wrapper = shallowMount(MetricReportsIssueBody, {
         propsData: {
           issue: {
             name: 'name',
@@ -33,8 +29,7 @@ describe('Metrics reports issue body', () => {
 
   describe('when metric changed', () => {
     it('should render metric with change', () => {
-      wrapper = shallowMount(Component, {
-        localVue,
+      wrapper = shallowMount(MetricReportsIssueBody, {
         propsData: {
           issue: {
             name: 'name',
@@ -52,8 +47,7 @@ describe('Metrics reports issue body', () => {
 
   describe('when metric is new', () => {
     it('should render metric with new badge', () => {
-      wrapper = shallowMount(Component, {
-        localVue,
+      wrapper = shallowMount(MetricReportsIssueBody, {
         propsData: {
           issue: {
             name: 'name',
@@ -73,8 +67,7 @@ describe('Metrics reports issue body', () => {
 
   describe('when metric was removed', () => {
     it('should render metric with removed badge', () => {
-      wrapper = shallowMount(Component, {
-        localVue,
+      wrapper = shallowMount(MetricReportsIssueBody, {
         propsData: {
           issue: {
             name: 'name',

ee/spec/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app_spec.js → ee/spec/frontend/vue_shared/metrics_reports/grouped_metrics_reports_app_spec.js

@@ -8,12 +8,11 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('Grouped metrics reports app', () => {
-  const Component = localVue.extend(GroupedMetricsReportsApp);
   let wrapper;
   let mockStore;
 
   const mountComponent = () => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedMetricsReportsApp, {
       store: mockStore,
       localVue,
       propsData: {

ee/spec/javascripts/vue_shared/metrics_reports/store/actions_spec.js → ee/spec/frontend/vue_shared/metrics_reports/store/actions_spec.js

@@ -8,7 +8,7 @@ import {
 } from 'ee/vue_shared/metrics_reports/store/actions';
 import * as types from 'ee/vue_shared/metrics_reports/store/mutation_types';
 import state from 'ee/vue_shared/metrics_reports/store/state';
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
 
 describe('metrics reports actions', () => {
@@ -25,8 +25,8 @@ describe('metrics reports actions', () => {
   });
 
   describe('setEndpoint', () => {
-    it('should commit set endpoint', done => {
-      testAction(
+    it('should commit set endpoint', () => {
+      return testAction(
         setEndpoint,
         'path',
         mockedState,
@@ -37,14 +37,13 @@ describe('metrics reports actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('requestMetrics', () => {
-    it('should commit request mutation', done => {
-      testAction(
+    it('should commit request mutation', () => {
+      return testAction(
         requestMetrics,
         null,
         mockedState,
@@ -54,13 +53,12 @@ describe('metrics reports actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('fetchMetrics', () => {
-    it('should call metrics endpoint', done => {
+    it('should call metrics endpoint', () => {
       const data = {
         metrics: [
           {
@@ -73,7 +71,7 @@ describe('metrics reports actions', () => {
       mockedState.endpoint = endpoint;
       mock.onGet(endpoint).replyOnce(200, data);
 
-      testAction(
+      return testAction(
         fetchMetrics,
         null,
         mockedState,
@@ -87,16 +85,15 @@ describe('metrics reports actions', () => {
             type: 'receiveMetricsSuccess',
           },
         ],
-        done,
       );
     });
 
-    it('handles errors', done => {
+    it('handles errors', () => {
       const endpoint = '/mock-endpoint.json';
       mockedState.endpoint = endpoint;
       mock.onGet(endpoint).replyOnce(500);
 
-      testAction(
+      return testAction(
         fetchMetrics,
         null,
         mockedState,
@@ -109,15 +106,14 @@ describe('metrics reports actions', () => {
             type: 'receiveMetricsError',
           },
         ],
-        done,
       );
     });
   });
 
   describe('receiveMetricsSuccess', () => {
-    it('should commit request mutation', done => {
+    it('should commit request mutation', () => {
       const response = { metrics: [] };
-      testAction(
+      return testAction(
         receiveMetricsSuccess,
         response,
         mockedState,
@@ -128,14 +124,13 @@ describe('metrics reports actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });
 
   describe('receiveMetricsError', () => {
-    it('should commit request mutation', done => {
-      testAction(
+    it('should commit request mutation', () => {
+      return testAction(
         receiveMetricsError,
         null,
         mockedState,
@@ -145,7 +140,6 @@ describe('metrics reports actions', () => {
           },
         ],
         [],
-        done,
       );
     });
   });

ee/spec/javascripts/vue_shared/components/linked_pipelines_mock_data.js

-export { default } from 'ee_jest/vue_shared/components/linked_pipelines_mock_data';

ee/spec/javascripts/vue_shared/dashboards/mock_data.js

-// No new code should be added to this file. Instead, modify the
-// file this one re-exports from. For more detail about why, see:
-// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
-
-export * from '../../../../spec/frontend/vue_shared/dashboards/mock_data';

ee/spec/javascripts/vue_shared/security_reports/mock_data.js

-import * as mockData from '../../../frontend/vue_shared/security_reports/mock_data';
-
-// This is done to help keep the mock data across testing suites in sync.
-// https://gitlab.com/gitlab-org/gitlab/merge_requests/10466#note_156218753
-
-export const {
-  dockerReportParsed,
-  parsedDast,
-  sastParsedIssues,
-  secretScanningParsedIssues,
-  sastDiffSuccessMock,
-  dastDiffSuccessMock,
-  containerScanningDiffSuccessMock,
-  dependencyScanningDiffSuccessMock,
-  secretScanningDiffSuccessMock,
-} = mockData;