Improve test reliability in preparation of React 18. (#17990)

* Improve test reliability in preparation of React 18. * Improving more tests. * Updating `react-select-event`. * Improving more tests. * Improving test. * Using `act` when needed. * Migrate `connect` test to testing-library. * Make sure enzyme types are present.
Graylog2 · Jan 19, 2024 · c8d84e8 · c8d84e8
1 parent 75ce9ac
commit c8d84e8
Show file tree

Hide file tree

Showing 18 changed files with 191 additions and 148 deletions.
diff --git a/graylog2-web-interface/packages/jest-preset-graylog/package.json b/graylog2-web-interface/packages/jest-preset-graylog/package.json
@@ -28,7 +28,7 @@
     "jest-environment-jsdom": "29.6.2",
     "jest-enzyme": "^7.1.2",
     "jest-styled-components": "7.2.0",
-    "react-select-event": "^5.0.0",
+    "react-select-event": "5.5.1",
     "resize-observer-polyfill": "^1.5.1"
   }
 }
diff --git a/...ace/src/components/authentication/AuthenticatorsEdit/HTTPHeaderAuthConfigSection.test.tsx b/...ace/src/components/authentication/AuthenticatorsEdit/HTTPHeaderAuthConfigSection.test.tsx
@@ -19,6 +19,7 @@ import { render, screen, act, fireEvent, waitFor } from 'wrappedTestingLibrary';
 
 import { HTTPHeaderAuthConfigActions } from 'stores/authentication/HTTPHeaderAuthConfigStore';
 import HTTPHeaderAuthConfig from 'logic/authentication/HTTPHeaderAuthConfig';
+import asMock from 'helpers/mocking/AsMock';
 
 import HTTPHeaderAuthConfigSection from './HTTPHeaderAuthConfigSection';
 
