Merge branch 'migrate-stage-spec' into 'master'

Migrate stage spec to jest

See merge request gitlab-org/gitlab!30859

app/assets/javascripts/pipelines/components/stage.vue

@@ -137,7 +137,7 @@ export default {
     },
 
     isDropdownOpen() {
-      return this.$el.classList.contains('open');
+      return this.$el.classList.contains('show');
     },
 
     pipelineActionRequestComplete() {

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

-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
-import stage from '~/pipelines/components/stage.vue';
+import StageComponent from '~/pipelines/components/stage.vue';
 import eventHub from '~/pipelines/event_hub';
 import { stageReply } from './mock_data';
+import waitForPromises from 'helpers/wait_for_promises';
 
 describe('Pipelines stage component', () => {
-  let StageComponent;
-  let component;
+  let wrapper;
   let mock;
 
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-
-    StageComponent = Vue.extend(stage);
-
-    component = mountComponent(StageComponent, {
+  const defaultProps = {
     stage: {
       status: {
         group: 'success',
@@ -26,51 +20,77 @@ describe('Pipelines stage component', () => {
       dropdown_path: 'path.json',
     },
     updateDropdown: false,
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(StageComponent, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
     });
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
-    component.$destroy();
+    wrapper.destroy();
+    wrapper = null;
+
     mock.restore();
   });
 
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('should render a dropdown with the status icon', () => {
-    expect(component.$el.getAttribute('class')).toEqual('dropdown');
-    expect(component.$el.querySelector('svg')).toBeDefined();
-    expect(component.$el.querySelector('button').getAttribute('data-toggle')).toEqual('dropdown');
+      expect(wrapper.attributes('class')).toEqual('dropdown');
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.find('button').attributes('data-toggle')).toEqual('dropdown');
+    });
   });
 
   describe('with successful request', () => {
     beforeEach(() => {
       mock.onGet('path.json').reply(200, stageReply);
+      createComponent();
     });
 
-    it('should render the received data and emit `clickedDropdown` event', done => {
-      spyOn(eventHub, '$emit');
-      component.$el.querySelector('button').click();
+    it('should render the received data and emit `clickedDropdown` event', () => {
+      jest.spyOn(eventHub, '$emit');
+      wrapper.find('button').trigger('click');
 
-      setTimeout(() => {
-        expect(
-          component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
-        ).toContain(stageReply.latest_statuses[0].name);
+      return waitForPromises().then(() => {
+        expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
+          stageReply.latest_statuses[0].name,
+        );
 
         expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
-        done();
-      }, 0);
+      });
     });
   });
 
   describe('when request fails', () => {
     beforeEach(() => {
       mock.onGet('path.json').reply(500);
+      createComponent();
     });
 
     it('should close the dropdown', () => {
-      component.$el.click();
+      wrapper.setMethods({
+        closeDropdown: jest.fn(),
+        isDropdownOpen: jest.fn().mockReturnValue(false),
+      });
 
-      setTimeout(() => {
-        expect(component.$el.classList.contains('open')).toEqual(false);
-      }, 0);
+      wrapper.find('button').trigger('click');
+
+      return waitForPromises().then(() => {
+        expect(wrapper.vm.closeDropdown).toHaveBeenCalled();
+      });
     });
   });
 
@@ -79,27 +99,29 @@ describe('Pipelines stage component', () => {
       const copyStage = Object.assign({}, stageReply);
       copyStage.latest_statuses[0].name = 'this is the updated content';
       mock.onGet('bar.json').reply(200, copyStage);
-    });
-
-    it('should update the stage to request the new endpoint provided', done => {
-      component.stage = {
+      createComponent({
+        stage: {
           status: {
             group: 'running',
             icon: 'status_running',
             title: 'running',
           },
           dropdown_path: 'bar.json',
-      };
-
-      Vue.nextTick(() => {
-        component.$el.querySelector('button').click();
-
-        setTimeout(() => {
-          expect(
-            component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
-          ).toContain('this is the updated content');
-          done();
+        },
+      });
     });
+
+    it('should update the stage to request the new endpoint provided', () => {
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          wrapper.find('button').trigger('click');
+          return waitForPromises();
+        })
+        .then(() => {
+          expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
+            'this is the updated content',
+          );
         });
     });
   });
@@ -109,27 +131,25 @@ describe('Pipelines stage component', () => {
       mock.onGet('path.json').reply(200, stageReply);
 
       mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
+
+      createComponent({ type: 'PIPELINES_TABLE' });
     });
 
     describe('within pipeline table', () => {
-      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', done => {
-        spyOn(eventHub, '$emit');
+      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', () => {
+        jest.spyOn(eventHub, '$emit');
 
-        component.type = 'PIPELINES_TABLE';
-        component.$el.querySelector('button').click();
+        wrapper.find('button').trigger('click');
 
-        setTimeout(() => {
-          component.$el.querySelector('.js-ci-action').click();
-          setTimeout(() => {
-            component
-              .$nextTick()
+        return waitForPromises()
           .then(() => {
-                expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
+            wrapper.find('.js-ci-action').trigger('click');
+
+            return waitForPromises();
           })
-              .then(done)
-              .catch(done.fail);
-          }, 0);
-        }, 0);
+          .then(() => {
+            expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
+          });
       });
     });
   });