Migrate operations specs to Jest + VTU

Migrated some Karma specs to Jest and Vue Test Utils, this will help us
with the ongoing BootstrapVue upgrade

ee/spec/javascripts/operations/components/dashboard/project_header_spec.js → ee/spec/frontend/operations/components/dashboard/project_header_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
-import { removeWhitespace } from 'spec/helpers/text_helper';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import { trimText } from 'helpers/text_helper';
 import { mockOneProject } from '../../mock_data';
 
 const localVue = createLocalVue();
@@ -16,6 +16,7 @@ describe('project header component', () => {
       },
       localVue,
       sync: false,
+      attachToDocument: true,
     });
   };
 
@@ -31,8 +32,8 @@ describe('project header component', () => {
     const namespace = wrapper.find('.js-project-namespace').text();
     const name = wrapper.find('.js-project-name').text();
 
-    expect(removeWhitespace(namespace).trim()).toBe(`${mockOneProject.namespace.name} /`);
-    expect(removeWhitespace(name).trim()).toBe(mockOneProject.name);
+    expect(trimText(namespace).trim()).toBe(`${mockOneProject.namespace.name} /`);
+    expect(trimText(name).trim()).toBe(mockOneProject.name);
   });
 
   it('links project name to project', () => {
@@ -55,10 +56,12 @@ describe('project header component', () => {
     it('emits project removal link on click', () => {
       wrapper.find('.js-remove-button').vm.$emit('click');
 
-      expect(wrapper.emittedByOrder()).toContain({
+      expect(wrapper.emittedByOrder()).toContainEqual(
+        expect.objectContaining({
           name: 'remove',
           args: [mockOneProject.remove_path],
-      });
+        }),
+      );
     });
   });
 

ee/spec/frontend/operations/mock_data.js

+import { mockProjectData, mockText as text } from '../vue_shared/dashboards/mock_data';
+
+export { mockProjectData } from '../vue_shared/dashboards/mock_data';
+
+export const mockText = {
+  ...text,
+  ADD_PROJECTS: 'Add projects',
+  DASHBOARD_TITLE: 'Operations Dashboard',
+  EMPTY_TITLE: 'Add a project to the dashboard',
+  EMPTY_SUBTITLE:
+    "The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses. More information",
+  EMPTY_SVG_SOURCE: '/assets/illustrations/operations-dashboard_empty.svg',
+  SEARCH_PROJECTS: 'Search your projects',
+  SEARCH_DESCRIPTION_SUFFIX: 'in projects',
+};
+
+export const [mockOneProject] = mockProjectData(1);

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

+import { TEST_HOST } from 'spec/test_constants';
+
+const AVATAR_URL = `${TEST_HOST}/dummy.jpg`;
+
+export const mockText = {
+  ADD_PROJECTS_ERROR: 'Something went wrong, unable to add projects to dashboard',
+  REMOVE_PROJECT_ERROR: 'Something went wrong, unable to remove project',
+  NO_SEARCH_RESULTS: 'Sorry, no projects matched your search',
+  RECEIVE_PROJECTS_ERROR: 'Something went wrong, unable to get projects',
+};
+
+export const mockHeaders = {
+  pageInfo: {
+    currentPage: 1,
+    nextPage: 2,
+    totalResults: 33,
+    totalPages: 2,
+  },
+};
+
+export function mockPipelineData(
+  status = 'success',
+  id = 1,
+  finishedTimeStamp = new Date(Date.now() - 86400000).toISOString(),
+  isTag = false,
+) {
+  return {
+    id,
+    user: {
+      id: 1,
+      name: 'Test',
+      username: 'test',
+      state: 'active',
+      avatar_url: AVATAR_URL,
+      web_url: '/test',
+      status_tooltip_html: null,
+      path: '/test',
+    },
+    active: false,
+    path: '/test/test-project/pipelines/1',
+    details: {
+      status: {
+        icon: `status_${status}`,
+        text: status,
+        label: status,
+        group: status,
+        tooltip: status,
+        has_details: true,
+        details_path: '/test/test-project/pipelines/1',
+        illustration: null,
+      },
+      finished_at: finishedTimeStamp,
+    },
+    ref: {
+      name: 'master',
+      path: 'test/test-project/commits/master',
+      tag: isTag,
+      branch: true,
+      merge_request: false,
+    },
+    commit: {
+      id: 'e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
+      short_id: 'e778416d',
+      title: "Add new file to the branch I'm working on",
+      message: "Add new file to the branch I'm working on",
+      author: {
+        id: 1,
+        name: 'Test',
+        username: 'test',
+        state: 'active',
+        avatar_url: AVATAR_URL,
+        status_tooltip_html: null,
+        path: '/test',
+      },
+      commit_url: '/test/test-project/commit/e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
+      commit_path: '/test/test-project/commit/e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
+    },
+    project: {
+      full_name: 'Test / test-project',
+      full_path: '/test/test-project',
+      name: 'test-project',
+    },
+  };
+}
+
+export function mockProjectData(
+  projectCount = 1,
+  currentPipelineStatus = 'success',
+  upstreamStatus = 'success',
+  alertCount = 0,
+) {
+  return Array(projectCount)
+    .fill(null)
+    .map((_, index) => ({
+      id: index,
+      description: '',
+      name: 'test-project',
+      name_with_namespace: 'Test / test-project',
+      path: 'test-project',
+      path_with_namespace: 'test/test-project',
+      created_at: '2019-02-01T15:40:27.522Z',
+      default_branch: 'master',
+      tag_list: [],
+      avatar_url: null,
+      web_url: 'https://mock-web_url/',
+      namespace: {
+        id: 1,
+        name: 'test',
+        path: 'test',
+        kind: 'user',
+        full_path: 'user',
+        parent_id: null,
+      },
+      remove_path: '/-/operations?project_id=1',
+      last_pipeline: mockPipelineData(currentPipelineStatus),
+      upstream_pipeline: mockPipelineData(upstreamStatus),
+      downstream_pipelines: [],
+      alert_count: alertCount,
+      upgrade_required: false,
+      upgrade_path: '/groups/test/-/billings',
+    }));
+}

ee/spec/javascripts/operations/mock_data.js

-import { mockProjectData, mockText as text } from 'ee_spec/vue_shared/dashboards/mock_data';
+// 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 { mockProjectData } from 'ee_spec/vue_shared/dashboards/mock_data';
-
-export const mockText = {
-  ...text,
-  ADD_PROJECTS: 'Add projects',
-  DASHBOARD_TITLE: 'Operations Dashboard',
-  EMPTY_TITLE: 'Add a project to the dashboard',
-  EMPTY_SUBTITLE:
-    "The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses. More information",
-  EMPTY_SVG_SOURCE: '/assets/illustrations/operations-dashboard_empty.svg',
-  SEARCH_PROJECTS: 'Search your projects',
-  SEARCH_DESCRIPTION_SUFFIX: 'in projects',
-};
-
-export const [mockOneProject] = mockProjectData(1);
+export * from '../../frontend/operations/mock_data';

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

-import { TEST_HOST } from 'spec/test_constants';
+// 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
 
-const AVATAR_URL = `${TEST_HOST}/dummy.jpg`;
-
-export const mockText = {
-  ADD_PROJECTS_ERROR: 'Something went wrong, unable to add projects to dashboard',
-  REMOVE_PROJECT_ERROR: 'Something went wrong, unable to remove project',
-  NO_SEARCH_RESULTS: 'Sorry, no projects matched your search',
-  RECEIVE_PROJECTS_ERROR: 'Something went wrong, unable to get projects',
-};
-
-export const mockHeaders = {
-  pageInfo: {
-    currentPage: 1,
-    nextPage: 2,
-    totalResults: 33,
-    totalPages: 2,
-  },
-};
-
-export function mockPipelineData(
-  status = 'success',
-  id = 1,
-  finishedTimeStamp = new Date(Date.now() - 86400000).toISOString(),
-  isTag = false,
-) {
-  return {
-    id,
-    user: {
-      id: 1,
-      name: 'Test',
-      username: 'test',
-      state: 'active',
-      avatar_url: AVATAR_URL,
-      web_url: '/test',
-      status_tooltip_html: null,
-      path: '/test',
-    },
-    active: false,
-    path: '/test/test-project/pipelines/1',
-    details: {
-      status: {
-        icon: `status_${status}`,
-        text: status,
-        label: status,
-        group: status,
-        tooltip: status,
-        has_details: true,
-        details_path: '/test/test-project/pipelines/1',
-        illustration: null,
-      },
-      finished_at: finishedTimeStamp,
-    },
-    ref: {
-      name: 'master',
-      path: 'test/test-project/commits/master',
-      tag: isTag,
-      branch: true,
-      merge_request: false,
-    },
-    commit: {
-      id: 'e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
-      short_id: 'e778416d',
-      title: "Add new file to the branch I'm working on",
-      message: "Add new file to the branch I'm working on",
-      author: {
-        id: 1,
-        name: 'Test',
-        username: 'test',
-        state: 'active',
-        avatar_url: AVATAR_URL,
-        status_tooltip_html: null,
-        path: '/test',
-      },
-      commit_url: '/test/test-project/commit/e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
-      commit_path: '/test/test-project/commit/e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
-    },
-    project: {
-      full_name: 'Test / test-project',
-      full_path: '/test/test-project',
-      name: 'test-project',
-    },
-  };
-}
-
-export function mockProjectData(
-  projectCount = 1,
-  currentPipelineStatus = 'success',
-  upstreamStatus = 'success',
-  alertCount = 0,
-) {
-  return Array(projectCount)
-    .fill(null)
-    .map((_, index) => ({
-      id: index,
-      description: '',
-      name: 'test-project',
-      name_with_namespace: 'Test / test-project',
-      path: 'test-project',
-      path_with_namespace: 'test/test-project',
-      created_at: '2019-02-01T15:40:27.522Z',
-      default_branch: 'master',
-      tag_list: [],
-      avatar_url: null,
-      web_url: 'https://mock-web_url/',
-      namespace: {
-        id: 1,
-        name: 'test',
-        path: 'test',
-        kind: 'user',
-        full_path: 'user',
-        parent_id: null,
-      },
-      remove_path: '/-/operations?project_id=1',
-      last_pipeline: mockPipelineData(currentPipelineStatus),
-      upstream_pipeline: mockPipelineData(upstreamStatus),
-      downstream_pipelines: [],
-      alert_count: alertCount,
-      upgrade_required: false,
-      upgrade_path: '/groups/test/-/billings',
-    }));
-}
+export * from '../../../../spec/frontend/vue_shared/dashboards/mock_data';