diff options
Diffstat (limited to 'spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js')
-rw-r--r-- | spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js b/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js new file mode 100644 index 00000000000..e7d2b7bf5c5 --- /dev/null +++ b/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js @@ -0,0 +1,107 @@ +import { shallowMount } from '@vue/test-utils'; +import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue'; +import LoadingButton from '~/vue_shared/components/loading_button.vue'; +import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants'; +import { GlAlert } from '@gitlab/ui'; +import eventHub from '~/clusters/event_hub'; + +const { UPDATING } = APPLICATION_STATUS; + +describe('IngressModsecuritySettings', () => { + let wrapper; + + const defaultProps = { + modsecurity_enabled: false, + status: 'installable', + installed: false, + }; + + const createComponent = (props = defaultProps) => { + wrapper = shallowMount(IngressModsecuritySettings, { + propsData: { + ingress: { + ...defaultProps, + ...props, + }, + }, + }); + }; + + const findSaveButton = () => wrapper.find(LoadingButton); + const findModSecurityCheckbox = () => wrapper.find('input').element; + + describe('when ingress is installed', () => { + beforeEach(() => { + createComponent({ installed: true }); + jest.spyOn(eventHub, '$emit'); + }); + + it('renders save button', () => { + expect(findSaveButton().exists()).toBe(true); + expect(findModSecurityCheckbox().checked).toBe(false); + }); + + describe('and the save changes button is clicked', () => { + beforeEach(() => { + findSaveButton().vm.$emit('click'); + }); + + it('triggers save event and pass current modsecurity value', () => + wrapper.vm.$nextTick().then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', { + id: INGRESS, + params: { modsecurity_enabled: false }, + }); + })); + }); + + it('triggers set event to be propagated with the current modsecurity value', () => { + wrapper.setData({ modSecurityEnabled: true }); + return wrapper.vm.$nextTick().then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('setIngressModSecurityEnabled', { + id: INGRESS, + modSecurityEnabled: true, + }); + }); + }); + + describe(`when ingress status is ${UPDATING}`, () => { + beforeEach(() => { + createComponent({ installed: true, status: UPDATING }); + }); + + it('renders loading spinner in save button', () => { + expect(findSaveButton().props('loading')).toBe(true); + }); + + it('renders disabled save button', () => { + expect(findSaveButton().props('disabled')).toBe(true); + }); + + it('renders save button with "Saving" label', () => { + expect(findSaveButton().props('label')).toBe('Saving'); + }); + }); + + describe('when ingress fails to update', () => { + beforeEach(() => { + createComponent({ updateFailed: true }); + }); + + it('displays a error message', () => { + expect(wrapper.find(GlAlert).exists()).toBe(true); + }); + }); + }); + + describe('when ingress is not installed', () => { + beforeEach(() => { + createComponent(); + }); + + it('does not render the save button', () => { + expect(findSaveButton().exists()).toBe(false); + expect(findModSecurityCheckbox().checked).toBe(false); + }); + }); +}); |