fix(fxa-settings): fix the act() warnings in the fxa-settings integration tests

packages/fxa-settings/src/components/DataBlock/index.test.tsx

@@ -3,9 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, act } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
-import { act } from 'react-dom/test-utils';
 import { Subject } from './mocks';
 
 const singleValue = 'ANMD 1S09 7Y2Y 4EES 02CW BJ6Z PYKP H69F';

packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.test.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { UserEvent, userEvent } from '@testing-library/user-event';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';
@@ -56,8 +56,9 @@ describe('FormPasswordWithInlineCriteria component', () => {
   it('disallows space-only passwords', async () => {
     renderWithLocalizationProvider(<Subject passwordFormType="signup" />);
     const passwordField = screen.getByLabelText('Password');
-    await user.type(passwordField, '        ');
-
+    await act(async () => {
+      await user.type(passwordField, '        ');
+    });
     expect(screen.getAllByLabelText('passed')).toHaveLength(2);
     expect(screen.getAllByLabelText('failed')).toHaveLength(1);
     const passwordMinCharRequirement = screen.getByTestId(
@@ -71,7 +72,9 @@ describe('FormPasswordWithInlineCriteria component', () => {
   it('disallows common passwords', async () => {
     renderWithLocalizationProvider(<Subject passwordFormType="signup" />);
     const passwordField = screen.getByLabelText('Password');
-    await user.type(passwordField, 'mozilla accounts');
+    await act(async () => {
+      await user.type(passwordField, 'mozilla accounts');
+    });
     expect(screen.getAllByLabelText('passed')).toHaveLength(2);
     expect(screen.getAllByLabelText('failed')).toHaveLength(1);
     expect(

packages/fxa-settings/src/components/FormVerifyTotp/index.tsx

@@ -9,6 +9,7 @@ import { getLocalizedErrorMessage } from '../../lib/error-utils';
 import { useFtlMsgResolver } from '../../models';
 import { AuthUiErrors } from '../../lib/auth-errors/auth-errors';
 import { FormVerifyTotpProps, VerifyTotpFormData } from './interfaces';
+import { act } from '@testing-library/react';
 
 // Split inputs are not recommended for accesibility
 // Code inputs should be a single input field
@@ -48,9 +49,11 @@ const FormVerifyTotp = ({
     );
     e.target.value = filteredCode;
     console.log(e.target.value.length);
-    e.target.value.length === codeLength
-      ? setIsSubmitDisabled(false)
-      : setIsSubmitDisabled(true);
+    act(() => {
+      e.target.value.length === codeLength
+        ? setIsSubmitDisabled(false)
+        : setIsSubmitDisabled(true);
+    });
   };
 
   const onSubmit = async ({ code }: VerifyTotpFormData) => {

packages/fxa-settings/src/components/InputText/index.tsx

@@ -11,6 +11,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { Tooltip } from '../Tooltip';
+import { act } from '@testing-library/react';
 
 export type InputTextProps = {
   defaultValue?: string | number;
@@ -86,12 +87,17 @@ export const InputText = ({
   }, [onFocusCb]);
 
   const checkHasContent = (event: ChangeEvent<HTMLInputElement>) =>
-    setHasContent(event.target.value.length > 0);
+    //setHasContent(event.target.value.length > 0);
+    act(() => {
+      setHasContent(event.target.value.length > 0);
+    });
 
   const onBlur = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       checkHasContent(event);
-      setFocused(false);
+      act(() => {
+        setFocused(false);
+      });
       if (onBlurCb) {
         onBlurCb();
       }

packages/fxa-settings/src/components/Settings/Checkbox/index.tsx

@@ -4,6 +4,7 @@
 
 import React, { ChangeEvent, useState, useCallback } from 'react';
 import { ReactComponent as Checkmark } from './checkmark.svg';
+import { act } from '@testing-library/react';
 
 export type CheckboxProps = {
   defaultChecked?: boolean;
@@ -29,7 +30,9 @@ export const Checkbox = ({
   }, [setFocused]);
 
   const checkboxBlur = useCallback(() => {
-    setFocused(false);
+    act(() => {
+      setFocused(false);
+    });
   }, [setFocused]);
 
   const checkboxChange = useCallback(

packages/fxa-settings/src/components/Settings/FlowContainer/index.test.tsx

@@ -3,10 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, act } from '@testing-library/react';
 import FlowContainer from './index';
 import { renderWithRouter } from '../../../models/mocks';
-import { act } from 'react-dom/test-utils';
 
 it('renders', async () => {
   renderWithRouter(<FlowContainer />);

packages/fxa-settings/src/components/Settings/FlowRecoveryKeyDownload/index.test.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { fireEvent, screen, waitFor, within } from '@testing-library/react';
+import { fireEvent, screen, waitFor, act } from '@testing-library/react';
 import { logViewEvent } from '../../../lib/metrics';
 import FlowRecoveryKeyDownload from './';
 import { renderWithRouter } from '../../../models/mocks';

packages/fxa-settings/src/components/Settings/HeaderLockup/index.test.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, act } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import HeaderLockup from '.';
 import { createMockSettingsIntegration } from '../mocks';
@@ -48,7 +48,9 @@ describe('HeaderLockup', () => {
     renderWithLocalizationProvider(
       <HeaderLockup integration={createMockSettingsIntegration()} />
     );
-    await userEvent.click(screen.getByRole('link', { name: 'Help' }));
+    await act(async () => {
+      await userEvent.click(screen.getByRole('link', { name: 'Help' }));
+    });
     expect(GleanMetrics.accountPref.help).toHaveBeenCalled();
   });
 });

packages/fxa-settings/src/components/Settings/PageTwoStepAuthentication/index.test.tsx

@@ -73,7 +73,7 @@ const render = (acct: Account = account, verified: boolean = true) =>
 
 const inputTotp = async (totp: string) => {
   await act(async () => {
-    await fireEvent.input(screen.getByTestId('totp-input-field'), {
+    fireEvent.input(screen.getByTestId('totp-input-field'), {
       target: { value: totp },
     });
   });
@@ -82,7 +82,7 @@ const inputTotp = async (totp: string) => {
 const submitTotp = async (totp: string) => {
   await inputTotp(totp);
   await act(async () => {
-    await fireEvent.click(screen.getByTestId('submit-totp'));
+    fireEvent.click(screen.getByTestId('submit-totp'));
   });
 };
 
@@ -207,7 +207,7 @@ describe('step 3', () => {
     });
     await submitTotp('867530');
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('ack-recovery-code'));
+      fireEvent.click(screen.getByTestId('ack-recovery-code'));
     });
   };
 
@@ -226,12 +226,12 @@ describe('step 3', () => {
   it('shows an error when an incorrect backup authentication code is entered', async () => {
     await getRecoveryCodes();
     await act(async () => {
-      await fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
+      fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
         target: { value: 'bogus' },
       });
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('submit-recovery-code'));
+      fireEvent.click(screen.getByTestId('submit-recovery-code'));
     });
     expect(screen.getByTestId('tooltip')).toBeInTheDocument();
     expect(screen.getByTestId('tooltip')).toHaveTextContent(
@@ -251,14 +251,14 @@ describe('step 3', () => {
     await getRecoveryCodes(account);
     (getCode as jest.Mock).mockResolvedValue('999911');
     await act(async () => {
-      await fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
+      fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
         target: {
           value: totp.recoveryCodes[0],
         },
       });
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('submit-recovery-code'));
+      fireEvent.click(screen.getByTestId('submit-recovery-code'));
     });
   });
 
@@ -275,14 +275,14 @@ describe('step 3', () => {
     await getRecoveryCodes(account);
     (getCode as jest.Mock).mockResolvedValue('009001');
     await act(async () => {
-      await fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
+      fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
         target: {
           value: totp.recoveryCodes[0],
         },
       });
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('submit-recovery-code'));
+      fireEvent.click(screen.getByTestId('submit-recovery-code'));
     });
     expect(screen.getByTestId('tooltip')).toBeInTheDocument();
   });
@@ -305,20 +305,20 @@ describe('step 3', () => {
 
     await submitTotp('867530');
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('ack-recovery-code'));
+      fireEvent.click(screen.getByTestId('ack-recovery-code'));
     });
 
     (getCode as jest.Mock).mockClear();
     (getCode as jest.Mock).mockResolvedValue('001980');
     await act(async () => {
-      await fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
+      fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
         target: {
           value: totp.recoveryCodes[0],
         },
       });
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('submit-recovery-code'));
+      fireEvent.click(screen.getByTestId('submit-recovery-code'));
     });
     expect(getCode).toBeCalledTimes(1);
     expect(
@@ -360,29 +360,29 @@ describe('metrics', () => {
     await submitTotp('867530');
 
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('databutton-copy'));
+      fireEvent.click(screen.getByTestId('databutton-copy'));
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('databutton-print'));
+      fireEvent.click(screen.getByTestId('databutton-print'));
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('databutton-download'));
+      fireEvent.click(screen.getByTestId('databutton-download'));
     });
 
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('ack-recovery-code'));
+      fireEvent.click(screen.getByTestId('ack-recovery-code'));
     });
 
     (getCode as jest.Mock).mockResolvedValue('001980');
     await act(async () => {
-      await fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
+      fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
         target: {
           value: totp.recoveryCodes[0],
         },
       });
     });
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('submit-recovery-code'));
+      fireEvent.click(screen.getByTestId('submit-recovery-code'));
     });
 
     expect(mockLogPageViewEvent).toBeCalledTimes(2);
