Migrate ee mr_widget_pipeline_spec to Jest

ee/spec/frontend/vue_mr_widget/mock_data.js

+import mockData, { mockStore } from 'jest/vue_mr_widget/mock_data';
+
+export default Object.assign({}, mockData, {
+  codeclimate: {
+    head_path: 'head.json',
+    base_path: 'base.json',
+  },
+  blob_path: {
+    base_path: 'blob_path',
+    head_path: 'blob_path',
+  },
+  vulnerability_feedback_help_path: '/help/user/application_security/index',
+  enabled_reports: {
+    sast: false,
+    container_scanning: false,
+    dast: false,
+    dependency_scanning: false,
+    license_management: false,
+  },
+});
+
+// Codeclimate
+export const headIssues = [
+  {
+    check_name: 'Rubocop/Lint/UselessAssignment',
+    description: 'Insecure Dependency',
+    location: {
+      path: 'lib/six.rb',
+      lines: {
+        begin: 6,
+        end: 7,
+      },
+    },
+    fingerprint: 'e879dd9bbc0953cad5037cde7ff0f627',
+  },
+  {
+    categories: ['Security'],
+    check_name: 'Insecure Dependency',
+    description: 'Insecure Dependency',
+    location: {
+      path: 'Gemfile.lock',
+      lines: {
+        begin: 22,
+        end: 22,
+      },
+    },
+    fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
+  },
+];
+// Codeclimate
+export const parsedHeadIssues = [
+  {
+    ...headIssues[1],
+    name: 'Insecure Dependency',
+    path: 'lib/six.rb',
+    urlPath: 'headPath/lib/six.rb#L6',
+    line: 6,
+  },
+];
+
+export const baseIssues = [
+  {
+    categories: ['Security'],
+    check_name: 'Insecure Dependency',
+    description: 'Insecure Dependency',
+    location: {
+      path: 'Gemfile.lock',
+      lines: {
+        begin: 22,
+        end: 22,
+      },
+    },
+    fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
+  },
+  {
+    categories: ['Security'],
+    check_name: 'Insecure Dependency',
+    description: 'Insecure Dependency',
+    location: {
+      path: 'Gemfile.lock',
+      lines: {
+        begin: 21,
+        end: 21,
+      },
+    },
+    fingerprint: 'ca2354534dee94ae60ba2f54e3857c50e5',
+  },
+];
+
+export const parsedBaseIssues = [
+  {
+    ...baseIssues[1],
+    name: 'Insecure Dependency',
+    path: 'Gemfile.lock',
+    line: 21,
+    urlPath: 'basePath/Gemfile.lock#L21',
+  },
+];
+
+export const headPerformance = [
+  {
+    subject: '/some/path',
+    metrics: [
+      {
+        name: 'Sitespeed Score',
+        value: 85,
+      },
+    ],
+  },
+  {
+    subject: '/some/other/path',
+    metrics: [
+      {
+        name: 'Sitespeed Score',
+        value: 79,
+        desiredSize: 'larger',
+      },
+      {
+        name: 'Requests',
+        value: 3,
+        desiredSize: 'smaller',
+      },
+    ],
+  },
+  {
+    subject: '/yet/another/path',
+    metrics: [
+      {
+        name: 'Sitespeed Score',
+        value: 80,
+      },
+    ],
+  },
+];
+
+export const basePerformance = [
+  {
+    subject: '/some/path',
+    metrics: [
+      {
+        name: 'Sitespeed Score',
+        value: 84,
+      },
+    ],
+  },
+  {
+    subject: '/some/other/path',
+    metrics: [
+      {
+        name: 'Sitespeed Score',
+        value: 80,
+        desiredSize: 'larger',
+      },
+      {
+        name: 'Requests',
+        value: 4,
+        desiredSize: 'smaller',
+      },
+    ],
+  },
+];
+
+export const codequalityParsedIssues = [
+  {
+    name: 'Insecure Dependency',
+    fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
+    path: 'Gemfile.lock',
+    line: 12,
+    urlPath: 'foo/Gemfile.lock',
+  },
+];
+
+export { mockStore };

ee/spec/javascripts/vue_mr_widget/mr_widget_pipeline_spec.js → ee/spec/frontend/vue_mr_widget/mr_widget_pipeline_spec.js

