section_details_spec.js

import { nextTick } from 'vue';
import { GlFormGroup, GlFormRadio, GlCollapsibleListbox } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import SectionDetails from 'ee/vulnerabilities/components/new_vulnerability/section_details.vue';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
import { ERROR_SEVERITY, ERROR_STATUS } from 'ee/vulnerabilities/components/new_vulnerability/i18n';

describe('New vulnerability - Section Details', () => {
  let wrapper;

  const findFormGroup = (at) => wrapper.findAllComponents(GlFormGroup).at(at);

  const findDetectionMethod = () => wrapper.findAllComponents(GlCollapsibleListbox).at(0);
  const findSeverity = () => wrapper.findAllComponents(GlCollapsibleListbox).at(1);

  const findStatusItem = (at) => wrapper.findAllComponents(GlFormRadio).at(at);

  const createWrapper = () => {
    return mountExtended(SectionDetails, {});
  };

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

  it.each`
    value | text
    ${0}  | ${'GitLab Security Report'}
    ${1}  | ${'External Security Report'}
    ${2}  | ${'Bug Bounty'}
    ${3}  | ${'Code Review'}
    ${4}  | ${'Security Audit'}
  `('displays and handles detection method field: $text', async ({ value, text }) => {
    const listbox = findDetectionMethod();
    await listbox.vm.$emit('select', value);
    expect(listbox.props('toggleText')).toBe(text);
    expect(listbox.props('selected')).toBe(value);
    expect(wrapper.emitted('change')[0][0]).toEqual({
      detectionMethod: value,
      severity: '',
      status: '',
    });
  });

  it.each`
    index | value
    ${0}  | ${'critical'}
    ${1}  | ${'high'}
    ${2}  | ${'medium'}
    ${3}  | ${'low'}
    ${4}  | ${'info'}
    ${5}  | ${'unknown'}
  `('displays and handles severity field: $value', async ({ value, index }) => {
    const listbox = findSeverity();
    await listbox.vm.$emit('select', value);
    expect(
      listbox
        .findAllComponents(SeverityBadge)
        .at(index + 1)
        .props('severity'),
    ).toBe(value);
    expect(wrapper.emitted('change')[0][0]).toEqual({
      detectionMethod: -1,
      severity: value,
      status: '',
    });
  });

  it.each`
    index | value
    ${0}  | ${'detected'}
    ${1}  | ${'confirmed'}
    ${2}  | ${'resolved'}
  `('displays and handles status field', async ({ index, value }) => {
    await findStatusItem(index).find('input').trigger('change');
    expect(wrapper.emitted('change')[0][0]).toEqual({
      detectionMethod: -1,
      severity: '',
      status: value,
    });
  });

  it('does not display invalid state by default', () => {
    expect(findFormGroup(1).attributes('aria-invalid')).toBeUndefined();
    expect(findFormGroup(0).attributes('aria-invalid')).toBeUndefined();
  });

  it('handles form validation', async () => {
    wrapper.setProps({
      validationState: {
        severity: false,
        status: false,
      },
    });

    await nextTick();

    // severity input
    expect(findFormGroup(1).attributes('aria-invalid')).toBe('true');
    expect(findFormGroup(1).text()).toContain(ERROR_SEVERITY);

    // status input
    expect(findFormGroup(2).attributes('aria-invalid')).toBe('true');
    expect(findFormGroup(2).text()).toContain(ERROR_STATUS);
  });
});