new_vulnerability_spec.js

import { GlForm } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import NewVulnerability from 'ee/vulnerabilities/components/new_vulnerability/new_vulnerability.vue';
import SectionName from 'ee/vulnerabilities/components/new_vulnerability/section_name.vue';
import SectionIdentifiers from 'ee/vulnerabilities/components/new_vulnerability/section_identifiers.vue';
import SectionDetails from 'ee/vulnerabilities/components/new_vulnerability/section_details.vue';
import SectionSolution from 'ee/vulnerabilities/components/new_vulnerability/section_solution.vue';

describe('New vulnerability component', () => {
  let wrapper;

  const findSectionName = () => wrapper.findComponent(SectionName);
  const findSectionDetails = () => wrapper.findComponent(SectionDetails);
  const findSectionSolution = () => wrapper.findComponent(SectionSolution);
  const findSectionIdentifiers = () => wrapper.findComponent(SectionIdentifiers);

  const createWrapper = () => {
    return shallowMountExtended(NewVulnerability);
  };

  beforeEach(() => {
    wrapper = createWrapper();
  });

  afterEach(() => {
    wrapper.destroy();
  });

  it('should render the page title and description', () => {
    expect(wrapper.findByRole('heading', { name: 'Add vulnerability finding' }).exists()).toBe(
      true,
    );
    expect(wrapper.findByTestId('page-description').text()).toBe(
      'Manually add a vulnerability entry into the vulnerability report.',
    );
  });

  it('contains a form', () => {
    expect(wrapper.findComponent(GlForm).exists()).toBe(true);
  });

  it.each`
    section                   | selector                  | fields
    ${'Name and Description'} | ${findSectionName}        | ${{ vulnerabilityName: 'CVE 2050', vulnerabilityDesc: 'Password leak' }}
    ${'Details'}              | ${findSectionDetails}     | ${{ severity: 'low', detectionMethod: 2, status: 'confirmed' }}
    ${'Identifiers'}          | ${findSectionIdentifiers} | ${{ identifiers: [{ identifierCode: 'CWE-94', IdentifierUrl: 'https://cwe.mitre.org/data/definitions/94.html' }] }}
    ${'Solution'}             | ${findSectionSolution}    | ${{ solution: 'This is the solution of the vulnerability.' }}
  `('mounts the section $section and reacts on the change event', ({ selector, fields }) => {
    const section = selector();
    expect(section.exists()).toBe(true);
    section.vm.$emit('change', fields);
    expect(wrapper.vm.form).toMatchObject(fields);
  });
});