Migrate clusters tests to jest

Move cluster applications manager tests from karma to jest. Fixes
some migration issues related with timeouts, and HTTP request
expectations.

app/assets/javascripts/clusters/clusters_bundle.js

@@ -262,7 +262,7 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'requestReason', null);
     this.store.updateAppProperty(appId, 'statusReason', null);
 
-    this.service.installApplication(appId, data.params).catch(() => {
+    return this.service.installApplication(appId, data.params).catch(() => {
       this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE);
       this.store.updateAppProperty(
         appId,

changelogs/unreleased/58981-migrate-clusters-tests-to-jest.yml

+---
+title: Migrate clusters tests to jest
+merge_request: 27013
+author:
+type: other

spec/javascripts/clusters/clusters_bundle_spec.js → spec/frontend/clusters/clusters_bundle_spec.js

@@ -5,19 +5,41 @@ import {
   APPLICATION_STATUS,
   INGRESS_DOMAIN_SUFFIX,
 } from '~/clusters/constants';
-import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { loadHTMLFixture } from 'helpers/fixtures';
+import { setTestTimeout } from 'helpers/timeout';
+import $ from 'jquery';
 
 describe('Clusters', () => {
+  setTestTimeout(500);
+
   let cluster;
-  preloadFixtures('clusters/show_cluster.html');
+  let mock;
+
+  const mockGetClusterStatusRequest = () => {
+    const { statusPath } = document.querySelector('.js-edit-cluster-form').dataset;
+
+    mock = new MockAdapter(axios);
+
+    mock.onGet(statusPath).reply(200);
+  };
+
+  beforeEach(() => {
+    loadHTMLFixture('clusters/show_cluster.html');
+  });
+
+  beforeEach(() => {
+    mockGetClusterStatusRequest();
+  });
 
   beforeEach(() => {
-    loadFixtures('clusters/show_cluster.html');
     cluster = new Clusters();
   });
 
   afterEach(() => {
     cluster.destroy();
+    mock.restore();
   });
 
   describe('toggle', () => {
@@ -29,16 +51,13 @@ describe('Clusters', () => {
         '.js-cluster-enable-toggle-area .js-project-feature-toggle-input',
       );
 
-      toggleButton.click();
-
-      getSetTimeoutPromise()
-        .then(() => {
+      $(toggleInput).one('trigger-change', () => {
         expect(toggleButton.classList).not.toContain('is-checked');
-
         expect(toggleInput.getAttribute('value')).toEqual('false');
-        })
-        .then(done)
-        .catch(done.fail);
+        done();
+      });
+
+      toggleButton.click();
     });
   });
 
@@ -197,7 +216,7 @@ describe('Clusters', () => {
 
   describe('installApplication', () => {
     it('tries to install helm', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
 
@@ -209,7 +228,7 @@ describe('Clusters', () => {
     });
 
     it('tries to install ingress', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.ingress.requestStatus).toEqual(null);
 
@@ -221,7 +240,7 @@ describe('Clusters', () => {
     });
 
     it('tries to install runner', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.runner.requestStatus).toEqual(null);
 
@@ -233,7 +252,7 @@ describe('Clusters', () => {
     });
 
     it('tries to install jupyter', () => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
+      jest.spyOn(cluster.service, 'installApplication').mockResolvedValueOnce();
 
       expect(cluster.store.state.applications.jupyter.requestStatus).toEqual(null);
       cluster.installApplication({
@@ -248,35 +267,32 @@ describe('Clusters', () => {
       });
     });
 
-    it('sets error request status when the request fails', done => {
-      spyOn(cluster.service, 'installApplication').and.returnValue(
-        Promise.reject(new Error('STUBBED ERROR')),
-      );
+    it('sets error request status when the request fails', () => {
+      jest
+        .spyOn(cluster.service, 'installApplication')
+        .mockRejectedValueOnce(new Error('STUBBED ERROR'));
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
 
-      cluster.installApplication({ id: 'helm' });
+      const promise = cluster.installApplication({ id: 'helm' });
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_SUBMITTED);
       expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalled();
 
-      getSetTimeoutPromise()
-        .then(() => {
+      return promise.then(() => {
         expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_FAILURE);
         expect(cluster.store.state.applications.helm.requestReason).toBeDefined();
-        })
-        .then(done)
-        .catch(done.fail);
+      });
     });
   });
 
   describe('handleSuccess', () => {
     beforeEach(() => {
-      spyOn(cluster.store, 'updateStateFromServer');
-      spyOn(cluster, 'toggleIngressDomainHelpText');
-      spyOn(cluster, 'checkForNewInstalls');
-      spyOn(cluster, 'updateContainer');
+      jest.spyOn(cluster.store, 'updateStateFromServer').mockReturnThis();
+      jest.spyOn(cluster, 'toggleIngressDomainHelpText').mockReturnThis();
+      jest.spyOn(cluster, 'checkForNewInstalls').mockReturnThis();
+      jest.spyOn(cluster, 'updateContainer').mockReturnThis();
 
       cluster.handleSuccess({ data: {} });
     });

spec/javascripts/clusters/components/application_row_spec.js → spec/frontend/clusters/components/application_row_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import eventHub from '~/clusters/event_hub';
 import { APPLICATION_STATUS, REQUEST_SUBMITTED, REQUEST_FAILURE } from '~/clusters/constants';
 import applicationRow from '~/clusters/components/application_row.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
 
 describe('Application Row', () => {
@@ -160,7 +160,7 @@ describe('Application Row', () => {
     });
 
     it('clicking install button emits event', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLABLE,
@@ -176,7 +176,7 @@ describe('Application Row', () => {
     });
 
     it('clicking install button when installApplicationRequestParams are provided emits event', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLABLE,
@@ -193,7 +193,7 @@ describe('Application Row', () => {
     });
 
     it('clicking disabled install button emits nothing', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLING,
@@ -255,7 +255,7 @@ describe('Application Row', () => {
     });
 
     it('clicking upgrade button emits event', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.UPDATE_ERRORED,
@@ -271,7 +271,7 @@ describe('Application Row', () => {
     });
 
     it('clicking disabled upgrade button emits nothing', () => {
-      spyOn(eventHub, '$emit');
+      jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.UPDATING,

spec/javascripts/clusters/components/applications_spec.js → spec/frontend/clusters/components/applications_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import applications from '~/clusters/components/applications.vue';
 import { CLUSTER_TYPE } from '~/clusters/constants';
 import eventHub from '~/clusters/event_hub';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import { APPLICATIONS_MOCK_STATE } from '../services/mock_data';
 
 describe('Applications', () => {
@@ -314,7 +314,7 @@ describe('Applications', () => {
         });
 
         it('emits event when clicking Save changes button', () => {
-          spyOn(eventHub, '$emit');
+          jest.spyOn(eventHub, '$emit');
           vm = mountComponent(Applications, props);
 
           const saveButton = vm.$el.querySelector('.js-knative-save-domain-button');