diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2019-08-13 10:22:02 +0300 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2019-08-13 10:22:02 +0300 |
commit | b24359e24d55ed15b75be99dd12ed504a946afe1 (patch) | |
tree | 1ae722edcbcfb4b9fb3dfe7f216dbc0857deb3d7 /spec/frontend | |
parent | cacd17a6237c685e6b166ccf5cf6ec99eddc92f1 (diff) | |
parent | da306cdb0f3125d0b9682d11c2ec007cdfd1746f (diff) |
Merge branch '61800-migrate-environment-rollback-tests-to-jest' into 'master'
Convert `spec/javascripts/environments/*rollback*` tests from Jasmine to Jest
Closes #61800
See merge request gitlab-org/gitlab-ce!31021
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/environments/confirm_rollback_modal_spec.js | 70 | ||||
-rw-r--r-- | spec/frontend/environments/environment_rollback_spec.js | 53 | ||||
-rw-r--r-- | spec/frontend/matchers.js | 38 | ||||
-rw-r--r-- | spec/frontend/test_setup.js | 3 |
4 files changed, 164 insertions, 0 deletions
diff --git a/spec/frontend/environments/confirm_rollback_modal_spec.js b/spec/frontend/environments/confirm_rollback_modal_spec.js new file mode 100644 index 00000000000..a1a22274e8f --- /dev/null +++ b/spec/frontend/environments/confirm_rollback_modal_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue'; +import eventHub from '~/environments/event_hub'; + +describe('Confirm Rollback Modal Component', () => { + let environment; + + beforeEach(() => { + environment = { + name: 'test', + last_deployment: { + commit: { + short_id: 'abc0123', + }, + }, + modalId: 'test', + }; + }); + + it('should show "Rollback" when isLastDeployment is false', () => { + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment: { + ...environment, + isLastDeployment: false, + }, + }, + }); + const modal = component.find(GlModal); + + expect(modal.attributes('title')).toContain('Rollback'); + expect(modal.attributes('title')).toContain('test'); + expect(modal.attributes('ok-title')).toBe('Rollback'); + expect(modal.text()).toContain('commit abc0123'); + expect(modal.text()).toContain('Are you sure you want to continue?'); + }); + + it('should show "Re-deploy" when isLastDeployment is true', () => { + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment: { + ...environment, + isLastDeployment: true, + }, + }, + }); + const modal = component.find(GlModal); + + expect(modal.attributes('title')).toContain('Re-deploy'); + expect(modal.attributes('title')).toContain('test'); + expect(modal.attributes('ok-title')).toBe('Re-deploy'); + expect(modal.text()).toContain('commit abc0123'); + expect(modal.text()).toContain('Are you sure you want to continue?'); + }); + + it('should emit the "rollback" event when "ok" is clicked', () => { + environment = { ...environment, isLastDeployment: true }; + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment, + }, + }); + const eventHubSpy = jest.spyOn(eventHub, '$emit'); + const modal = component.find(GlModal); + modal.vm.$emit('ok'); + + expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', environment); + }); +}); diff --git a/spec/frontend/environments/environment_rollback_spec.js b/spec/frontend/environments/environment_rollback_spec.js new file mode 100644 index 00000000000..fb62a096c3d --- /dev/null +++ b/spec/frontend/environments/environment_rollback_spec.js @@ -0,0 +1,53 @@ +import { shallowMount, mount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import eventHub from '~/environments/event_hub'; +import RollbackComponent from '~/environments/components/environment_rollback.vue'; + +describe('Rollback Component', () => { + const retryUrl = 'https://gitlab.com/retry'; + + it('Should render Re-deploy label when isLastDeployment is true', () => { + const wrapper = mount(RollbackComponent, { + propsData: { + retryUrl, + isLastDeployment: true, + environment: {}, + }, + }); + + expect(wrapper.element).toHaveSpriteIcon('repeat'); + }); + + it('Should render Rollback label when isLastDeployment is false', () => { + const wrapper = mount(RollbackComponent, { + propsData: { + retryUrl, + isLastDeployment: false, + environment: {}, + }, + }); + + expect(wrapper.element).toHaveSpriteIcon('redo'); + }); + + it('should emit a "rollback" event on button click', () => { + const eventHubSpy = jest.spyOn(eventHub, '$emit'); + const wrapper = shallowMount(RollbackComponent, { + propsData: { + retryUrl, + environment: { + name: 'test', + }, + }, + }); + const button = wrapper.find(GlButton); + + button.vm.$emit('click'); + + expect(eventHubSpy).toHaveBeenCalledWith('requestRollbackEnvironment', { + retryUrl, + isLastDeployment: true, + name: 'test', + }); + }); +}); diff --git a/spec/frontend/matchers.js b/spec/frontend/matchers.js new file mode 100644 index 00000000000..35c362d0bf5 --- /dev/null +++ b/spec/frontend/matchers.js @@ -0,0 +1,38 @@ +export default { + toHaveSpriteIcon: (element, iconName) => { + if (!iconName) { + throw new Error('toHaveSpriteIcon is missing iconName argument!'); + } + + if (!(element instanceof HTMLElement)) { + throw new Error(`${element} is not a DOM element!`); + } + + const iconReferences = [].slice.apply(element.querySelectorAll('svg use')); + const matchingIcon = iconReferences.find(reference => + reference.getAttribute('xlink:href').endsWith(`#${iconName}`), + ); + + const pass = Boolean(matchingIcon); + + let message; + if (pass) { + message = `${element.outerHTML} contains the sprite icon "${iconName}"!`; + } else { + message = `${element.outerHTML} does not contain the sprite icon "${iconName}"!`; + + const existingIcons = iconReferences.map(reference => { + const iconUrl = reference.getAttribute('xlink:href'); + return `"${iconUrl.replace(/^.+#/, '')}"`; + }); + if (existingIcons.length > 0) { + message += ` (only found ${existingIcons.join(',')})`; + } + } + + return { + pass, + message: () => message, + }; + }, +}; diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js index 8b6f7802b15..df8a625319b 100644 --- a/spec/frontend/test_setup.js +++ b/spec/frontend/test_setup.js @@ -6,6 +6,7 @@ import { config as testUtilsConfig } from '@vue/test-utils'; import { initializeTestTimeout } from './helpers/timeout'; import { loadHTMLFixture, setHTMLFixture } from './helpers/fixtures'; import { setupManualMocks } from './mocks/mocks_helper'; +import customMatchers from './matchers'; // Expose jQuery so specs using jQuery plugins can be imported nicely. // Here is an issue to explore better alternatives: @@ -67,6 +68,8 @@ Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => { }); }); +expect.extend(customMatchers); + // Tech debt issue TBD testUtilsConfig.logModifiedComponents = false; |