Add integration tests for vulnerabilities init

* Adds specs for high-level testing of vulnerability-details page
* Adds mock-server routes setup

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/vulnerabilities/mock_data.js

+export const mockVulnerability = {
+  id: 1,
+  title: 'Vulnerability Title',
+  description: 'Vulnerability Description',
+  created_at: new Date().toISOString(),
+  severity: 'medium',
+  state: 'detected',
+  pipeline: {
+    id: 2,
+    created_at: new Date().toISOString(),
+  },
+  project: {
+    full_path: '/project_full_path',
+  },
+};
+
+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/vulnerabilities/mock_routes.js

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

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');
+
+    expect(
+      within(severitySection).getByText(new RegExp(mockVulnerability.severity, 'i')),
+    ).toBeInstanceOf(HTMLElement);
+  });
+
+  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);
+  });
+});

spec/frontend_integration/test_helpers/setup/index.js

@@ -4,3 +4,4 @@ import './setup_axios';
 import './setup_serializers';
 import './setup_mock_server';
 import './setup_testing_library';
+import './setup_jest_dom';