migrate select_severity

x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.test.tsx

@@ -4,96 +4,63 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { MemoryRouter } from 'react-router-dom';
-import { mount } from 'enzyme';
-
-import { EuiSuperSelect } from '@elastic/eui';
-
-import { UrlStateProvider } from '@kbn/ml-url-state';
-
-import { SelectSeverity } from './select_severity';
+import React, { useState } from 'react';
+import { render, act, fireEvent, waitFor } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
+import { SelectSeverity, SEVERITY_OPTIONS } from './select_severity';
+
+// The following mock setup is necessary so that we can simulate
+// both triggering the update callback and the internal state update
+// to update the dropdown to the new state.
+const mockSeverityOptions = SEVERITY_OPTIONS;
+const mockUpdateCallback = jest.fn();
+const mockUseState = jest.fn().mockImplementation(useState);
+jest.mock('@kbn/ml-url-state', () => ({
+  usePageUrlState: () => {
+    const [severity, setSeverity] = mockUseState(mockSeverityOptions[0]);
+    return [severity, mockUpdateCallback.mockImplementation((d) => setSeverity(d))];
+  },
+}));
 
 describe('SelectSeverity', () => {
-  test('creates correct severity options and initial selected value', () => {
-    const wrapper = mount(
-      <MemoryRouter>
-        <UrlStateProvider>
-          <SelectSeverity />
-        </UrlStateProvider>
-      </MemoryRouter>
-    );
-    const select = wrapper.find(EuiSuperSelect);
-
-    const options = select.props().options;
-    const defaultSelectedValue = select.props().valueOfSelected;
-
-    expect(defaultSelectedValue).toBe('warning');
-    expect(options.length).toEqual(4);
-
-    // excpect options Array to equal Array containing Object that contains the property
-    expect(options).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          value: 'warning',
-        }),
-      ])
-    );
-
-    expect(options).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          value: 'minor',
-        }),
-      ])
-    );
-
-    expect(options).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          value: 'major',
-        }),
-      ])
+  it('updates the severity option correctly on click', async () => {
+    // prepare
+    const { getByText, getAllByText, queryByText, getByTestId } = render(
+      <IntlProvider locale="en">
+        <SelectSeverity />
+      </IntlProvider>
     );
 
-    expect(options).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          value: 'critical',
-        }),
-      ])
-    );
-  });
+    // assert initial state
+    expect(getAllByText('warning')).toHaveLength(2);
+    expect(queryByText('minor')).not.toBeInTheDocument();
+    expect(queryByText('major')).not.toBeInTheDocument();
+    expect(queryByText('critical')).not.toBeInTheDocument();
 
-  test('state for currently selected value is updated correctly on click', (done) => {
-    const wrapper = mount(
-      <MemoryRouter>
-        <UrlStateProvider>
-          <SelectSeverity />
-        </UrlStateProvider>
-      </MemoryRouter>
-    );
-
-    const select = wrapper.find(EuiSuperSelect).first();
-    const defaultSelectedValue = select.props().valueOfSelected;
-    expect(defaultSelectedValue).toBe('warning');
+    // open popover
+    act(() => {
+      fireEvent.click(getByTestId('mlAnomalySeverityThresholdControls'));
+    });
 
-    const onChange = select.props().onChange;
+    // assert open popover
+    expect(getAllByText('warning')).toHaveLength(3);
+    expect(getAllByText('minor')).toHaveLength(1);
+    expect(getAllByText('major')).toHaveLength(1);
+    expect(getAllByText('critical')).toHaveLength(1);
 
+    // click item in popver
     act(() => {
-      if (onChange !== undefined) {
-        onChange('critical');
-      }
+      fireEvent.click(getByText('major'));
     });
 
-    setImmediate(() => {
-      wrapper.update();
-      const updatedSelect = wrapper.find(EuiSuperSelect).first();
-      const updatedSelectedValue = updatedSelect.props().valueOfSelected;
-      expect(updatedSelectedValue).toBe('critical');
-      done();
+    // assert updated state
+    expect(mockUpdateCallback).toBeCalledWith(SEVERITY_OPTIONS[2]);
+    await waitFor(() => {
+      expect(queryByText('warning')).not.toBeInTheDocument();
+      expect(queryByText('minor')).not.toBeInTheDocument();
+      expect(getAllByText('major')).toHaveLength(2);
+      expect(queryByText('critical')).not.toBeInTheDocument();
     });
   });
 });

x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.tsx

@@ -150,7 +150,6 @@ export const SelectSeverityUI: FC<
       prepend={i18n.translate('xpack.ml.explorer.severityThresholdLabel', {
         defaultMessage: 'Severity',
       })}
-      id="severityThreshold"
       data-test-subj={'mlAnomalySeverityThresholdControls'}
       className={classNames}
       hasDividers