Skip to content

G
gitlab-ce
Commit b40d1ce7 authored by Miguel Rincon's avatar Miguel Rincon
Browse files
Options

Merge branch '320932-move-spec-to-vue-test-utils' into 'master' 

Refactor commit pipelines table spec

See merge request gitlab-org/gitlab!62031
parents fe88471c 38f3bf58
Show whitespace changes
Inline Side-by-side
Showing with 253 additions and 0 deletions
spec/frontend/commit/pipelines/pipelines_spec.js → spec/frontend/commit/pipelines/pipelines_table_spec.js
View file @ b40d1ce7
import '~/commons';
import { GlEmptyState, GlLoadingIcon, GlModal, GlTable } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import Api from '~/api';
import pipelinesTable from '~/commit/pipelines/pipelines_table.vue';
import PipelinesTable from '~/commit/pipelines/pipelines_table.vue';
import axios from '~/lib/utils/axios_utils';
describe('Pipelines table in Commits and Merge requests', () => {
const jsonFixtureName = 'pipelines/pipelines.json';
let wrapper;
let pipeline;
let PipelinesTable;
let mock;
let vm;
const props = {
const findRunPipelineBtn = () => wrapper.findByTestId('run_pipeline_button');
const findRunPipelineBtnMobile = () => wrapper.findByTestId('run_pipeline_button_mobile');
const findLoadingState = () => wrapper.findComponent(GlLoadingIcon);
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const findTable = () => wrapper.findComponent(GlTable);
const findTableRows = () => wrapper.findAllByTestId('pipeline-table-row');
const findModal = () => wrapper.findComponent(GlModal);
const createComponent = (props = {}) => {
wrapper = extendedWrapper(
mount(PipelinesTable, {
propsData: {
endpoint: 'endpoint.json',
emptyStateSvgPath: 'foo',
errorStateSvgPath: 'foo',
...props,
},
}),
);
};
const findRunPipelineBtn = () => vm.$el.querySelector('[data-testid="run_pipeline_button"]');
const findRunPipelineBtnMobile = () =>
vm.$el.querySelector('[data-testid="run_pipeline_button_mobile"]');
beforeEach(() => {
mock = new MockAdapter(axios);
const { pipelines } = getJSONFixture(jsonFixtureName);
PipelinesTable = Vue.extend(pipelinesTable);
pipeline = pipelines.find((p) => p.user !== null && p.commit !== null);
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
mock.restore();
});
describe('successful request', () => {
describe('without pipelines', () => {
beforeEach(() => {
beforeEach(async () => {
mock.onGet('endpoint.json').reply(200, []);
vm = mountComponent(PipelinesTable, props);
});
createComponent();
it('should render the empty state', (done) => {
setImmediate(() => {
expect(vm.$el.querySelector('.empty-state')).toBeDefined();
expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
expect(vm.$el.querySelector('.js-pipelines-error-state')).toBe(null);
done();
await waitForPromises();
});
it('should render the empty state', () => {
expect(findTableRows()).toHaveLength(0);
expect(findLoadingState().exists()).toBe(false);
expect(findEmptyState().exists()).toBe(false);
});
});
describe('with pipelines', () => {
beforeEach(() => {
beforeEach(async () => {
mock.onGet('endpoint.json').reply(200, [pipeline]);
vm = mountComponent(PipelinesTable, props);
});
it('should render a table with the received pipelines', (done) => {
setImmediate(() => {
expect(vm.$el.querySelectorAll('.ci-table .commit').length).toEqual(1);
expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
expect(vm.$el.querySelector('.empty-state')).toBe(null);
expect(vm.$el.querySelector('.js-pipelines-error-state')).toBe(null);
done();
createComponent();
await waitForPromises();
});
it('should render a table with the received pipelines', () => {
expect(findTable().exists()).toBe(true);
expect(findTableRows()).toHaveLength(1);
expect(findLoadingState().exists()).toBe(false);
expect(findEmptyState().exists()).toBe(false);
});
describe('with pagination', () => {
it('should make an API request when using pagination', (done) => {
setImmediate(() => {
jest.spyOn(vm, 'updateContent').mockImplementation(() => {});
it('should make an API request when using pagination', async () => {
jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
vm.store.state.pageInfo = {
await wrapper.setData({
store: {
state: {
pageInfo: {
page: 1,
total: 10,
perPage: 2,
nextPage: 2,
totalPages: 5,
};
},
},
},
});
vm.$nextTick(() => {
vm.$el.querySelector('.next-page-item').click();
wrapper.find('.next-page-item').trigger('click');
expect(vm.updateContent).toHaveBeenCalledWith({ page: '2' });
done();
});
});
});
expect(wrapper.vm.updateContent).toHaveBeenCalledWith({ page: '2' });
});
});
describe('pipeline badge counts', () => {
beforeEach(() => {
mock.onGet('endpoint.json').reply(200, [pipeline]);
});
it('should receive update-pipelines-count event', (done) => {
const element = document.createElement('div');
document.body.appendChild(element);
......@@ -108,9 +114,10 @@ describe('Pipelines table in Commits and Merge requests', () => {
done();
});
vm = mountComponent(PipelinesTable, props);
createComponent();
element.appendChild(vm.$el);
element.appendChild(wrapper.vm.$el);
});
});
});
});
......@@ -123,50 +130,44 @@ describe('Pipelines table in Commits and Merge requests', () => {
});
describe('when latest pipeline has detached flag', () => {
it('renders the run pipeline button', (done) => {
it('renders the run pipeline button', async () => {
pipelineCopy.flags.detached_merge_request_pipeline = true;
pipelineCopy.flags.merge_request_pipeline = true;
mock.onGet('endpoint.json').reply(200, [pipelineCopy]);
vm = mountComponent(PipelinesTable, { ...props });
createComponent();
setImmediate(() => {
expect(findRunPipelineBtn()).not.toBeNull();
expect(findRunPipelineBtnMobile()).not.toBeNull();
done();
});
await waitForPromises();
expect(findRunPipelineBtn().exists()).toBe(true);
expect(findRunPipelineBtnMobile().exists()).toBe(true);
});
});
describe('when latest pipeline does not have detached flag', () => {
it('does not render the run pipeline button', (done) => {
it('does not render the run pipeline button', async () => {
pipelineCopy.flags.detached_merge_request_pipeline = false;
pipelineCopy.flags.merge_request_pipeline = false;
mock.onGet('endpoint.json').reply(200, [pipelineCopy]);
vm = mountComponent(PipelinesTable, { ...props });
createComponent();
setImmediate(() => {
expect(findRunPipelineBtn()).toBeNull();
expect(findRunPipelineBtnMobile()).toBeNull();
done();
});
await waitForPromises();
expect(findRunPipelineBtn().exists()).toBe(false);
expect(findRunPipelineBtnMobile().exists()).toBe(false);
});
});
describe('on click', () => {
const findModal = () =>
document.querySelector('#create-pipeline-for-fork-merge-request-modal');
beforeEach((done) => {
beforeEach(async () => {
pipelineCopy.flags.detached_merge_request_pipeline = true;
mock.onGet('endpoint.json').reply(200, [pipelineCopy]);
vm = mountComponent(PipelinesTable, {
...props,
createComponent({
canRunPipeline: true,
projectId: '5',
mergeRequestId: 3,
......@@ -174,59 +175,38 @@ describe('Pipelines table in Commits and Merge requests', () => {
jest.spyOn(Api, 'postMergeRequestPipeline').mockReturnValue(Promise.resolve());
setImmediate(() => {
done();
});
await waitForPromises();
});
it('on desktop, shows a loading button', (done) => {
findRunPipelineBtn().click();
vm.$nextTick(() => {
expect(findModal()).toBeNull();
it('on desktop, shows a loading button', async () => {
await findRunPipelineBtn().trigger('click');
expect(findRunPipelineBtn().disabled).toBe(true);
expect(findRunPipelineBtn().querySelector('.gl-spinner')).not.toBeNull();
expect(findRunPipelineBtn().props('loading')).toBe(true);
setImmediate(() => {
expect(findRunPipelineBtn().disabled).toBe(false);
expect(findRunPipelineBtn().querySelector('.gl-spinner')).toBeNull();
await waitForPromises();
done();
});
expect(findRunPipelineBtn().props('loading')).toBe(false);
});
});
it('on mobile, shows a loading button', (done) => {
findRunPipelineBtnMobile().click();
vm.$nextTick(() => {
expect(findModal()).toBeNull();
it('on mobile, shows a loading button', async () => {
await findRunPipelineBtnMobile().trigger('click');
expect(findModal()).toBeNull();
expect(findRunPipelineBtn().querySelector('.gl-spinner')).not.toBeNull();
expect(findRunPipelineBtn().props('loading')).toBe(true);
setImmediate(() => {
expect(findRunPipelineBtn().disabled).toBe(false);
expect(findRunPipelineBtn().querySelector('.gl-spinner')).toBeNull();
await waitForPromises();
done();
});
});
expect(findRunPipelineBtn().props('disabled')).toBe(false);
expect(findRunPipelineBtn().props('loading')).toBe(false);
});
});
describe('on click for fork merge request', () => {
const findModal = () =>
document.querySelector('#create-pipeline-for-fork-merge-request-modal');
beforeEach((done) => {
beforeEach(async () => {
pipelineCopy.flags.detached_merge_request_pipeline = true;
mock.onGet('endpoint.json').reply(200, [pipelineCopy]);
vm = mountComponent(PipelinesTable, {
...props,
createComponent({
projectId: '5',
mergeRequestId: 3,
canCreatePipelineInTargetProject: true,
......@@ -236,45 +216,38 @@ describe('Pipelines table in Commits and Merge requests', () => {
jest.spyOn(Api, 'postMergeRequestPipeline').mockReturnValue(Promise.resolve());
setImmediate(() => {
done();
});
await waitForPromises();
});
it('on desktop, shows a security warning modal', (done) => {
findRunPipelineBtn().click();
it('on desktop, shows a security warning modal', async () => {
await findRunPipelineBtn().trigger('click');
await wrapper.vm.$nextTick();
vm.$nextTick(() => {
expect(findModal()).not.toBeNull();
done();
});
});
it('on mobile, shows a security warning modal', (done) => {
findRunPipelineBtnMobile().click();
it('on mobile, shows a security warning modal', async () => {
await findRunPipelineBtnMobile().trigger('click');
vm.$nextTick(() => {
expect(findModal()).not.toBeNull();
done();
});
});
});
});
describe('unsuccessfull request', () => {
beforeEach(() => {
beforeEach(async () => {
mock.onGet('endpoint.json').reply(500, []);
vm = mountComponent(PipelinesTable, props);
});
createComponent();
it('should render error state', (done) => {
setImmediate(() => {
expect(vm.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
expect(vm.$el.querySelector('.ci-table')).toBe(null);
done();
await waitForPromises();
});
it('should render error state', () => {
expect(findEmptyState().text()).toBe(
'There was an error fetching the pipelines. Try again in a few moments or contact your support team.',
);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7