109 lines
3 KiB
JavaScript
109 lines
3 KiB
JavaScript
import Vue from 'vue';
|
|
import headerComponent from '~/pipelines/components/header_component.vue';
|
|
import eventHub from '~/pipelines/event_hub';
|
|
|
|
describe('Pipeline details header', () => {
|
|
let HeaderComponent;
|
|
let vm;
|
|
let props;
|
|
|
|
beforeEach(() => {
|
|
spyOn(eventHub, '$emit');
|
|
HeaderComponent = Vue.extend(headerComponent);
|
|
|
|
const threeWeeksAgo = new Date();
|
|
threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
|
|
|
|
props = {
|
|
pipeline: {
|
|
details: {
|
|
status: {
|
|
group: 'failed',
|
|
icon: 'status_failed',
|
|
label: 'failed',
|
|
text: 'failed',
|
|
details_path: 'path',
|
|
},
|
|
},
|
|
id: 123,
|
|
created_at: threeWeeksAgo.toISOString(),
|
|
user: {
|
|
web_url: 'path',
|
|
name: 'Foo',
|
|
username: 'foobar',
|
|
email: 'foo@bar.com',
|
|
avatar_url: 'link',
|
|
},
|
|
retry_path: 'retry',
|
|
cancel_path: 'cancel',
|
|
delete_path: 'delete',
|
|
},
|
|
isLoading: false,
|
|
};
|
|
|
|
vm = new HeaderComponent({ propsData: props }).$mount();
|
|
});
|
|
|
|
afterEach(() => {
|
|
eventHub.$off();
|
|
vm.$destroy();
|
|
});
|
|
|
|
const findDeleteModal = () => document.getElementById(headerComponent.DELETE_MODAL_ID);
|
|
const findDeleteModalSubmit = () =>
|
|
[...findDeleteModal().querySelectorAll('.btn')].find(x => x.textContent === 'Delete pipeline');
|
|
|
|
it('should render provided pipeline info', () => {
|
|
expect(
|
|
vm.$el
|
|
.querySelector('.header-main-content')
|
|
.textContent.replace(/\s+/g, ' ')
|
|
.trim(),
|
|
).toContain('failed Pipeline #123 triggered 3 weeks ago by Foo');
|
|
});
|
|
|
|
describe('action buttons', () => {
|
|
it('should not trigger eventHub when nothing happens', () => {
|
|
expect(eventHub.$emit).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should call postAction when retry button action is clicked', () => {
|
|
vm.$el.querySelector('.js-retry-button').click();
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
|
|
});
|
|
|
|
it('should call postAction when cancel button action is clicked', () => {
|
|
vm.$el.querySelector('.js-btn-cancel-pipeline').click();
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
|
|
});
|
|
|
|
it('does not show delete modal', () => {
|
|
expect(findDeleteModal()).not.toBeVisible();
|
|
});
|
|
|
|
describe('when delete button action is clicked', () => {
|
|
beforeEach(done => {
|
|
vm.$el.querySelector('.js-btn-delete-pipeline').click();
|
|
|
|
// Modal needs two ticks to show
|
|
vm.$nextTick()
|
|
.then(() => vm.$nextTick())
|
|
.then(done)
|
|
.catch(done.fail);
|
|
});
|
|
|
|
it('should show delete modal', () => {
|
|
expect(findDeleteModal()).toBeVisible();
|
|
});
|
|
|
|
it('should call delete when modal is submitted', () => {
|
|
findDeleteModalSubmit().click();
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('headerDeleteAction', 'delete');
|
|
});
|
|
});
|
|
});
|
|
});
|