import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem, GlIcon } from '@gitlab/ui';
import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';

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

  const defaultProps = {
    stacks: [
      {
        name: 'Google Cloud Platform',
        code: 'gcp',
      },
      {
        name: 'Amazon Web Services',
        code: 'aws',
      },
    ],
  };

  function createComponent(props = {}) {
    const propsData = {
      ...defaultProps,
      ...props,
    };

    wrapper = shallowMount(CrossplaneProviderStack, {
      propsData,
    });
  }

  beforeEach(() => {
    const crossplane = {
      title: 'crossplane',
      stack: '',
    };
    createComponent({ crossplane });
  });

  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
  const findFirstDropdownElement = () => findDropdownElements().at(0);

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

  it('renders all of the available stacks in the dropdown', () => {
    const dropdownElements = findDropdownElements();

    expect(dropdownElements.length).toBe(defaultProps.stacks.length);

    defaultProps.stacks.forEach((stack, index) =>
      expect(dropdownElements.at(index).text()).toEqual(stack.name),
    );
  });

  it('displays the correct label for the first dropdown item if a stack is selected', () => {
    const crossplane = {
      title: 'crossplane',
      stack: 'gcp',
    };
    createComponent({ crossplane });
    expect(wrapper.vm.dropdownText).toBe('Google Cloud Platform');
  });

  it('emits the "set" event with the selected stack value', () => {
    const crossplane = {
      title: 'crossplane',
      stack: 'gcp',
    };
    createComponent({ crossplane });
    findFirstDropdownElement().vm.$emit('click');
    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.emitted().set[0][0].code).toEqual('gcp');
    });
  });

  it('renders the correct dropdown text when no stack is selected', () => {
    expect(wrapper.vm.dropdownText).toBe('Select Stack');
  });

  it('renders an external link', () => {
    expect(wrapper.find(GlIcon).props('name')).toBe('external-link');
  });
});