migrate select_interval

elastic · Mar 20, 2023 · f140df4 · f140df4
1 parent 4831d17
commit f140df4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 32 deletions.
diff --git a/...lugins/ml/public/application/components/controls/select_interval/select_interval.test.tsx b/...lugins/ml/public/application/components/controls/select_interval/select_interval.test.tsx
@@ -6,57 +6,43 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { mount } from 'enzyme';
+import { render, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { EuiSelect } from '@elastic/eui';
+import { SelectInterval } from './select_interval';
 
-import { UrlStateProvider } from '@kbn/ml-url-state';
+const mockUpdateCallback = jest.fn();
+const mockUsePageUrlState = [{ display: 'Auto', val: 'auto' }, mockUpdateCallback];
 
-import { SelectInterval } from './select_interval';
+jest.mock('@kbn/ml-url-state', () => ({
+  usePageUrlState: () => mockUsePageUrlState,
+}));
 
 describe('SelectInterval', () => {
   test('creates correct initial selected value', () => {
-    const wrapper = mount(
+    const { getByText } = render(
       <MemoryRouter>
-        <UrlStateProvider>
-          <SelectInterval />
-        </UrlStateProvider>
+        <SelectInterval />
       </MemoryRouter>
     );
-    const select = wrapper.find(EuiSelect);
 
-    const defaultSelectedValue = select.props().value;
-    expect(defaultSelectedValue).toBe('auto');
+    expect((getByText('Auto') as HTMLOptionElement).selected).toBeTruthy();
   });
 
-  test('currently selected value is updated correctly on click', (done) => {
-    const wrapper = mount(
+  test('currently selected value is updated correctly on click', () => {
+    const { getByText, getByTestId } = render(
       <MemoryRouter>
-        <UrlStateProvider>
-          <SelectInterval />
-        </UrlStateProvider>
+        <SelectInterval />
       </MemoryRouter>
     );
-    const select = wrapper.find(EuiSelect).first();
-    const defaultSelectedValue = select.props().value;
-    expect(defaultSelectedValue).toBe('auto');
 
-    const onChange = select.props().onChange;
+    expect((getByText('Auto') as HTMLOptionElement).selected).toBeTruthy();
 
     act(() => {
-      if (onChange !== undefined) {
-        onChange({ target: { value: 'day' } } as React.ChangeEvent<HTMLSelectElement>);
-      }
+      userEvent.selectOptions(getByTestId('mlSelectInterval'), getByText('1 hour'));
     });
 
-    setImmediate(() => {
-      wrapper.update();
-      const updatedSelect = wrapper.find(EuiSelect).first();
-      const updatedSelectedValue = updatedSelect.props().value;
-      expect(updatedSelectedValue).toBe('day');
-      done();
-    });
+    expect(mockUpdateCallback).toBeCalledWith({ display: '1 hour', val: 'hour' });
   });
 });
diff --git a/x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx b/x-pack/plugins/ml/public/application/components/controls/select_interval/select_interval.tsx
@@ -87,6 +87,7 @@ export const SelectIntervalUI: FC<SelectIntervalUIProps> = ({ interval, onChange
 
   return (
     <EuiSelect
+      data-test-subj="mlSelectInterval"
       prepend={i18n.translate('xpack.ml.explorer.intervalLabel', {
         defaultMessage: 'Interval',
       })}
@@ -101,7 +102,6 @@ export const SelectIntervalUI: FC<SelectIntervalUIProps> = ({ interval, onChange
         </EuiToolTip>
       }
       compressed
-      id="selectInterval"
       options={OPTIONS}
       value={interval.val}
       onChange={handleOnChange}