[Management][Es Ui Shared][Kbn Management] Migrate Enzyme to RTL

src/platform/packages/shared/kbn-management/settings/application/query_input.test.tsx

@@ -9,10 +9,10 @@
 
 import React from 'react';
 import { Query } from '@elastic/eui';
-import { findTestSubject } from '@elastic/eui/lib/test';
-import { act, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test-jest-helpers';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
 import { getSettingsMock } from '@kbn/management-settings-utilities/mocks/settings.mock';
 
 import { QueryInput } from './query_input';
@@ -27,57 +27,54 @@ const categories = Object.keys(
   )
 );
 
+beforeAll(() => {
+  jest.useFakeTimers();
+});
+
+afterAll(() => {
+  jest.useRealTimers();
+});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+
 describe('Search', () => {
   it('should render normally', async () => {
     const onQueryChange = () => {};
-    const component = shallowWithI18nProvider(
-      <QueryInput {...{ categories, query, onQueryChange }} />
-    );
+    const { container } = renderWithI18n(<QueryInput {...{ categories, query, onQueryChange }} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it('should call parent function when query is changed', async () => {
-    // This test is brittle as it knows about implementation details
-    // (EuiFieldSearch uses onKeyup instead of onChange to handle input)
     const onQueryChange = jest.fn();
-    const component = mountWithI18nProvider(
-      <QueryInput {...{ categories, query, onQueryChange }} />
-    );
-    findTestSubject(component, 'settingsSearchBar').simulate('keyup', {
-      target: { value: 'new filter' },
-    });
-    expect(onQueryChange).toHaveBeenCalledTimes(1);
+    renderWithI18n(<QueryInput {...{ categories, query, onQueryChange }} />);
+
+    const searchBar = screen.getByTestId('settingsSearchBar');
+    await user.type(searchBar, 'new filter');
+
+    expect(onQueryChange).toHaveBeenCalled();
   });
 
   it('should handle query parse error', async () => {
     const onQueryChange = jest.fn();
-    const component = mountWithI18nProvider(
-      <QueryInput {...{ categories, query }} onQueryChange={onQueryChange} />
-    );
+    renderWithI18n(<QueryInput {...{ categories, query }} onQueryChange={onQueryChange} />);
 
-    const searchBar = findTestSubject(component, 'settingsSearchBar');
+    const searchBar = screen.getByTestId('settingsSearchBar');
 
     // Send invalid query
-    act(() => {
-      searchBar.simulate('keyup', { target: { value: '?' } });
-    });
+    await user.type(searchBar, '?');
 
-    expect(onQueryChange).toHaveBeenCalledTimes(1);
-
-    waitFor(() => {
-      expect(component.contains('Unable to parse query')).toBe(true);
-    });
+    expect(onQueryChange).toHaveBeenCalled();
+    expect(screen.getByText(/Unable to parse query/)).toBeInTheDocument();
 
     // Send valid query to ensure component can recover from invalid query
-    act(() => {
-      searchBar.simulate('keyup', { target: { value: 'dateFormat' } });
-    });
-
-    expect(onQueryChange).toHaveBeenCalledTimes(2);
+    await user.clear(searchBar);
+    await user.type(searchBar, 'dateFormat');
 
-    waitFor(() => {
-      expect(component.contains('Unable to parse query')).toBe(false);
-    });
+    expect(screen.queryByText(/Unable to parse query/)).not.toBeInTheDocument();
   });
 });