2021-04-17 20:07:23 +05:30
|
|
|
import { GlDropdown } from '@gitlab/ui';
|
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2022-07-16 23:28:13 +05:30
|
|
|
import CiIcon from '~/vue_shared/components/ci_icon.vue';
|
2021-04-17 20:07:23 +05:30
|
|
|
import axios from '~/lib/utils/axios_utils';
|
|
|
|
import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue';
|
|
|
|
import eventHub from '~/pipelines/event_hub';
|
2022-07-23 23:45:48 +05:30
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
2021-04-17 20:07:23 +05:30
|
|
|
import { stageReply } from '../../mock_data';
|
|
|
|
|
|
|
|
const dropdownPath = 'path.json';
|
|
|
|
|
|
|
|
describe('Pipelines stage component', () => {
|
|
|
|
let wrapper;
|
|
|
|
let mock;
|
2021-04-29 21:17:54 +05:30
|
|
|
let glTooltipDirectiveMock;
|
2021-04-17 20:07:23 +05:30
|
|
|
|
|
|
|
const createComponent = (props = {}) => {
|
2021-04-29 21:17:54 +05:30
|
|
|
glTooltipDirectiveMock = jest.fn();
|
2021-04-17 20:07:23 +05:30
|
|
|
wrapper = mount(PipelineStage, {
|
|
|
|
attachTo: document.body,
|
2021-04-29 21:17:54 +05:30
|
|
|
directives: {
|
|
|
|
GlTooltip: glTooltipDirectiveMock,
|
|
|
|
},
|
2021-04-17 20:07:23 +05:30
|
|
|
propsData: {
|
|
|
|
stage: {
|
|
|
|
status: {
|
|
|
|
group: 'success',
|
|
|
|
icon: 'status_success',
|
|
|
|
title: 'success',
|
|
|
|
},
|
|
|
|
dropdown_path: dropdownPath,
|
|
|
|
},
|
|
|
|
updateDropdown: false,
|
|
|
|
...props,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
jest.spyOn(eventHub, '$emit');
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
|
|
|
|
eventHub.$emit.mockRestore();
|
|
|
|
mock.restore();
|
|
|
|
});
|
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
const findCiActionBtn = () => wrapper.find('.js-ci-action');
|
|
|
|
const findCiIcon = () => wrapper.findComponent(CiIcon);
|
2021-04-17 20:07:23 +05:30
|
|
|
const findDropdown = () => wrapper.findComponent(GlDropdown);
|
|
|
|
const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
|
|
|
|
const findDropdownMenu = () =>
|
|
|
|
wrapper.find('[data-testid="mini-pipeline-graph-dropdown-menu-list"]');
|
2022-07-23 23:45:48 +05:30
|
|
|
const findDropdownMenuTitle = () =>
|
|
|
|
wrapper.find('[data-testid="pipeline-stage-dropdown-menu-title"]');
|
2021-04-17 20:07:23 +05:30
|
|
|
const findMergeTrainWarning = () => wrapper.find('[data-testid="warning-message-merge-trains"]');
|
2022-07-23 23:45:48 +05:30
|
|
|
const findLoadingState = () => wrapper.find('[data-testid="pipeline-stage-loading-state"]');
|
2021-04-17 20:07:23 +05:30
|
|
|
|
|
|
|
const openStageDropdown = () => {
|
|
|
|
findDropdownToggle().trigger('click');
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
wrapper.vm.$root.$on('bv::dropdown::show', resolve);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2022-07-23 23:45:48 +05:30
|
|
|
describe('loading state', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
createComponent({ updateDropdown: true });
|
|
|
|
|
|
|
|
mock.onGet(dropdownPath).reply(200, stageReply);
|
|
|
|
|
|
|
|
await openStageDropdown();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays loading state while jobs are being fetched', () => {
|
|
|
|
expect(findLoadingState().exists()).toBe(true);
|
|
|
|
expect(findLoadingState().text()).toBe(PipelineStage.i18n.loadingText);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display loading state after jobs have been fetched', async () => {
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(findLoadingState().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2021-04-17 20:07:23 +05:30
|
|
|
describe('default appearance', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
it('sets up the tooltip to not have a show delay animation', () => {
|
|
|
|
expect(glTooltipDirectiveMock.mock.calls[0][1].modifiers.ds0).toBe(true);
|
|
|
|
});
|
|
|
|
|
2021-04-17 20:07:23 +05:30
|
|
|
it('should render a dropdown with the status icon', () => {
|
|
|
|
expect(findDropdown().exists()).toBe(true);
|
|
|
|
expect(findDropdownToggle().exists()).toBe(true);
|
2022-07-16 23:28:13 +05:30
|
|
|
expect(findCiIcon().exists()).toBe(true);
|
2021-04-17 20:07:23 +05:30
|
|
|
});
|
2022-07-23 23:45:48 +05:30
|
|
|
|
|
|
|
it('should render a borderless ci-icon', () => {
|
|
|
|
expect(findCiIcon().exists()).toBe(true);
|
|
|
|
expect(findCiIcon().props('isBorderless')).toBe(true);
|
|
|
|
expect(findCiIcon().classes('borderless')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render a ci-icon with a custom border class', () => {
|
|
|
|
expect(findCiIcon().exists()).toBe(true);
|
|
|
|
expect(findCiIcon().classes('gl-border')).toBe(true);
|
|
|
|
});
|
2021-04-17 20:07:23 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('when update dropdown is changed', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when user opens dropdown and stage request is successful', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
mock.onGet(dropdownPath).reply(200, stageReply);
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
await openStageDropdown();
|
|
|
|
await axios.waitForAll();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render the received data and emit `clickedDropdown` event', async () => {
|
|
|
|
expect(findDropdownMenu().text()).toContain(stageReply.latest_statuses[0].name);
|
2022-07-23 23:45:48 +05:30
|
|
|
expect(findDropdownMenuTitle().text()).toContain(stageReply.name);
|
2021-04-17 20:07:23 +05:30
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should refresh when updateDropdown is set to true', async () => {
|
|
|
|
expect(mock.history.get).toHaveLength(1);
|
|
|
|
|
|
|
|
wrapper.setProps({ updateDropdown: true });
|
|
|
|
await axios.waitForAll();
|
|
|
|
|
|
|
|
expect(mock.history.get).toHaveLength(2);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when user opens dropdown and stage request fails', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
mock.onGet(dropdownPath).reply(500);
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
await openStageDropdown();
|
|
|
|
await axios.waitForAll();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should close the dropdown', () => {
|
|
|
|
expect(findDropdown().classes('show')).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('update endpoint correctly', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
const copyStage = { ...stageReply };
|
|
|
|
copyStage.latest_statuses[0].name = 'this is the updated content';
|
|
|
|
mock.onGet('bar.json').reply(200, copyStage);
|
|
|
|
createComponent({
|
|
|
|
stage: {
|
|
|
|
status: {
|
|
|
|
group: 'running',
|
|
|
|
icon: 'status_running',
|
|
|
|
title: 'running',
|
|
|
|
},
|
|
|
|
dropdown_path: 'bar.json',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
await axios.waitForAll();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should update the stage to request the new endpoint provided', async () => {
|
|
|
|
await openStageDropdown();
|
|
|
|
await axios.waitForAll();
|
|
|
|
|
|
|
|
expect(findDropdownMenu().text()).toContain('this is the updated content');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('pipelineActionRequestComplete', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mock.onGet(dropdownPath).reply(200, stageReply);
|
|
|
|
mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
|
|
|
|
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
const clickCiAction = async () => {
|
|
|
|
await openStageDropdown();
|
|
|
|
await axios.waitForAll();
|
|
|
|
|
|
|
|
findCiActionBtn().trigger('click');
|
|
|
|
await axios.waitForAll();
|
|
|
|
};
|
|
|
|
|
|
|
|
it('closes dropdown when job item action is clicked', async () => {
|
|
|
|
const hidden = jest.fn();
|
|
|
|
|
|
|
|
wrapper.vm.$root.$on('bv::dropdown::hide', hidden);
|
|
|
|
|
|
|
|
expect(hidden).toHaveBeenCalledTimes(0);
|
|
|
|
|
|
|
|
await clickCiAction();
|
|
|
|
|
|
|
|
expect(hidden).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('emits `pipelineActionRequestComplete` when job item action is clicked', async () => {
|
|
|
|
await clickCiAction();
|
|
|
|
|
|
|
|
expect(wrapper.emitted('pipelineActionRequestComplete')).toHaveLength(1);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('With merge trains enabled', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
mock.onGet(dropdownPath).reply(200, stageReply);
|
|
|
|
createComponent({
|
|
|
|
isMergeTrain: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
await openStageDropdown();
|
|
|
|
await axios.waitForAll();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows a warning on the dropdown', () => {
|
|
|
|
const warning = findMergeTrainWarning();
|
|
|
|
|
|
|
|
expect(warning.text()).toBe('Merge train pipeline jobs can not be retried');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('With merge trains disabled', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
mock.onGet(dropdownPath).reply(200, stageReply);
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
await openStageDropdown();
|
|
|
|
await axios.waitForAll();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not show a warning on the dropdown', () => {
|
|
|
|
const warning = findMergeTrainWarning();
|
|
|
|
|
|
|
|
expect(warning.exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|