diff options
Diffstat (limited to 'spec/frontend/clusters/components')
5 files changed, 561 insertions, 449 deletions
diff --git a/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap new file mode 100644 index 00000000000..92237590550 --- /dev/null +++ b/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Applications Cert-Manager application shows the correct description 1`] = ` +<p + data-testid="certManagerDescription" +> + Cert-Manager is a native Kubernetes certificate management controller that helps with issuing certificates. Installing Cert-Manager on your cluster will issue a certificate by + <a + class="gl-link" + href="https://letsencrypt.org/" + rel="noopener noreferrer" + target="_blank" + > + Let's Encrypt + </a> + and ensure that certificates are valid and up-to-date. +</p> +`; + +exports[`Applications Crossplane application shows the correct description 1`] = ` +<p + data-testid="crossplaneDescription" +> + Crossplane enables declarative provisioning of managed services from your cloud of choice using + <code> + kubectl + </code> + or + <a + class="gl-link" + href="https://docs.gitlab.com/ee/user/clusters/applications.html#crossplane" + rel="noopener noreferrer" + target="_blank" + > + GitLab Integration + </a> + . Crossplane runs inside your Kubernetes cluster and supports secure connectivity and secrets management between app containers and the cloud services they depend on. +</p> +`; + +exports[`Applications Ingress application shows the correct warning message 1`] = ` +<strong + data-testid="ingressCostWarning" +> + Installing Ingress may incur additional costs. Learn more about + <a + class="gl-link" + href="https://cloud.google.com/compute/pricing#lb" + rel="noopener noreferrer" + target="_blank" + > + pricing + </a> + . +</strong> +`; + +exports[`Applications Knative application shows the correct description 1`] = ` +<span + data-testid="installedVia" +> + installed via + <a + class="gl-link" + href="" + rel="noopener" + target="_blank" + > + Cloud Run + </a> +</span> +`; + +exports[`Applications Prometheus application shows the correct description 1`] = ` +<span + data-testid="prometheusDescription" +> + Prometheus is an open-source monitoring system with + <a + class="gl-link" + href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html" + rel="noopener noreferrer" + target="_blank" + > + GitLab Integration + </a> + to monitor deployed applications. +</span> +`; diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js index 33ff1424c61..94bdd7b7778 100644 --- a/spec/frontend/clusters/components/application_row_spec.js +++ b/spec/frontend/clusters/components/application_row_spec.js @@ -1,242 +1,194 @@ -import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { GlSprintf } from '@gitlab/ui'; import eventHub from '~/clusters/event_hub'; -import { APPLICATION_STATUS } from '~/clusters/constants'; -import applicationRow from '~/clusters/components/application_row.vue'; +import { APPLICATION_STATUS, ELASTIC_STACK } from '~/clusters/constants'; +import ApplicationRow from '~/clusters/components/application_row.vue'; import UninstallApplicationConfirmationModal from '~/clusters/components/uninstall_application_confirmation_modal.vue'; +import UpdateApplicationConfirmationModal from '~/clusters/components/update_application_confirmation_modal.vue'; import { DEFAULT_APPLICATION_STATE } from '../services/mock_data'; describe('Application Row', () => { - let vm; - let ApplicationRow; - - beforeEach(() => { - ApplicationRow = Vue.extend(applicationRow); - }); + let wrapper; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); + const mountComponent = data => { + wrapper = shallowMount(ApplicationRow, { + stubs: { GlSprintf }, + propsData: { + ...DEFAULT_APPLICATION_STATE, + ...data, + }, + }); + }; + describe('Title', () => { it('shows title', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - titleLink: null, - }); - const title = vm.$el.querySelector('.js-cluster-application-title'); + mountComponent({ titleLink: null }); + + const title = wrapper.find('.js-cluster-application-title'); - expect(title.tagName).toEqual('SPAN'); - expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title); + expect(title.element).toBeInstanceOf(HTMLSpanElement); + expect(title.text()).toEqual(DEFAULT_APPLICATION_STATE.title); }); it('shows title link', () => { expect(DEFAULT_APPLICATION_STATE.titleLink).toBeDefined(); + mountComponent(); + const title = wrapper.find('.js-cluster-application-title'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - }); - const title = vm.$el.querySelector('.js-cluster-application-title'); - - expect(title.tagName).toEqual('A'); - expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title); + expect(title.element).toBeInstanceOf(HTMLAnchorElement); + expect(title.text()).toEqual(DEFAULT_APPLICATION_STATE.title); }); }); describe('Install button', () => { + const button = () => wrapper.find('.js-cluster-application-install-button'); + const checkButtonState = (label, loading, disabled) => { + expect(button().props('label')).toEqual(label); + expect(button().props('loading')).toEqual(loading); + expect(button().props('disabled')).toEqual(disabled); + }; + it('has indeterminate state on page load', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: null, - }); + mountComponent({ status: null }); - expect(vm.installButtonLabel).toBeUndefined(); + expect(button().props('label')).toBeUndefined(); }); it('has install button', () => { - const installationBtn = vm.$el.querySelector('.js-cluster-application-install-button'); + mountComponent(); - expect(installationBtn).not.toBe(null); + expect(button().exists()).toBe(true); }); it('has disabled "Install" when APPLICATION_STATUS.NOT_INSTALLABLE', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.NOT_INSTALLABLE, - }); + mountComponent({ status: APPLICATION_STATUS.NOT_INSTALLABLE }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(true); + checkButtonState('Install', false, true); }); it('has enabled "Install" when APPLICATION_STATUS.INSTALLABLE', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLABLE, - }); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(false); + checkButtonState('Install', false, false); }); it('has loading "Installing" when APPLICATION_STATUS.INSTALLING', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLING, - }); + mountComponent({ status: APPLICATION_STATUS.INSTALLING }); - expect(vm.installButtonLabel).toEqual('Installing'); - expect(vm.installButtonLoading).toEqual(true); - expect(vm.installButtonDisabled).toEqual(true); + checkButtonState('Installing', true, true); }); it('has disabled "Installed" when application is installed and not uninstallable', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, installed: true, uninstallable: false, }); - expect(vm.installButtonLabel).toEqual('Installed'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(true); + checkButtonState('Installed', false, true); }); it('hides when application is installed and uninstallable', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, installed: true, uninstallable: true, }); - const installBtn = vm.$el.querySelector('.js-cluster-application-install-button'); - expect(installBtn).toBe(null); + expect(button().exists()).toBe(false); }); it('has enabled "Install" when install fails', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE, installFailed: true, }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(false); + checkButtonState('Install', false, false); }); it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLABLE, - }); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(false); + checkButtonState('Install', false, false); }); it('clicking install button emits event', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLABLE, - }); - const installButton = vm.$el.querySelector('.js-cluster-application-install-button'); + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE }); - installButton.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', { + expect(spy).toHaveBeenCalledWith('installApplication', { id: DEFAULT_APPLICATION_STATE.id, params: {}, }); }); it('clicking install button when installApplicationRequestParams are provided emits event', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE, installApplicationRequestParams: { hostname: 'jupyter' }, }); - const installButton = vm.$el.querySelector('.js-cluster-application-install-button'); - installButton.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', { + expect(spy).toHaveBeenCalledWith('installApplication', { id: DEFAULT_APPLICATION_STATE.id, params: { hostname: 'jupyter' }, }); }); it('clicking disabled install button emits nothing', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLING, - }); - const installButton = vm.$el.querySelector('.js-cluster-application-install-button'); + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLING }); - expect(vm.installButtonDisabled).toEqual(true); + expect(button().props('disabled')).toEqual(true); - installButton.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).not.toHaveBeenCalled(); + expect(spy).not.toHaveBeenCalled(); }); }); describe('Uninstall button', () => { it('displays button when app is installed and uninstallable', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ installed: true, uninstallable: true, status: APPLICATION_STATUS.NOT_INSTALLABLE, }); - const uninstallButton = vm.$el.querySelector('.js-cluster-application-uninstall-button'); + const uninstallButton = wrapper.find('.js-cluster-application-uninstall-button'); - expect(uninstallButton).toBeTruthy(); + expect(uninstallButton.exists()).toBe(true); }); - it('displays a success toast message if application uninstall was successful', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + it('displays a success toast message if application uninstall was successful', async () => { + mountComponent({ title: 'GitLab Runner', uninstallSuccessful: false, }); - vm.$toast = { show: jest.fn() }; - vm.uninstallSuccessful = true; + wrapper.vm.$toast = { show: jest.fn() }; + wrapper.setProps({ uninstallSuccessful: true }); - return vm.$nextTick(() => { - expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner uninstalled successfully.'); - }); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith( + 'GitLab Runner uninstalled successfully.', + ); }); }); describe('when confirmation modal triggers confirm event', () => { - let wrapper; - - beforeEach(() => { - wrapper = shallowMount(ApplicationRow, { - propsData: { - ...DEFAULT_APPLICATION_STATE, - }, - }); - }); - - afterEach(() => { - wrapper.destroy(); - }); - it('triggers uninstallApplication event', () => { jest.spyOn(eventHub, '$emit'); + mountComponent(); wrapper.find(UninstallApplicationConfirmationModal).vm.$emit('confirm'); expect(eventHub.$emit).toHaveBeenCalledWith('uninstallApplication', { @@ -246,172 +198,226 @@ describe('Application Row', () => { }); describe('Update button', () => { + const button = () => wrapper.find('.js-cluster-application-update-button'); + it('has indeterminate state on page load', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: null, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + mountComponent(); - expect(updateBtn).toBe(null); + expect(button().exists()).toBe(false); }); it('has enabled "Update" when "updateAvailable" is true', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - updateAvailable: true, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + mountComponent({ updateAvailable: true }); - expect(updateBtn).not.toBe(null); - expect(updateBtn.innerHTML).toContain('Update'); + expect(button().exists()).toBe(true); + expect(button().props('label')).toContain('Update'); }); it('has enabled "Retry update" when update process fails', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateFailed: true, }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); - expect(updateBtn).not.toBe(null); - expect(updateBtn.innerHTML).toContain('Retry update'); + expect(button().exists()).toBe(true); + expect(button().props('label')).toContain('Retry update'); }); it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.UPDATING, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + mountComponent({ status: APPLICATION_STATUS.UPDATING }); - expect(updateBtn).not.toBe(null); - expect(vm.isUpdating).toBe(true); - expect(updateBtn.innerHTML).toContain('Updating'); + expect(button().exists()).toBe(true); + expect(button().props('label')).toContain('Updating'); }); it('clicking update button emits event', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateAvailable: true, }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); - updateBtn.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', { + expect(spy).toHaveBeenCalledWith('updateApplication', { id: DEFAULT_APPLICATION_STATE.id, params: {}, }); }); it('clicking disabled update button emits nothing', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.UPDATING, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.UPDATING }); - updateBtn.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).not.toHaveBeenCalled(); + expect(spy).not.toHaveBeenCalled(); }); it('displays an error message if application update failed', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ title: 'GitLab Runner', status: APPLICATION_STATUS.INSTALLED, updateFailed: true, }); - const failureMessage = vm.$el.querySelector('.js-cluster-application-update-details'); + const failureMessage = wrapper.find('.js-cluster-application-update-details'); - expect(failureMessage).not.toBe(null); - expect(failureMessage.innerHTML).toContain( + expect(failureMessage.exists()).toBe(true); + expect(failureMessage.text()).toContain( 'Update failed. Please check the logs and try again.', ); }); - it('displays a success toast message if application update was successful', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + it('displays a success toast message if application update was successful', async () => { + mountComponent({ title: 'GitLab Runner', updateSuccessful: false, }); - vm.$toast = { show: jest.fn() }; - vm.updateSuccessful = true; + wrapper.vm.$toast = { show: jest.fn() }; + wrapper.setProps({ updateSuccessful: true }); - return vm.$nextTick(() => { - expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.'); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.'); + }); + + describe('when updating does not require confirmation', () => { + beforeEach(() => mountComponent({ updateAvailable: true })); + + it('the modal is not rendered', () => { + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); + }); + + it('the correct button is rendered', () => { + expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); + }); + }); + + describe('when updating requires confirmation', () => { + beforeEach(() => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '1.1.2', + }); + }); + + it('displays a modal', () => { + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true); + }); + + it('the correct button is rendered', () => { + expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true); + }); + + it('triggers updateApplication event', () => { + jest.spyOn(eventHub, '$emit'); + wrapper.find(UpdateApplicationConfirmationModal).vm.$emit('confirm'); + + expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', { + id: ELASTIC_STACK, + params: {}, + }); + }); + }); + + describe('updating Elastic Stack special case', () => { + it('needs confirmation if version is lower than 3.0.0', () => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '1.1.2', + }); + + expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true); + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true); + }); + + it('does not need confirmation is version is 3.0.0', () => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '3.0.0', + }); + + expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); + }); + + it('does not need confirmation if version is higher than 3.0.0', () => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '5.2.1', + }); + + expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); }); }); }); describe('Version', () => { + const updateDetails = () => wrapper.find('.js-cluster-application-update-details'); + const versionEl = () => wrapper.find('.js-cluster-application-update-version'); + it('displays a version number if application has been updated', () => { const version = '0.1.45'; - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateSuccessful: true, version, }); - const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details'); - const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); - expect(updateDetails.innerHTML).toContain('Updated'); - expect(versionEl).not.toBe(null); - expect(versionEl.innerHTML).toContain(version); + expect(updateDetails().text()).toBe(`Updated to chart v${version}`); }); it('contains a link to the chart repo if application has been updated', () => { const version = '0.1.45'; const chartRepo = 'https://gitlab.com/gitlab-org/charts/gitlab-runner'; - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateSuccessful: true, chartRepo, version, }); - const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); - expect(versionEl.href).toEqual(chartRepo); - expect(versionEl.target).toEqual('_blank'); + expect(versionEl().attributes('href')).toEqual(chartRepo); + expect(versionEl().props('target')).toEqual('_blank'); }); it('does not display a version number if application update failed', () => { const version = '0.1.45'; - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateFailed: true, version, }); - const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details'); - const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); - expect(updateDetails.innerHTML).toContain('failed'); - expect(versionEl).toBe(null); + expect(updateDetails().text()).toBe('Update failed'); + expect(versionEl().exists()).toBe(false); + }); + + it('displays updating when the application update is currently updating', () => { + mountComponent({ + status: APPLICATION_STATUS.UPDATING, + updateSuccessful: true, + version: '1.2.3', + }); + + expect(updateDetails().text()).toBe('Updating'); + expect(versionEl().exists()).toBe(false); }); }); describe('Error block', () => { + const generalErrorMessage = () => wrapper.find('.js-cluster-application-general-error-message'); + describe('when nothing fails', () => { it('does not show error block', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - }); - const generalErrorMessage = vm.$el.querySelector( - '.js-cluster-application-general-error-message', - ); + mountComponent(); - expect(generalErrorMessage).toBeNull(); + expect(generalErrorMessage().exists()).toBe(false); }); }); @@ -420,8 +426,7 @@ describe('Application Row', () => { const requestReason = 'We broke the request 0.0'; beforeEach(() => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.ERROR, statusReason, requestReason, @@ -430,37 +435,28 @@ describe('Application Row', () => { }); it('shows status reason if it is available', () => { - const statusErrorMessage = vm.$el.querySelector( - '.js-cluster-application-status-error-message', - ); + const statusErrorMessage = wrapper.find('.js-cluster-application-status-error-message'); - expect(statusErrorMessage.textContent.trim()).toEqual(statusReason); + expect(statusErrorMessage.text()).toEqual(statusReason); }); it('shows request reason if it is available', () => { - const requestErrorMessage = vm.$el.querySelector( - '.js-cluster-application-request-error-message', - ); + const requestErrorMessage = wrapper.find('.js-cluster-application-request-error-message'); - expect(requestErrorMessage.textContent.trim()).toEqual(requestReason); + expect(requestErrorMessage.text()).toEqual(requestReason); }); }); describe('when install fails', () => { beforeEach(() => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.ERROR, installFailed: true, }); }); it('shows a general message indicating the installation failed', () => { - const generalErrorMessage = vm.$el.querySelector( - '.js-cluster-application-general-error-message', - ); - - expect(generalErrorMessage.textContent.trim()).toEqual( + expect(generalErrorMessage().text()).toEqual( `Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`, ); }); @@ -468,19 +464,14 @@ describe('Application Row', () => { describe('when uninstall fails', () => { beforeEach(() => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.ERROR, uninstallFailed: true, }); }); it('shows a general message indicating the uninstalling failed', () => { - const generalErrorMessage = vm.$el.querySelector( - '.js-cluster-application-general-error-message', - ); - - expect(generalErrorMessage.textContent.trim()).toEqual( + expect(generalErrorMessage().text()).toEqual( `Something went wrong while uninstalling ${DEFAULT_APPLICATION_STATE.title}`, ); }); diff --git a/spec/frontend/clusters/components/applications_spec.js b/spec/frontend/clusters/components/applications_spec.js index 33b30891d5e..7fc771201c1 100644 --- a/spec/frontend/clusters/components/applications_spec.js +++ b/spec/frontend/clusters/components/applications_spec.js @@ -1,174 +1,175 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import { shallowMount } from '@vue/test-utils'; -import applications from '~/clusters/components/applications.vue'; -import { CLUSTER_TYPE } from '~/clusters/constants'; +import { shallowMount, mount } from '@vue/test-utils'; +import Applications from '~/clusters/components/applications.vue'; +import { CLUSTER_TYPE, PROVIDER_TYPE } from '~/clusters/constants'; import { APPLICATIONS_MOCK_STATE } from '../services/mock_data'; import eventHub from '~/clusters/event_hub'; +import ApplicationRow from '~/clusters/components/application_row.vue'; import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue'; import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue'; import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue'; import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue'; describe('Applications', () => { - let vm; - let Applications; + let wrapper; beforeEach(() => { - Applications = Vue.extend(applications); - gon.features = gon.features || {}; gon.features.managedAppsLocalTiller = false; }); + const createApp = ({ applications, type } = {}, isShallow) => { + const mountMethod = isShallow ? shallowMount : mount; + + wrapper = mountMethod(Applications, { + stubs: { ApplicationRow }, + propsData: { + type, + applications: { ...APPLICATIONS_MOCK_STATE, ...applications }, + }, + }); + }; + + const createShallowApp = options => createApp(options, true); + const findByTestId = id => wrapper.find(`[data-testid="${id}"]`); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('Project cluster applications', () => { beforeEach(() => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - type: CLUSTER_TYPE.PROJECT, - }); + createApp({ type: CLUSTER_TYPE.PROJECT }); }); it('renders a row for Helm Tiller', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true); }); it('renders a row for Ingress', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true); }); it('renders a row for Cert-Manager', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-cert_manager')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true); }); it('renders a row for Crossplane', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-crossplane')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true); }); it('renders a row for Prometheus', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true); }); it('renders a row for GitLab Runner', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-runner')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true); }); it('renders a row for Jupyter', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true); }); it('renders a row for Knative', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-knative')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true); }); it('renders a row for Elastic Stack', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-elastic_stack')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true); }); it('renders a row for Fluentd', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-fluentd')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true); }); }); describe('Group cluster applications', () => { beforeEach(() => { - vm = mountComponent(Applications, { - type: CLUSTER_TYPE.GROUP, - applications: APPLICATIONS_MOCK_STATE, - }); + createApp({ type: CLUSTER_TYPE.GROUP }); }); it('renders a row for Helm Tiller', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true); }); it('renders a row for Ingress', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true); }); it('renders a row for Cert-Manager', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-cert_manager')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true); }); it('renders a row for Crossplane', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-crossplane')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true); }); it('renders a row for Prometheus', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true); }); it('renders a row for GitLab Runner', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-runner')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true); }); it('renders a row for Jupyter', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true); }); it('renders a row for Knative', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-knative')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true); }); it('renders a row for Elastic Stack', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-elastic_stack')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true); }); it('renders a row for Fluentd', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-fluentd')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true); }); }); describe('Instance cluster applications', () => { beforeEach(() => { - vm = mountComponent(Applications, { - type: CLUSTER_TYPE.INSTANCE, - applications: APPLICATIONS_MOCK_STATE, - }); + createApp({ type: CLUSTER_TYPE.INSTANCE }); }); it('renders a row for Helm Tiller', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true); }); it('renders a row for Ingress', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true); }); it('renders a row for Cert-Manager', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-cert_manager')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true); }); it('renders a row for Crossplane', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-crossplane')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true); }); it('renders a row for Prometheus', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true); }); it('renders a row for GitLab Runner', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-runner')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true); }); it('renders a row for Jupyter', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true); }); it('renders a row for Knative', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-knative')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true); }); it('renders a row for Elastic Stack', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-elastic_stack')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true); }); it('renders a row for Fluentd', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-fluentd')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true); }); }); @@ -179,20 +180,21 @@ describe('Applications', () => { }); it('does not render a row for Helm Tiller', () => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - }); - - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).toBeNull(); + createApp(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(false); }); }); }); describe('Ingress application', () => { + it('shows the correct warning message', () => { + createApp(); + expect(findByTestId('ingressCostWarning').element).toMatchSnapshot(); + }); + describe('with nested component', () => { const propsData = { applications: { - ...APPLICATIONS_MOCK_STATE, ingress: { title: 'Ingress', status: 'installed', @@ -200,13 +202,8 @@ describe('Applications', () => { }, }; - let wrapper; - beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); - }); - afterEach(() => { - wrapper.destroy(); - }); + beforeEach(() => createShallowApp(propsData)); + it('renders IngressModsecuritySettings', () => { const modsecuritySettings = wrapper.find(IngressModsecuritySettings); expect(modsecuritySettings.exists()).toBe(true); @@ -216,9 +213,8 @@ describe('Applications', () => { describe('when installed', () => { describe('with ip address', () => { it('renders ip address with a clipboard button', () => { - vm = mountComponent(Applications, { + createApp({ applications: { - ...APPLICATIONS_MOCK_STATE, ingress: { title: 'Ingress', status: 'installed', @@ -227,17 +223,16 @@ describe('Applications', () => { }, }); - expect(vm.$el.querySelector('.js-endpoint').value).toEqual('0.0.0.0'); - - expect( - vm.$el.querySelector('.js-clipboard-btn').getAttribute('data-clipboard-text'), - ).toEqual('0.0.0.0'); + expect(wrapper.find('.js-endpoint').element.value).toEqual('0.0.0.0'); + expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual( + '0.0.0.0', + ); }); }); describe('with hostname', () => { it('renders hostname with a clipboard button', () => { - vm = mountComponent(Applications, { + createApp({ applications: { ingress: { title: 'Ingress', @@ -257,19 +252,18 @@ describe('Applications', () => { }, }); - expect(vm.$el.querySelector('.js-endpoint').value).toEqual('localhost.localdomain'); + expect(wrapper.find('.js-endpoint').element.value).toEqual('localhost.localdomain'); - expect( - vm.$el.querySelector('.js-clipboard-btn').getAttribute('data-clipboard-text'), - ).toEqual('localhost.localdomain'); + expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual( + 'localhost.localdomain', + ); }); }); describe('without ip address', () => { it('renders an input text with a loading icon and an alert text', () => { - vm = mountComponent(Applications, { + createApp({ applications: { - ...APPLICATIONS_MOCK_STATE, ingress: { title: 'Ingress', status: 'installed', @@ -277,142 +271,139 @@ describe('Applications', () => { }, }); - expect(vm.$el.querySelector('.js-ingress-ip-loading-icon')).not.toBe(null); - expect(vm.$el.querySelector('.js-no-endpoint-message')).not.toBe(null); + expect(wrapper.find('.js-ingress-ip-loading-icon').exists()).toBe(true); + expect(wrapper.find('.js-no-endpoint-message').exists()).toBe(true); }); }); }); describe('before installing', () => { it('does not render the IP address', () => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - }); + createApp(); - expect(vm.$el.textContent).not.toContain('Ingress IP Address'); - expect(vm.$el.querySelector('.js-endpoint')).toBe(null); + expect(wrapper.text()).not.toContain('Ingress IP Address'); + expect(wrapper.find('.js-endpoint').exists()).toBe(false); }); }); + }); - describe('Cert-Manager application', () => { - describe('when not installed', () => { - it('renders email & allows editing', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - cert_manager: { - title: 'Cert-Manager', - email: 'before@example.com', - status: 'installable', - }, - }, - }); + describe('Cert-Manager application', () => { + it('shows the correct description', () => { + createApp(); + expect(findByTestId('certManagerDescription').element).toMatchSnapshot(); + }); - expect(vm.$el.querySelector('.js-email').value).toEqual('before@example.com'); - expect(vm.$el.querySelector('.js-email').getAttribute('readonly')).toBe(null); + describe('when not installed', () => { + it('renders email & allows editing', () => { + createApp({ + applications: { + cert_manager: { + title: 'Cert-Manager', + email: 'before@example.com', + status: 'installable', + }, + }, }); + + expect(wrapper.find('.js-email').element.value).toEqual('before@example.com'); + expect(wrapper.find('.js-email').attributes('readonly')).toBe(undefined); }); + }); - describe('when installed', () => { - it('renders email in readonly', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - cert_manager: { - title: 'Cert-Manager', - email: 'after@example.com', - status: 'installed', - }, + describe('when installed', () => { + it('renders email in readonly', () => { + createApp({ + applications: { + cert_manager: { + title: 'Cert-Manager', + email: 'after@example.com', + status: 'installed', }, - }); - - expect(vm.$el.querySelector('.js-email').value).toEqual('after@example.com'); - expect(vm.$el.querySelector('.js-email').getAttribute('readonly')).toEqual('readonly'); + }, }); + + expect(wrapper.find('.js-email').element.value).toEqual('after@example.com'); + expect(wrapper.find('.js-email').attributes('readonly')).toEqual('readonly'); }); }); + }); - describe('Jupyter application', () => { - describe('with ingress installed with ip & jupyter installable', () => { - it('renders hostname active input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - ingress: { - title: 'Ingress', - status: 'installed', - externalIp: '1.1.1.1', - }, + describe('Jupyter application', () => { + describe('with ingress installed with ip & jupyter installable', () => { + it('renders hostname active input', () => { + createApp({ + applications: { + ingress: { + title: 'Ingress', + status: 'installed', + externalIp: '1.1.1.1', }, - }); - - expect( - vm.$el - .querySelector('.js-cluster-application-row-jupyter .js-hostname') - .getAttribute('readonly'), - ).toEqual(null); + }, }); - }); - describe('with ingress installed without external ip', () => { - it('does not render hostname input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - ingress: { title: 'Ingress', status: 'installed' }, - }, - }); + expect( + wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'), + ).toEqual(undefined); + }); + }); - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter .js-hostname')).toBe( - null, - ); + describe('with ingress installed without external ip', () => { + it('does not render hostname input', () => { + createApp({ + applications: { + ingress: { title: 'Ingress', status: 'installed' }, + }, }); - }); - describe('with ingress & jupyter installed', () => { - it('renders readonly input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' }, - jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' }, - }, - }); + expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe( + false, + ); + }); + }); - expect( - vm.$el - .querySelector('.js-cluster-application-row-jupyter .js-hostname') - .getAttribute('readonly'), - ).toEqual('readonly'); + describe('with ingress & jupyter installed', () => { + it('renders readonly input', () => { + createApp({ + applications: { + ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' }, + jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' }, + }, }); + + expect( + wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'), + ).toEqual('readonly'); }); + }); - describe('without ingress installed', () => { - beforeEach(() => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - }); - }); + describe('without ingress installed', () => { + beforeEach(() => { + createApp(); + }); - it('does not render input', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter .js-hostname')).toBe( - null, - ); - }); + it('does not render input', () => { + expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe( + false, + ); + }); - it('renders disabled install button', () => { - expect( - vm.$el - .querySelector( - '.js-cluster-application-row-jupyter .js-cluster-application-install-button', - ) - .getAttribute('disabled'), - ).toEqual('disabled'); - }); + it('renders disabled install button', () => { + expect( + wrapper + .find('.js-cluster-application-row-jupyter .js-cluster-application-install-button') + .attributes('disabled'), + ).toEqual('disabled'); }); }); }); + describe('Prometheus application', () => { + it('shows the correct description', () => { + createApp(); + expect(findByTestId('prometheusDescription').element).toMatchSnapshot(); + }); + }); + describe('Knative application', () => { const availableDomain = { id: 4, @@ -420,7 +411,6 @@ describe('Applications', () => { }; const propsData = { applications: { - ...APPLICATIONS_MOCK_STATE, knative: { title: 'Knative', hostname: 'example.com', @@ -432,18 +422,25 @@ describe('Applications', () => { }, }, }; - let wrapper; let knativeDomainEditor; beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); + createShallowApp(propsData); jest.spyOn(eventHub, '$emit'); knativeDomainEditor = wrapper.find(KnativeDomainEditor); }); - afterEach(() => { - wrapper.destroy(); + it('shows the correct description', async () => { + createApp(); + wrapper.setProps({ + providerType: PROVIDER_TYPE.GCP, + preInstalledKnative: true, + }); + + await wrapper.vm.$nextTick(); + + expect(findByTestId('installedVia').element).toMatchSnapshot(); }); it('emits saveKnativeDomain event when knative domain editor emits save event', () => { @@ -492,7 +489,6 @@ describe('Applications', () => { describe('Crossplane application', () => { const propsData = { applications: { - ...APPLICATIONS_MOCK_STATE, crossplane: { title: 'Crossplane', stack: { @@ -502,74 +498,58 @@ describe('Applications', () => { }, }; - let wrapper; - beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); - }); - afterEach(() => { - wrapper.destroy(); - }); + beforeEach(() => createShallowApp(propsData)); + it('renders the correct Component', () => { const crossplane = wrapper.find(CrossplaneProviderStack); expect(crossplane.exists()).toBe(true); }); + + it('shows the correct description', () => { + createApp(); + expect(findByTestId('crossplaneDescription').element).toMatchSnapshot(); + }); }); describe('Elastic Stack application', () => { describe('with elastic stack installable', () => { it('renders hostname active input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - }, - }); + createApp(); expect( - vm.$el - .querySelector( + wrapper + .find( '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button', ) - .getAttribute('disabled'), + .attributes('disabled'), ).toEqual('disabled'); }); }); describe('elastic stack installed', () => { it('renders uninstall button', () => { - vm = mountComponent(Applications, { + createApp({ applications: { - ...APPLICATIONS_MOCK_STATE, elastic_stack: { title: 'Elastic Stack', status: 'installed' }, }, }); expect( - vm.$el - .querySelector( + wrapper + .find( '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button', ) - .getAttribute('disabled'), + .attributes('disabled'), ).toEqual('disabled'); }); }); }); describe('Fluentd application', () => { - const propsData = { - applications: { - ...APPLICATIONS_MOCK_STATE, - }, - }; + beforeEach(() => createShallowApp()); - let wrapper; - beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); - }); - afterEach(() => { - wrapper.destroy(); - }); it('renders the correct Component', () => { - expect(wrapper.contains(FluentdOutputSettings)).toBe(true); + expect(wrapper.find(FluentdOutputSettings).exists()).toBe(true); }); }); }); diff --git a/spec/frontend/clusters/components/fluentd_output_settings_spec.js b/spec/frontend/clusters/components/fluentd_output_settings_spec.js index 5e27cc49049..f03f2535947 100644 --- a/spec/frontend/clusters/components/fluentd_output_settings_spec.js +++ b/spec/frontend/clusters/components/fluentd_output_settings_spec.js @@ -70,12 +70,12 @@ describe('FluentdOutputSettings', () => { }); describe.each` - desc | changeFn | key | value - ${'when protocol dropdown is triggered'} | ${() => changeProtocol(1)} | ${'protocol'} | ${'udp'} - ${'when host is changed'} | ${() => changeHost('test-host')} | ${'host'} | ${'test-host'} - ${'when port is changed'} | ${() => changePort(123)} | ${'port'} | ${123} - ${'when wafLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send ModSecurity Logs'))} | ${'wafLogEnabled'} | ${!defaultSettings.wafLogEnabled} - ${'when ciliumLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send Cilium Logs'))} | ${'ciliumLogEnabled'} | ${!defaultSettings.ciliumLogEnabled} + desc | changeFn | key | value + ${'when protocol dropdown is triggered'} | ${() => changeProtocol(1)} | ${'protocol'} | ${'udp'} + ${'when host is changed'} | ${() => changeHost('test-host')} | ${'host'} | ${'test-host'} + ${'when port is changed'} | ${() => changePort(123)} | ${'port'} | ${123} + ${'when wafLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send Web Application Firewall Logs'))} | ${'wafLogEnabled'} | ${!defaultSettings.wafLogEnabled} + ${'when ciliumLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send Container Network Policies Logs'))} | ${'ciliumLogEnabled'} | ${!defaultSettings.ciliumLogEnabled} `('$desc', ({ changeFn, key, value }) => { beforeEach(() => { changeFn(); diff --git a/spec/frontend/clusters/components/update_application_confirmation_modal_spec.js b/spec/frontend/clusters/components/update_application_confirmation_modal_spec.js new file mode 100644 index 00000000000..dd3aaf6f946 --- /dev/null +++ b/spec/frontend/clusters/components/update_application_confirmation_modal_spec.js @@ -0,0 +1,52 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import UpdateApplicationConfirmationModal from '~/clusters/components/update_application_confirmation_modal.vue'; +import { ELASTIC_STACK } from '~/clusters/constants'; + +describe('UpdateApplicationConfirmationModal', () => { + let wrapper; + const appTitle = 'Elastic stack'; + + const createComponent = (props = {}) => { + wrapper = shallowMount(UpdateApplicationConfirmationModal, { + propsData: { ...props }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + beforeEach(() => { + createComponent({ application: ELASTIC_STACK, applicationTitle: appTitle }); + }); + + it(`renders a modal with a title "Update ${appTitle}"`, () => { + expect(wrapper.find(GlModal).attributes('title')).toEqual(`Update ${appTitle}`); + }); + + it(`renders a modal with an ok button labeled "Update ${appTitle}"`, () => { + expect(wrapper.find(GlModal).attributes('ok-title')).toEqual(`Update ${appTitle}`); + }); + + describe('when ok button is clicked', () => { + beforeEach(() => { + wrapper.find(GlModal).vm.$emit('ok'); + }); + + it('emits confirm event', () => + wrapper.vm.$nextTick().then(() => { + expect(wrapper.emitted('confirm')).toBeTruthy(); + })); + + it('displays a warning text indicating the app will be updated', () => { + expect(wrapper.text()).toContain(`You are about to update ${appTitle} on your cluster.`); + }); + + it('displays a custom warning text depending on the application', () => { + expect(wrapper.text()).toContain( + `Your Elasticsearch cluster will be re-created during this upgrade. Your logs will be re-indexed, and you will lose historical logs from hosts terminated in the last 30 days.`, + ); + }); + }); +}); |