import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import StatusDropdown from 'ee/security_dashboard/components/status_dropdown.vue';
import { VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/constants';

describe('Status Dropdown component', () => {
  let wrapper;

  const findDropdown = () => wrapper.findComponent(GlDropdown);
  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);

  const createWrapper = () => {
    wrapper = shallowMount(StatusDropdown, {
      stubs: {
        GlDropdown,
        GlDropdownItem,
      },
    });
  };

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

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

  it('renders the correct placeholder', () => {
    expect(findDropdown().props('text')).toBe('Set status');
  });

  describe.each(Object.keys(VULNERABILITY_STATE_OBJECTS).map((k, i) => [k, i]))(
    'state - %s',
    (state, index) => {
      const status = VULNERABILITY_STATE_OBJECTS[state];

      it(`renders ${state}`, () => {
        expect(findDropdownItems().at(index).text()).toBe(
          `${status.displayName} ${status.description}`,
        );
      });

      it(`emits an event when clicked - ${state}`, () => {
        findDropdownItems().at(index).vm.$emit('click');
        expect(wrapper.emitted().change[0][0]).toEqual({
          action: status.action,
          payload: status.payload,
        });
      });
    },
  );
});
