test: wrapped user input events into act

Signed-off-by: Ihor Aleksandrychiev <ihor.aleksandrychiev@northern.tech>
mzedel · Jan 24, 2024 · a131e55 · a131e55
1 parent 0372b03
commit a131e55
Show file tree

Hide file tree

Showing 22 changed files with 220 additions and 102 deletions.
diff --git a/src/js/components/auditlogs/auditlogs.test.js b/src/js/components/auditlogs/auditlogs.test.js
@@ -20,7 +20,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 
 import { prettyDOM } from '@testing-library/dom';
-import { screen, render as testingLibRender } from '@testing-library/react';
+import { act, screen, render as testingLibRender } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { light as lightTheme } from '../../../../src/js/themes/Mender';
@@ -82,7 +82,9 @@ describe('Auditlogs Component', () => {
       { preloadedState }
     );
     const input = screen.getByPlaceholderText(/type/i);
-    await user.type(input, 'art');
+    await act(async () => {
+      await user.type(input, 'art');
+    });
     await selectMaterialUiSelectOption(input, /artifact/i, user);
     await user.click(screen.getByText(/clear filter/i));
     await user.click(screen.getByRole('button', { name: /Download results as csv/i }));

diff --git a/src/js/components/common/devicenameinput.test.js b/src/js/components/common/devicenameinput.test.js
@@ -39,8 +39,10 @@ describe('DeviceNameInput Component', () => {
     expect(screen.queryByDisplayValue(/testname/i)).toBeInTheDocument();
     await user.click(screen.getByRole('button'));
     await waitFor(() => rerender(ui));
-    await user.type(screen.getByDisplayValue(/testname/i), 'something');
-    await user.click(screen.getAllByRole('button')[0]);
+    await act(async () => {
+      await user.type(screen.getByDisplayValue(/testname/i), 'something');
+      await user.click(screen.getAllByRole('button')[0]);
+    });
     await act(async () => jest.runAllTicks());
     await waitFor(() => expect(snackbarSpy).toHaveBeenCalledWith('Device name changed'));
     expect(deviceTagsSpy).toHaveBeenCalledWith(defaultState.devices.byId.a1.id, { name: 'testnamesomething' });

diff --git a/src/js/components/common/forms/keyvalueeditor.test.js b/src/js/components/common/forms/keyvalueeditor.test.js
@@ -36,8 +36,10 @@ describe('KeyValueEditor Component', () => {
 
     const ui = <KeyValueEditor onInputChange={submitMock} />;
     const { rerender } = render(ui);
-    await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
-    await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
+      await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+    });
     expect(document.querySelector(fabSelector)).not.toBeDisabled();
     await user.click(document.querySelector(fabSelector));
     expect(submitMock).toHaveBeenLastCalledWith({ testKey: 'testValue' });
@@ -47,29 +49,37 @@ describe('KeyValueEditor Component', () => {
       jest.runAllTimers();
       jest.runAllTicks();
     });
-    await user.type(screen.getByDisplayValue('testValue'), 's');
+    await act(async () => {
+      await user.type(screen.getByDisplayValue('testValue'), 's');
+    });
     expect(submitMock).toHaveBeenLastCalledWith({ testKey: 'testValues' });
   });
 
   it('warns of duplicate keys', async () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const ui = <KeyValueEditor onInputChange={jest.fn} />;
     const { rerender } = render(ui);
-    await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
-    await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
-    await user.click(document.querySelector(fabSelector));
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
+      await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+      await user.click(document.querySelector(fabSelector));
+    });
     await waitFor(() => rerender(ui));
-    await user.type(screen.getAllByPlaceholderText(/key/i)[1], 'testKey');
-    await user.type(screen.getAllByPlaceholderText(/value/i)[1], 'testValue2');
+    await act(async () => {
+      await user.type(screen.getAllByPlaceholderText(/key/i)[1], 'testKey');
+      await user.type(screen.getAllByPlaceholderText(/value/i)[1], 'testValue2');
+    });
     expect(screen.getByText(/Duplicate keys exist/i)).toBeInTheDocument();
   });
 
   it('forwards a warning', async () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const ui = <KeyValueEditor errortext="I should be rendered" onInputChange={jest.fn} />;
     render(ui);
-    await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
-    await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
+      await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+    });
     expect(screen.getByText(/I should be rendered/i)).toBeInTheDocument();
   });
 
