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 headerComponent from '~/pipelines/components/header_component.vue';
import { shallowMount } from '@vue/test-utils';
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 { GlModal } from '@gitlab/ui';
describe('Pipeline details header', () => {
let HeaderComponent;
let vm;
let props;
beforeEach(() => {
spyOn(eventHub, '$emit');
HeaderComponent = Vue.extend(headerComponent);
let wrapper;
let glModalDirective;
const threeWeeksAgo = new Date();
threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
props = {
const findDeleteModal = () => wrapper.find(GlModal);
const defaultProps = {
pipeline: {
details: {
status: {
......@@ -41,25 +40,43 @@ describe('Pipeline details header', () => {
isLoading: false,
};
vm = new HeaderComponent({ propsData: props }).$mount();
const createComponent = (props = {}) => {
glModalDirective = jest.fn();
wrapper = shallowMount(HeaderComponent, {
propsData: {
...props,
},
directives: {
glModal: {
bind(el, { value }) {
glModalDirective(value);
},
},
},
});
};
beforeEach(() => {
jest.spyOn(eventHub, '$emit');
createComponent(defaultProps);
});
afterEach(() => {
eventHub.$off();
vm.$destroy();
});
const findDeleteModal = () => document.getElementById(headerComponent.DELETE_MODAL_ID);
const findDeleteModalSubmit = () =>
[...findDeleteModal().querySelectorAll('.btn')].find(x => x.textContent === 'Delete pipeline');
wrapper.destroy();
wrapper = null;
});
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');
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', () => {
......@@ -68,13 +85,13 @@ describe('Pipeline details header', () => {
});
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');
});
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');
});
......@@ -84,22 +101,13 @@ describe('Pipeline details header', () => {
});
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('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', () => {
findDeleteModalSubmit().click();
findDeleteModal().vm.$emit('ok');
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