import { GlCard } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import VulnerabilityCount from 'ee/security_dashboard/components/shared/vulnerability_count.vue';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';

describe('Vulnerability Count', () => {
  let wrapper;

  const findCard = () => wrapper.findComponent(GlCard);
  const findBadge = () => wrapper.find(SeverityBadge);
  const findBody = () => wrapper.find({ ref: 'body' });

  function mountComponent({ props } = {}) {
    wrapper = shallowMount(VulnerabilityCount, {
      propsData: {
        severity: 'high',
        count: 100,
        ...props,
      },
    });
  }

  beforeEach(() => {
    mountComponent();
  });

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

  it('should render correctly with a high severity vulnerability', () => {
    const header = findBadge();
    const body = findBody();
    expect(header.props('severity')).toBe('high');
    expect(body.text()).toBe('100');
  });

  it('should render a card layout with the correct header and body classes', () => {
    const card = findCard();
    expect(card.props('headerClass')).toBe('gl-display-flex gl-justify-content-center gl-p-3');
    expect(card.props('bodyClass')).toBe('gl-font-size-h2 gl-text-center');
  });
});
