1 files changed, 65 insertions, 47 deletions

diff --git a/spec/frontend/monitoring/components/alert_widget_form_spec.js b/spec/frontend/monitoring/components/alert_widget_form_spec.js
index a8416216a94..6d71a9b09e5 100644
--- a/spec/frontend/monitoring/components/alert_widget_form_spec.js
+++ b/spec/frontend/monitoring/components/alert_widget_form_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
+import INVALID_URL from '~/lib/utils/invalid_url';
 import AlertWidgetForm from '~/monitoring/components/alert_widget_form.vue';
 import ModalStub from '../stubs/modal_stub';
 
@@ -24,7 +25,13 @@ describe('AlertWidgetForm', () => {
   const propsWithAlertData = {
     ...defaultProps,
     alertsToManage: {
-      alert: { alert_path: alertPath, operator: '<', threshold: 5, metricId },
+      alert: {
+        alert_path: alertPath,
+        operator: '<',
+        threshold: 5,
+        metricId,
+        runbookUrl: INVALID_URL,
+      },
     },
     configuredAlert: metricId,
   };
@@ -46,15 +53,11 @@ describe('AlertWidgetForm', () => {
   const modal = () => wrapper.find(ModalStub);
   const modalTitle = () => modal().attributes('title');
   const submitButton = () => modal().find(GlLink);
+  const findRunbookField = () => modal().find('[data-testid="alertRunbookField"]');
+  const findThresholdField = () => modal().find('[data-qa-selector="alert_threshold_field"]');
   const submitButtonTrackingOpts = () =>
     JSON.parse(submitButton().attributes('data-tracking-options'));
-  const e = {
-    preventDefault: jest.fn(),
-  };
-
-  beforeEach(() => {
-    e.preventDefault.mockReset();
-  });
+  const stubEvent = { preventDefault: jest.fn() };
 
   afterEach(() => {
     if (wrapper) wrapper.destroy();
@@ -81,35 +84,34 @@ describe('AlertWidgetForm', () => {
     expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.create);
   });
 
-  it('emits a "create" event when form submitted without existing alert', () => {
-    createComponent();
+  it('emits a "create" event when form submitted without existing alert', async () => {
+    createComponent(defaultProps);
 
-    wrapper.vm.selectQuery('9');
-    wrapper.setData({
-      threshold: 900,
-    });
+    modal().vm.$emit('shown');
+
+    findThresholdField().vm.$emit('input', 900);
+    findRunbookField().vm.$emit('input', INVALID_URL);
 
-    wrapper.vm.handleSubmit(e);
+    modal().vm.$emit('ok', stubEvent);
 
     expect(wrapper.emitted().create[0]).toEqual([
       {
         alert: undefined,
         operator: '>',
         threshold: 900,
-        prometheus_metric_id: '9',
+        prometheus_metric_id: '8',
+        runbookUrl: INVALID_URL,
       },
     ]);
-    expect(e.preventDefault).toHaveBeenCalledTimes(1);
   });
 
   it('resets form when modal is dismissed (hidden)', () => {
-    createComponent();
+    createComponent(defaultProps);
 
-    wrapper.vm.selectQuery('9');
-    wrapper.vm.selectQuery('>');
-    wrapper.setData({
-      threshold: 800,
-    });
+    modal().vm.$emit('shown');
+
+    findThresholdField().vm.$emit('input', 800);
+    findRunbookField().vm.$emit('input', INVALID_URL);
 
     modal().vm.$emit('hidden');
 
@@ -117,6 +119,7 @@ describe('AlertWidgetForm', () => {
     expect(wrapper.vm.operator).toBe(null);
     expect(wrapper.vm.threshold).toBe(null);
     expect(wrapper.vm.prometheusMetricId).toBe(null);
+    expect(wrapper.vm.runbookUrl).toBe(null);
   });
 
   it('sets selectedAlert to the provided configuredAlert on modal show', () => {
@@ -163,7 +166,7 @@ describe('AlertWidgetForm', () => {
     beforeEach(() => {
       createComponent(propsWithAlertData);
 
-      wrapper.vm.selectQuery(metricId);
+      modal().vm.$emit('shown');
     });
 
     it('sets tracking options for delete alert', () => {
@@ -176,7 +179,7 @@ describe('AlertWidgetForm', () => {
     });
 
     it('emits "delete" event when form values unchanged', () => {
-      wrapper.vm.handleSubmit(e);
+      modal().vm.$emit('ok', stubEvent);
 
       expect(wrapper.emitted().delete[0]).toEqual([
         {
@@ -184,37 +187,52 @@ describe('AlertWidgetForm', () => {
           operator: '<',
           threshold: 5,
           prometheus_metric_id: '8',
+          runbookUrl: INVALID_URL,
         },
       ]);
-      expect(e.preventDefault).toHaveBeenCalledTimes(1);
     });
+  });
 
-    it('emits "update" event when form changed', () => {
-      wrapper.setData({
-        threshold: 11,
-      });
+  it('emits "update" event when form changed', () => {
+    const updatedRunbookUrl = `${INVALID_URL}/test`;
 
-      wrapper.vm.handleSubmit(e);
+    createComponent(propsWithAlertData);
 
-      expect(wrapper.emitted().update[0]).toEqual([
-        {
-          alert: 'alert',
-          operator: '<',
-          threshold: 11,
-          prometheus_metric_id: '8',
-        },
-      ]);
-      expect(e.preventDefault).toHaveBeenCalledTimes(1);
-    });
+    modal().vm.$emit('shown');
+
+    findRunbookField().vm.$emit('input', updatedRunbookUrl);
+    findThresholdField().vm.$emit('input', 11);
 
-    it('sets tracking options for update alert', () => {
-      wrapper.setData({
+    modal().vm.$emit('ok', stubEvent);
+
+    expect(wrapper.emitted().update[0]).toEqual([
+      {
+        alert: 'alert',
+        operator: '<',
         threshold: 11,
-      });
+        prometheus_metric_id: '8',
+        runbookUrl: updatedRunbookUrl,
+      },
+    ]);
+  });
+
+  it('sets tracking options for update alert', async () => {
+    createComponent(propsWithAlertData);
+
+    modal().vm.$emit('shown');
+
+    findThresholdField().vm.$emit('input', 11);
+
+    await wrapper.vm.$nextTick();
+
+    expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.update);
+  });
+
+  describe('alert runbooks', () => {
+    it('shows the runbook field', () => {
+      createComponent();
 
-      return wrapper.vm.$nextTick(() => {
-        expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.update);
-      });
+      expect(findRunbookField().exists()).toBe(true);
     });
   });
 });