2021-05-07 12:10:27 +00:00
|
|
|
import { GlAlert, GlDropdown, GlDropdownItem, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
|
2021-02-24 21:11:16 +00:00
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-05-07 12:10:27 +00:00
|
|
|
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';
|
2020-05-06 09:10:02 +00:00
|
|
|
|
|
|
|
describe('Pipelines Artifacts dropdown', () => {
|
|
|
|
let wrapper;
|
2021-05-07 12:10:27 +00:00
|
|
|
let mockAxios;
|
2020-05-06 09:10:02 +00:00
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
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 = {} } = {}) => {
|
2021-02-24 21:11:16 +00:00
|
|
|
wrapper = shallowMount(PipelineArtifacts, {
|
2021-05-07 12:10:27 +00:00
|
|
|
provide: {
|
|
|
|
artifactsEndpoint,
|
|
|
|
artifactsEndpointPlaceholder,
|
|
|
|
},
|
2020-05-06 09:10:02 +00:00
|
|
|
propsData: {
|
2021-05-07 12:10:27 +00:00
|
|
|
pipelineId,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
...mockData,
|
|
|
|
};
|
2020-05-06 09:10:02 +00:00
|
|
|
},
|
2021-02-24 21:11:16 +00:00
|
|
|
stubs: {
|
|
|
|
GlSprintf,
|
|
|
|
},
|
2020-05-06 09:10:02 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
const findAlert = () => wrapper.findComponent(GlAlert);
|
|
|
|
const findDropdown = () => wrapper.findComponent(GlDropdown);
|
|
|
|
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
|
2021-01-08 18:10:43 +00:00
|
|
|
const findFirstGlDropdownItem = () => wrapper.find(GlDropdownItem);
|
|
|
|
const findAllGlDropdownItems = () => wrapper.find(GlDropdown).findAll(GlDropdownItem);
|
2020-05-06 09:10:02 +00:00
|
|
|
|
|
|
|
beforeEach(() => {
|
2021-05-07 12:10:27 +00:00
|
|
|
mockAxios = new MockAdapter(axios);
|
2020-05-06 09:10:02 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
|
2020-05-06 09:10:02 +00:00
|
|
|
it('should render a dropdown with all the provided artifacts', () => {
|
2021-05-07 12:10:27 +00:00
|
|
|
createComponent({ mockData: { artifacts } });
|
|
|
|
|
|
|
|
expect(findAllGlDropdownItems()).toHaveLength(artifacts.length);
|
2020-05-06 09:10:02 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should render a link with the provided path', () => {
|
2021-05-07 12:10:27 +00:00
|
|
|
createComponent({ mockData: { artifacts } });
|
2020-05-06 09:10:02 +00:00
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
expect(findFirstGlDropdownItem().attributes('href')).toBe(artifacts[0].path);
|
2021-10-08 21:09:48 +00:00
|
|
|
expect(findFirstGlDropdownItem().text()).toBe(artifacts[0].name);
|
2021-05-07 12:10:27 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
2020-05-06 09:10:02 +00:00
|
|
|
});
|
|
|
|
});
|