From be8997ca7c504a9f7fc0821c1b014d9260e00b14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Alc=C3=A1ntara?= Date: Mon, 8 Apr 2019 07:31:27 +0000 Subject: [PATCH] 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. --- .../javascripts/clusters/clusters_bundle.js | 2 +- .../58981-migrate-clusters-tests-to-jest.yml | 5 ++ .../clusters/clusters_bundle_spec.js | 80 +++++++++++-------- .../components/application_row_spec.js | 12 +-- .../clusters/components/applications_spec.js | 4 +- .../clusters/services/mock_data.js | 0 .../clusters/stores/clusters_store_spec.js | 0 7 files changed, 62 insertions(+), 41 deletions(-) create mode 100644 changelogs/unreleased/58981-migrate-clusters-tests-to-jest.yml rename spec/{javascripts => frontend}/clusters/clusters_bundle_spec.js (85%) rename spec/{javascripts => frontend}/clusters/components/application_row_spec.js (98%) rename spec/{javascripts => frontend}/clusters/components/applications_spec.js (99%) rename spec/{javascripts => frontend}/clusters/services/mock_data.js (100%) rename spec/{javascripts => frontend}/clusters/stores/clusters_store_spec.js (100%) diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index a88e4b7b314..df855261b3c 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/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, diff --git a/changelogs/unreleased/58981-migrate-clusters-tests-to-jest.yml b/changelogs/unreleased/58981-migrate-clusters-tests-to-jest.yml new file mode 100644 index 00000000000..3df13dbb960 --- /dev/null +++ b/changelogs/unreleased/58981-migrate-clusters-tests-to-jest.yml @@ -0,0 +1,5 @@ +--- +title: Migrate clusters tests to jest +merge_request: 27013 +author: +type: other diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js similarity index 85% rename from spec/javascripts/clusters/clusters_bundle_spec.js rename to spec/frontend/clusters/clusters_bundle_spec.js index 0a98df45b5d..eea7bd87257 100644 --- a/spec/javascripts/clusters/clusters_bundle_spec.js +++ b/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', ); + $(toggleInput).one('trigger-change', () => { + expect(toggleButton.classList).not.toContain('is-checked'); + expect(toggleInput.getAttribute('value')).toEqual('false'); + done(); + }); + toggleButton.click(); - - getSetTimeoutPromise() - .then(() => { - expect(toggleButton.classList).not.toContain('is-checked'); - - expect(toggleInput.getAttribute('value')).toEqual('false'); - }) - .then(done) - .catch(done.fail); }); }); @@ -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(() => { - expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_FAILURE); - expect(cluster.store.state.applications.helm.requestReason).toBeDefined(); - }) - .then(done) - .catch(done.fail); + return promise.then(() => { + expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_FAILURE); + expect(cluster.store.state.applications.helm.requestReason).toBeDefined(); + }); }); }); 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: {} }); }); diff --git a/spec/javascripts/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js similarity index 98% rename from spec/javascripts/clusters/components/application_row_spec.js rename to spec/frontend/clusters/components/application_row_spec.js index a2dd4e93daf..b28d0075d06 100644 --- a/spec/javascripts/clusters/components/application_row_spec.js +++ b/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, diff --git a/spec/javascripts/clusters/components/applications_spec.js b/spec/frontend/clusters/components/applications_spec.js similarity index 99% rename from spec/javascripts/clusters/components/applications_spec.js rename to spec/frontend/clusters/components/applications_spec.js index 0f8153ad493..7c54a27d950 100644 --- a/spec/javascripts/clusters/components/applications_spec.js +++ b/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'); diff --git a/spec/javascripts/clusters/services/mock_data.js b/spec/frontend/clusters/services/mock_data.js similarity index 100% rename from spec/javascripts/clusters/services/mock_data.js rename to spec/frontend/clusters/services/mock_data.js diff --git a/spec/javascripts/clusters/stores/clusters_store_spec.js b/spec/frontend/clusters/stores/clusters_store_spec.js similarity index 100% rename from spec/javascripts/clusters/stores/clusters_store_spec.js rename to spec/frontend/clusters/stores/clusters_store_spec.js