debian-mirror-gitlab/spec/frontend/pipelines/pipelines_table_spec.js

214 lines
6.9 KiB
JavaScript
Raw Normal View History

2021-06-08 01:23:25 +05:30
import '~/commons';
2021-12-11 22:18:48 +05:30
import { GlTableLite } from '@gitlab/ui';
2020-05-24 23:13:21 +05:30
import { mount } from '@vue/test-utils';
2021-11-18 22:05:49 +05:30
import fixture from 'test_fixtures/pipelines/pipelines.json';
2022-10-11 01:57:18 +05:30
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
2021-04-17 20:07:23 +05:30
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
2022-10-11 01:57:18 +05:30
import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
2021-04-17 20:07:23 +05:30
import PipelineOperations from '~/pipelines/components/pipelines_list/pipeline_operations.vue';
import PipelineTriggerer from '~/pipelines/components/pipelines_list/pipeline_triggerer.vue';
import PipelineUrl from '~/pipelines/components/pipelines_list/pipeline_url.vue';
2020-07-28 23:09:34 +05:30
import PipelinesTable from '~/pipelines/components/pipelines_list/pipelines_table.vue';
2021-04-17 20:07:23 +05:30
import PipelinesTimeago from '~/pipelines/components/pipelines_list/time_ago.vue';
2022-04-04 11:22:00 +05:30
import {
PipelineKeyOptions,
BUTTON_TOOLTIP_RETRY,
BUTTON_TOOLTIP_CANCEL,
2022-10-11 01:57:18 +05:30
TRACKING_CATEGORIES,
2022-04-04 11:22:00 +05:30
} from '~/pipelines/constants';
2021-04-17 20:07:23 +05:30
import eventHub from '~/pipelines/event_hub';
2021-06-08 01:23:25 +05:30
import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
2021-04-17 20:07:23 +05:30
jest.mock('~/pipelines/event_hub');
2020-05-24 23:13:21 +05:30
describe('Pipelines Table', () => {
let pipeline;
let wrapper;
2022-10-11 01:57:18 +05:30
let trackingSpy;
2020-05-24 23:13:21 +05:30
const defaultProps = {
pipelines: [],
viewType: 'root',
2021-10-27 15:23:28 +05:30
pipelineKeyOption: PipelineKeyOptions[0],
2020-05-24 23:13:21 +05:30
};
2021-04-17 20:07:23 +05:30
const createMockPipeline = () => {
2021-11-18 22:05:49 +05:30
// Clone fixture as it could be modified by tests
const { pipelines } = JSON.parse(JSON.stringify(fixture));
2021-04-17 20:07:23 +05:30
return pipelines.find((p) => p.user !== null && p.commit !== null);
2020-05-24 23:13:21 +05:30
};
2022-05-07 20:08:51 +05:30
const createComponent = (props = {}) => {
2021-04-17 20:07:23 +05:30
wrapper = extendedWrapper(
mount(PipelinesTable, {
propsData: {
...defaultProps,
...props,
},
}),
);
};
2020-05-24 23:13:21 +05:30
2021-12-11 22:18:48 +05:30
const findGlTableLite = () => wrapper.findComponent(GlTableLite);
2021-06-08 01:23:25 +05:30
const findStatusBadge = () => wrapper.findComponent(CiBadge);
2021-04-17 20:07:23 +05:30
const findPipelineInfo = () => wrapper.findComponent(PipelineUrl);
const findTriggerer = () => wrapper.findComponent(PipelineTriggerer);
const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
const findTimeAgo = () => wrapper.findComponent(PipelinesTimeago);
const findActions = () => wrapper.findComponent(PipelineOperations);
2021-04-29 21:17:54 +05:30
const findTableRows = () => wrapper.findAllByTestId('pipeline-table-row');
2021-04-17 20:07:23 +05:30
const findStatusTh = () => wrapper.findByTestId('status-th');
const findPipelineTh = () => wrapper.findByTestId('pipeline-th');
const findStagesTh = () => wrapper.findByTestId('stages-th');
const findActionsTh = () => wrapper.findByTestId('actions-th');
2022-04-04 11:22:00 +05:30
const findRetryBtn = () => wrapper.findByTestId('pipelines-retry-button');
const findCancelBtn = () => wrapper.findByTestId('pipelines-cancel-button');
2020-05-24 23:13:21 +05:30
2021-04-17 20:07:23 +05:30
beforeEach(() => {
pipeline = createMockPipeline();
2020-05-24 23:13:21 +05:30
});
afterEach(() => {
wrapper.destroy();
2022-10-11 01:57:18 +05:30
2020-05-24 23:13:21 +05:30
wrapper = null;
});
2022-05-07 20:08:51 +05:30
describe('Pipelines Table', () => {
2021-04-17 20:07:23 +05:30
beforeEach(() => {
2021-04-29 21:17:54 +05:30
createComponent({ pipelines: [pipeline], viewType: 'root' });
2021-04-17 20:07:23 +05:30
});
2021-04-29 21:17:54 +05:30
it('displays table', () => {
2021-12-11 22:18:48 +05:30
expect(findGlTableLite().exists()).toBe(true);
2021-04-17 20:07:23 +05:30
});
it('should render table head with correct columns', () => {
expect(findStatusTh().text()).toBe('Status');
2022-05-07 20:08:51 +05:30
expect(findPipelineTh().text()).toBe('Pipeline');
2021-04-17 20:07:23 +05:30
expect(findStagesTh().text()).toBe('Stages');
expect(findActionsTh().text()).toBe('Actions');
});
it('should display a table row', () => {
expect(findTableRows()).toHaveLength(1);
2020-05-24 23:13:21 +05:30
});
2021-04-17 20:07:23 +05:30
describe('status cell', () => {
it('should render a status badge', () => {
expect(findStatusBadge().exists()).toBe(true);
});
});
describe('pipeline cell', () => {
it('should render pipeline information', () => {
expect(findPipelineInfo().exists()).toBe(true);
});
it('should display the pipeline id', () => {
expect(findPipelineInfo().text()).toContain(`#${pipeline.id}`);
});
});
describe('stages cell', () => {
2022-10-11 01:57:18 +05:30
it('should render pipeline mini graph', () => {
2021-04-17 20:07:23 +05:30
expect(findPipelineMiniGraph().exists()).toBe(true);
});
it('should render the right number of stages', () => {
const stagesLength = pipeline.details.stages.length;
2022-10-11 01:57:18 +05:30
expect(findPipelineMiniGraph().props('stages').length).toBe(stagesLength);
2021-04-17 20:07:23 +05:30
});
describe('when pipeline does not have stages', () => {
beforeEach(() => {
pipeline = createMockPipeline();
2022-10-11 01:57:18 +05:30
pipeline.details.stages = [];
2021-04-17 20:07:23 +05:30
2022-05-07 20:08:51 +05:30
createComponent({ pipelines: [pipeline] });
2021-04-17 20:07:23 +05:30
});
it('stages are not rendered', () => {
2022-10-11 01:57:18 +05:30
expect(findPipelineMiniGraph().props('stages')).toHaveLength(0);
2021-04-17 20:07:23 +05:30
});
});
it('when action request is complete, should refresh table', () => {
findPipelineMiniGraph().vm.$emit('pipelineActionRequestComplete');
expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
});
});
describe('duration cell', () => {
it('should render duration information', () => {
expect(findTimeAgo().exists()).toBe(true);
});
});
2020-05-24 23:13:21 +05:30
2021-04-17 20:07:23 +05:30
describe('operations cell', () => {
it('should render pipeline operations', () => {
expect(findActions().exists()).toBe(true);
});
2022-04-04 11:22:00 +05:30
it('should render retry action tooltip', () => {
expect(findRetryBtn().attributes('title')).toBe(BUTTON_TOOLTIP_RETRY);
});
it('should render cancel action tooltip', () => {
expect(findCancelBtn().attributes('title')).toBe(BUTTON_TOOLTIP_CANCEL);
});
});
describe('triggerer cell', () => {
it('should render the pipeline triggerer', () => {
expect(findTriggerer().exists()).toBe(true);
});
});
2022-10-11 01:57:18 +05:30
describe('tracking', () => {
beforeEach(() => {
trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
});
afterEach(() => {
unmockTracking();
});
it('tracks status badge click', () => {
findStatusBadge().vm.$emit('ciStatusBadgeClick');
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_ci_status_badge', {
label: TRACKING_CATEGORIES.table,
});
});
it('tracks retry pipeline button click', () => {
findRetryBtn().vm.$emit('click');
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_retry_button', {
label: TRACKING_CATEGORIES.table,
});
});
it('tracks cancel pipeline button click', () => {
findCancelBtn().vm.$emit('click');
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_cancel_button', {
label: TRACKING_CATEGORIES.table,
});
});
it('tracks pipeline mini graph stage click', () => {
findPipelineMiniGraph().vm.$emit('miniGraphStageClick');
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_minigraph', {
label: TRACKING_CATEGORIES.table,
});
});
});
2020-05-24 23:13:21 +05:30
});
});