Migrate pipelines specs to Jest & VTU

Migrated pipelines specs that rely on tooltips to Jest & Vue Test Utils

spec/javascripts/pipelines/graph/action_component_spec.js → spec/frontend/pipelines/graph/action_component_spec.js

-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
-import actionComponent from '~/pipelines/components/graph/action_component.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import ActionComponent from '~/pipelines/components/graph/action_component.vue';
 
 describe('pipeline graph action component', () => {
-  let component;
+  let wrapper;
   let mock;
 
-  beforeEach(done => {
-    const ActionComponent = Vue.extend(actionComponent);
+  beforeEach(() => {
     mock = new MockAdapter(axios);
 
     mock.onPost('foo.json').reply(200);
 
-    component = mountComponent(ActionComponent, {
+    wrapper = mount(ActionComponent, {
+      propsData: {
         tooltipText: 'bar',
         link: 'foo',
         actionIcon: 'cancel',
+      },
+      sync: false,
     });
-
-    Vue.nextTick(done);
   });
 
   afterEach(() => {
     mock.restore();
-    component.$destroy();
+    wrapper.destroy();
   });
 
   it('should render the provided title as a bootstrap tooltip', () => {
-    expect(component.$el.getAttribute('data-original-title')).toEqual('bar');
+    expect(wrapper.attributes('data-original-title')).toBe('bar');
   });
 
   it('should update bootstrap tooltip when title changes', done => {
-    component.tooltipText = 'changed';
+    wrapper.setProps({ tooltipText: 'changed' });
 
-    component
+    wrapper.vm
       .$nextTick()
       .then(() => {
-        expect(component.$el.getAttribute('data-original-title')).toBe('changed');
+        expect(wrapper.attributes('data-original-title')).toBe('changed');
       })
       .then(done)
       .catch(done.fail);
   });
 
   it('should render an svg', () => {
-    expect(component.$el.querySelector('.ci-action-icon-wrapper')).toBeDefined();
-    expect(component.$el.querySelector('svg')).toBeDefined();
+    expect(wrapper.find('.ci-action-icon-wrapper')).toBeDefined();
+    expect(wrapper.find('svg')).toBeDefined();
   });
 
   describe('on click', () => {
     it('emits `pipelineActionRequestComplete` after a successful request', done => {
-      spyOn(component, '$emit');
+      jest.spyOn(wrapper.vm, '$emit');
 
-      component.$el.click();
+      wrapper.find('button').trigger('click');
 
-      setTimeout(() => {
-        component
-          .$nextTick()
+      waitForPromises()
         .then(() => {
-            expect(component.$emit).toHaveBeenCalledWith('pipelineActionRequestComplete');
+          expect(wrapper.vm.$emit).toHaveBeenCalledWith('pipelineActionRequestComplete');
+          done();
         })
         .catch(done.fail);
-
-        done();
-      }, 0);
     });
 
     it('renders a loading icon while waiting for request', done => {
-      component.$el.click();
+      wrapper.find('button').trigger('click');
 
-      component.$nextTick(() => {
-        expect(component.$el.querySelector('.js-action-icon-loading')).not.toBeNull();
-        setTimeout(() => {
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.js-action-icon-loading').exists()).toBe(true);
         done();
       });
     });
   });
-  });
 });

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

@@ -17,6 +17,7 @@ describe('Pipelines Triggerer', () => {
   const createComponent = () => {
     wrapper = mount(pipelineTriggerer, {
       propsData: mockData,
+      sync: false,
     });
   };
 
@@ -49,6 +50,8 @@ describe('Pipelines Triggerer', () => {
       },
     });
 
+    wrapper.vm.$nextTick(() => {
       expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
     });
+  });
 });

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

-import Vue from 'vue';
-import tableRowComp from '~/pipelines/components/pipelines_table_row.vue';
+import { mount } from '@vue/test-utils';
+import PipelinesTableRowComponent from '~/pipelines/components/pipelines_table_row.vue';
 import eventHub from '~/pipelines/event_hub';
 
 describe('Pipelines Table Row', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
-  const buildComponent = pipeline => {
-    const PipelinesTableRowComponent = Vue.extend(tableRowComp);
-    return new PipelinesTableRowComponent({
-      el: document.querySelector('.test-dom-element'),
+
+  const createWrapper = pipeline =>
+    mount(PipelinesTableRowComponent, {
       propsData: {
         pipeline,
         autoDevopsHelpPath: 'foo',
         viewType: 'root',
       },
-    }).$mount();
-  };
+      sync: false,
+    });
 
-  let component;
+  let wrapper;
   let pipeline;
   let pipelineWithoutAuthor;
   let pipelineWithoutCommit;
@@ -32,28 +31,29 @@ describe('Pipelines Table Row', () => {
   });
 
   afterEach(() => {
-    component.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('should render a table row', () => {
-    component = buildComponent(pipeline);
+    wrapper = createWrapper(pipeline);
 
-    expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
+    expect(wrapper.attributes('class')).toContain('gl-responsive-table-row');
   });
 
   describe('status column', () => {
     beforeEach(() => {
-      component = buildComponent(pipeline);
+      wrapper = createWrapper(pipeline);
     });
 
     it('should render a pipeline link', () => {
-      expect(
-        component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
-      ).toEqual(pipeline.path);
+      expect(wrapper.find('.table-section.commit-link a').attributes('href')).toEqual(
+        pipeline.path,
+      );
     });
 
     it('should render status text', () => {
-      expect(component.$el.querySelector('.table-section.commit-link a').textContent).toContain(
+      expect(wrapper.find('.table-section.commit-link a').text()).toContain(
         pipeline.details.status.text,
       );
     });
@@ -61,33 +61,32 @@ describe('Pipelines Table Row', () => {
 
   describe('information column', () => {
     beforeEach(() => {
-      component = buildComponent(pipeline);
+      wrapper = createWrapper(pipeline);
     });
 
     it('should render a pipeline link', () => {
-      expect(
-        component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
-      ).toEqual(pipeline.path);
+      expect(wrapper.find('.table-section:nth-child(2) a').attributes('href')).toEqual(
+        pipeline.path,
+      );
     });
 
     it('should render pipeline ID', () => {
-      expect(
-        component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
-      ).toEqual(`#${pipeline.id}`);
+      expect(wrapper.find('.table-section:nth-child(2) a > span').text()).toEqual(
+        `#${pipeline.id}`,
+      );
     });
 
     describe('when a user is provided', () => {
       it('should render user information', () => {
         expect(
-          component.$el
-            .querySelector('.table-section:nth-child(3) .js-pipeline-url-user')
-            .getAttribute('href'),
+          wrapper.find('.table-section:nth-child(3) .js-pipeline-url-user').attributes('href'),
         ).toEqual(pipeline.user.path);
 
         expect(
-          component.$el
-            .querySelector('.table-section:nth-child(3) .js-user-avatar-image-toolip')
-            .textContent.trim(),
+          wrapper
+            .find('.table-section:nth-child(3) .js-user-avatar-image-toolip')
+            .text()
+            .trim(),
         ).toEqual(pipeline.user.name);
       });
     });
@@ -95,40 +94,47 @@ describe('Pipelines Table Row', () => {
 
   describe('commit column', () => {
     it('should render link to commit', () => {
-      component = buildComponent(pipeline);
+      wrapper = createWrapper(pipeline);
 
-      const commitLink = component.$el.querySelector('.branch-commit .commit-sha');
+      const commitLink = wrapper.find('.branch-commit .commit-sha');
 
-      expect(commitLink.getAttribute('href')).toEqual(pipeline.commit.commit_path);
+      expect(commitLink.attributes('href')).toEqual(pipeline.commit.commit_path);
     });
 
     const findElements = () => {
-      const commitTitleElement = component.$el.querySelector('.branch-commit .commit-title');
-      const commitAuthorElement = commitTitleElement.querySelector('a.avatar-image-container');
+      const commitTitleElement = wrapper.find('.branch-commit .commit-title');
+      const commitAuthorElement = commitTitleElement.find('a.avatar-image-container');
 
-      if (!commitAuthorElement) {
-        return { commitAuthorElement };
+      if (!commitAuthorElement.exists()) {
+        return {
+          commitAuthorElement,
+        };
       }
 
-      const commitAuthorLink = commitAuthorElement.getAttribute('href');
+      const commitAuthorLink = commitAuthorElement.attributes('href');
       const commitAuthorName = commitAuthorElement
-        .querySelector('.js-user-avatar-image-toolip')
-        .textContent.trim();
-
-      return { commitAuthorElement, commitAuthorLink, commitAuthorName };
+        .find('.js-user-avatar-image-toolip')
+        .text()
+        .trim();
+
+      return {
+        commitAuthorElement,
+        commitAuthorLink,
+        commitAuthorName,
+      };
     };
 
     it('renders nothing without commit', () => {
       expect(pipelineWithoutCommit.commit).toBe(null);
-      component = buildComponent(pipelineWithoutCommit);
 
+      wrapper = createWrapper(pipelineWithoutCommit);
       const { commitAuthorElement } = findElements();
 
-      expect(commitAuthorElement).toBe(null);
+      expect(commitAuthorElement.exists()).toBe(false);
     });
 
     it('renders commit author', () => {
-      component = buildComponent(pipeline);
+      wrapper = createWrapper(pipeline);
       const { commitAuthorLink, commitAuthorName } = findElements();
 
       expect(commitAuthorLink).toEqual(pipeline.commit.author.path);
@@ -137,8 +143,8 @@ describe('Pipelines Table Row', () => {
 
     it('renders commit with unregistered author', () => {
       expect(pipelineWithoutAuthor.commit.author).toBe(null);
-      component = buildComponent(pipelineWithoutAuthor);
 
+      wrapper = createWrapper(pipelineWithoutAuthor);
       const { commitAuthorLink, commitAuthorName } = findElements();
 
       expect(commitAuthorLink).toEqual(`mailto:${pipelineWithoutAuthor.commit.author_email}`);
@@ -148,13 +154,12 @@ describe('Pipelines Table Row', () => {
 
   describe('stages column', () => {
     beforeEach(() => {
-      component = buildComponent(pipeline);
+      wrapper = createWrapper(pipeline);
     });
 
     it('should render an icon for each stage', () => {
       expect(
-        component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button')
-          .length,
+        wrapper.findAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
       ).toEqual(pipeline.details.stages.length);
     });
   });
@@ -172,44 +177,49 @@ describe('Pipelines Table Row', () => {
       withActions.cancel_path = '/cancel';
       withActions.retry_path = '/retry';
 
-      component = buildComponent(withActions);
+      wrapper = createWrapper(withActions);
     });
 
     it('should render the provided actions', () => {
-      expect(component.$el.querySelector('.js-pipelines-retry-button')).not.toBeNull();
-      expect(component.$el.querySelector('.js-pipelines-cancel-button')).not.toBeNull();
-      const dropdownMenu = component.$el.querySelectorAll('.dropdown-menu');
+      expect(wrapper.find('.js-pipelines-retry-button').exists()).toBe(true);
+      expect(wrapper.find('.js-pipelines-cancel-button').exists()).toBe(true);
+      const dropdownMenu = wrapper.find('.dropdown-menu');
 
-      expect(dropdownMenu).toContainText(scheduledJobAction.name);
+      expect(dropdownMenu.text()).toContain(scheduledJobAction.name);
     });
 
     it('emits `retryPipeline` event when retry button is clicked and toggles loading', () => {
       eventHub.$on('retryPipeline', endpoint => {
-        expect(endpoint).toEqual('/retry');
+        expect(endpoint).toBe('/retry');
       });
 
-      component.$el.querySelector('.js-pipelines-retry-button').click();
-
-      expect(component.isRetrying).toEqual(true);
+      wrapper.find('.js-pipelines-retry-button').trigger('click');
+      expect(wrapper.vm.isRetrying).toBe(true);
     });
 
     it('emits `openConfirmationModal` event when cancel button is clicked and toggles loading', () => {
       eventHub.$once('openConfirmationModal', data => {
         const { id, ref, commit } = pipeline;
 
-        expect(data.endpoint).toEqual('/cancel');
-        expect(data.pipeline).toEqual(jasmine.objectContaining({ id, ref, commit }));
+        expect(data.endpoint).toBe('/cancel');
+        expect(data.pipeline).toEqual(
+          expect.objectContaining({
+            id,
+            ref,
+            commit,
+          }),
+        );
       });
 
-      component.$el.querySelector('.js-pipelines-cancel-button').click();
+      wrapper.find('.js-pipelines-cancel-button').trigger('click');
     });
 
     it('renders a loading icon when `cancelingPipeline` matches pipeline id', done => {
-      component.cancelingPipeline = pipeline.id;
-      component
+      wrapper.setProps({ cancelingPipeline: pipeline.id });
+      wrapper.vm
         .$nextTick()
         .then(() => {
-          expect(component.isCancelling).toEqual(true);
+          expect(wrapper.vm.isCancelling).toBe(true);
         })
         .then(done)
         .catch(done.fail);