Commit d5886f65 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'migrate-pipelines-specs' into 'master'

Migrate pipelines specs to Jest & VTU

See merge request gitlab-org/gitlab!19270
parents 02fca5ce 3f6a9851
import Vue from 'vue';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils';
import actionComponent from '~/pipelines/components/graph/action_component.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
import ActionComponent from '~/pipelines/components/graph/action_component.vue';
describe('pipeline graph action component', () => {
let component;
let wrapper;
let mock;
beforeEach(done => {
const ActionComponent = Vue.extend(actionComponent);
beforeEach(() => {
mock = new MockAdapter(axios);
mock.onPost('foo.json').reply(200);
component = mountComponent(ActionComponent, {
tooltipText: 'bar',
link: 'foo',
actionIcon: 'cancel',
wrapper = mount(ActionComponent, {
propsData: {
tooltipText: 'bar',
link: 'foo',
actionIcon: 'cancel',
},
sync: false,
});
Vue.nextTick(done);
});
afterEach(() => {
mock.restore();
component.$destroy();
wrapper.destroy();
});
it('should render the provided title as a bootstrap tooltip', () => {
expect(component.$el.getAttribute('data-original-title')).toEqual('bar');
expect(wrapper.attributes('data-original-title')).toBe('bar');
});
it('should update bootstrap tooltip when title changes', done => {
component.tooltipText = 'changed';
wrapper.setProps({ tooltipText: 'changed' });
component
wrapper.vm
.$nextTick()
.then(() => {
expect(component.$el.getAttribute('data-original-title')).toBe('changed');
expect(wrapper.attributes('data-original-title')).toBe('changed');
})
.then(done)
.catch(done.fail);
});
it('should render an svg', () => {
expect(component.$el.querySelector('.ci-action-icon-wrapper')).toBeDefined();
expect(component.$el.querySelector('svg')).toBeDefined();
expect(wrapper.find('.ci-action-icon-wrapper')).toBeDefined();
expect(wrapper.find('svg')).toBeDefined();
});
describe('on click', () => {
it('emits `pipelineActionRequestComplete` after a successful request', done => {
spyOn(component, '$emit');
component.$el.click();
jest.spyOn(wrapper.vm, '$emit');
setTimeout(() => {
component
.$nextTick()
.then(() => {
expect(component.$emit).toHaveBeenCalledWith('pipelineActionRequestComplete');
})
.catch(done.fail);
wrapper.find('button').trigger('click');
done();
}, 0);
waitForPromises()
.then(() => {
expect(wrapper.vm.$emit).toHaveBeenCalledWith('pipelineActionRequestComplete');
done();
})
.catch(done.fail);
});
it('renders a loading icon while waiting for request', done => {
component.$el.click();
wrapper.find('button').trigger('click');
component.$nextTick(() => {
expect(component.$el.querySelector('.js-action-icon-loading')).not.toBeNull();
setTimeout(() => {
done();
});
wrapper.vm.$nextTick(() => {
expect(wrapper.find('.js-action-icon-loading').exists()).toBe(true);
done();
});
});
});
......
......@@ -17,6 +17,7 @@ describe('Pipelines Triggerer', () => {
const createComponent = () => {
wrapper = mount(pipelineTriggerer, {
propsData: mockData,
sync: false,
});
};
......@@ -49,6 +50,8 @@ describe('Pipelines Triggerer', () => {
},
});
expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
wrapper.vm.$nextTick(() => {
expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
});
});
});
import Vue from 'vue';
import tableRowComp from '~/pipelines/components/pipelines_table_row.vue';
import { mount } from '@vue/test-utils';
import PipelinesTableRowComponent from '~/pipelines/components/pipelines_table_row.vue';
import eventHub from '~/pipelines/event_hub';
describe('Pipelines Table Row', () => {
const jsonFixtureName = 'pipelines/pipelines.json';
const buildComponent = pipeline => {
const PipelinesTableRowComponent = Vue.extend(tableRowComp);
return new PipelinesTableRowComponent({
el: document.querySelector('.test-dom-element'),
const createWrapper = pipeline =>
mount(PipelinesTableRowComponent, {
propsData: {
pipeline,
autoDevopsHelpPath: 'foo',
viewType: 'root',
},
}).$mount();
};
sync: false,
});
let component;
let wrapper;
let pipeline;
let pipelineWithoutAuthor;
let pipelineWithoutCommit;
......@@ -32,28 +31,29 @@ describe('Pipelines Table Row', () => {
});
afterEach(() => {
component.$destroy();
wrapper.destroy();
wrapper = null;
});
it('should render a table row', () => {
component = buildComponent(pipeline);
wrapper = createWrapper(pipeline);
expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
expect(wrapper.attributes('class')).toContain('gl-responsive-table-row');
});
describe('status column', () => {
beforeEach(() => {
component = buildComponent(pipeline);
wrapper = createWrapper(pipeline);
});
it('should render a pipeline link', () => {
expect(
component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
).toEqual(pipeline.path);
expect(wrapper.find('.table-section.commit-link a').attributes('href')).toEqual(
pipeline.path,
);
});
it('should render status text', () => {
expect(component.$el.querySelector('.table-section.commit-link a').textContent).toContain(
expect(wrapper.find('.table-section.commit-link a').text()).toContain(
pipeline.details.status.text,
);
});
......@@ -61,33 +61,32 @@ describe('Pipelines Table Row', () => {
describe('information column', () => {
beforeEach(() => {
component = buildComponent(pipeline);
wrapper = createWrapper(pipeline);
});
it('should render a pipeline link', () => {
expect(
component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
).toEqual(pipeline.path);
expect(wrapper.find('.table-section:nth-child(2) a').attributes('href')).toEqual(
pipeline.path,
);
});
it('should render pipeline ID', () => {
expect(
component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
).toEqual(`#${pipeline.id}`);
expect(wrapper.find('.table-section:nth-child(2) a > span').text()).toEqual(
`#${pipeline.id}`,
);
});
describe('when a user is provided', () => {
it('should render user information', () => {
expect(
component.$el
.querySelector('.table-section:nth-child(3) .js-pipeline-url-user')
.getAttribute('href'),
wrapper.find('.table-section:nth-child(3) .js-pipeline-url-user').attributes('href'),
).toEqual(pipeline.user.path);
expect(
component.$el
.querySelector('.table-section:nth-child(3) .js-user-avatar-image-toolip')
.textContent.trim(),
wrapper
.find('.table-section:nth-child(3) .js-user-avatar-image-toolip')
.text()
.trim(),
).toEqual(pipeline.user.name);
});
});
......@@ -95,40 +94,47 @@ describe('Pipelines Table Row', () => {
describe('commit column', () => {
it('should render link to commit', () => {
component = buildComponent(pipeline);
wrapper = createWrapper(pipeline);
const commitLink = component.$el.querySelector('.branch-commit .commit-sha');
const commitLink = wrapper.find('.branch-commit .commit-sha');
expect(commitLink.getAttribute('href')).toEqual(pipeline.commit.commit_path);
expect(commitLink.attributes('href')).toEqual(pipeline.commit.commit_path);
});
const findElements = () => {
const commitTitleElement = component.$el.querySelector('.branch-commit .commit-title');
const commitAuthorElement = commitTitleElement.querySelector('a.avatar-image-container');
const commitTitleElement = wrapper.find('.branch-commit .commit-title');
const commitAuthorElement = commitTitleElement.find('a.avatar-image-container');
if (!commitAuthorElement) {
return { commitAuthorElement };
if (!commitAuthorElement.exists()) {
return {
commitAuthorElement,
};
}
const commitAuthorLink = commitAuthorElement.getAttribute('href');
const commitAuthorLink = commitAuthorElement.attributes('href');
const commitAuthorName = commitAuthorElement
.querySelector('.js-user-avatar-image-toolip')
.textContent.trim();
return { commitAuthorElement, commitAuthorLink, commitAuthorName };
.find('.js-user-avatar-image-toolip')
.text()
.trim();
return {
commitAuthorElement,
commitAuthorLink,
commitAuthorName,
};
};
it('renders nothing without commit', () => {
expect(pipelineWithoutCommit.commit).toBe(null);
component = buildComponent(pipelineWithoutCommit);
wrapper = createWrapper(pipelineWithoutCommit);
const { commitAuthorElement } = findElements();
expect(commitAuthorElement).toBe(null);
expect(commitAuthorElement.exists()).toBe(false);
});
it('renders commit author', () => {
component = buildComponent(pipeline);
wrapper = createWrapper(pipeline);
const { commitAuthorLink, commitAuthorName } = findElements();
expect(commitAuthorLink).toEqual(pipeline.commit.author.path);
......@@ -137,8 +143,8 @@ describe('Pipelines Table Row', () => {
it('renders commit with unregistered author', () => {
expect(pipelineWithoutAuthor.commit.author).toBe(null);
component = buildComponent(pipelineWithoutAuthor);
wrapper = createWrapper(pipelineWithoutAuthor);
const { commitAuthorLink, commitAuthorName } = findElements();
expect(commitAuthorLink).toEqual(`mailto:${pipelineWithoutAuthor.commit.author_email}`);
......@@ -148,13 +154,12 @@ describe('Pipelines Table Row', () => {
describe('stages column', () => {
beforeEach(() => {
component = buildComponent(pipeline);
wrapper = createWrapper(pipeline);
});
it('should render an icon for each stage', () => {
expect(
component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button')
.length,
wrapper.findAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
).toEqual(pipeline.details.stages.length);
});
});
......@@ -172,44 +177,49 @@ describe('Pipelines Table Row', () => {
withActions.cancel_path = '/cancel';
withActions.retry_path = '/retry';
component = buildComponent(withActions);
wrapper = createWrapper(withActions);
});
it('should render the provided actions', () => {
expect(component.$el.querySelector('.js-pipelines-retry-button')).not.toBeNull();
expect(component.$el.querySelector('.js-pipelines-cancel-button')).not.toBeNull();
const dropdownMenu = component.$el.querySelectorAll('.dropdown-menu');
expect(wrapper.find('.js-pipelines-retry-button').exists()).toBe(true);
expect(wrapper.find('.js-pipelines-cancel-button').exists()).toBe(true);
const dropdownMenu = wrapper.find('.dropdown-menu');
expect(dropdownMenu).toContainText(scheduledJobAction.name);
expect(dropdownMenu.text()).toContain(scheduledJobAction.name);
});
it('emits `retryPipeline` event when retry button is clicked and toggles loading', () => {
eventHub.$on('retryPipeline', endpoint => {
expect(endpoint).toEqual('/retry');
expect(endpoint).toBe('/retry');
});
component.$el.querySelector('.js-pipelines-retry-button').click();
expect(component.isRetrying).toEqual(true);
wrapper.find('.js-pipelines-retry-button').trigger('click');
expect(wrapper.vm.isRetrying).toBe(true);
});
it('emits `openConfirmationModal` event when cancel button is clicked and toggles loading', () => {
eventHub.$once('openConfirmationModal', data => {
const { id, ref, commit } = pipeline;
expect(data.endpoint).toEqual('/cancel');
expect(data.pipeline).toEqual(jasmine.objectContaining({ id, ref, commit }));
expect(data.endpoint).toBe('/cancel');
expect(data.pipeline).toEqual(
expect.objectContaining({
id,
ref,
commit,
}),
);
});
component.$el.querySelector('.js-pipelines-cancel-button').click();
wrapper.find('.js-pipelines-cancel-button').trigger('click');
});
it('renders a loading icon when `cancelingPipeline` matches pipeline id', done => {
component.cancelingPipeline = pipeline.id;
component
wrapper.setProps({ cancelingPipeline: pipeline.id });
wrapper.vm
.$nextTick()
.then(() => {
expect(component.isCancelling).toEqual(true);
expect(wrapper.vm.isCancelling).toBe(true);
})
.then(done)
.catch(done.fail);
......
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