116 lines
3.1 KiB
JavaScript
116 lines
3.1 KiB
JavaScript
import { shallowMount } from '@vue/test-utils';
|
|
import { GlModal } from '@gitlab/ui';
|
|
import LegacyHeaderComponent from '~/pipelines/components/legacy_header_component.vue';
|
|
import CiHeader from '~/vue_shared/components/header_ci_component.vue';
|
|
import eventHub from '~/pipelines/event_hub';
|
|
|
|
describe('Pipeline details header', () => {
|
|
let wrapper;
|
|
let glModalDirective;
|
|
|
|
const threeWeeksAgo = new Date();
|
|
threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
|
|
|
|
const findDeleteModal = () => wrapper.find(GlModal);
|
|
|
|
const defaultProps = {
|
|
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,
|
|
};
|
|
|
|
const createComponent = (props = {}) => {
|
|
glModalDirective = jest.fn();
|
|
|
|
wrapper = shallowMount(LegacyHeaderComponent, {
|
|
propsData: {
|
|
...props,
|
|
},
|
|
directives: {
|
|
glModal: {
|
|
bind(el, { value }) {
|
|
glModalDirective(value);
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
beforeEach(() => {
|
|
jest.spyOn(eventHub, '$emit');
|
|
|
|
createComponent(defaultProps);
|
|
});
|
|
|
|
afterEach(() => {
|
|
eventHub.$off();
|
|
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
it('should render provided pipeline info', () => {
|
|
expect(wrapper.find(CiHeader).props()).toMatchObject({
|
|
status: defaultProps.pipeline.details.status,
|
|
itemId: defaultProps.pipeline.id,
|
|
time: defaultProps.pipeline.created_at,
|
|
user: defaultProps.pipeline.user,
|
|
});
|
|
});
|
|
|
|
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', () => {
|
|
wrapper.find('[data-testid="retryButton"]').vm.$emit('click');
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
|
|
});
|
|
|
|
it('should call postAction when cancel button action is clicked', () => {
|
|
wrapper.find('[data-testid="cancelPipeline"]').vm.$emit('click');
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
|
|
});
|
|
|
|
it('does not show delete modal', () => {
|
|
expect(findDeleteModal()).not.toBeVisible();
|
|
});
|
|
|
|
describe('when delete button action is clicked', () => {
|
|
it('displays delete modal', () => {
|
|
expect(findDeleteModal().props('modalId')).toBe(wrapper.vm.$options.DELETE_MODAL_ID);
|
|
expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.$options.DELETE_MODAL_ID);
|
|
});
|
|
|
|
it('should call delete when modal is submitted', () => {
|
|
findDeleteModal().vm.$emit('ok');
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('headerDeleteAction', 'delete');
|
|
});
|
|
});
|
|
});
|
|
});
|