Merge branch '220290-add-integration-tests-for-vulnerabilities-init' into 'master'

Test vulnerability details entry file

See merge request gitlab-org/gitlab!55443

ee/app/assets/javascripts/vulnerabilities/components/header.vue

@@ -255,7 +255,10 @@ export default {
       :default-branch-name="vulnerability.projectDefaultBranch"
     />
     <div class="detail-page-header">
-      <div class="detail-page-header-body align-items-center">
+      <div
+        class="detail-page-header-body align-items-center"
+        data-testid="vulnerability-detail-body"
+      >
         <gl-loading-icon v-if="isLoadingVulnerability" class="mr-2" />
         <gl-badge v-else class="gl-mr-4 text-capitalize" :variant="stateVariant">
           {{ vulnerability.state }}

ee/spec/frontend_integration/test_helpers/mock_data/vulnerabilities_mock_data.js

+export const mockIssueLink = {
+  assignee: null,
+  assignees: [],
+  author: { id: 1, name: 'Administrator', username: 'container', state: 'active' },
+  blocking_issues_count: 0,
+  closed_at: null,
+  closed_by: null,
+  confidential: true,
+  created_at: '2021-01-10T23:17:23.385Z',
+  description: 'description',
+  discussion_locked: null,
+  downvotes: 0,
+  due_date: null,
+  id: 501,
+  iid: 12,
+  labels: [],
+  merge_requests_count: 0,
+  milestone: null,
+  project_id: 23,
+  state: 'opened',
+  task_completion_status: { count: 0, completed_count: 0 },
+  time_stats: {
+    time_estimate: 0,
+    total_time_spent: 0,
+    human_time_estimate: null,
+    human_total_time_spent: null,
+  },
+  title: 'Investigate vulnerability: Improper Input Validation in xterm',
+  updated_at: '2021-01-10T23:17:23.385Z',
+  upvotes: 0,
+  user_notes_count: 0,
+  vulnerability_link_id: 53,
+  vulnerability_link_type: 'created',
+  web_url: 'http://gdk.test:3000/security-reports/dependency-list-test/-/issues/12',
+  weight: null,
+};

ee/spec/frontend_integration/test_helpers/mock_server/routes/index.js

+import defaultRoutes from 'test_helpers/mock_server/routes';
+
+/* eslint-disable global-require */
+export default (server) => {
+  [require('./vulnerabilities')].forEach(({ default: setup }) => {
+    setup(server);
+  });
+
+  defaultRoutes(server);
+};

ee/spec/frontend_integration/test_helpers/mock_server/routes/vulnerabilities.js

+import { mockIssueLink } from '../../mock_data/vulnerabilities_mock_data';
+
+export default (server) => {
+  server.get('/api/v4/vulnerabilities/:id/issue_links', () => [mockIssueLink]);
+};

ee/spec/frontend_integration/vulnerabilities/mock_data.js

+export const mockVulnerability = {
+  id: 1,
+  title: 'Vulnerability Title',
+  description: 'Vulnerability Description',
+  created_at: new Date(2020, 0, 1).toISOString(),
+  severity: 'medium',
+  state: 'detected',
+  pipeline: {
+    id: 2,
+    created_at: new Date(2020, 0, 1).toISOString(),
+  },
+  project: {
+    full_path: '/project_full_path',
+  },
+};

ee/spec/frontend_integration/vulnerabilities/vulnerabilities_init_integration_spec.js

+import { screen, within } from '@testing-library/dom';
+import initVulnerabilities from 'ee/vulnerabilities/vulnerabilities_init';
+import { waitForText } from 'helpers/wait_for_text';
+import { mockIssueLink } from '../test_helpers/mock_data/vulnerabilities_mock_data';
+import { mockVulnerability } from './mock_data';
+
+describe('Vulnerability Report', () => {
+  let vm;
+  let container;
+
+  const createComponent = () => {
+    const el = document.createElement('div');
+    const elDataSet = {
+      vulnerability: JSON.stringify(mockVulnerability),
+    };
+
+    Object.assign(el.dataset, {
+      ...elDataSet,
+    });
+
+    container.appendChild(el);
+
+    return initVulnerabilities(el);
+  };
+
+  beforeEach(() => {
+    setFixtures('<div class="vulnerability-details"></div>');
+
+    container = document.querySelector('.vulnerability-details');
+    vm = createComponent(container);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    vm = null;
+    container = null;
+  });
+
+  it("displays the vulnerability's status", () => {
+    const headerBody = screen.getByTestId('vulnerability-detail-body');
+
+    expect(within(headerBody).getByText(mockVulnerability.state)).toBeInstanceOf(HTMLElement);
+  });
+
+  it("displays the vulnerability's severity", () => {
+    const severitySection = screen.getByTestId('severity');
+    const severityValue = within(severitySection).getByTestId('value');
+
+    expect(severityValue.textContent.toLowerCase()).toContain(
+      mockVulnerability.severity.toLowerCase(),
+    );
+  });
+
+  it("displays a heading containing the vulnerability's title", () => {
+    expect(screen.getByRole('heading', { name: mockVulnerability.title })).toBeInstanceOf(
+      HTMLElement,
+    );
+  });
+
+  it("displays the vulnerability's description", () => {
+    expect(screen.getByText(mockVulnerability.description)).toBeInstanceOf(HTMLElement);
+  });
+
+  it('displays related issues', async () => {
+    const relatedIssueTitle = await waitForText(mockIssueLink.title);
+
+    expect(relatedIssueTitle).toBeInstanceOf(HTMLElement);
+  });
+});

jest.config.base.js

@@ -45,7 +45,8 @@ module.exports = (path) => {
     'emojis(/.*).json': '<rootDir>/fixtures/emojis$1.json',
     '^spec/test_constants$': '<rootDir>/spec/frontend/__helpers__/test_constants',
     '^jest/(.*)$': '<rootDir>/spec/frontend/$1',
-    'test_helpers(/.*)$': '<rootDir>/spec/frontend_integration/test_helpers$1',
+    '^test_helpers(/.*)$': '<rootDir>/spec/frontend_integration/test_helpers$1',
+    '^ee_else_ce_test_helpers(/.*)$': '<rootDir>/spec/frontend_integration/test_helpers$1',
   };
 
   const collectCoverageFrom = ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'];
@@ -56,6 +57,7 @@ module.exports = (path) => {
       '^ee(/.*)$': rootDirEE,
       '^ee_component(/.*)$': rootDirEE,
       '^ee_else_ce(/.*)$': rootDirEE,
+      '^ee_else_ce_test_helpers(/.*)$': '<rootDir>/ee/spec/frontend_integration/test_helpers$1',
       '^ee_jest/(.*)$': '<rootDir>/ee/spec/frontend/$1',
       [TEST_FIXTURES_PATTERN]: '<rootDir>/tmp/tests/frontend/fixtures-ee$1',
     });

spec/frontend_integration/test_helpers/mock_server/index.js

 import { Server, Model, RestSerializer } from 'miragejs';
+import setupRoutes from 'ee_else_ce_test_helpers/mock_server/routes';
 import {
   getProject,
   getEmptyProject,
@@ -11,7 +12,6 @@ import {
   getBlobImage,
   getBlobZip,
 } from 'test_helpers/fixtures';
-import setupRoutes from './routes';
 
 export const createMockServerOptions = () => ({
   models: {