Merge branch 'himkp-jest-pages' into 'master'

Migrate javascripts/pages specs to Jest

Closes #194246

See merge request gitlab-org/gitlab!32506

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

@@ -2,7 +2,8 @@
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../../../../../vue_shared/translate';
-import illustrationSvg from '../icons/intro_illustration.svg';
+// Full path is needed for Jest to be able to correctly mock this file
+import illustrationSvg from '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
 Vue.use(Translate);

spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js → spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js

 import Vue from 'vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { redirectTo } from '~/lib/utils/url_utility';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
 
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  redirectTo: jest.fn(),
+}));
+
 describe('stop_jobs_modal.vue', () => {
   const props = {
     url: `${gl.TEST_HOST}/stop_jobs_modal.vue/stopAll`,
@@ -22,8 +27,7 @@ describe('stop_jobs_modal.vue', () => {
   describe('onSubmit', () => {
     it('stops jobs and redirects to overview page', done => {
       const responseURL = `${gl.TEST_HOST}/stop_jobs_modal.vue/jobs`;
-      const redirectSpy = spyOnDependency(stopJobsModal, 'redirectTo');
-      spyOn(axios, 'post').and.callFake(url => {
+      jest.spyOn(axios, 'post').mockImplementation(url => {
         expect(url).toBe(props.url);
         return Promise.resolve({
           request: {
@@ -34,7 +38,7 @@ describe('stop_jobs_modal.vue', () => {
 
       vm.onSubmit()
         .then(() => {
-          expect(redirectSpy).toHaveBeenCalledWith(responseURL);
+          expect(redirectTo).toHaveBeenCalledWith(responseURL);
         })
         .then(done)
         .catch(done.fail);
@@ -42,8 +46,7 @@ describe('stop_jobs_modal.vue', () => {
 
     it('displays error if stopping jobs failed', done => {
       const dummyError = new Error('stopping jobs failed');
-      const redirectSpy = spyOnDependency(stopJobsModal, 'redirectTo');
-      spyOn(axios, 'post').and.callFake(url => {
+      jest.spyOn(axios, 'post').mockImplementation(url => {
         expect(url).toBe(props.url);
         return Promise.reject(dummyError);
       });
@@ -52,7 +55,7 @@ describe('stop_jobs_modal.vue', () => {
         .then(done.fail)
         .catch(error => {
           expect(error).toBe(dummyError);
-          expect(redirectSpy).not.toHaveBeenCalled();
+          expect(redirectTo).not.toHaveBeenCalled();
         })
         .then(done)
         .catch(done.fail);

spec/javascripts/pages/labels/components/promote_label_modal_spec.js → spec/frontend/pages/labels/components/promote_label_modal_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue';
 import eventHub from '~/pages/projects/labels/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -43,7 +43,7 @@ describe('Promote label modal', () => {
       vm = mountComponent(Component, {
         ...labelMockData,
       });
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
     afterEach(() => {
@@ -52,7 +52,7 @@ describe('Promote label modal', () => {
 
     it('redirects when a label is promoted', done => {
       const responseURL = `${gl.TEST_HOST}/dummy/endpoint`;
-      spyOn(axios, 'post').and.callFake(url => {
+      jest.spyOn(axios, 'post').mockImplementation(url => {
         expect(url).toBe(labelMockData.url);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'promoteLabelModal.requestStarted',
@@ -79,7 +79,7 @@ describe('Promote label modal', () => {
     it('displays an error if promoting a label failed', done => {
       const dummyError = new Error('promoting label failed');
       dummyError.response = { status: 500 };
-      spyOn(axios, 'post').and.callFake(url => {
+      jest.spyOn(axios, 'post').mockImplementation(url => {
         expect(url).toBe(labelMockData.url);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'promoteLabelModal.requestStarted',

spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js → spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js

 import Vue from 'vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { redirectTo } from '~/lib/utils/url_utility';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_milestone_modal.vue';
 import eventHub from '~/pages/milestones/shared/event_hub';
 
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  redirectTo: jest.fn(),
+}));
+
 describe('delete_milestone_modal.vue', () => {
   const Component = Vue.extend(deleteMilestoneModal);
   const props = {
@@ -23,29 +28,28 @@ describe('delete_milestone_modal.vue', () => {
   describe('onSubmit', () => {
     beforeEach(() => {
       vm = mountComponent(Component, props);
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
     it('deletes milestone and redirects to overview page', done => {
       const responseURL = `${gl.TEST_HOST}/delete_milestone_modal.vue/milestoneOverview`;
-      spyOn(axios, 'delete').and.callFake(url => {
+      jest.spyOn(axios, 'delete').mockImplementation(url => {
         expect(url).toBe(props.milestoneUrl);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'deleteMilestoneModal.requestStarted',
           props.milestoneUrl,
         );
-        eventHub.$emit.calls.reset();
+        eventHub.$emit.mockReset();
         return Promise.resolve({
           request: {
             responseURL,
           },
         });
       });
-      const redirectSpy = spyOnDependency(deleteMilestoneModal, 'redirectTo');
 
       vm.onSubmit()
         .then(() => {
-          expect(redirectSpy).toHaveBeenCalledWith(responseURL);
+          expect(redirectTo).toHaveBeenCalledWith(responseURL);
           expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
             milestoneUrl: props.milestoneUrl,
             successful: true,
@@ -58,21 +62,20 @@ describe('delete_milestone_modal.vue', () => {
     it('displays error if deleting milestone failed', done => {
       const dummyError = new Error('deleting milestone failed');
       dummyError.response = { status: 418 };
-      spyOn(axios, 'delete').and.callFake(url => {
+      jest.spyOn(axios, 'delete').mockImplementation(url => {
         expect(url).toBe(props.milestoneUrl);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'deleteMilestoneModal.requestStarted',
           props.milestoneUrl,
         );
-        eventHub.$emit.calls.reset();
+        eventHub.$emit.mockReset();
         return Promise.reject(dummyError);
       });
-      const redirectSpy = spyOnDependency(deleteMilestoneModal, 'redirectTo');
 
       vm.onSubmit()
         .catch(error => {
           expect(error).toBe(dummyError);
-          expect(redirectSpy).not.toHaveBeenCalled();
+          expect(redirectTo).not.toHaveBeenCalled();
           expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
             milestoneUrl: props.milestoneUrl,
             successful: false,

spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js → spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import promoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue';
 import eventHub from '~/pages/milestones/shared/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -38,7 +38,7 @@ describe('Promote milestone modal', () => {
       vm = mountComponent(Component, {
         ...milestoneMockData,
       });
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
     afterEach(() => {
@@ -47,7 +47,7 @@ describe('Promote milestone modal', () => {
 
     it('redirects when a milestone is promoted', done => {
       const responseURL = `${gl.TEST_HOST}/dummy/endpoint`;
-      spyOn(axios, 'post').and.callFake(url => {
+      jest.spyOn(axios, 'post').mockImplementation(url => {
         expect(url).toBe(milestoneMockData.url);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'promoteMilestoneModal.requestStarted',
@@ -74,7 +74,7 @@ describe('Promote milestone modal', () => {
     it('displays an error if promoting a milestone failed', done => {
       const dummyError = new Error('promoting milestone failed');
       dummyError.response = { status: 500 };
-      spyOn(axios, 'post').and.callFake(url => {
+      jest.spyOn(axios, 'post').mockImplementation(url => {
         expect(url).toBe(milestoneMockData.url);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'promoteMilestoneModal.requestStarted',

spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js → spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js

 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import PipelineSchedulesCallout from '~/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue';
+import '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
+
+jest.mock(
+  '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg',
+  () => '<svg></svg>',
+);
 
 const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
 const cookieKey = 'pipeline_schedules_callout_dismissed';
 const docsUrl = 'help/ci/scheduled_pipelines';
 
-describe('Pipeline Schedule Callout', function() {
+describe('Pipeline Schedule Callout', () => {
+  let calloutComponent;
+
   beforeEach(() => {
     setFixtures(`
       <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div>
@@ -15,90 +23,90 @@ describe('Pipeline Schedule Callout', function() {
 
   describe('independent of cookies', () => {
     beforeEach(() => {
-      this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+      calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
     });
 
     it('the component can be initialized', () => {
-      expect(this.calloutComponent).toBeDefined();
+      expect(calloutComponent).toBeDefined();
     });
 
     it('correctly sets illustrationSvg', () => {
-      expect(this.calloutComponent.illustrationSvg).toContain('<svg');
+      expect(calloutComponent.illustrationSvg).toContain('<svg');
     });
 
     it('correctly sets docsUrl', () => {
-      expect(this.calloutComponent.docsUrl).toContain(docsUrl);
+      expect(calloutComponent.docsUrl).toContain(docsUrl);
     });
   });
 
   describe(`when ${cookieKey} cookie is set`, () => {
     beforeEach(() => {
       Cookies.set(cookieKey, true);
-      this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+      calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
     });
 
     it('correctly sets calloutDismissed to true', () => {
-      expect(this.calloutComponent.calloutDismissed).toBe(true);
+      expect(calloutComponent.calloutDismissed).toBe(true);
     });
 
     it('does not render the callout', () => {
-      expect(this.calloutComponent.$el.childNodes.length).toBe(0);
+      expect(calloutComponent.$el.childNodes.length).toBe(0);
     });
   });
 
   describe('when cookie is not set', () => {
     beforeEach(() => {
       Cookies.remove(cookieKey);
-      this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+      calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
     });
 
     it('correctly sets calloutDismissed to false', () => {
-      expect(this.calloutComponent.calloutDismissed).toBe(false);
+      expect(calloutComponent.calloutDismissed).toBe(false);
     });
 
     it('renders the callout container', () => {
-      expect(this.calloutComponent.$el.querySelector('.bordered-box')).not.toBeNull();
+      expect(calloutComponent.$el.querySelector('.bordered-box')).not.toBeNull();
     });
 
     it('renders the callout svg', () => {
-      expect(this.calloutComponent.$el.outerHTML).toContain('<svg');
+      expect(calloutComponent.$el.outerHTML).toContain('<svg');
     });
 
     it('renders the callout title', () => {
-      expect(this.calloutComponent.$el.outerHTML).toContain('Scheduling Pipelines');
+      expect(calloutComponent.$el.outerHTML).toContain('Scheduling Pipelines');
     });
 
     it('renders the callout text', () => {
-      expect(this.calloutComponent.$el.outerHTML).toContain('runs pipelines in the future');
+      expect(calloutComponent.$el.outerHTML).toContain('runs pipelines in the future');
     });
 
     it('renders the documentation url', () => {
-      expect(this.calloutComponent.$el.outerHTML).toContain(docsUrl);
+      expect(calloutComponent.$el.outerHTML).toContain(docsUrl);
     });
 
     it('updates calloutDismissed when close button is clicked', done => {
-      this.calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
+      calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
 
       Vue.nextTick(() => {
-        expect(this.calloutComponent.calloutDismissed).toBe(true);
+        expect(calloutComponent.calloutDismissed).toBe(true);
         done();
       });
     });
 
     it('#dismissCallout updates calloutDismissed', done => {
-      this.calloutComponent.dismissCallout();
+      calloutComponent.dismissCallout();
 
       Vue.nextTick(() => {
-        expect(this.calloutComponent.calloutDismissed).toBe(true);
+        expect(calloutComponent.calloutDismissed).toBe(true);
         done();
       });
     });
 
     it('is hidden when close button is clicked', done => {
-      this.calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
+      calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
 
       Vue.nextTick(() => {
-        expect(this.calloutComponent.$el.childNodes.length).toBe(0);
+        expect(calloutComponent.$el.childNodes.length).toBe(0);
         done();
       });
     });