[Alerting] Selectively update threshold value on threshold comparator…

… change (#79914) * Only updating threshold value on threshold comparator change when number of required values for comparator changes * Adding unit test Co-authored-by: Kibana Machine <[email protected]>
elastic · Oct 12, 2020 · c2f9f0a · c2f9f0a
1 parent b125472
commit c2f9f0a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx
@@ -5,6 +5,7 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ThresholdExpression } from './threshold';
 
 describe('threshold expression', () => {
@@ -52,7 +53,7 @@ describe('threshold expression', () => {
     `);
   });
 
-  it('renders with treshold title', () => {
+  it('renders with threshold title', () => {
     const onChangeSelectedThreshold = jest.fn();
     const onChangeSelectedThresholdComparator = jest.fn();
     const wrapper = shallow(
@@ -65,4 +66,46 @@ describe('threshold expression', () => {
     );
     expect(wrapper.contains('Is between')).toBeTruthy();
   });
+
+  it('fires onChangeSelectedThreshold only when threshold actually changed', async () => {
+    const onChangeSelectedThreshold = jest.fn();
+    const onChangeSelectedThresholdComparator = jest.fn();
+
+    const wrapper = mountWithIntl(
+      <ThresholdExpression
+        thresholdComparator={'>'}
+        threshold={[10]}
+        errors={{ threshold0: [], threshold1: [] }}
+        onChangeSelectedThreshold={onChangeSelectedThreshold}
+        onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
+      />
+    );
+
+    wrapper.find('[data-test-subj="thresholdPopover"]').first().simulate('click');
+    expect(wrapper.find('[data-test-subj="comparatorOptionsComboBox"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="alertThresholdInput"]').exists()).toBeTruthy();
+
+    wrapper
+      .find('[data-test-subj="alertThresholdInput"]')
+      .last()
+      .simulate('change', { target: { value: 1000 } });
+    expect(onChangeSelectedThreshold).toHaveBeenCalled();
+    expect(onChangeSelectedThresholdComparator).not.toHaveBeenCalled();
+
+    jest.clearAllMocks();
+    wrapper
+      .find('[data-test-subj="comparatorOptionsComboBox"]')
+      .last()
+      .simulate('change', { target: { value: '<' } });
+    expect(onChangeSelectedThreshold).not.toHaveBeenCalled();
+    expect(onChangeSelectedThresholdComparator).toHaveBeenCalled();
+
+    jest.clearAllMocks();
+    wrapper
+      .find('[data-test-subj="comparatorOptionsComboBox"]')
+      .last()
+      .simulate('change', { target: { value: 'between' } });
+    expect(onChangeSelectedThreshold).toHaveBeenCalled();
+    expect(onChangeSelectedThresholdComparator).toHaveBeenCalled();
+  });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
@@ -111,12 +111,17 @@ export const ThresholdExpression = ({
               data-test-subj="comparatorOptionsComboBox"
               value={thresholdComparator}
               onChange={(e) => {
+                const updateThresholdValue =
+                  comparators[thresholdComparator].requiredValues !==
+                  comparators[e.target.value].requiredValues;
                 onChangeSelectedThresholdComparator(e.target.value);
-                const thresholdValues = threshold.slice(
-                  0,
-                  comparators[e.target.value].requiredValues
-                );
-                onChangeSelectedThreshold(thresholdValues);
+                if (updateThresholdValue) {
+                  const thresholdValues = threshold.slice(
+                    0,
+                    comparators[e.target.value].requiredValues
+                  );
+                  onChangeSelectedThreshold(thresholdValues);
+                }
               }}
               options={Object.values(comparators).map(({ text, value }) => {
                 return { text, value };