@@ -39,6 +40,7 @@ describe('<HTTPHeaderAuthConfigSection />', () => {
 
   it('should display loading indicator while loading', async () => {
     jest.useFakeTimers();
+    asMock(HTTPHeaderAuthConfigActions.load).mockImplementationOnce(() => new Promise(() => {}));
 
     render(<HTTPHeaderAuthConfigSection />);
 

diff --git a/graylog2-web-interface/src/components/bootstrap/DropdownButton.test.tsx b/graylog2-web-interface/src/components/bootstrap/DropdownButton.test.tsx
@@ -16,6 +16,7 @@
  */
 import * as React from 'react';
 import { render, screen, waitFor } from 'wrappedTestingLibrary';
+import userEvent from '@testing-library/user-event';
 
 import MenuItem from 'components/bootstrap/MenuItem';
 
@@ -30,7 +31,7 @@ describe('DropdownButton', () => {
     ));
 
     const button = await screen.findByRole('button', { name: 'Click me!' });
-    button.click();
+    await userEvent.click(button);
 
     await screen.findByRole('menuitem', { name: 'Hey there!' });
   });
@@ -45,10 +46,10 @@ describe('DropdownButton', () => {
     ));
 
     const button = await screen.findByRole('button', { name: 'Click me!' });
-    button.click();
+    await userEvent.click(button);
 
     const menuitem = await screen.findByRole('menuitem', { name: 'Hey there!' });
-    menuitem.click();
+    await userEvent.click(menuitem);
 
     await waitFor(() => {
       expect(onClick).toHaveBeenCalled();

diff --git a/graylog2-web-interface/src/components/common/URLWhiteListFormModal.test.tsx b/graylog2-web-interface/src/components/common/URLWhiteListFormModal.test.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 import { screen, render } from 'wrappedTestingLibrary';
 import Immutable from 'immutable';
 import { defaultUser } from 'defaultMockValues';
+import userEvent from '@testing-library/user-event';
 
 import { adminUser } from 'fixtures/users';
 import MockAction from 'helpers/mocking/MockAction';
@@ -61,7 +62,7 @@ describe('<URLWhiteListFormModal>', () => {
 
     expect(addButton).toBeInTheDocument();
 
-    addButton.click();
+    await userEvent.click(addButton);
 
     expect(await screen.findByText('Whitelist URLs')).toBeInTheDocument();
     expect(screen.getByDisplayValue('http://graylog.com')).toBeInTheDocument();
@@ -110,7 +111,7 @@ describe('<URLWhiteListFormModal>', () => {
 
     expect(addButton).toBeInTheDocument();
 
-    addButton.click();
+    await userEvent.click(addButton);
 
     expect(await screen.findByText('Whitelist URLs')).toBeInTheDocument();
     expect(screen.getByDisplayValue('http://localhost(:\\d+)?')).toBeInTheDocument();

diff --git a/graylog2-web-interface/src/components/configurations/UrlWhiteListForm.test.tsx b/graylog2-web-interface/src/components/configurations/UrlWhiteListForm.test.tsx
@@ -64,14 +64,14 @@ describe('UrlWhitelistForm', () => {
     jest.useRealTimers();
   });
 
-  it('should show allow list toggle and url table', () => {
+  it('should show allow list toggle and url table', async () => {
     const onUpdate = jest.fn();
 
     render(<UrlWhiteListForm urls={config.entries}
                              disabled={config.disabled}
                              onUpdate={onUpdate} />);
 
-    expect(screen.getByRole('checkbox', { name: /disable whitelist/i })).toBeInTheDocument();
+    await screen.findByRole('checkbox', { name: /disable whitelist/i });
 
     config.entries.forEach(({ title }) => {
       expect(screen.getByDisplayValue(title)).toBeInTheDocument();
@@ -117,8 +117,8 @@ describe('UrlWhitelistForm', () => {
                              disabled={config.disabled}
                              onUpdate={onUpdate} />);
 
-    const row = screen.getByRole('row', { name: /3/i, exact: true });
-    const select = within(row).getByText(/exact match/i);
+    const row = await screen.findByRole('row', { name: /3/i });
+    const select = await within(row).findByText(/exact match/i);
 
     await selectEvent.openMenu(select);
     await selectEvent.select(select, 'Regex');
@@ -138,24 +138,26 @@ describe('UrlWhitelistForm', () => {
     );
   });
 
-  it('should add a new row to the form', () => {
+  it('should add a new row to the form', async () => {
     const onUpdate = jest.fn();
 
     render(<UrlWhiteListForm urls={config.entries}
                              disabled={config.disabled}
                              onUpdate={onUpdate} />);
 
-    expect(screen.queryByRole('cell', { name: String(config.entries.length + 1) })).not.toBeInTheDocument();
+    const button = (await screen.findAllByRole('button', { name: /add url/i }))[0];
 
-    const button = screen.getAllByRole('button', { name: /add url/i })[0];
+    expect(screen.queryByRole('cell', { name: String(config.entries.length + 1) })).not.toBeInTheDocument();
 
     expect(button).toBeInTheDocument();
 
     userEvent.click(button);
 
     expect(screen.getByRole('cell', { name: String(config.entries.length + 1) })).toBeInTheDocument();
 
-    expect(onUpdate).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalled();
+    });
   });
 
   it('should delete a row', async () => {
@@ -167,7 +169,7 @@ describe('UrlWhitelistForm', () => {
 
     expect(screen.getByDisplayValue(config.entries[0].title)).toBeInTheDocument();
 
-    const row = screen.getByRole('row', { name: /1/i, exact: true });
+    const row = screen.getByRole('row', { name: /1/i });
     const deleteButton = within(row).getByRole('button', { name: /delete entry/i });
 
     expect(deleteButton).toBeInTheDocument();
@@ -244,10 +246,11 @@ describe('UrlWhitelistForm', () => {
                                disabled={config.disabled}
                                onUpdate={onUpdate} />);
 
-      const row = screen.getByRole('row', { name: /3/i, exact: true });
+      const row = screen.getByRole('row', { name: /3/i });
       const select = within(row).getByText(/exact match/i);
 
       await selectEvent.openMenu(select);
+
       await selectEvent.select(select, 'Regex');
 
       await screen.findByText(/not a valid java regular expression/i);

diff --git a/graylog2-web-interface/src/components/users/UserEdit/SettingsSection.test.tsx b/graylog2-web-interface/src/components/users/UserEdit/SettingsSection.test.tsx
@@ -15,7 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { render, fireEvent, waitFor, screen } from 'wrappedTestingLibrary';
+import { act, render, fireEvent, waitFor, screen } from 'wrappedTestingLibrary';
 import selectEvent from 'react-select-event';
 import { List } from 'immutable';
 
@@ -79,7 +79,11 @@ describe('<SettingsSection />', () => {
     await screen.findByText('Hours');
 
     fireEvent.change(timeoutAmountInput, { target: { value: '40' } });
-    await selectEvent.select(timeoutUnitSelect, 'Days');
+
+    await act(async () => {
+      await selectEvent.select(timeoutUnitSelect, 'Days');
+    });
+
     await selectEvent.select(timezoneSelect, 'Vancouver');
     fireEvent.click(submitButton);
 

diff --git a/graylog2-web-interface/src/hooks/useLogout.test.tsx b/graylog2-web-interface/src/hooks/useLogout.test.tsx
@@ -19,9 +19,11 @@ import * as React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import DefaultProviders from 'DefaultProviders';
+import userEvent from '@testing-library/user-event';
 
 import Routes from 'routing/Routes';
 import { usePluginExports } from 'views/test/testPlugins';
+import suppressConsole from 'helpers/suppressConsole';
 
 import useLogout from './useLogout';
 
@@ -48,7 +50,7 @@ describe('useLogout', () => {
       await screen.findByText('Logged in');
 
       const logoutButton = await screen.findByRole('button', { name: 'logout' });
-      logoutButton.click();
+      userEvent.click(logoutButton);
 
       await screen.findByText('Logged out');
     });
@@ -63,7 +65,7 @@ describe('useLogout', () => {
       await screen.findByText('Logged in');
 
       const logoutButton = await screen.findByRole('button', { name: 'logout' });
-      logoutButton.click();
+      userEvent.click(logoutButton);
 
       await screen.findByText('Logged out');
 
@@ -81,7 +83,10 @@ describe('useLogout', () => {
       await screen.findByText('Logged in');
 
       const logoutButton = await screen.findByRole('button', { name: 'logout' });
-      logoutButton.click();
+
+      suppressConsole(() => {
+        userEvent.click(logoutButton);
+      });
 
       await screen.findByText('Logged out');