From 60c58c757039bea7b141605bdb3b947eb10d0068 Mon Sep 17 00:00:00 2001 From: Enrique Alcantara Date: Wed, 29 May 2019 14:56:35 -0400 Subject: Extract knative domain editor into a component The new component also implements several improvements in the knative domain editor workflow: - Display a loading spinner when saving changes in the domain name - Display success toast message indicating changes were saved successfully. - Display error message in the contraty occurs --- .../clusters/components/applications_spec.js | 97 ++++++-------- .../components/knative_domain_editor_spec.js | 141 +++++++++++++++++++++ 2 files changed, 178 insertions(+), 60 deletions(-) create mode 100644 spec/frontend/clusters/components/knative_domain_editor_spec.js (limited to 'spec/frontend/clusters') diff --git a/spec/frontend/clusters/components/applications_spec.js b/spec/frontend/clusters/components/applications_spec.js index 8bcf02f0a34..221ebb143be 100644 --- a/spec/frontend/clusters/components/applications_spec.js +++ b/spec/frontend/clusters/components/applications_spec.js @@ -1,9 +1,11 @@ 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 'helpers/vue_mount_component_helper'; import { APPLICATIONS_MOCK_STATE } from '../services/mock_data'; +import eventHub from '~/clusters/event_hub'; +import { shallowMount } from '@vue/test-utils'; +import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue'; describe('Applications', () => { let vm; @@ -277,73 +279,48 @@ describe('Applications', () => { }); describe('Knative application', () => { - describe('when installed', () => { - describe('with ip address', () => { - const props = { - applications: { - ...APPLICATIONS_MOCK_STATE, - knative: { - title: 'Knative', - hostname: 'example.com', - status: 'installed', - externalIp: '1.1.1.1', - }, - }, - }; - it('renders ip address with a clipboard button', () => { - vm = mountComponent(Applications, props); + const propsData = { + applications: { + ...APPLICATIONS_MOCK_STATE, + knative: { + title: 'Knative', + hostname: 'example.com', + status: 'installed', + externalIp: '1.1.1.1', + installed: true, + }, + }, + }; + const newHostname = 'newhostname.com'; + let wrapper; + let knativeDomainEditor; - expect(vm.$el.querySelector('.js-knative-endpoint').value).toEqual('1.1.1.1'); - - expect( - vm.$el - .querySelector('.js-knative-endpoint-clipboard-btn') - .getAttribute('data-clipboard-text'), - ).toEqual('1.1.1.1'); - }); - - it('renders domain & allows editing', () => { - expect(vm.$el.querySelector('.js-knative-domainname').value).toEqual('example.com'); - expect(vm.$el.querySelector('.js-knative-domainname').getAttribute('readonly')).toBe( - null, - ); - }); - - it('renders an update/save Knative domain button', () => { - expect(vm.$el.querySelector('.js-knative-save-domain-button')).not.toBe(null); - }); + beforeEach(() => { + wrapper = shallowMount(Applications, { propsData }); + jest.spyOn(eventHub, '$emit'); - it('emits event when clicking Save changes button', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(Applications, props); + knativeDomainEditor = wrapper.find(KnativeDomainEditor); + }); - const saveButton = vm.$el.querySelector('.js-knative-save-domain-button'); + afterEach(() => { + wrapper.destroy(); + }); - saveButton.click(); + it('emits saveKnativeDomain event when knative domain editor emits save event', () => { + knativeDomainEditor.vm.$emit('save', newHostname); - expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', { - id: 'knative', - params: { hostname: 'example.com' }, - }); - }); + expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', { + id: 'knative', + params: { hostname: newHostname }, }); + }); - describe('without ip address', () => { - it('renders an input text with a loading icon and an alert text', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - knative: { - title: 'Knative', - hostname: 'example.com', - status: 'installed', - }, - }, - }); + it('emits setKnativeHostname event when knative domain editor emits change event', () => { + wrapper.find(KnativeDomainEditor).vm.$emit('set', newHostname); - expect(vm.$el.querySelector('.js-knative-ip-loading-icon')).not.toBe(null); - expect(vm.$el.querySelector('.js-no-knative-endpoint-message')).not.toBe(null); - }); + expect(eventHub.$emit).toHaveBeenCalledWith('setKnativeHostname', { + id: 'knative', + hostname: newHostname, }); }); }); diff --git a/spec/frontend/clusters/components/knative_domain_editor_spec.js b/spec/frontend/clusters/components/knative_domain_editor_spec.js new file mode 100644 index 00000000000..242b5701f8b --- /dev/null +++ b/spec/frontend/clusters/components/knative_domain_editor_spec.js @@ -0,0 +1,141 @@ +import { shallowMount } from '@vue/test-utils'; +import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue'; +import LoadingButton from '~/vue_shared/components/loading_button.vue'; +import { APPLICATION_STATUS } from '~/clusters/constants'; + +const { UPDATING } = APPLICATION_STATUS; + +describe('KnativeDomainEditor', () => { + let wrapper; + let knative; + + const createComponent = (props = {}) => { + wrapper = shallowMount(KnativeDomainEditor, { + propsData: { ...props }, + }); + }; + + beforeEach(() => { + knative = { + title: 'Knative', + hostname: 'example.com', + installed: true, + }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('knative has an assigned IP address', () => { + beforeEach(() => { + knative.externalIp = '1.1.1.1'; + createComponent({ knative }); + }); + + it('renders ip address with a clipboard button', () => { + expect(wrapper.find('.js-knative-endpoint').exists()).toBe(true); + expect(wrapper.find('.js-knative-endpoint').element.value).toEqual(knative.externalIp); + }); + + it('displays ip address clipboard button', () => { + expect(wrapper.find('.js-knative-endpoint-clipboard-btn').attributes('text')).toEqual( + knative.externalIp, + ); + }); + + it('renders domain & allows editing', () => { + const domainNameInput = wrapper.find('.js-knative-domainname'); + + expect(domainNameInput.element.value).toEqual(knative.hostname); + expect(domainNameInput.attributes('readonly')).toBeFalsy(); + }); + + it('renders an update/save Knative domain button', () => { + expect(wrapper.find('.js-knative-save-domain-button').exists()).toBe(true); + }); + }); + + describe('knative without ip address', () => { + beforeEach(() => { + knative.externalIp = null; + createComponent({ knative }); + }); + + it('renders an input text with a loading icon', () => { + expect(wrapper.find('.js-knative-ip-loading-icon').exists()).toBe(true); + }); + + it('renders message indicating there is not IP address assigned', () => { + expect(wrapper.find('.js-no-knative-endpoint-message').exists()).toBe(true); + }); + }); + + describe('clicking save changes button', () => { + beforeEach(() => { + createComponent({ knative }); + }); + + it('triggers save event and pass current knative hostname', () => { + wrapper.find(LoadingButton).vm.$emit('click'); + expect(wrapper.emitted('save')[0]).toEqual([knative.hostname]); + }); + }); + + describe('when knative domain name was saved successfully', () => { + beforeEach(() => { + createComponent({ knative }); + }); + + it('displays toast indicating a successful update', () => { + wrapper.vm.$toast = { show: jest.fn() }; + wrapper.setProps({ knative: Object.assign({ updateSuccessful: true }, knative) }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith( + 'Knative domain name was updated successfully.', + ); + }); + }); + }); + + describe('when knative domain name input changes', () => { + it('emits "set" event with updated domain name', () => { + const newHostname = 'newhostname.com'; + + wrapper.setData({ knativeHostname: newHostname }); + + expect(wrapper.emitted('set')[0]).toEqual([newHostname]); + }); + }); + + describe('when updating knative domain name failed', () => { + beforeEach(() => { + createComponent({ knative }); + }); + + it('displays an error banner indicating the operation failure', () => { + wrapper.setProps({ knative: { updateFailed: true, ...knative } }); + + expect(wrapper.find('.js-cluster-knative-domain-name-failure-message').exists()).toBe(true); + }); + }); + + describe(`when knative status is ${UPDATING}`, () => { + beforeEach(() => { + createComponent({ knative: { status: UPDATING, ...knative } }); + }); + + it('renders loading spinner in save button', () => { + expect(wrapper.find(LoadingButton).props('loading')).toBe(true); + }); + + it('renders disabled save button', () => { + expect(wrapper.find(LoadingButton).props('disabled')).toBe(true); + }); + + it('renders save button with "Saving" label', () => { + expect(wrapper.find(LoadingButton).props('label')).toBe('Saving'); + }); + }); +}); -- cgit v1.2.3