Migrate pipelines header component spec to jest

spec/javascripts/pipelines/header_component_spec.js → spec/frontend/pipelines/header_component_spec.js

-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');
       });