Cleaning up tests from act-warnings. (#18294)

* Migrating to TS.

* Adding types.

* Cleaning up tests.

* Removing obsolete snapshot.

graylog2-web-interface/src/components/authentication/BackendCreate/GettingStarted.test.tsx

@@ -15,15 +15,15 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { render } from 'wrappedTestingLibrary';
+import { render, screen } from 'wrappedTestingLibrary';
 
 import GettingStarted from './GettingStarted';
 
 describe('GettingStarted', () => {
-  it('should display description and select', () => {
-    const { queryByText, queryByLabelText } = render(<GettingStarted />);
+  it('should display description and select', async () => {
+    render(<GettingStarted />);
 
-    expect(queryByText(/Select an authentication service to setup a new one./)).not.toBeNull();
-    expect(queryByLabelText('Select a service')).not.toBeNull();
+    await screen.findByText(/Select an authentication service to setup a new one./);
+    await screen.findByLabelText('Select a service');
   });
 });

graylog2-web-interface/src/components/common/ErrorAlert.test.tsx

@@ -20,32 +20,33 @@ import { render, screen, fireEvent } from 'wrappedTestingLibrary';
 import ErrorAlert from './ErrorAlert';
 
 describe('ErrorAlert', () => {
-  it('should display an Error', () => {
+  it('should display an Error', async () => {
     render(<ErrorAlert>Franz</ErrorAlert>);
 
-    expect(screen.queryByText('Franz')).not.toBeNull();
+    await screen.findByText('Franz');
+
     expect(screen.queryByText('Runtime Error')).toBeNull();
   });
 
-  it('should display an Runtime Error', () => {
+  it('should display an Runtime Error', async () => {
     render(<ErrorAlert runtimeError>Franz</ErrorAlert>);
 
-    expect(screen.queryByText('Franz')).not.toBeNull();
-    expect(screen.queryByText('Runtime Error')).not.toBeNull();
+    await screen.findByText('Franz');
+    await screen.findByText('Runtime Error');
   });
 
-  it('should display nothing without children', () => {
+  it('should display nothing without children', async () => {
     render(<ErrorAlert />);
 
     expect(screen.queryByText('Franz')).toBeNull();
     expect(screen.queryByText('Runtime Error')).toBeNull();
   });
 
-  it('should call onClose handler', () => {
+  it('should call onClose handler', async () => {
     const onClose = jest.fn();
     render(<ErrorAlert onClose={onClose}>Franz</ErrorAlert>);
 
-    const closeBtn = screen.getByRole('button');
+    const closeBtn = await screen.findByRole('button');
 
     fireEvent.click(closeBtn);
 

graylog2-web-interface/src/components/common/InteractableModal.test.jsx → graylog2-web-interface/src/components/common/InteractableModal.test.tsx

@@ -15,14 +15,14 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import { render } from 'wrappedTestingLibrary';
+import { render, screen } from 'wrappedTestingLibrary';
 
 import InteractableModal from './InteractableModal';
 
 describe('<InteractableModal />', () => {
-  it('properly renders', () => {
-    const { firstChild } = render(<InteractableModal><div /></InteractableModal>);
+  it('properly renders', async () => {
+    render(<InteractableModal><div>This is the modal</div></InteractableModal>);
 
-    expect(firstChild).toMatchSnapshot();
+    await screen.findByText('This is the modal');
   });
 });

graylog2-web-interface/src/components/common/InteractableModal.jsx → graylog2-web-interface/src/components/common/InteractableModal.tsx

@@ -93,6 +93,22 @@ const CloseButton = styled(Button)(({ theme }) => css`
  * Can be controlled or uncontrolled, using [`react-rnd`](https://github.com/bokuweb/react-rnd) under the hood
  */
 
+type Coords = { x: number, y: number };
+type Size = { width: string, height: string };
+
+type Props = {
+  className?: string,
+  minHeight?: number,
+  minWidth?: number,
+  onClose: () => void,
+  onDrag: (newCoords: Coords) => void,
+  onResize: (newSize: Size) => void,
+  position: Coords,
+  size: Size,
+  title: string,
+  wrapperClassName?: string,
+};
+
 const InteractableModal = ({
   children,
   className,
@@ -105,19 +121,19 @@ const InteractableModal = ({
   size,
   title,
   wrapperClassName,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const dragHandleRef = useRef(null);
   const [dragHandleClassName, setDragHandleClassName] = useState(null);
   const [dragPosition, setDragPosition] = useState(position);
   const [resizeSize, setResizeSize] = useState(size);
 
-  const handleDragStop = (event, { x, y }) => {
+  const handleDragStop = (_event, { x, y }: Coords) => {
     setDragPosition({ x, y });
     onDrag({ x, y });
   };
 
-  const handleResizeStop = (event, direction, ref) => {
-    const newSize = {
+  const handleResizeStop = (_event, direction, ref) => {
+    const newSize: Size = {
       width: ref.style.width,
       height: ref.style.height,
     };
@@ -171,12 +187,13 @@ const InteractableModal = ({
       right: parseFloat(width),
     };
 
-    const newCoords = {};
     const modalXWithNewWidth = innerWidth - boundingBox.right;
     const modalYWithNewHeight = innerHeight - boundingBox.bottom;
 
-    newCoords.x = Math.max(Math.min(modalXWithNewWidth, currentX), boundingBox.left);
-    newCoords.y = Math.max(Math.min(modalYWithNewHeight, currentY), boundingBox.top);
+    const newCoords = {
+      x: Math.max(Math.min(modalXWithNewWidth, currentX), boundingBox.left),
+      y: Math.max(Math.min(modalYWithNewHeight, currentY), boundingBox.top),
+    };
 
     handleDragStop(null, newCoords);
   }, 150);

graylog2-web-interface/src/components/common/Spinner.test.jsx → graylog2-web-interface/src/components/common/Spinner.test.tsx

@@ -15,34 +15,34 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import { render } from 'wrappedTestingLibrary';
+import { render, screen } from 'wrappedTestingLibrary';
 import { act } from 'react-dom/test-utils';
 
 import Spinner from 'components/common/Spinner';
 
 jest.useFakeTimers();
 
 describe('<Spinner />', () => {
-  it('should render without props', () => {
-    const { getByText } = render(<Spinner delay={0} />);
+  it('should render without props', async () => {
+    render(<Spinner delay={0} />);
 
-    expect(getByText('Loading...')).not.toBeNull();
+    await screen.findByText('Loading...');
   });
 
-  it('should render with a different text string', () => {
+  it('should render with a different text string', async () => {
     const text = 'Hello world!';
-    const { getByText } = render(<Spinner text={text} delay={0} />);
+    render(<Spinner text={text} delay={0} />);
 
-    expect(getByText(text)).not.toBeNull();
+    await screen.findByText(text);
   });
 
-  it('should not be visible initially', () => {
-    const { queryByText } = render(<Spinner />);
+  it('should not be visible initially', async () => {
+    render(<Spinner />);
 
-    expect(queryByText('Loading ...')).toBeNull();
+    expect(screen.queryByText('Loading ...')).toBeNull();
   });
 
-  it('should be visible after when delay is completed', () => {
+  it('should be visible after when delay is completed', async () => {
     const { container } = render(<Spinner />);
 
     act(() => {

graylog2-web-interface/src/components/roles/RoleEdit/TeamsSection.test.tsx

@@ -23,13 +23,13 @@ import { manager as exampleRole } from 'fixtures/roles';
 import TeamsSection from './TeamsSection';
 
 describe('<TeamsSection />', () => {
-  it('should display info if license is not present', () => {
+  it('should display info if license is not present', async () => {
     render(<TeamsSection role={exampleRole} />);
 
-    expect(screen.getByText('Enterprise Feature')).toBeInTheDocument();
+    expect(await screen.findByText('Enterprise Feature')).toBeInTheDocument();
   });
 
-  it('should display enterprise role teams assignment plugin', () => {
+  it('should display enterprise role teams assignment plugin', async () => {
     PluginStore.register(new PluginManifest({}, {
       teams: {
         RoleTeamsAssignment: () => <>RoleTeamsAssignment</>,
@@ -38,6 +38,6 @@ describe('<TeamsSection />', () => {
 
     render(<TeamsSection role={exampleRole} />);
 
-    expect(screen.getByText('RoleTeamsAssignment')).toBeInTheDocument();
+    expect(await screen.findByText('RoleTeamsAssignment')).toBeInTheDocument();
   });
 });

graylog2-web-interface/src/pages/RulesPage.test.tsx

@@ -15,16 +15,14 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { renderWithDataRouter } from 'wrappedTestingLibrary';
+import { render, screen } from 'wrappedTestingLibrary';
 
 import RulesPage from './RulesPage';
 
 describe('RulesPage', () => {
-  it('should show create rule button', () => {
-    const { getByRole } = renderWithDataRouter(<RulesPage />);
+  it('should show create rule button', async () => {
+    render(<RulesPage />);
 
-    const createRuleButton = getByRole('button', { name: 'Create Rule' });
-
-    expect(createRuleButton).toBeInTheDocument();
+    await screen.findByRole('button', { name: 'Create Rule' });
   });
 });

graylog2-web-interface/src/pages/StreamPermissionErrorPage.test.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
 
-import suppressConsole from 'helpers/suppressConsole';
 import mockComponent from 'helpers/mocking/MockComponent';
 import FetchError from 'logic/errors/FetchError';
 
@@ -29,11 +28,9 @@ describe('StreamPermissionErrorPage', () => {
   it('displays fetch error', async () => {
     const response = { status: 403, body: { message: 'The request error message', streams: ['stream-1-id', 'stream-2-id'], type: 'MissingStreamPermission' } };
 
-    await suppressConsole(() => {
-      render(<StreamPermissionErrorPage error={new FetchError('The request error message', response.status, response)} missingStreamIds={['stream-1-id', 'stream-2-id']} />);
-    });
+    render(<StreamPermissionErrorPage error={new FetchError('The request error message', response.status, response)} missingStreamIds={['stream-1-id', 'stream-2-id']} />);
 
-    expect(screen.getByText('Missing Stream Permissions')).not.toBeNull();
-    expect(screen.getByText('You need permissions for streams with the id: stream-1-id, stream-2-id.')).not.toBeNull();
+    await screen.findByText('Missing Stream Permissions');
+    await screen.findByText('You need permissions for streams with the id: stream-1-id, stream-2-id.');
   });
 });

graylog2-web-interface/src/pages/UnauthorizedErrorPage.test.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
 
-import suppressConsole from 'helpers/suppressConsole';
 import mockComponent from 'helpers/mocking/MockComponent';
 import FetchError from 'logic/errors/FetchError';
 
@@ -29,11 +28,9 @@ describe('UnauthorizedErrorPage', () => {
   it('displays fetch error', async () => {
     const response = { status: 403, body: { message: 'The request error message' } };
 
-    await suppressConsole(() => {
-      render(<UnauthorizedErrorPage error={new FetchError('The request error message', response.status, response)} />);
-    });
+    render(<UnauthorizedErrorPage error={new FetchError('The request error message', response.status, response)} />);
 
-    expect(screen.getByText('Missing Permissions')).not.toBeNull();
-    expect(screen.getByText(/The request error message/)).not.toBeNull();
+    await screen.findByText('Missing Permissions');
+    await screen.findByText(/The request error message/);
   });
 });

graylog2-web-interface/src/pages/UnauthorizedErrorPage.tsx

@@ -42,7 +42,7 @@ type Props = {
 };
 
 const UnauthorizedErrorPage = ({ error, errorDetails, title, description, location: { pathname } }: Props) => {
-  const errorMessage = error?.message || JSON.stringify(error);
+  const errorMessage = error?.message ?? JSON.stringify(error);
   const pageDetails = `The permissions check for the following request failed,\nwhile trying to access ${pathname}.`;
   const defaultDescription = (
     <>

graylog2-web-interface/src/views/components/searchbar/StreamsFilter.test.tsx

@@ -15,28 +15,28 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { mount } from 'wrappedEnzyme';
-
-import Select from 'components/common/Select';
+import { render, screen } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
 
 import StreamsFilter from './StreamsFilter';
 
 describe('StreamsFilter', () => {
-  it('sorts stream names', () => {
+  it('sorts stream names', async () => {
     const streams = [
       { key: 'One Stream', value: 'streamId1' },
       { key: 'another Stream', value: 'streamId2' },
       { key: 'Yet another Stream', value: 'streamId3' },
       { key: '101 Stream', value: 'streamId4' },
     ];
-    const wrapper = mount(<StreamsFilter streams={streams} onChange={() => {}} />);
-    const { options }: { options?: React.ComponentProps<typeof Select>['options'] } = wrapper.find(Select).first().props();
+    render(<StreamsFilter streams={streams} onChange={() => {}} />);
 
-    expect(options).toEqual([
-      { key: '101 Stream', value: 'streamId4' },
-      { key: 'another Stream', value: 'streamId2' },
-      { key: 'One Stream', value: 'streamId1' },
-      { key: 'Yet another Stream', value: 'streamId3' },
-    ]);
+    const select = await screen.findByLabelText(/select streams/i);
+
+    selectEvent.openMenu(select);
+
+    await screen.findByText('101 Stream');
+    await screen.findByText('another Stream');
+    await screen.findByText('One Stream');
+    await screen.findByText('Yet another Stream');
   });
 });

graylog2-web-interface/src/views/components/widgets/ErrorWidget.test.tsx

@@ -15,14 +15,14 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import { mount } from 'wrappedEnzyme';
+import { render, screen } from 'wrappedTestingLibrary';
 
 import SearchError from 'views/logic/SearchError';
 
 import ErrorWidget from './ErrorWidget';
 
 describe('<ErrorWidget />', () => {
-  it('should display a list item for every provided error', () => {
+  it('should display a list item for every provided error', async () => {
     const errors = [
       new SearchError({
         description: 'The first error',
@@ -40,11 +40,9 @@ describe('<ErrorWidget />', () => {
       }),
     ];
 
-    const wrapper = mount(<ErrorWidget errors={errors} />);
-    const firstListItem = wrapper.find('li').at(0);
-    const secondListItem = wrapper.find('li').at(1);
+    render(<ErrorWidget errors={errors} />);
 
-    expect(firstListItem.text()).toContain(errors[0].description);
-    expect(secondListItem.text()).toContain(errors[1].description);
+    await screen.findByText(errors[0].description);
+    await screen.findByText(errors[1].description);
   });
 });