From df102d487296f289ce1a32421349ccf3555fe269 Mon Sep 17 00:00:00 2001 From: Dennis Oelkers Date: Fri, 16 Feb 2024 16:47:12 +0100 Subject: [PATCH] Cleaning up tests from act-warnings. (#18294) * Migrating to TS. * Adding types. * Cleaning up tests. * Removing obsolete snapshot. --- .../BackendCreate/GettingStarted.test.tsx | 10 +++--- .../src/components/common/ErrorAlert.test.tsx | 17 +++++----- ...al.test.jsx => InteractableModal.test.tsx} | 8 ++--- ...actableModal.jsx => InteractableModal.tsx} | 31 ++++++++++++++----- .../{Spinner.test.jsx => Spinner.test.tsx} | 22 ++++++------- .../InteractableModal.test.jsx.snap | 3 -- .../roles/RoleEdit/TeamsSection.test.tsx | 8 ++--- .../src/pages/RulesPage.test.tsx | 10 +++--- .../pages/StreamPermissionErrorPage.test.tsx | 9 ++---- .../src/pages/UnauthorizedErrorPage.test.tsx | 9 ++---- .../src/pages/UnauthorizedErrorPage.tsx | 2 +- .../searchbar/StreamsFilter.test.tsx | 24 +++++++------- .../components/widgets/ErrorWidget.test.tsx | 12 +++---- 13 files changed, 85 insertions(+), 80 deletions(-) rename graylog2-web-interface/src/components/common/{InteractableModal.test.jsx => InteractableModal.test.tsx} (77%) rename graylog2-web-interface/src/components/common/{InteractableModal.jsx => InteractableModal.tsx} (91%) rename graylog2-web-interface/src/components/common/{Spinner.test.jsx => Spinner.test.tsx} (64%) delete mode 100644 graylog2-web-interface/src/components/common/__snapshots__/InteractableModal.test.jsx.snap diff --git a/graylog2-web-interface/src/components/authentication/BackendCreate/GettingStarted.test.tsx b/graylog2-web-interface/src/components/authentication/BackendCreate/GettingStarted.test.tsx index 38e2487dc8d4..67d22aa1f30c 100644 --- a/graylog2-web-interface/src/components/authentication/BackendCreate/GettingStarted.test.tsx +++ b/graylog2-web-interface/src/components/authentication/BackendCreate/GettingStarted.test.tsx @@ -15,15 +15,15 @@ * . */ 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(); + it('should display description and select', async () => { + render(); - 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'); }); }); diff --git a/graylog2-web-interface/src/components/common/ErrorAlert.test.tsx b/graylog2-web-interface/src/components/common/ErrorAlert.test.tsx index d78a1a7c832e..43e437111c8b 100644 --- a/graylog2-web-interface/src/components/common/ErrorAlert.test.tsx +++ b/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(Franz); - 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(Franz); - 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(); 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(Franz); - const closeBtn = screen.getByRole('button'); + const closeBtn = await screen.findByRole('button'); fireEvent.click(closeBtn); diff --git a/graylog2-web-interface/src/components/common/InteractableModal.test.jsx b/graylog2-web-interface/src/components/common/InteractableModal.test.tsx similarity index 77% rename from graylog2-web-interface/src/components/common/InteractableModal.test.jsx rename to graylog2-web-interface/src/components/common/InteractableModal.test.tsx index c5faf40bbf05..fcc2cc526142 100644 --- a/graylog2-web-interface/src/components/common/InteractableModal.test.jsx +++ b/graylog2-web-interface/src/components/common/InteractableModal.test.tsx @@ -15,14 +15,14 @@ * . */ import React from 'react'; -import { render } from 'wrappedTestingLibrary'; +import { render, screen } from 'wrappedTestingLibrary'; import InteractableModal from './InteractableModal'; describe('', () => { - it('properly renders', () => { - const { firstChild } = render(
); + it('properly renders', async () => { + render(
This is the modal
); - expect(firstChild).toMatchSnapshot(); + await screen.findByText('This is the modal'); }); }); diff --git a/graylog2-web-interface/src/components/common/InteractableModal.jsx b/graylog2-web-interface/src/components/common/InteractableModal.tsx similarity index 91% rename from graylog2-web-interface/src/components/common/InteractableModal.jsx rename to graylog2-web-interface/src/components/common/InteractableModal.tsx index 28979e8e3d12..cb8e743805be 100644 --- a/graylog2-web-interface/src/components/common/InteractableModal.jsx +++ b/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) => { 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); diff --git a/graylog2-web-interface/src/components/common/Spinner.test.jsx b/graylog2-web-interface/src/components/common/Spinner.test.tsx similarity index 64% rename from graylog2-web-interface/src/components/common/Spinner.test.jsx rename to graylog2-web-interface/src/components/common/Spinner.test.tsx index 301f53241136..8f625ce5930e 100644 --- a/graylog2-web-interface/src/components/common/Spinner.test.jsx +++ b/graylog2-web-interface/src/components/common/Spinner.test.tsx @@ -15,7 +15,7 @@ * . */ 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'; @@ -23,26 +23,26 @@ import Spinner from 'components/common/Spinner'; jest.useFakeTimers(); describe('', () => { - it('should render without props', () => { - const { getByText } = render(); + it('should render without props', async () => { + render(); - 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(); + render(); - expect(getByText(text)).not.toBeNull(); + await screen.findByText(text); }); - it('should not be visible initially', () => { - const { queryByText } = render(); + it('should not be visible initially', async () => { + render(); - 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(); act(() => { diff --git a/graylog2-web-interface/src/components/common/__snapshots__/InteractableModal.test.jsx.snap b/graylog2-web-interface/src/components/common/__snapshots__/InteractableModal.test.jsx.snap deleted file mode 100644 index a5ad7437f749..000000000000 --- a/graylog2-web-interface/src/components/common/__snapshots__/InteractableModal.test.jsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` properly renders 1`] = `undefined`; diff --git a/graylog2-web-interface/src/components/roles/RoleEdit/TeamsSection.test.tsx b/graylog2-web-interface/src/components/roles/RoleEdit/TeamsSection.test.tsx index 7940c3016583..5a36bdf9a9c4 100644 --- a/graylog2-web-interface/src/components/roles/RoleEdit/TeamsSection.test.tsx +++ b/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('', () => { - it('should display info if license is not present', () => { + it('should display info if license is not present', async () => { render(); - 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('', () => { render(); - expect(screen.getByText('RoleTeamsAssignment')).toBeInTheDocument(); + expect(await screen.findByText('RoleTeamsAssignment')).toBeInTheDocument(); }); }); diff --git a/graylog2-web-interface/src/pages/RulesPage.test.tsx b/graylog2-web-interface/src/pages/RulesPage.test.tsx index 80e37afc2dcb..7f889d7634fe 100644 --- a/graylog2-web-interface/src/pages/RulesPage.test.tsx +++ b/graylog2-web-interface/src/pages/RulesPage.test.tsx @@ -15,16 +15,14 @@ * . */ 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(); + it('should show create rule button', async () => { + render(); - const createRuleButton = getByRole('button', { name: 'Create Rule' }); - - expect(createRuleButton).toBeInTheDocument(); + await screen.findByRole('button', { name: 'Create Rule' }); }); }); diff --git a/graylog2-web-interface/src/pages/StreamPermissionErrorPage.test.tsx b/graylog2-web-interface/src/pages/StreamPermissionErrorPage.test.tsx index adf83df757eb..e52ca2e6e6fa 100644 --- a/graylog2-web-interface/src/pages/StreamPermissionErrorPage.test.tsx +++ b/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(); - }); + render(); - 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.'); }); }); diff --git a/graylog2-web-interface/src/pages/UnauthorizedErrorPage.test.tsx b/graylog2-web-interface/src/pages/UnauthorizedErrorPage.test.tsx index 09947493fa80..f134b24c38c9 100644 --- a/graylog2-web-interface/src/pages/UnauthorizedErrorPage.test.tsx +++ b/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(); - }); + render(); - 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/); }); }); diff --git a/graylog2-web-interface/src/pages/UnauthorizedErrorPage.tsx b/graylog2-web-interface/src/pages/UnauthorizedErrorPage.tsx index 8d21dd9cad25..36f34e490113 100644 --- a/graylog2-web-interface/src/pages/UnauthorizedErrorPage.tsx +++ b/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 = ( <> diff --git a/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.test.tsx b/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.test.tsx index 6e9ee8239203..65572f9a089b 100644 --- a/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.test.tsx +++ b/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.test.tsx @@ -15,28 +15,28 @@ * . */ 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( {}} />); - const { options }: { options?: React.ComponentProps['options'] } = wrapper.find(Select).first().props(); + render( {}} />); - 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'); }); }); diff --git a/graylog2-web-interface/src/views/components/widgets/ErrorWidget.test.tsx b/graylog2-web-interface/src/views/components/widgets/ErrorWidget.test.tsx index 41917568aeca..f368c173d884 100644 --- a/graylog2-web-interface/src/views/components/widgets/ErrorWidget.test.tsx +++ b/graylog2-web-interface/src/views/components/widgets/ErrorWidget.test.tsx @@ -15,14 +15,14 @@ * . */ import React from 'react'; -import { mount } from 'wrappedEnzyme'; +import { render, screen } from 'wrappedTestingLibrary'; import SearchError from 'views/logic/SearchError'; import ErrorWidget from './ErrorWidget'; describe('', () => { - 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('', () => { }), ]; - const wrapper = mount(); - const firstListItem = wrapper.find('li').at(0); - const secondListItem = wrapper.find('li').at(1); + render(); - 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); }); });