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);
-
-    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',
-          },
+  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',
+      },
+      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(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(() => {
     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');
       });