diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 17:34:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 17:34:42 +0300 |
commit | 9f46488805e86b1bc341ea1620b866016c2ce5ed (patch) | |
tree | f9748c7e287041e37d6da49e0a29c9511dc34768 /spec/frontend/monitoring/components/alert_widget_form_spec.js | |
parent | dfc92d081ea0332d69c8aca2f0e745cb48ae5e6d (diff) |
Add latest changes from gitlab-org/gitlab@13-0-stable-ee
Diffstat (limited to 'spec/frontend/monitoring/components/alert_widget_form_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/alert_widget_form_spec.js | 220 |
1 files changed, 220 insertions, 0 deletions
diff --git a/spec/frontend/monitoring/components/alert_widget_form_spec.js b/spec/frontend/monitoring/components/alert_widget_form_spec.js new file mode 100644 index 00000000000..a8416216a94 --- /dev/null +++ b/spec/frontend/monitoring/components/alert_widget_form_spec.js @@ -0,0 +1,220 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlLink } from '@gitlab/ui'; +import AlertWidgetForm from '~/monitoring/components/alert_widget_form.vue'; +import ModalStub from '../stubs/modal_stub'; + +describe('AlertWidgetForm', () => { + let wrapper; + + const metricId = '8'; + const alertPath = 'alert'; + const relevantQueries = [{ metricId, alert_path: alertPath, label: 'alert-label' }]; + const dataTrackingOptions = { + create: { action: 'click_button', label: 'create_alert' }, + delete: { action: 'click_button', label: 'delete_alert' }, + update: { action: 'click_button', label: 'update_alert' }, + }; + + const defaultProps = { + disabled: false, + relevantQueries, + modalId: 'alert-modal-1', + }; + + const propsWithAlertData = { + ...defaultProps, + alertsToManage: { + alert: { alert_path: alertPath, operator: '<', threshold: 5, metricId }, + }, + configuredAlert: metricId, + }; + + function createComponent(props = {}) { + const propsData = { + ...defaultProps, + ...props, + }; + + wrapper = shallowMount(AlertWidgetForm, { + propsData, + stubs: { + GlModal: ModalStub, + }, + }); + } + + const modal = () => wrapper.find(ModalStub); + const modalTitle = () => modal().attributes('title'); + const submitButton = () => modal().find(GlLink); + const submitButtonTrackingOpts = () => + JSON.parse(submitButton().attributes('data-tracking-options')); + const e = { + preventDefault: jest.fn(), + }; + + beforeEach(() => { + e.preventDefault.mockReset(); + }); + + afterEach(() => { + if (wrapper) wrapper.destroy(); + }); + + it('disables the form when disabled prop is set', () => { + createComponent({ disabled: true }); + + expect(modal().attributes('ok-disabled')).toBe('true'); + }); + + it('disables the form if no query is selected', () => { + createComponent(); + + expect(modal().attributes('ok-disabled')).toBe('true'); + }); + + it('shows correct title and button text', () => { + expect(modalTitle()).toBe('Add alert'); + expect(submitButton().text()).toBe('Add'); + }); + + it('sets tracking options for create alert', () => { + expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.create); + }); + + it('emits a "create" event when form submitted without existing alert', () => { + createComponent(); + + wrapper.vm.selectQuery('9'); + wrapper.setData({ + threshold: 900, + }); + + wrapper.vm.handleSubmit(e); + + expect(wrapper.emitted().create[0]).toEqual([ + { + alert: undefined, + operator: '>', + threshold: 900, + prometheus_metric_id: '9', + }, + ]); + expect(e.preventDefault).toHaveBeenCalledTimes(1); + }); + + it('resets form when modal is dismissed (hidden)', () => { + createComponent(); + + wrapper.vm.selectQuery('9'); + wrapper.vm.selectQuery('>'); + wrapper.setData({ + threshold: 800, + }); + + modal().vm.$emit('hidden'); + + expect(wrapper.vm.selectedAlert).toEqual({}); + expect(wrapper.vm.operator).toBe(null); + expect(wrapper.vm.threshold).toBe(null); + expect(wrapper.vm.prometheusMetricId).toBe(null); + }); + + it('sets selectedAlert to the provided configuredAlert on modal show', () => { + createComponent(propsWithAlertData); + + modal().vm.$emit('shown'); + + expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]); + }); + + it('sets selectedAlert to the first relevantQueries if there is only one option on modal show', () => { + createComponent({ + ...propsWithAlertData, + configuredAlert: '', + }); + + modal().vm.$emit('shown'); + + expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]); + }); + + it('does not set selectedAlert to the first relevantQueries if there is more than one option on modal show', () => { + createComponent({ + relevantQueries: [ + { + metricId: '8', + alertPath: 'alert', + label: 'alert-label', + }, + { + metricId: '9', + alertPath: 'alert', + label: 'alert-label', + }, + ], + }); + + modal().vm.$emit('shown'); + + expect(wrapper.vm.selectedAlert).toEqual({}); + }); + + describe('with existing alert', () => { + beforeEach(() => { + createComponent(propsWithAlertData); + + wrapper.vm.selectQuery(metricId); + }); + + it('sets tracking options for delete alert', () => { + expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.delete); + }); + + it('updates button text', () => { + expect(modalTitle()).toBe('Edit alert'); + expect(submitButton().text()).toBe('Delete'); + }); + + it('emits "delete" event when form values unchanged', () => { + wrapper.vm.handleSubmit(e); + + expect(wrapper.emitted().delete[0]).toEqual([ + { + alert: 'alert', + operator: '<', + threshold: 5, + prometheus_metric_id: '8', + }, + ]); + expect(e.preventDefault).toHaveBeenCalledTimes(1); + }); + + it('emits "update" event when form changed', () => { + wrapper.setData({ + threshold: 11, + }); + + wrapper.vm.handleSubmit(e); + + expect(wrapper.emitted().update[0]).toEqual([ + { + alert: 'alert', + operator: '<', + threshold: 11, + prometheus_metric_id: '8', + }, + ]); + expect(e.preventDefault).toHaveBeenCalledTimes(1); + }); + + it('sets tracking options for update alert', () => { + wrapper.setData({ + threshold: 11, + }); + + return wrapper.vm.$nextTick(() => { + expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.update); + }); + }); + }); +}); |