import { GlAlert, GlDropdown, GlDropdownItem, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils';
import PipelineArtifacts, {
  i18n,
} from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';

describe('Pipelines Artifacts dropdown', () => {
  let wrapper;
  let mockAxios;

  const artifacts = [
    {
      name: 'job my-artifact',
      path: '/download/path',
    },
    {
      name: 'job-2 my-artifact-2',
      path: '/download/path-two',
    },
  ];
  const artifactsEndpointPlaceholder = ':pipeline_artifacts_id';
  const artifactsEndpoint = `endpoint/${artifactsEndpointPlaceholder}/artifacts.json`;
  const pipelineId = 108;

  const createComponent = ({ mockData = {} } = {}) => {
    wrapper = shallowMount(PipelineArtifacts, {
      provide: {
        artifactsEndpoint,
        artifactsEndpointPlaceholder,
      },
      propsData: {
        pipelineId,
      },
      data() {
        return {
          ...mockData,
        };
      },
      stubs: {
        GlSprintf,
      },
    });
  };

  const findAlert = () => wrapper.findComponent(GlAlert);
  const findDropdown = () => wrapper.findComponent(GlDropdown);
  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
  const findFirstGlDropdownItem = () => wrapper.find(GlDropdownItem);
  const findAllGlDropdownItems = () => wrapper.find(GlDropdown).findAll(GlDropdownItem);

  beforeEach(() => {
    mockAxios = new MockAdapter(axios);
  });

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

  it('should render the dropdown', () => {
    createComponent();

    expect(findDropdown().exists()).toBe(true);
  });

  it('should fetch artifacts on dropdown click', async () => {
    const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
    mockAxios.onGet(endpoint).replyOnce(200, { artifacts });
    createComponent();
    findDropdown().vm.$emit('show');
    await waitForPromises();

    expect(mockAxios.history.get).toHaveLength(1);
    expect(wrapper.vm.artifacts).toEqual(artifacts);
  });

  it('should render a dropdown with all the provided artifacts', () => {
    createComponent({ mockData: { artifacts } });

    expect(findAllGlDropdownItems()).toHaveLength(artifacts.length);
  });

  it('should render a link with the provided path', () => {
    createComponent({ mockData: { artifacts } });

    expect(findFirstGlDropdownItem().attributes('href')).toBe(artifacts[0].path);

    expect(findFirstGlDropdownItem().text()).toBe(`Download ${artifacts[0].name} artifact`);
  });

  describe('with a failing request', () => {
    it('should render an error message', async () => {
      const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
      mockAxios.onGet(endpoint).replyOnce(500);
      createComponent();
      findDropdown().vm.$emit('show');
      await waitForPromises();

      const error = findAlert();
      expect(error.exists()).toBe(true);
      expect(error.text()).toBe(i18n.artifactsFetchErrorMessage);
    });
  });

  describe('with no artifacts received', () => {
    it('should render empty alert message', () => {
      createComponent({ mockData: { artifacts: [] } });

      const emptyAlert = findAlert();
      expect(emptyAlert.exists()).toBe(true);
      expect(emptyAlert.text()).toBe(i18n.noArtifacts);
    });
  });

  describe('when artifacts are loading', () => {
    it('should show loading icon', () => {
      createComponent({ mockData: { isLoading: true } });

      expect(findLoadingIcon().exists()).toBe(true);
    });
  });
});