Rewrite tests using mock apollo client

- Move mock_data into a separate folder

ee/spec/frontend/security_dashboard/components/first_class_vulnerability_severities_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
+import VueApollo from 'vue-apollo';
 import { trimText } from 'helpers/text_helper';
+import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import { severityGroupTypes } from 'ee/security_dashboard/store/modules/vulnerable_projects/constants';
 import { Accordion, AccordionItem } from 'ee/vue_shared/components/accordion';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
+import groupVulnerabilityGradesQuery from 'ee/security_dashboard/graphql/group_vulnerability_grades.query.graphql';
+import instanceVulnerabilityGradesQuery from 'ee/security_dashboard/graphql/instance_vulnerability_grades.query.graphql';
 import { n__ } from '~/locale';
-import { generateProjectsWithSeverityCounts } from './mock_data';
+import {
+  mockProjectsWithSeverityCounts,
+  mockInstanceVulnerabilityGrades,
+  mockGroupVulnerabilityGrades,
+} from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('Vulnerability Severity component', () => {
   let wrapper;
 
   const helpPagePath = 'http://localhost/help-me';
-  const projects = generateProjectsWithSeverityCounts();
-  const vulnerabilityGrades = {
-    F: [projects[0]],
-    D: [projects[1]],
-    C: [projects[2], projects[3]],
-    B: [projects[4]],
-    A: [projects[5], projects[6]],
-  };
-  const responseData = {
-    vulnerabilityGrades: Object.entries(vulnerabilityGrades).map(([grade, gradeProjects]) => ({
-      grade,
-      projects: { nodes: gradeProjects },
-    })),
-  };
+  const projects = mockProjectsWithSeverityCounts();
 
   const findAccordionItemsText = () =>
     wrapper
       .findAll('[data-testid="vulnerability-severity-groups"]')
       .wrappers.map(item => trimText(item.text()));
 
-  const mockAccordianItemsText = () =>
-    Object.entries(vulnerabilityGrades).map(
-      ([grade, relatedProjects]) =>
-        `${grade} ${n__('%d project', '%d projects', relatedProjects.length)}`,
-    );
+  const createApolloProvider = (...queries) => {
+    return createMockApollo([...queries]);
+  };
 
-  const createComponent = ({ propsData, data }) => {
+  const createComponent = ({ propsData, data, apolloProvider }) => {
     return shallowMount(VulnerabilitySeverity, {
+      localVue,
+      apolloProvider,
       propsData: {
         query: {},
         helpPagePath,
@@ -65,27 +63,53 @@ describe('Vulnerability Severity component', () => {
 
   describe('when loading the project severity component for group level dashboard', () => {
     beforeEach(() => {
-      wrapper = createComponent({ propsData: { groupFullPath: 'gitlab-org' } });
+      const apolloProvider = createApolloProvider([
+        groupVulnerabilityGradesQuery,
+        jest.fn().mockResolvedValue(mockGroupVulnerabilityGrades()),
+      ]);
+
+      wrapper = createComponent({
+        propsData: { groupFullPath: 'gitlab-org', query: groupVulnerabilityGradesQuery },
+        apolloProvider,
+      });
+
+      return wrapper.vm.$nextTick();
     });
 
-    it('should process the data returned from GraphQL properly', async () => {
-      wrapper.setData({ vulnerabilityGrades: wrapper.vm.processRawData({ group: responseData }) });
-      await wrapper.vm.$nextTick();
-      expect(findAccordionItemsText()).toEqual(mockAccordianItemsText());
+    it('should process the data returned from GraphQL properly', () => {
+      expect(findAccordionItemsText()).toEqual([
+        'F 1 project',
+        'D 1 project',
+        'C 2 projects',
+        'B 1 project',
+        'A 2 projects',
+      ]);
     });
   });
 
   describe('when loading the project severity component for instance level dashboard', () => {
     beforeEach(() => {
-      wrapper = createComponent({});
+      const apolloProvider = createApolloProvider([
+        instanceVulnerabilityGradesQuery,
+        jest.fn().mockResolvedValue(mockInstanceVulnerabilityGrades()),
+      ]);
+
+      wrapper = createComponent({
+        propsData: { query: instanceVulnerabilityGradesQuery },
+        apolloProvider,
+      });
+
+      return wrapper.vm.$nextTick();
     });
 
-    it('should process the data returned from GraphQL properly', async () => {
-      wrapper.setData({
-        vulnerabilityGrades: wrapper.vm.processRawData({ instanceSecurityDashboard: responseData }),
-      });
-      await wrapper.vm.$nextTick();
-      expect(findAccordionItemsText()).toEqual(mockAccordianItemsText());
+    it('should process the data returned from GraphQL properly', () => {
+      expect(findAccordionItemsText()).toEqual([
+        'F 1 project',
+        'D 1 project',
+        'C 2 projects',
+        'B 1 project',
+        'A 2 projects',
+      ]);
     });
   });
 
@@ -112,18 +136,31 @@ describe('Vulnerability Severity component', () => {
   describe.each`
     grade                   | relatedProjects               | correspondingMostSevereVulnerability                            | levels
     ${severityGroupTypes.F} | ${[projects[0]]}              | ${['2 Critical']}                                               | ${'Critical'}
-    ${severityGroupTypes.D} | ${[projects[1]]}              | ${['1 High']}                                                   | ${'High or unknown'}
-    ${severityGroupTypes.C} | ${[projects[2], projects[3]]} | ${['5 Medium', '4 Medium']}                                     | ${'Medium'}
-    ${severityGroupTypes.B} | ${[projects[4]]}              | ${['2 Low']}                                                    | ${'Low'}
-    ${severityGroupTypes.A} | ${[projects[5], projects[6]]} | ${['No vulnerabilities present', 'No vulnerabilities present']} | ${'No'}
+    ${severityGroupTypes.D} | ${[projects[1]]}              | ${['2 High']}                                                   | ${'High or unknown'}
+    ${severityGroupTypes.C} | ${[projects[0], projects[1]]} | ${['1 Medium', '1 Medium']}                                     | ${'Medium'}
+    ${severityGroupTypes.B} | ${[projects[1]]}              | ${['1 Low']}                                                    | ${'Low'}
+    ${severityGroupTypes.A} | ${[projects[2], projects[3]]} | ${['No vulnerabilities present', 'No vulnerabilities present']} | ${'No'}
   `(
     'for grade $grade',
     ({ grade, relatedProjects, correspondingMostSevereVulnerability, levels }) => {
       let accordion;
       let text;
 
-      beforeEach(() => {
-        wrapper = createComponent({ data: () => ({ vulnerabilityGrades }) });
+      beforeEach(async () => {
+        // Here instance or group does not matter. We just need some data to test
+        // common functionality.
+        const apolloProvider = createApolloProvider([
+          instanceVulnerabilityGradesQuery,
+          jest.fn().mockResolvedValue(mockInstanceVulnerabilityGrades()),
+        ]);
+
+        wrapper = createComponent({
+          propsData: { query: instanceVulnerabilityGradesQuery },
+          apolloProvider,
+        });
+
+        await wrapper.vm.$nextTick();
+
         accordion = findAccordionItemByGrade(grade);
         text = trimText(accordion.text());
       });

ee/spec/frontend/security_dashboard/components/mock_data.js

@@ -100,113 +100,3 @@ export const generateVulnerabilities = () => [
 ];
 
 export const vulnerabilities = generateVulnerabilities();
-
-export const generateProjectsWithSeverityCounts = () => [
-  {
-    id: 'gid://gitlab/Project/1',
-    name: 'Gitlab Test 1',
-    nameWithNamespace: 'Gitlab Org / Gitlab Test 1',
-    fullPath: 'gitlab-org/gitlab-test-1',
-    securityDashboardPath: '/gitlab-org/gitlab-test-1/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 2,
-      high: 0,
-      info: 0,
-      low: 0,
-      medium: 0,
-      unknown: 0,
-    },
-  },
-  {
-    id: 'gid://gitlab/Project/2',
-    name: 'Gitlab Test 2',
-    nameWithNamespace: 'Gitlab Org / Gitlab Test 2',
-    fullPath: 'gitlab-org/gitlab-test-2',
-    securityDashboardPath: '/gitlab-org/gitlab-test-2/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 0,
-      high: 1,
-      info: 0,
-      low: 0,
-      medium: 0,
-      unknown: 0,
-    },
-  },
-  {
-    id: 'gid://gitlab/Project/3',
-    name: 'Gitlab Test 3',
-    nameWithNamespace: 'Gitlab Org / Gitlab Test 3',
-    fullPath: 'gitlab-org/gitlab-test-3',
-    securityDashboardPath: '/gitlab-org/gitlab-test-3/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 0,
-      high: 0,
-      info: 0,
-      low: 0,
-      medium: 5,
-      unknown: 0,
-    },
-  },
-  {
-    id: 'gid://gitlab/Project/4',
-    name: 'Gitlab Test 4',
-    nameWithNamespace: 'Gitlab Org / Gitlab Test 4',
-    fullPath: 'gitlab-org/gitlab-test-4',
-    securityDashboardPath: '/gitlab-org/gitlab-test-4/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 0,
-      high: 0,
-      info: 0,
-      low: 0,
-      medium: 4,
-      unknown: 0,
-    },
-  },
-  {
-    id: 'gid://gitlab/Project/5',
-    name: 'Gitlab Test 5',
-    nameWithNamespace: 'Gitlab Org / Gitlab Test 5',
-    fullPath: 'gitlab-org/gitlab-test-5',
-    securityDashboardPath: '/gitlab-org/gitlab-test-5/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 0,
-      high: 0,
-      info: 0,
-      low: 2,
-      medium: 0,
-      unknown: 0,
-    },
-  },
-  {
-    id: 'gid://gitlab/Project/6',
-    name: 'Gitlab Test 6',
-    nameWithNamespace: 'Gitlab Org / Gitlab Test 6',
-    fullPath: 'gitlab-org/gitlab-test-6',
-    securityDashboardPath: '/gitlab-org/gitlab-test-6/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 0,
-      high: 0,
-      info: 0,
-      low: 0,
-      medium: 0,
-      unknown: 0,
-    },
-  },
-  {
-    id: 'gid://gitlab/Project/7',
-    name: 'Gitlab Test 7',
-    nameWithNamespace: 'Gitlab Org / Subgroup / Gitlab Test 7',
-    fullPath: 'gitlab-org/subgroup/gitlab-test-7',
-    securityDashboardPath: '/gitlab-org/subgroup/gitlab-test-7/-/security/dashboard',
-    vulnerabilitySeveritiesCount: {
-      critical: 0,
-      high: 0,
-      info: 2,
-      low: 0,
-      medium: 0,
-      unknown: 0,
-    },
-  },
-];
-
-export const projectsWithSeverityCounts = generateProjectsWithSeverityCounts();

ee/spec/frontend/security_dashboard/mock_data/index.js

+export const mockProjectsWithSeverityCounts = () => [
+  {
+    id: 'gid://gitlab/Project/1',
+    name: 'Gitlab Test',
+    nameWithNamespace: 'Gitlab Org / Gitlab Test',
+    securityDashboardPath: '/gitlab-org/gitlab-test/-/security/dashboard',
+    fullPath: 'gitlab-org/gitlab-test',
+    avatarUrl: null,
+    path: 'gitlab-test',
+    vulnerabilitySeveritiesCount: {
+      critical: 2,
+      high: 0,
+      info: 4,
+      low: 3,
+      medium: 0,
+      unknown: 1,
+    },
+  },
+  {
+    id: 'gid://gitlab/Project/2',
+    name: 'Gitlab Shell',
+    nameWithNamespace: 'Gitlab Org / Gitlab Shell',
+    securityDashboardPath: '/gitlab-org/gitlab-shell/-/security/dashboard',
+    fullPath: 'gitlab-org/gitlab-shell',
+    avatarUrl: null,
+    path: 'gitlab-shell',
+    vulnerabilitySeveritiesCount: {
+      critical: 0,
+      high: 2,
+      info: 2,
+      low: 1,
+      medium: 1,
+      unknown: 2,
+    },
+  },
+  {
+    id: 'gid://gitlab/Project/4',
+    name: 'Gitlab Perfectly Secure',
+    nameWithNamespace: 'Gitlab Org / Perfectly Secure',
+    securityDashboardPath: '/gitlab-org/gitlab-perfectly-secure/-/security/dashboard',
+    fullPath: 'gitlab-org/gitlab-perfectly-secure',
+    avatarUrl: null,
+    path: 'gitlab-perfectly-secure',
+    vulnerabilitySeveritiesCount: {
+      critical: 0,
+      high: 0,
+      info: 0,
+      low: 0,
+      medium: 0,
+      unknown: 0,
+    },
+  },
+  {
+    id: 'gid://gitlab/Project/5',
+    name: 'Gitlab Perfectly Secure 2 ',
+    nameWithNamespace: 'Gitlab Org / Perfectly Secure 2',
+    securityDashboardPath: '/gitlab-org/gitlab-perfectly-secure-2/-/security/dashboard',
+    fullPath: 'gitlab-org/gitlab-perfectly-secure-2',
+    avatarUrl: null,
+    path: 'gitlab-perfectly-secure-2',
+    vulnerabilitySeveritiesCount: {
+      critical: 0,
+      high: 0,
+      info: 0,
+      low: 0,
+      medium: 0,
+      unknown: 0,
+    },
+  },
+];
+
+const projectsMemoized = mockProjectsWithSeverityCounts();
+const vulnerabilityGrades = [
+  {
+    grade: 'F',
+    projects: {
+      nodes: [projectsMemoized[0]],
+    },
+  },
+  {
+    grade: 'D',
+    projects: {
+      nodes: [projectsMemoized[1]],
+    },
+  },
+  {
+    grade: 'C',
+    projects: {
+      nodes: [projectsMemoized[0], projectsMemoized[1]],
+    },
+  },
+  {
+    grade: 'B',
+    projects: {
+      nodes: [projectsMemoized[1]],
+    },
+  },
+  {
+    grade: 'A',
+    projects: {
+      nodes: [projectsMemoized[2], projectsMemoized[3]],
+    },
+  },
+];
+
+export const mockGroupVulnerabilityGrades = () => ({
+  data: {
+    group: {
+      vulnerabilityGrades,
+    },
+  },
+});
+
+export const mockInstanceVulnerabilityGrades = () => ({
+  data: {
+    instanceSecurityDashboard: {
+      vulnerabilityGrades,
+    },
+  },
+});