@@ -84,9 +94,13 @@ describe('KeyValueEditor Component', () => {
 
     const ui = <KeyValueEditor inputHelpTipsMap={helptipsMap} onInputChange={jest.fn} />;
     render(ui);
-    await user.type(screen.getByPlaceholderText(/key/i), 'timezon');
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'timezon');
+    });
     expect(screen.queryByText(/testthing/i)).not.toBeInTheDocument();
-    await user.type(screen.getByPlaceholderText(/key/i), 'e');
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'e');
+    });
     expect(screen.getByText(/testthing/i)).toBeInTheDocument();
   });
 });
diff --git a/src/js/components/dashboard/dashboard.test.js b/src/js/components/dashboard/dashboard.test.js
@@ -14,7 +14,7 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-import { screen, waitFor } from '@testing-library/react';
+import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { defaultState, undefineds } from '../../../../tests/mockData';
@@ -29,8 +29,9 @@ describe('Dashboard Component', () => {
   it('renders correctly', async () => {
     const ui = <Dashboard />;
     const { baseElement, rerender } = render(ui);
-    await waitFor(() => expect(reportsSpy).toHaveBeenCalled());
+    await act(async () => {});
     await waitFor(() => rerender(ui));
+    await waitFor(() => expect(reportsSpy).toHaveBeenCalled());
     const view = baseElement.firstChild;
     expect(view).toMatchSnapshot();
     expect(view).toEqual(expect.not.stringMatching(undefineds));

diff --git a/src/js/components/deployments/deployments.test.js b/src/js/components/deployments/deployments.test.js
@@ -79,7 +79,6 @@ describe('Deployments Component', () => {
     const view = asFragment();
     expect(view).toMatchSnapshot();
     expect(view).toEqual(expect.not.stringMatching(undefineds));
-    await act(async () => {});
     await waitFor(() => expect(get).toHaveBeenCalledWith('/api/management/v2/inventory/filters?per_page=500'));
     expect(get).toHaveBeenCalledWith('/api/management/v2/inventory/filters?per_page=500');
   });
@@ -175,7 +174,9 @@ describe('Deployments Component', () => {
     await waitFor(() => expect(screen.queryByPlaceholderText(/Select a Release/i)).toBeInTheDocument(), { timeout: 3000 });
     const releaseSelect = screen.getByPlaceholderText(/Select a Release/i);
     expect(within(releaseSelect).queryByDisplayValue(releaseId)).not.toBeInTheDocument();
-    await user.click(releaseSelect);
+    await act(async () => {
+      await user.click(releaseSelect);
+    });
     await user.keyboard(specialKeys.ArrowDown);
     await user.keyboard(specialKeys.Enter);
     act(() => jest.advanceTimersByTime(2000));
@@ -266,7 +267,9 @@ describe('Deployments Component', () => {
     expect(groupSelect).toHaveValue(ALL_DEVICES);
     await waitFor(() => expect(screen.queryByPlaceholderText(/Select a Release/i)).toBeInTheDocument(), { timeout: 3000 });
     const releaseSelect = screen.getByPlaceholderText(/Select a Release/i);
-    await user.click(releaseSelect);
+    await act(async () => {
+      await user.click(releaseSelect);
+    });
     await user.keyboard(specialKeys.ArrowDown);
     await user.keyboard(specialKeys.Enter);
     act(() => jest.advanceTimersByTime(2000));

diff --git a/src/js/components/devices/authorized-devices.test.js b/src/js/components/devices/authorized-devices.test.js
@@ -121,8 +121,10 @@ describe('AuthorizedDevices Component', () => {
     await waitFor(() => rerender(ui));
     expect(screen.getByText(/Customize Columns/i)).toBeVisible();
     const attributeSelect = screen.getByLabelText(/add a column/i);
-    await user.type(attributeSelect, testKey);
-    await user.keyboard('{Enter}');
+    await act(async () => {
+      await user.type(attributeSelect, testKey);
+      await user.keyboard('{Enter}');
+    });
     act(() => jest.advanceTimersByTime(5000));
     await waitFor(() => expect(screen.getByLabelText(/add a column/i)).toBeVisible());
     const button = screen.getByRole('button', { name: /Save/i });

diff --git a/src/js/components/devices/device-details/configuration.test.js b/src/js/components/devices/device-details/configuration.test.js
@@ -129,11 +129,15 @@ describe('Configuration Component', () => {
     expect(screen.getByRole('button', { name: /import configuration/i })).toBeInTheDocument();
     const fabButton = document.querySelector('.MuiFab-root');
     expect(fabButton).toBeDisabled();
-    await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
-    await user.type(screen.getByPlaceholderText(/value/i), 'evilValue');
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
+      await user.type(screen.getByPlaceholderText(/value/i), 'evilValue');
+    });
     expect(fabButton).not.toBeDisabled();
-    await user.click(screen.getByRole('checkbox', { name: /save/i }));
-    await user.click(screen.getByRole('button', { name: /save/i }));
+    await act(async () => {
+      await user.click(screen.getByRole('checkbox', {name: /save/i}));
+      await user.click(screen.getByRole('button', {name: /save/i}));
+    });
     await waitFor(() => rerender(ui));
 
     expect(screen.getByText(/Configuration could not be updated on device/i)).toBeInTheDocument();
@@ -148,9 +152,11 @@ describe('Configuration Component', () => {
     await waitFor(() => rerender(ui));
     await waitFor(() => expect(document.querySelector('.loaderContainer')).not.toBeInTheDocument());
     const valueInput = screen.getByDisplayValue('evilValue');
-    await user.clear(valueInput);
-    await user.type(valueInput, 'testValue');
-    await user.click(screen.getByRole('button', { name: /Retry/i }));
+    await act(async () => {
+      await user.clear(valueInput);
+      await user.type(valueInput, 'testValue');
+      await user.click(screen.getByRole('button', {name: /Retry/i}));
+    });
     await waitFor(() => expect(screen.queryByText(/Updating configuration/i)).toBeInTheDocument());
   });
 });
diff --git a/src/js/components/devices/dialogs/preauth-dialog.test.js b/src/js/components/devices/dialogs/preauth-dialog.test.js
@@ -87,9 +87,13 @@ describe('PreauthDialog Component', () => {
     });
     await waitFor(() => rerender(ui));
     await waitFor(() => expect(screen.queryByText(errorText)).toBeTruthy());
-    await user.type(screen.getByDisplayValue('testValue'), 'testValues');
+    await act(async () => {
+      await user.type(screen.getByDisplayValue('testValue'), 'testValues');
+    });
     await waitFor(() => expect(screen.queryByText(errorText)).not.toBeInTheDocument());
-    await user.click(screen.getByRole('button', { name: 'Save and add another' }));
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: 'Save and add another'}));
+    });
     await waitFor(() => rerender(ui));
     expect(screen.queryByText('reached your limit')).toBeFalsy();
     expect(preAuthSpy).toHaveBeenCalled();
@@ -111,8 +115,10 @@ describe('PreauthDialog Component', () => {
       await user.upload(uploadInput, menderFile);
     });
     await waitFor(() => rerender(ui));
-    await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
-    await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+    await act(async () => {
+      await user.type(screen.getByPlaceholderText(/key/i), 'testKey');
+      await user.type(screen.getByPlaceholderText(/value/i), 'testValue');
+    });
     await waitFor(() => rerender(ui));
     expect(screen.getByText(/You have reached your limit/i)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();

diff --git a/src/js/components/header/header.test.js b/src/js/components/header/header.test.js
@@ -13,7 +13,7 @@
 //    limitations under the License.
 import React from 'react';
 
-import { screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { defaultState, undefineds } from '../../../../tests/mockData';
@@ -58,10 +58,14 @@ describe('Header Component', () => {
     const { rerender } = render(view, { preloadedState });
     expect(screen.queryByText(defaultState.users.byId[defaultState.users.currentUser].email)).toBeInTheDocument();
     const selectButton = screen.getByRole('button', { name: defaultState.users.byId[defaultState.users.currentUser].email });
-    await user.click(selectButton);
+    await act(async () => {
+      await user.click(selectButton);
+    });
     const listbox = document.body.querySelector('ul[role=menu]');
     const listItem = within(listbox).getByText(/log out/i);
-    await user.click(listItem);
+    await act(async () => {
+      await user.click(listItem);
+    });
     await waitFor(() => rerender(view));
     expect(screen.queryByText(defaultState.users.byId[defaultState.users.currentUser].email)).not.toBeInTheDocument();
   });

diff --git a/src/js/components/helptips/onboardingcompletetip.test.js b/src/js/components/helptips/onboardingcompletetip.test.js
@@ -54,5 +54,6 @@ describe('OnboardingCompleteTip Component', () => {
     const view = baseElement;
     expect(view).toMatchSnapshot();
     expect(view).toEqual(expect.not.stringMatching(undefineds));
+    await act(async () => {});
   });
 });
diff --git a/src/js/components/login/login.test.js b/src/js/components/login/login.test.js
@@ -13,7 +13,7 @@
 //    limitations under the License.
 import React from 'react';
 
-import { screen, waitFor } from '@testing-library/react';
+import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { defaultState, undefineds } from '../../../../tests/mockData';
@@ -45,17 +45,23 @@ describe('Login Component', () => {
     const loginSpy = jest.spyOn(UserActions, 'loginUser');
     const ui = <Login />;
     const { rerender } = render(ui, { preloadedState });
-    await user.type(screen.getByLabelText(/your email/i), 'something-2fa@example.com');
-    await user.type(screen.getByLabelText(/password/i), 'mysecretpassword!123');
+    await act(async () => {
+      await user.type(screen.getByLabelText(/your email/i), 'something-2fa@example.com');
+      await user.type(screen.getByLabelText(/password/i), 'mysecretpassword!123');
+    });
     expect(await screen.findByLabelText(/Two Factor Authentication Code/i)).not.toBeVisible();
-    await user.click(screen.getByRole('button', { name: /Log in/i }));
+    await act(async () => {
+      await user.click(screen.getByRole('button', { name: /Log in/i }));
+    });
     expect(loginSpy).toHaveBeenCalled();
     await waitFor(() => rerender(ui));
     expect(await screen.findByLabelText(/Two Factor Authentication Code/i)).toBeVisible();
     const input = screen.getByDisplayValue('something-2fa@example.com');
-    await user.clear(input);
-    await user.type(input, 'something@example.com');
-    await user.type(screen.getByLabelText(/Two Factor Authentication Code/i), '123456');
+    await act(async () => {
+      await user.clear(input);
+      await user.type(input, 'something@example.com');
+      await user.type(screen.getByLabelText(/Two Factor Authentication Code/i), '123456');
+    });
     await user.click(screen.getByRole('button', { name: /Log in/i }));
     expect(loginSpy).toHaveBeenCalledWith({ email: 'something@example.com', password: 'mysecretpassword!123', token2fa: '123456' }, false);
   }, 10000);

diff --git a/src/js/components/login/password.test.js b/src/js/components/login/password.test.js
@@ -35,7 +35,7 @@ describe('Password Component', () => {
     const ui = <Password />;
     const { rerender } = render(ui);
     await user.type(screen.queryByLabelText(/your email/i), 'something@example.com');
-    await user.click(screen.getByRole('button', { name: /Send password reset link/i }));
+    await user.click(screen.getByRole('button', {name: /Send password reset link/i}));
     await waitFor(() => expect(startSpy).toHaveBeenCalledWith('something@example.com'));
     await waitFor(() => rerender(ui));
     await waitFor(() => expect(screen.queryByText(/sending you an email/i)).toBeInTheDocument(), { timeout: 5000 });

diff --git a/src/js/components/login/passwordreset.test.js b/src/js/components/login/passwordreset.test.js
@@ -60,17 +60,25 @@ describe('PasswordReset Component', () => {
     const { rerender } = testingLibRender(ui);
 
     const passwordInput = screen.getByLabelText('Password *');
-    await user.type(passwordInput, badPassword);
+    await act(async () => {
+      await user.type(passwordInput, badPassword);
+    });
     await waitFor(() => rerender(ui));
-    await user.type(passwordInput, badPassword);
-    await user.type(screen.getByLabelText(/confirm password \*/i), goodPassword);
+    await act(async () => {
+      await user.type(passwordInput, badPassword);
+      await user.type(screen.getByLabelText(/confirm password \*/i), goodPassword);
+    });
     await waitFor(() => rerender(ui));
     expect(screen.getByRole('button', { name: /Save password/i })).toBeDisabled();
     expect(screen.getByText('The passwords you provided do not match, please check again.')).toBeVisible();
-    await user.clear(passwordInput);
-    await user.type(passwordInput, goodPassword);
+    await act(async () => {
+      await user.clear(passwordInput);
+      await user.type(passwordInput, goodPassword);
+    });
     await waitFor(() => rerender(ui));
-    await user.click(screen.getByRole('button', { name: /Save password/i }));
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: /Save password/i}));
+    });
     await waitFor(() => expect(completeSpy).toHaveBeenCalledWith(secretHash, goodPassword));
     await act(async () => {
       jest.runAllTimers();

diff --git a/src/js/components/login/signup.test.js b/src/js/components/login/signup.test.js
@@ -42,24 +42,36 @@ describe('Signup Component', () => {
     );
     const { container, rerender } = render(ui);
     expect(screen.getByText('Sign up with:')).toBeInTheDocument();
-    await user.type(screen.getByLabelText(/Email/i), 'test@example.com');
-    await user.type(screen.getByLabelText('Password *'), 'mysecretpassword!123');
+    await act(async () => {
+      await user.type(screen.getByLabelText(/Email/i), 'test@example.com');
+      await user.type(screen.getByLabelText('Password *'), 'mysecretpassword!123');
+    });
     expect(screen.getByRole('button', { name: /sign up/i })).toBeDisabled();
-    await user.type(screen.getByLabelText(/Confirm password/i), 'mysecretpassword!123');
+    await act(async () => {
+      await user.type(screen.getByLabelText(/Confirm password/i), 'mysecretpassword!123');
+    });
     expect(container.querySelector('#pass-strength > meter')).toBeVisible();
     await waitFor(() => rerender(ui));
     expect(screen.getByRole('button', { name: /sign up/i })).toBeEnabled();
-    await user.click(screen.getByRole('button', { name: /sign up/i }));
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: /sign up/i}));
+    });
     await waitFor(() => screen.queryByText('Company or organization name *'));
-    await user.type(screen.getByRole('textbox', { name: /company or organization name \*/i }), 'test');
+    await act(async () => {
+      await user.type(screen.getByRole('textbox', {name: /company or organization name \*/i}), 'test');
+    });
     expect(screen.getByRole('button', { name: /complete signup/i })).toBeDisabled();
-    await user.click(screen.getByRole('checkbox', { name: /by checking this you agree to our/i }));
+    await act(async () => {
+      await user.click(screen.getByRole('checkbox', {name: /by checking this you agree to our/i}));
+    });
     await waitFor(() => rerender(ui));
     expect(screen.getByRole('button', { name: /complete signup/i })).toBeEnabled();
 
     const cookies = new Cookies();
     cookies.set.mockReturnValue();
-    await user.click(screen.getByRole('button', { name: /complete signup/i }));
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: /complete signup/i}));
+    });
     await waitFor(() => expect(container.querySelector('.loaderContainer')).toBeVisible());
     await act(async () => jest.advanceTimersByTime(5000));
     await waitFor(() => rerender(ui));