Migrate ee/vue_shared tests to Jest

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/194310

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/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;