Merge pull request #20009 from mozilla/fix-settings-tests-output

fix(fxa-settings): clean up noisy test output across test suite in fxa-settings

Author: vbudhram

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

@@ -21,21 +21,23 @@ describe('FormPhoneNumber', () => {
     });
   }
 
-  function renderWithInfoBannerProps() {
-    renderWithLocalizationProvider(
-      <FormPhoneNumber
-        localizedCTAText="Send code"
-        submitPhoneNumber={mockSubmit}
-        infoBannerContent={{
-          localizedDescription: 'This is a banner description',
-          localizedHeading: 'This is a banner heading',
-        }}
-        infoBannerLink={{
-          localizedText: 'This is a banner link',
-          path: '#',
-        }}
-      />
-    );
+  async function renderWithInfoBannerProps() {
+    await act(async () => {
+      renderWithLocalizationProvider(
+        <FormPhoneNumber
+          localizedCTAText="Send code"
+          submitPhoneNumber={mockSubmit}
+          infoBannerContent={{
+            localizedDescription: 'This is a banner description',
+            localizedHeading: 'This is a banner heading',
+          }}
+          infoBannerLink={{
+            localizedText: 'This is a banner link',
+            path: '#',
+          }}
+        />
+      );
+    });
   }
 
   function getPhoneInput() {
@@ -59,7 +61,7 @@ describe('FormPhoneNumber', () => {
   });
 
   it('renders the component with info banner', async () => {
-    renderWithInfoBannerProps();
+    await renderWithInfoBannerProps();
     await waitFor(() => {
       expect(screen.getByRole('combobox')).toBeInTheDocument();
     });

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

@@ -30,7 +30,7 @@ describe('RecoveryKeySetupDownload', () => {
         const b = screen.getByRole('button', { name: 'Download and continue' });
         expect(b).toBeInTheDocument();
       },
-      { timeout: 2000 }
+      { timeout: 5000 }
     );
 
     screen.getByRole('button', {

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

@@ -41,7 +41,7 @@ describe('FlowSetupRecoveryPhoneSubmitNumber', () => {
    * @param props
    */
   async function renderWith(props = defaultProps) {
-    await act(() => {
+    await act(async () => {
       renderWithLocalizationProvider(
         <FlowSetupRecoveryPhoneSubmitNumber {...props} />
       );
@@ -85,7 +85,7 @@ describe('FlowSetupRecoveryPhoneSubmitNumber', () => {
         '1231231234'
       )
     );
-    user.click(screen.getByRole('button', { name: /Send code/i }));
+    await user.click(screen.getByRole('button', { name: /Send code/i }));
 
     await waitFor(() => expect(mockVerifyPhoneNumber).toHaveBeenCalledTimes(1));
     expect(mockNavigateForward).toHaveBeenCalledTimes(1);

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

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { act, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mockAppContext, renderWithRouter } from '../../../models/mocks';
 import { MfaGuard } from './index';
@@ -303,6 +303,10 @@ describe('MfaGuard', () => {
   });
 
   it('debounces OTP resend requests', async () => {
+    // Use a deterministic clock so debounce logic is not affected by system load.
+    let now = Date.now();
+    const dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => now);
+
     renderWithRouter(
       <AppContext.Provider value={mockAppContext()}>
         <MfaGuard
@@ -319,9 +323,8 @@ describe('MfaGuard', () => {
     await userEvent.click(
       screen.getByRole('button', { name: 'Email new code.' })
     );
-    await act(async () => {
-      await new Promise((r) => setTimeout(r, 101));
-    });
+
+    now += 101;
 
     await userEvent.click(
       screen.getByRole('button', { name: 'Email new code.' })
@@ -331,13 +334,15 @@ describe('MfaGuard', () => {
       screen.getByRole('button', { name: 'Email new code.' })
     );
 
-    await act(async () => {
-      await new Promise((r) => setTimeout(r, 101));
-    });
+    // Advance past the debounce window again
+    now += 101;
+
     await userEvent.click(
       screen.getByRole('button', { name: 'Email new code.' })
     );
 
     expect(mockAuthClient.mfaRequestOtp).toHaveBeenCalledTimes(3);
+
+    dateNowSpy.mockRestore();
   });
 });

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

@@ -24,10 +24,13 @@ const defaultProps = {
 };
 
 describe('ModalMfaProtected', () => {
-  it('renders correctly', () => {
+  it('renders correctly', async () => {
     renderWithRouter(<ModalMfaProtected {...defaultProps} />);
 
-    expect(screen.getByText('Enter confirmation code')).toBeInTheDocument();
+    // Await to let react-hook-form's internal state updates settle.
+    expect(
+      await screen.findByText('Enter confirmation code')
+    ).toBeInTheDocument();
     expect(
       screen.getByText('Help us make sure it’s you changing your account info')
     ).toBeInTheDocument();
@@ -119,22 +122,22 @@ describe('ModalMfaProtected', () => {
     expect(onDismiss).toHaveBeenCalled();
   });
 
-  it('displays error banner', () => {
+  it('displays error banner', async () => {
     renderWithRouter(
       <ModalMfaProtected
         {...defaultProps}
         localizedErrorBannerMessage="error banner"
       />
     );
-    expect(screen.getByText('error banner')).toBeInTheDocument();
+    expect(await screen.findByText('error banner')).toBeInTheDocument();
   });
 
-  it('shows code resend success banner', () => {
+  it('shows code resend success banner', async () => {
     renderWithRouter(
       <ModalMfaProtected {...defaultProps} showResendSuccessBanner={true} />
     );
     expect(
-      screen.getByText('A new code was sent to your email.')
+      await screen.findByText('A new code was sent to your email.')
     ).toBeInTheDocument();
     expect(
       screen.getByText(

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

@@ -33,8 +33,8 @@ export const PageRecentActivity = (_: RouteComponentProps) => {
         {!!securityEvents &&
           securityEvents.map((securityEvent) => (
             <SecurityEventSection
+              key={securityEvent.name + securityEvent.createdAt}
               {...{
-                key: securityEvent.name + securityEvent.createdAt,
                 name: securityEvent.name,
                 createdAt: securityEvent.createdAt,
               }}

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

@@ -57,9 +57,7 @@ function renderWith(props?: any) {
 }
 
 const mockFormSubmit = jest.fn();
-// This prevents console errors when the deepLink logic is tested.
-// However, for some reason we cannot mock `requestSubmit` and we'll
-// still see errors logged for that.
+// jsdom does not implement HTMLFormElement.prototype.submit.
 HTMLFormElement.prototype.submit = mockFormSubmit;
 
 describe('ThirdPartyAuthComponent', () => {

packages/fxa-settings/src/lib/hooks/useFxAStatus/index.test.tsx

@@ -140,7 +140,10 @@ describe('useFxAStatus', () => {
           isSync: () => true,
           isFirefoxNonSync: () => false,
         };
-        const { result } = renderHook(() => useFxAStatus(integration));
+        const { result, waitForNextUpdate } = renderHook(() =>
+          useFxAStatus(integration)
+        );
+        await waitForNextUpdate();
         expect(result.current.supportsKeysOptionalLogin).toBe(false);
       });
     });

packages/fxa-settings/src/lib/hooks/useOAuthFlowRecovery/index.test.tsx

@@ -142,6 +142,7 @@ describe('useOAuthFlowRecovery', () => {
   });
 
   it('sets recoveryFailed when fxaOAuthFlowBegin throws', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
     (firefox.fxaOAuthFlowBegin as jest.Mock).mockRejectedValue(
       new Error('WebChannel error')
     );

packages/fxa-settings/src/models/contexts/NimbusContext.test.tsx

@@ -221,11 +221,13 @@ describe('NimbusContext', () => {
 
       renderWithProviders(previewConfig);
 
-      expect(mockInitializeNimbus).toHaveBeenCalledWith(
-        'test-user-id',
-        true,
-        { language: 'en', region: 'us' }
-      );
+      await waitFor(() => {
+        expect(mockInitializeNimbus).toHaveBeenCalledWith(
+          'test-user-id',
+          true,
+          { language: 'en', region: 'us' }
+        );
+      });
     });
 
     it('handles preview mode from URL params', async () => {
@@ -236,11 +238,13 @@ describe('NimbusContext', () => {
 
       renderWithProviders();
 
-      expect(mockInitializeNimbus).toHaveBeenCalledWith(
-        'test-user-id',
-        true,
-        { language: 'en', region: 'us' }
-      );
+      await waitFor(() => {
+        expect(mockInitializeNimbus).toHaveBeenCalledWith(
+          'test-user-id',
+          true,
+          { language: 'en', region: 'us' }
+        );
+      });
     });
 
     it('cleans up on unmount', async () => {