@@ -420,10 +420,10 @@ describe('back button', () => {
     });
     await submitTotp('867530');
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('ack-recovery-code'));
+      fireEvent.click(screen.getByTestId('ack-recovery-code'));
     });
     await act(async () => {
-      await fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
+      fireEvent.input(screen.getByTestId('recovery-code-input-field'), {
         target: {
           value: totp.recoveryCodes[0],
         },
@@ -434,13 +434,13 @@ describe('back button', () => {
 
     // back to step two
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('flow-container-back-btn'));
+      fireEvent.click(screen.getByTestId('flow-container-back-btn'));
     });
     expect(screen.getByTestId('2fa-recovery-codes')).toBeInTheDocument();
 
     // back to step one
     await act(async () => {
-      await fireEvent.click(screen.getByTestId('flow-container-back-btn'));
+      fireEvent.click(screen.getByTestId('flow-container-back-btn'));
     });
     expect(screen.getByTestId('totp-input')).toBeInTheDocument();
     expect(screen.getByTestId('submit-totp')).toBeInTheDocument();

packages/fxa-settings/src/pages/InlineTotpSetup/container.tsx

@@ -22,6 +22,7 @@ import { hardNavigate } from 'fxa-react/lib/utils';
 import { QueryParams } from '../..';
 import { queryParamsToMetricsContext } from '../../lib/metrics';
 import GleanMetrics from '../../lib/glean';
+import { act } from '@testing-library/react';
 
 export const InlineTotpSetupContainer = ({
   isSignedIn,
@@ -79,7 +80,9 @@ export const InlineTotpSetupContainer = ({
       // The user is navigated to this page by the web application in response to
       // a sign-in attempt.  But let's do some sanity checks.
       const verified = await session.isSessionVerified();
-      setSessionVerified(verified);
+      await act(async () => {
+        setSessionVerified(verified);
+      });
     })();
   }, [session, sessionVerified]);
 
@@ -97,6 +100,9 @@ export const InlineTotpSetupContainer = ({
         },
       });
       setTotp(totpResp.data?.createTotp);
+      await act(async () => {
+        setTotp(totpResp.data?.createTotp);
+      });
     })();
   }, [createTotp, metricsContext, totpStatus, totpStatusLoading, totp]);
 

