Commit b8bf0327 authored by Payton Burdette's avatar Payton Burdette Committed by Enrique Alcántara

Migrate pipelines header component spec to jest

parent c39b8c28
import Vue from 'vue'; import { shallowMount } from '@vue/test-utils';
import headerComponent from '~/pipelines/components/header_component.vue'; import HeaderComponent from '~/pipelines/components/header_component.vue';
import CiHeader from '~/vue_shared/components/header_ci_component.vue';
import eventHub from '~/pipelines/event_hub'; import eventHub from '~/pipelines/event_hub';
import { GlModal } from '@gitlab/ui';
describe('Pipeline details header', () => { describe('Pipeline details header', () => {
let HeaderComponent; let wrapper;
let vm; let glModalDirective;
let props;
const threeWeeksAgo = new Date();
beforeEach(() => { threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
spyOn(eventHub, '$emit');
HeaderComponent = Vue.extend(headerComponent); const findDeleteModal = () => wrapper.find(GlModal);
const threeWeeksAgo = new Date(); const defaultProps = {
threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21); pipeline: {
details: {
props = { status: {
pipeline: { group: 'failed',
details: { icon: 'status_failed',
status: { label: 'failed',
group: 'failed', text: 'failed',
icon: 'status_failed', details_path: 'path',
label: 'failed',
text: 'failed',
details_path: 'path',
},
}, },
id: 123, },
created_at: threeWeeksAgo.toISOString(), id: 123,
user: { created_at: threeWeeksAgo.toISOString(),
web_url: 'path', user: {
name: 'Foo', web_url: 'path',
username: 'foobar', name: 'Foo',
email: 'foo@bar.com', username: 'foobar',
avatar_url: 'link', 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(HeaderComponent, {
propsData: {
...props,
},
directives: {
glModal: {
bind(el, { value }) {
glModalDirective(value);
},
}, },
retry_path: 'retry',
cancel_path: 'cancel',
delete_path: 'delete',
}, },
isLoading: false, });
}; };
vm = new HeaderComponent({ propsData: props }).$mount(); beforeEach(() => {
jest.spyOn(eventHub, '$emit');
createComponent(defaultProps);
}); });
afterEach(() => { afterEach(() => {
eventHub.$off(); eventHub.$off();
vm.$destroy();
});
const findDeleteModal = () => document.getElementById(headerComponent.DELETE_MODAL_ID); wrapper.destroy();
const findDeleteModalSubmit = () => wrapper = null;
[...findDeleteModal().querySelectorAll('.btn')].find(x => x.textContent === 'Delete pipeline'); });
it('should render provided pipeline info', () => { it('should render provided pipeline info', () => {
expect( expect(wrapper.find(CiHeader).props()).toMatchObject({
vm.$el status: defaultProps.pipeline.details.status,
.querySelector('.header-main-content') itemId: defaultProps.pipeline.id,
.textContent.replace(/\s+/g, ' ') time: defaultProps.pipeline.created_at,
.trim(), user: defaultProps.pipeline.user,
).toContain('failed Pipeline #123 triggered 3 weeks ago by Foo'); });
}); });
describe('action buttons', () => { describe('action buttons', () => {
...@@ -68,13 +85,13 @@ describe('Pipeline details header', () => { ...@@ -68,13 +85,13 @@ describe('Pipeline details header', () => {
}); });
it('should call postAction when retry button action is clicked', () => { it('should call postAction when retry button action is clicked', () => {
vm.$el.querySelector('.js-retry-button').click(); wrapper.find('.js-retry-button').vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry'); expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
}); });
it('should call postAction when cancel button action is clicked', () => { it('should call postAction when cancel button action is clicked', () => {
vm.$el.querySelector('.js-btn-cancel-pipeline').click(); wrapper.find('.js-btn-cancel-pipeline').vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel'); expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
}); });
...@@ -84,22 +101,13 @@ describe('Pipeline details header', () => { ...@@ -84,22 +101,13 @@ describe('Pipeline details header', () => {
}); });
describe('when delete button action is clicked', () => { describe('when delete button action is clicked', () => {
beforeEach(done => { it('displays delete modal', () => {
vm.$el.querySelector('.js-btn-delete-pipeline').click(); expect(findDeleteModal().props('modalId')).toBe(wrapper.vm.$options.DELETE_MODAL_ID);
expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.$options.DELETE_MODAL_ID);
// 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', () => { it('should call delete when modal is submitted', () => {
findDeleteModalSubmit().click(); findDeleteModal().vm.$emit('ok');
expect(eventHub.$emit).toHaveBeenCalledWith('headerDeleteAction', 'delete'); expect(eventHub.$emit).toHaveBeenCalledWith('headerDeleteAction', 'delete');
}); });
......
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