-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import mockData from 'ee_spec/vue_mr_widget/mock_data';
-import { trimText } from 'spec/helpers/text_helper';
+import { mount } from '@vue/test-utils';
+import mockData from 'ee_jest/vue_mr_widget/mock_data';
+import { trimText } from 'jest/helpers/text_helper';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import mockLinkedPipelines from '../vue_shared/components/linked_pipelines_mock_data';
 
 describe('MRWidgetPipeline', () => {
-  let vm;
-  let Component;
+  let wrapper;
 
-  beforeEach(() => {
-    Component = Vue.extend(pipelineComponent);
-  });
+  function createComponent(pipeline) {
+    wrapper = mount(pipelineComponent, {
+      propsData: {
+        pipeline,
+        pipelineCoverageDelta: undefined,
+        hasCi: true,
+        ciStatus: 'success',
+        sourceBranchLink: undefined,
+        sourceBranch: undefined,
+        troubleshootingDocsPath: 'help',
+      },
+    });
+  }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('computed', () => {
     describe('when upstream pipelines are passed', () => {
       beforeEach(() => {
-        vm = mountComponent(Component, {
-          pipeline: Object.assign({}, mockData.pipeline, {
-            triggered_by: mockLinkedPipelines.triggered_by,
-          }),
-          hasCi: true,
-          ciStatus: 'success',
-          troubleshootingDocsPath: 'help',
+        const pipeline = Object.assign({}, mockData.pipeline, {
+          triggered_by: mockLinkedPipelines.triggered_by,
         });
+
+        createComponent(pipeline);
       });
 
       it('should coerce triggeredBy into a collection', () => {
-        expect(vm.triggeredBy.length).toBe(1);
+        expect(wrapper.vm.triggeredBy).toHaveLength(1);
       });
 
       it('should render the linked pipelines mini list', () => {
-        expect(vm.$el.querySelector('.linked-pipeline-mini-list.is-upstream')).not.toBeNull();
+        expect(wrapper.find('.linked-pipeline-mini-list.is-upstream').exists()).toBe(true);
       });
     });
 
     describe('when downstream pipelines are passed', () => {
       beforeEach(() => {
-        vm = mountComponent(Component, {
-          pipeline: Object.assign({}, mockData.pipeline, {
-            triggered: mockLinkedPipelines.triggered,
-          }),
-          hasCi: true,
-          ciStatus: 'success',
-          troubleshootingDocsPath: 'help',
+        const pipeline = Object.assign({}, mockData.pipeline, {
+          triggered: mockLinkedPipelines.triggered,
         });
+
+        createComponent(pipeline);
       });
 
       it('should render the linked pipelines mini list', () => {
-        expect(vm.$el.querySelector('.linked-pipeline-mini-list.is-downstream')).not.toBeNull();
+        expect(wrapper.find('.linked-pipeline-mini-list.is-downstream').exists()).toBe(true);
       });
     });
   });
@@ -67,25 +69,15 @@ describe('MRWidgetPipeline', () => {
       pipeline.ref.branch = false;
     });
 
-    const factory = () => {
-      vm = mountComponent(Component, {
-        pipeline,
-        hasCi: true,
-        ciStatus: 'success',
-        troubleshootingDocsPath: 'help',
-        sourceBranchLink: mockData.source_branch_link,
-      });
-    };
-
     describe('for a merge train pipeline', () => {
       it('renders a pipeline widget that reads "Merge train pipeline <ID> <status> for <SHA>"', () => {
         pipeline.details.name = 'Merge train pipeline';
         pipeline.merge_request_event_type = 'merge_train';
 
-        factory();
+        createComponent(pipeline);
 
         const expected = `Merge train pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
-        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+        const actual = trimText(wrapper.find('.js-pipeline-info-container').text());
 
         expect(actual).toBe(expected);
       });
@@ -96,10 +88,10 @@ describe('MRWidgetPipeline', () => {
         pipeline.details.name = 'Merged result pipeline';
         pipeline.merge_request_event_type = 'merged_result';
 
-        factory();
+        createComponent(pipeline);
 
         const expected = `Merged result pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
-        const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText);
+        const actual = trimText(wrapper.find('.js-pipeline-info-container').text());
 
         expect(actual).toBe(expected);
       });

ee/spec/javascripts/vue_mr_widget/mock_data.js

-import mockData, { mockStore } from 'spec/vue_mr_widget/mock_data';
-
-export default Object.assign({}, mockData, {
-  codeclimate: {
-    head_path: 'head.json',
-    base_path: 'base.json',
-  },
-  blob_path: {
-    base_path: 'blob_path',
-    head_path: 'blob_path',
-  },
-  vulnerability_feedback_help_path: '/help/user/application_security/index',
-  enabled_reports: {
-    sast: false,
-    container_scanning: false,
-    dast: false,
-    dependency_scanning: false,
-    license_management: false,
-  },
-});
-
-// Codeclimate
-export const headIssues = [
-  {
-    check_name: 'Rubocop/Lint/UselessAssignment',
-    description: 'Insecure Dependency',
-    location: {
-      path: 'lib/six.rb',
-      lines: {
-        begin: 6,
-        end: 7,
-      },
-    },
-    fingerprint: 'e879dd9bbc0953cad5037cde7ff0f627',
-  },
-  {
-    categories: ['Security'],
-    check_name: 'Insecure Dependency',
-    description: 'Insecure Dependency',
-    location: {
-      path: 'Gemfile.lock',
-      lines: {
-        begin: 22,
-        end: 22,
-      },
-    },
-    fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
-  },
-];
-// Codeclimate
-export const parsedHeadIssues = [
-  {
-    check_name: 'Rubocop/Lint/UselessAssignment',
-    description: 'Insecure Dependency',
-    location: {
-      path: 'lib/six.rb',
-      lines: {
-        begin: 6,
-        end: 7,
-      },
-    },
-    fingerprint: 'e879dd9bbc0953cad5037cde7ff0f627',
-    name: 'Insecure Dependency',
-    path: 'lib/six.rb',
-    urlPath: 'headPath/lib/six.rb#L6',
-    line: 6,
-  },
-];
-
-export const baseIssues = [
-  {
-    categories: ['Security'],
-    check_name: 'Insecure Dependency',
-    description: 'Insecure Dependency',
-    location: {
-      path: 'Gemfile.lock',
-      lines: {
-        begin: 22,
-        end: 22,
-      },
-    },
-    fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
-  },
-  {
-    categories: ['Security'],
-    check_name: 'Insecure Dependency',
-    description: 'Insecure Dependency',
-    location: {
-      path: 'Gemfile.lock',
-      lines: {
-        begin: 21,
-        end: 21,
-      },
-    },
-    fingerprint: 'ca2354534dee94ae60ba2f54e3857c50e5',
-  },
-];
-
-export const parsedBaseIssues = [
-  {
-    categories: ['Security'],
-    check_name: 'Insecure Dependency',
-    description: 'Insecure Dependency',
-    location: {
-      path: 'Gemfile.lock',
-      lines: {
-        begin: 21,
-        end: 21,
-      },
-    },
-    fingerprint: 'ca2354534dee94ae60ba2f54e3857c50e5',
-    name: 'Insecure Dependency',
-    path: 'Gemfile.lock',
-    line: 21,
-    urlPath: 'basePath/Gemfile.lock#L21',
-  },
-];
-
-export const headPerformance = [
-  {
-    subject: '/some/path',
-    metrics: [
-      {
-        name: 'Sitespeed Score',
-        value: 85,
-      },
-    ],
-  },
-  {
-    subject: '/some/other/path',
-    metrics: [
-      {
-        name: 'Sitespeed Score',
-        value: 79,
-        desiredSize: 'larger',
-      },
-      {
-        name: 'Requests',
-        value: 3,
-        desiredSize: 'smaller',
-      },
-    ],
-  },
-  {
-    subject: '/yet/another/path',
-    metrics: [
-      {
-        name: 'Sitespeed Score',
-        value: 80,
-      },
-    ],
-  },
-];
-
-export const basePerformance = [
-  {
-    subject: '/some/path',
-    metrics: [
-      {
-        name: 'Sitespeed Score',
-        value: 84,
-      },
-    ],
-  },
-  {
-    subject: '/some/other/path',
-    metrics: [
-      {
-        name: 'Sitespeed Score',
-        value: 80,
-        desiredSize: 'larger',
-      },
-      {
-        name: 'Requests',
-        value: 4,
-        desiredSize: 'smaller',
-      },
-    ],
-  },
-];
-
-export const codequalityParsedIssues = [
-  {
-    name: 'Insecure Dependency',
-    fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
-    path: 'Gemfile.lock',
-    line: 12,
-    urlPath: 'foo/Gemfile.lock',
-  },
-];
-
-export { mockStore };
+export { default } from 'ee_jest/vue_mr_widget/mock_data';
+export * from 'ee_jest/vue_mr_widget/mock_data';