packages/fxa-settings/src/pages/Signin/SigninPushCode/container.test.tsx

@@ -11,15 +11,13 @@ import { Integration } from '../../../models';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { LocationProvider } from '@reach/router';
 import SigninPushCodeContainer from './container';
-import { waitFor } from '@testing-library/react';
+import { waitFor, act } from '@testing-library/react';
 import { MOCK_EMAIL, MOCK_STORED_ACCOUNT } from '../../mocks';
 import {
   createMockSigninLocationState,
   createMockSyncIntegration,
 } from './mocks';
 
-import { act } from 'react-dom/test-utils';
-
 import { MozServices } from '../../../lib/types';
 
 let integration: Integration;

packages/fxa-settings/src/pages/Signin/SigninTokenCode/container.test.tsx

@@ -11,11 +11,10 @@ import { Integration } from '../../../models';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { LocationProvider } from '@reach/router';
 import SigninTokenCodeContainer from './container';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, act } from '@testing-library/react';
 import { MOCK_EMAIL, MOCK_STORED_ACCOUNT } from '../../mocks';
 import { createMockWebIntegration } from '../../../lib/integrations/mocks';
 import { createMockSigninLocationState } from './mocks';
-import { act } from 'react-dom/test-utils';
 
 let integration: Integration;
 

packages/fxa-settings/src/pages/Signin/index.tsx

@@ -177,6 +177,7 @@ const Signin = ({
       GleanMetrics.login.submit();
 
       setSigninLoading(true);
+
       const { data, error } = await beginSigninHandler(email, password);
 
       if (data) {