[ML] Fix SelectInterval tests.

walterra · walterra · commit 374b99d4f6aa · 2020-01-11T22:08:58.000+01:00
diff --git a/x-pack/legacy/plugins/ml/public/application/components/controls/select_interval/select_interval.test.tsx b/x-pack/legacy/plugins/ml/public/application/components/controls/select_interval/select_interval.test.tsx
@@ -5,26 +5,51 @@
  */
 
 import React from 'react';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import { mount } from 'enzyme';
+
+import { EuiSelect } from '@elastic/eui';
+
 import { SelectInterval } from './select_interval';
 
 describe('SelectInterval', () => {
   test('creates correct initial selected value', () => {
-    const wrapper = shallowWithIntl(<SelectInterval />);
-    const defaultSelectedValue = wrapper.props().interval.val;
+    const wrapper = mount(
+      <MemoryRouter>
+        <SelectInterval />
+      </MemoryRouter>
+    );
+    const select = wrapper.find(EuiSelect);
 
+    const defaultSelectedValue = select.props().value;
     expect(defaultSelectedValue).toBe('auto');
   });
 
-  test('currently selected value is updated correctly on click', () => {
-    const wrapper = shallowWithIntl(<SelectInterval />);
-    const select = wrapper.first().shallow();
-
-    const defaultSelectedValue = wrapper.props().interval.val;
+  test('currently selected value is updated correctly on click', done => {
+    const wrapper = mount(
+      <MemoryRouter>
+        <SelectInterval />
+      </MemoryRouter>
+    );
+    const select = wrapper.find(EuiSelect).first();
+    const defaultSelectedValue = select.props().value;
     expect(defaultSelectedValue).toBe('auto');
 
-    select.simulate('change', { target: { value: 'day' } });
-    const updatedSelectedValue = wrapper.props().interval.val;
-    expect(updatedSelectedValue).toBe('day');
+    const onChange = select.props().onChange;
+
+    act(() => {
+      if (onChange !== undefined) {
+        onChange({ target: { value: 'day' } } as React.ChangeEvent<HTMLSelectElement>);
+      }
+    });
+
+    setImmediate(() => {
+      wrapper.update();
+      const updatedSelect = wrapper.find(EuiSelect).first();
+      const updatedSelectedValue = updatedSelect.props().value;
+      expect(updatedSelectedValue).toBe('day');
+      done();
+    });
   });
 });
diff --git a/x-pack/legacy/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx b/x-pack/legacy/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx
@@ -58,7 +58,7 @@ function optionValueToInterval(value: string) {
   return interval;
 }
 
-const TABLE_INTERVAL_DEFAULT = OPTIONS[0].value;
+const TABLE_INTERVAL_DEFAULT = optionValueToInterval('auto');
 const TABLE_INTERVAL_APP_STATE_NAME = 'mlSelectInterval';
 
 export const useTableInterval = () => {
diff --git a/x-pack/legacy/plugins/ml/public/application/components/controls/select_severity/select_severity.test.tsx b/x-pack/legacy/plugins/ml/public/application/components/controls/select_severity/select_severity.test.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Route } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 
 import { EuiSuperSelect } from '@elastic/eui';
@@ -64,10 +64,8 @@ describe('SelectSeverity', () => {
 
   test('state for currently selected value is updated correctly on click', done => {
     const wrapper = mount(
-      <MemoryRouter initialEntries={['page']}>
-        <Route path="page">
-          <SelectSeverity />
-        </Route>
+      <MemoryRouter>
+        <SelectSeverity />
       </MemoryRouter>
     );
 

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ function optionValueToInterval(value: string) {`
`58`	`58`	`return interval;`
`59`	`59`	`}`
`60`	`60`
`61`		`-const TABLE_INTERVAL_DEFAULT = OPTIONS[0].value;`
	`61`	`+const TABLE_INTERVAL_DEFAULT = optionValueToInterval('auto');`
`62`	`62`	`const TABLE_INTERVAL_APP_STATE_NAME = 'mlSelectInterval';`
`63`	`63`
`64`	`64`	`export const useTableInterval = () => {`