import { mount } from '@vue/test-utils';
import { GlEmptyState, GlSkeletonLoading } from '@gitlab/ui';
import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
import { vulnerabilities } from './mock_data';

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

  const createWrapper = props => {
    return mount(VulnerabilityList, {
      propsData: {
        dashboardDocumentation: '#',
        emptyStateSvgPath: '#',
        vulnerabilities: [],
        ...props,
      },
    });
  };

  const findCell = label => wrapper.find(`.js-${label}`);

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

  describe('with vulnerabilities', () => {
    beforeEach(() => {
      wrapper = createWrapper({ vulnerabilities });
    });

    it('should render a list of vulnerabilities', () => {
      expect(wrapper.findAll('.js-status')).toHaveLength(vulnerabilities.length);
    });

    it('should correctly render the status', () => {
      const cell = findCell('status');

      expect(cell.text()).toEqual(vulnerabilities[0].state);
    });

    it('should correctly render the severity', () => {
      const cell = findCell('severity');
      expect(cell.text().toLowerCase()).toEqual(vulnerabilities[0].severity);
    });

    it('should correctly render the description', () => {
      const cell = findCell('description');

      expect(cell.text()).toEqual(vulnerabilities[0].title);
    });
  });

  describe('when loading', () => {
    beforeEach(() => {
      wrapper = createWrapper({ isLoading: true });
    });

    it('should show the loading state', () => {
      expect(findCell('status').exists()).toEqual(false);
      expect(wrapper.find(GlSkeletonLoading).exists()).toEqual(true);
    });
  });

  describe('with no vulnerabilities', () => {
    beforeEach(() => {
      wrapper = createWrapper();
    });

    it('should show the empty state', () => {
      expect(findCell('status').exists()).toEqual(false);
      expect(wrapper.find(GlEmptyState).exists()).toEqual(true);
    });
  });
});
