Port header ci spec

Move the header ci spec
to vue test utils.

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -105,7 +105,7 @@ export default {
     <section class="header-main-content">
       <ci-icon-badge :status="status" />
 
-      <strong> {{ itemName }} #{{ itemId }} </strong>
+      <strong data-testid="ci-header-item-text"> {{ itemName }} #{{ itemId }} </strong>
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template>
       <template v-else>{{ __('created') }}</template>
@@ -142,7 +142,7 @@ export default {
       </template>
     </section>
 
-    <section v-if="$slots.default" data-testid="headerButtons" class="gl-display-flex">
+    <section v-if="$slots.default" data-testid="ci-header-action-buttons" class="gl-display-flex">
       <slot></slot>
     </section>
     <gl-button

spec/frontend/vue_shared/components/header_ci_component_spec.js

-import Vue from 'vue';
-import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
-import headerCi from '~/vue_shared/components/header_ci_component.vue';
+import { GlButton, GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CiIconBadge from '~/vue_shared/components/ci_badge_link.vue';
+import HeaderCi from '~/vue_shared/components/header_ci_component.vue';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('Header CI Component', () => {
-  let HeaderCi;
-  let vm;
-  let props;
+  let wrapper;
 
-  beforeEach(() => {
-    HeaderCi = Vue.extend(headerCi);
-    props = {
+  const defaultProps = {
     status: {
       group: 'failed',
       icon: 'status_failed',
@@ -29,65 +28,76 @@ describe('Header CI Component', () => {
     },
     hasSidebarButton: true,
   };
-  });
+
+  const findIconBadge = () => wrapper.findComponent(CiIconBadge);
+  const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip);
+  const findUserLink = () => wrapper.findComponent(GlLink);
+  const findSidebarToggleBtn = () => wrapper.findComponent(GlButton);
+  const findActionButtons = () => wrapper.findByTestId('ci-header-action-buttons');
+  const findHeaderItemText = () => wrapper.findByTestId('ci-header-item-text');
+
+  const createComponent = (props, slots) => {
+    wrapper = extendedWrapper(
+      shallowMount(HeaderCi, {
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+        ...slots,
+      }),
+    );
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  const findActionButtons = () => vm.$el.querySelector('[data-testid="headerButtons"]');
-
   describe('render', () => {
     beforeEach(() => {
-      vm = mountComponent(HeaderCi, props);
+      createComponent();
     });
 
     it('should render status badge', () => {
-      expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
-      expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
-      expect(vm.$el.querySelector('.ci-failed').getAttribute('href')).toEqual(
-        props.status.details_path,
-      );
+      expect(findIconBadge().exists()).toBe(true);
     });
 
     it('should render item name and id', () => {
-      expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123');
+      expect(findHeaderItemText().text()).toBe('job #123');
     });
 
     it('should render timeago date', () => {
-      expect(vm.$el.querySelector('time')).toBeDefined();
+      expect(findTimeAgo().exists()).toBe(true);
     });
 
     it('should render user icon and name', () => {
-      expect(vm.$el.querySelector('.js-user-link').innerText.trim()).toContain(props.user.name);
+      expect(findUserLink().text()).toContain(defaultProps.user.name);
     });
 
     it('should render sidebar toggle button', () => {
-      expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull();
+      expect(findSidebarToggleBtn().exists()).toBe(true);
     });
 
-    it('should not render header action buttons when empty', () => {
-      expect(findActionButtons()).toBeNull();
+    it('should not render header action buttons when slot is empty', () => {
+      expect(findActionButtons().exists()).toBe(false);
     });
   });
 
   describe('slot', () => {
     it('should render header action buttons', () => {
-      vm = mountComponentWithSlots(HeaderCi, { props, slots: { default: 'Test Actions' } });
-
-      const buttons = findActionButtons();
+      createComponent({}, { slots: { default: 'Test Actions' } });
 
-      expect(buttons).not.toBeNull();
-      expect(buttons.textContent).toEqual('Test Actions');
+      expect(findActionButtons().exists()).toBe(true);
+      expect(findActionButtons().text()).toBe('Test Actions');
     });
   });
 
   describe('shouldRenderTriggeredLabel', () => {
-    it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => {
-      vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false });
+    it('should render created keyword when the shouldRenderTriggeredLabel is false', () => {
+      createComponent({ shouldRenderTriggeredLabel: false });
 
-      expect(vm.$el.textContent).toContain('created');
-      expect(vm.$el.textContent).not.toContain('triggered');
+      expect(wrapper.text()).toContain('created');
+      expect(wrapper.text()).not.toContain('triggered');
     });
   });
 });