2019-12-21 20:55:43 +05:30
|
|
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
|
|
|
import Vuex from 'vuex';
|
2021-01-29 00:20:46 +05:30
|
|
|
import { GlLoadingIcon, GlTab } from '@gitlab/ui';
|
2020-01-01 13:55:28 +05:30
|
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
2020-10-24 23:57:45 +05:30
|
|
|
import { pipelines } from 'jest/ide/mock_data';
|
2019-12-21 20:55:43 +05:30
|
|
|
import List from '~/ide/components/pipelines/list.vue';
|
|
|
|
import JobsList from '~/ide/components/jobs/list.vue';
|
|
|
|
import CiIcon from '~/vue_shared/components/ci_icon.vue';
|
2020-05-24 23:13:21 +05:30
|
|
|
import IDEServices from '~/ide/services';
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
localVue.use(Vuex);
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
jest.mock('~/ide/services', () => ({
|
|
|
|
pingUsage: jest.fn(),
|
|
|
|
}));
|
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
describe('IDE pipelines list', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
const defaultState = {
|
|
|
|
links: { ciHelpPagePath: TEST_HOST },
|
|
|
|
pipelinesEmptyStateSvgPath: TEST_HOST,
|
2020-11-24 15:15:51 +05:30
|
|
|
};
|
|
|
|
const defaultPipelinesState = {
|
|
|
|
stages: [],
|
|
|
|
failedStages: [],
|
|
|
|
isLoadingJobs: false,
|
2019-12-21 20:55:43 +05:30
|
|
|
};
|
|
|
|
|
|
|
|
const fetchLatestPipelineMock = jest.fn();
|
2020-05-24 23:13:21 +05:30
|
|
|
const pingUsageMock = jest.fn();
|
2019-12-21 20:55:43 +05:30
|
|
|
const failedStagesGetterMock = jest.fn().mockReturnValue([]);
|
2020-05-24 23:13:21 +05:30
|
|
|
const fakeProjectPath = 'alpha/beta';
|
2019-12-21 20:55:43 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
const createStore = (rootState, pipelinesState) => {
|
|
|
|
return new Vuex.Store({
|
2020-05-24 23:13:21 +05:30
|
|
|
getters: {
|
|
|
|
currentProject: () => ({ web_url: 'some/url ', path_with_namespace: fakeProjectPath }),
|
|
|
|
},
|
2019-12-21 20:55:43 +05:30
|
|
|
state: {
|
2020-11-24 15:15:51 +05:30
|
|
|
...defaultState,
|
|
|
|
...rootState,
|
2019-12-21 20:55:43 +05:30
|
|
|
},
|
|
|
|
modules: {
|
|
|
|
pipelines: {
|
|
|
|
namespaced: true,
|
|
|
|
state: {
|
2020-11-24 15:15:51 +05:30
|
|
|
...defaultPipelinesState,
|
2019-12-21 20:55:43 +05:30
|
|
|
...pipelinesState,
|
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
fetchLatestPipeline: fetchLatestPipelineMock,
|
2020-05-24 23:13:21 +05:30
|
|
|
pingUsage: pingUsageMock,
|
2019-12-21 20:55:43 +05:30
|
|
|
},
|
|
|
|
getters: {
|
|
|
|
jobsCount: () => 1,
|
|
|
|
failedJobsCount: () => 1,
|
|
|
|
failedStages: failedStagesGetterMock,
|
|
|
|
pipelineFailed: () => false,
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
fetchLatestPipeline: jest.fn(),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
2020-11-24 15:15:51 +05:30
|
|
|
};
|
2019-12-21 20:55:43 +05:30
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
const createComponent = (state = {}, pipelinesState = {}) => {
|
2019-12-21 20:55:43 +05:30
|
|
|
wrapper = shallowMount(List, {
|
|
|
|
localVue,
|
2020-11-24 15:15:51 +05:30
|
|
|
store: createStore(state, pipelinesState),
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('fetches latest pipeline', () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
expect(fetchLatestPipelineMock).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('pings pipeline usage', () => {
|
|
|
|
createComponent();
|
|
|
|
expect(IDEServices.pingUsage).toHaveBeenCalledWith(fakeProjectPath);
|
|
|
|
});
|
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
describe('when loading', () => {
|
|
|
|
let defaultPipelinesLoadingState;
|
2020-11-24 15:15:51 +05:30
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
beforeAll(() => {
|
|
|
|
defaultPipelinesLoadingState = {
|
|
|
|
isLoadingPipeline: true,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render when pipeline has loaded before', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent(
|
|
|
|
{},
|
|
|
|
{
|
2019-12-21 20:55:43 +05:30
|
|
|
...defaultPipelinesLoadingState,
|
|
|
|
hasLoadedPipeline: true,
|
|
|
|
},
|
2020-11-24 15:15:51 +05:30
|
|
|
);
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders loading state', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent(
|
|
|
|
{},
|
|
|
|
{
|
2019-12-21 20:55:43 +05:30
|
|
|
...defaultPipelinesLoadingState,
|
|
|
|
hasLoadedPipeline: false,
|
|
|
|
},
|
2020-11-24 15:15:51 +05:30
|
|
|
);
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when loaded', () => {
|
|
|
|
let defaultPipelinesLoadedState;
|
2020-11-24 15:15:51 +05:30
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
beforeAll(() => {
|
|
|
|
defaultPipelinesLoadedState = {
|
|
|
|
isLoadingPipeline: false,
|
|
|
|
hasLoadedPipeline: true,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders empty state when no latestPipeline', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent({}, { ...defaultPipelinesLoadedState, latestPipeline: null });
|
2019-12-21 20:55:43 +05:30
|
|
|
expect(wrapper.element).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with latest pipeline loaded', () => {
|
|
|
|
let withLatestPipelineState;
|
2020-11-24 15:15:51 +05:30
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
beforeAll(() => {
|
|
|
|
withLatestPipelineState = {
|
|
|
|
...defaultPipelinesLoadedState,
|
|
|
|
latestPipeline: pipelines[0],
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders ci icon', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent({}, withLatestPipelineState);
|
2019-12-21 20:55:43 +05:30
|
|
|
expect(wrapper.find(CiIcon).exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders pipeline data', () => {
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent({}, withLatestPipelineState);
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
expect(wrapper.text()).toContain('#1');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders list of jobs', () => {
|
|
|
|
const stages = [];
|
|
|
|
const isLoadingJobs = true;
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent({}, { ...withLatestPipelineState, stages, isLoadingJobs });
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
const jobProps = wrapper
|
2021-01-29 00:20:46 +05:30
|
|
|
.findAll(GlTab)
|
2019-12-21 20:55:43 +05:30
|
|
|
.at(0)
|
|
|
|
.find(JobsList)
|
|
|
|
.props();
|
|
|
|
expect(jobProps.stages).toBe(stages);
|
|
|
|
expect(jobProps.loading).toBe(isLoadingJobs);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders list of failed jobs', () => {
|
|
|
|
const failedStages = [];
|
|
|
|
failedStagesGetterMock.mockReset().mockReturnValue(failedStages);
|
|
|
|
const isLoadingJobs = true;
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent({}, { ...withLatestPipelineState, isLoadingJobs });
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
const jobProps = wrapper
|
2021-01-29 00:20:46 +05:30
|
|
|
.findAll(GlTab)
|
2019-12-21 20:55:43 +05:30
|
|
|
.at(1)
|
|
|
|
.find(JobsList)
|
|
|
|
.props();
|
|
|
|
expect(jobProps.stages).toBe(failedStages);
|
|
|
|
expect(jobProps.loading).toBe(isLoadingJobs);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with YAML error', () => {
|
|
|
|
it('renders YAML error', () => {
|
|
|
|
const yamlError = 'test yaml error';
|
2020-11-24 15:15:51 +05:30
|
|
|
createComponent(
|
|
|
|
{},
|
|
|
|
{
|
2019-12-21 20:55:43 +05:30
|
|
|
...defaultPipelinesLoadedState,
|
|
|
|
latestPipeline: { ...pipelines[0], yamlError },
|
|
|
|
},
|
2020-11-24 15:15:51 +05:30
|
|
|
);
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
expect(wrapper.text()).toContain('Found errors in your .gitlab-ci.yml:');
|
|
|
|
expect(wrapper.text()).toContain(yamlError);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|