test(mosaic): wait for alert text instead of the first alert element

.changeset/mosaic-alert-text-flake.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/features/organization-profile/__tests__/invitations-table-tab.view.test.tsx

@@ -47,7 +47,7 @@ describe('InvitationsTableTabView', () => {
     await user.click(screen.getByRole('menuitem', { name: 'Revoke invitation' }));
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Revoke invitation' }));
 
-    expect(await screen.findByRole('alert')).toHaveTextContent('Could not revoke invitation.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Could not revoke invitation.'));
   });
 
   it('distinguishes loading, an empty invitation list, and an empty search', () => {

packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx

@@ -103,7 +103,7 @@ describe('organization profile general panel', () => {
     await user.click(screen.getByRole('button', { name: 'Save changes' }));
 
     const dialog = await screen.findByRole('dialog');
-    expect(await within(dialog).findByRole('alert')).toHaveTextContent('Something went wrong.');
+    await waitFor(() => expect(within(dialog).getByRole('alert')).toHaveTextContent('Something went wrong.'));
     expect(within(dialog).getByRole('textbox', { name: 'Name' })).toBeValid();
   });
 

packages/mosaic/src/features/organization-profile/__tests__/requests-table-tab.view.test.tsx

@@ -55,10 +55,12 @@ describe('RequestsTableTabView', () => {
       expect(onOtherDecision).not.toHaveBeenCalled();
 
       await act(() => attempt.reject(new Error()));
-      expect(await screen.findByRole('alert')).toHaveTextContent(
-        action === 'Accept'
-          ? 'Unable to accept this request. Please try again.'
-          : 'Unable to decline this request. Please try again.',
+      await waitFor(() =>
+        expect(screen.getByRole('alert')).toHaveTextContent(
+          action === 'Accept'
+            ? 'Unable to accept this request. Please try again.'
+            : 'Unable to decline this request. Please try again.',
+        ),
       );
       await user.click(screen.getByRole('button', { name: `${action} Ada Lovelace` }));
       expect(onDecision).toHaveBeenCalledTimes(2);

packages/mosaic/src/features/user-profile/__tests__/user-profile-account-section.integration.test.tsx

@@ -130,8 +130,10 @@ describe('UserProfileAccountSection', () => {
     }
     await actor.upload(input, file);
 
-    expect(await screen.findByRole('alert')).toHaveTextContent(
-      'File size exceeds the maximum limit of 10MB. Please choose a smaller file.',
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'File size exceeds the maximum limit of 10MB. Please choose a smaller file.',
+      ),
     );
     expect(user.setProfileImage).toHaveBeenCalledExactlyOnceWith({ file });
   });

packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts.feature.test.tsx

@@ -486,7 +486,9 @@ describe('connected accounts', () => {
     await user.click(within(dialog).getByRole('button', { name: 'Remove' }));
     await waitFor(() => expect(request.requests).toHaveLength(1));
     request.fail('last_identification', 'You cannot remove your last sign-in method.');
-    expect(await within(dialog).findByRole('alert')).toHaveTextContent('You cannot remove your last sign-in method.');
+    await waitFor(() =>
+      expect(within(dialog).getByRole('alert')).toHaveTextContent('You cannot remove your last sign-in method.'),
+    );
 
     serveFapi(signedIn([google]));
     await user.click(within(dialog).getByRole('button', { name: 'Remove' }));

packages/mosaic/src/features/user-profile/__tests__/user-profile-device-actions.test.tsx

@@ -106,7 +106,7 @@ describe('active device sign out', () => {
     await user.click(screen.getByRole('menuitem', { name: 'Sign out' }));
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Sign out' }));
 
-    expect(await screen.findByRole('alert')).toHaveTextContent('Unable to sign out');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Unable to sign out'));
 
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Sign out' }));
     await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
@@ -163,7 +163,7 @@ describe('active device sign out', () => {
     await user.click(screen.getByRole('menuitem', { name: 'View details' }));
     await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Sign out' }));
 
-    expect(await screen.findByRole('alert')).toHaveTextContent('Unable to sign out');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Unable to sign out'));
     expect(screen.getByRole('dialog')).toBeInTheDocument();
 
     await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Sign out' }));

packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx

@@ -79,7 +79,7 @@ describe('email actions', () => {
     await user.click(screen.getByRole('button', { name: 'Manage test@example.com' }));
     await user.click(screen.getByRole('menuitem', { name: 'Set as primary' }));
     expect(onSetPrimaryEmail).toHaveBeenCalledExactlyOnceWith('email_1');
-    expect(await screen.findByRole('alert')).toHaveTextContent('Unable to update primary email.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Unable to update primary email.'));
     expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
   });
 

packages/mosaic/src/features/user-profile/__tests__/user-profile-enterprise-accounts-contract.feature.test.tsx

@@ -58,8 +58,10 @@ describe('enterprise linking server contract', () => {
         fapi.enterpriseLinking.enabled = false;
       }
       await userEvent.setup().click(connect);
-      expect(await screen.findByRole('alert')).toHaveTextContent(
-        change === 'linking disabled' || change === 'feature disabled' ? 'Feature not enabled' : 'not found',
+      await waitFor(() =>
+        expect(screen.getByRole('alert')).toHaveTextContent(
+          change === 'linking disabled' || change === 'feature disabled' ? 'Feature not enabled' : 'not found',
+        ),
       );
       expect(navigate).not.toHaveBeenCalled();
       expect(connect).toBeEnabled();
@@ -90,7 +92,7 @@ describe('enterprise linking server contract', () => {
     const { clerk } = await renderWithClerk(<UserProfileEnterpriseAccountsSection />);
     const navigate = vi.spyOn(clerk, '__internal_windowNavigate').mockImplementation(() => {});
     await userEvent.setup().click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('Feature not enabled');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Feature not enabled'));
     expect(navigate).not.toHaveBeenCalled();
   });
 
@@ -248,8 +250,10 @@ describe('enterprise linking server contract', () => {
     const connect = await screen.findByRole('button', { name: 'Connect Acme Okta' });
     fapi.enterpriseLinking.verifiedLinks = [{ userId: 'user_1', connectionId: okta.id }];
     await userEvent.setup().click(connect);
-    expect(await screen.findByRole('alert')).toHaveTextContent(
-      'An enterprise account is already connected for this connection email: user_1@example.com',
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'An enterprise account is already connected for this connection email: user_1@example.com',
+      ),
     );
     expect(navigate).not.toHaveBeenCalled();
   });
@@ -266,7 +270,7 @@ describe('enterprise linking server contract', () => {
       }),
     ]);
     await userEvent.setup().click(connect);
-    expect(await screen.findByRole('alert')).toHaveTextContent('not found');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('not found'));
     expect(navigate).not.toHaveBeenCalled();
   });
 });

packages/mosaic/src/features/user-profile/__tests__/user-profile-enterprise-accounts.feature.test.tsx

@@ -206,7 +206,9 @@ describe('enterprise accounts', () => {
     const user = userEvent.setup();
 
     await user.click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('The connection could not start. Please try again.');
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toHaveTextContent('The connection could not start. Please try again.'),
+    );
     expect(screen.getByRole('button', { name: 'Connect Acme Okta' })).toBeEnabled();
     serveFapi(signedIn());
     await user.click(screen.getByRole('button', { name: 'Connect Acme Okta' }));
@@ -224,7 +226,7 @@ describe('enterprise accounts', () => {
     await user.click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
     await waitFor(() => expect(request.requests).toHaveLength(1));
     request.fail('enterprise_error', 'Acme is unavailable.');
-    expect(await screen.findByRole('alert')).toHaveTextContent('Acme is unavailable.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Acme is unavailable.'));
     expect(navigate).not.toHaveBeenCalled();
     serveFapi(signedIn());
     await user.click(screen.getByRole('button', { name: 'Connect Acme Okta' }));
@@ -240,7 +242,7 @@ describe('enterprise accounts', () => {
     await userEvent.setup().click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
     await waitFor(() => expect(request.requests).toHaveLength(1));
     request.fail('session_reverification_required', 'Verify your session.');
-    expect(await screen.findByRole('alert')).toHaveTextContent('Verify your session.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Verify your session.'));
     expect(screen.queryByRole('dialog')).toBeNull();
     expect(screen.getByRole('button', { name: 'Connect Acme Okta' })).toBeEnabled();
   });
@@ -251,7 +253,9 @@ describe('enterprise accounts', () => {
     await renderWithClerk(<UserProfileEnterpriseAccountsSection />);
 
     await userEvent.setup().click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('The connection could not start. Please try again.');
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toHaveTextContent('The connection could not start. Please try again.'),
+    );
     expect(screen.queryByRole('dialog')).toBeNull();
     expect(screen.getByRole('button', { name: 'Connect Acme Okta' })).toBeEnabled();
   });
@@ -283,7 +287,7 @@ describe('enterprise accounts', () => {
       </MosaicProvider>,
     );
     await userEvent.setup().click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent(message);
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent(message));
   });
 
   it('suppresses immediate duplicate and competing clicks, then clears feedback on retry', async () => {
@@ -300,7 +304,7 @@ describe('enterprise accounts', () => {
     expect(connect).toHaveAttribute('aria-busy', 'true');
     expect(other).toBeDisabled();
     request.fail('enterprise_error', 'Retry this connection.');
-    expect(await screen.findByRole('alert')).toHaveTextContent('Retry this connection.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Retry this connection.'));
     const retry = holdRequests('post', '/v1/me/external_accounts');
     await userEvent.setup().click(connect);
     await waitFor(() => expect(retry.requests).toHaveLength(1));
@@ -342,7 +346,7 @@ describe('enterprise accounts', () => {
       </MosaicProvider>,
     );
     await userEvent.setup().click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('La connexion ne peut pas démarrer.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('La connexion ne peut pas démarrer.'));
   });
 
   it('preserves the section generic error override for empty API errors', async () => {
@@ -364,7 +368,7 @@ describe('enterprise accounts', () => {
       </MosaicProvider>,
     );
     await userEvent.setup().click(await screen.findByRole('button', { name: 'Connect Acme Okta' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('La connexion a échoué. Réessayez.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('La connexion a échoué. Réessayez.'));
   });
 
   it.todo('challenges for session reverification before linking, resumes after success, and allows cancellation');

packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-section.view.test.tsx

@@ -188,7 +188,7 @@ describe('MFA section', () => {
     await user.click(selected);
     await user.click(screen.getByRole('menuitem', { name: 'Set as default' }));
 
-    expect(await screen.findByRole('alert')).toHaveTextContent(message);
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent(message));
     expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
     expect(screen.getAllByText('Default')).toHaveLength(1);
     await user.click(selected);

packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx

@@ -109,7 +109,7 @@ describe('passkeys section', () => {
     await user.clear(input);
     await user.type(input, 'Work laptop');
     await user.click(screen.getByRole('button', { name: 'Save' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('Try again');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Try again'));
     expect(input).toHaveValue('Work laptop');
     await user.type(input, ' updated');
     expect(screen.getByRole('alert')).toHaveTextContent('Try again');
@@ -197,7 +197,7 @@ describe('passkeys section', () => {
     await user.click(screen.getByRole('button', { name: 'Manage iPhone' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
     await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('Removal failed');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Removal failed'));
     await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
     expect(onRemove.mock.calls).toEqual([['phone'], ['phone']]);
     await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());

packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx

@@ -191,7 +191,7 @@ describe('phone actions', () => {
     await user.click(screen.getByRole('button', { name: 'Manage +1 (801) 555-0100' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove phone number' }));
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
-    expect(await screen.findByRole('alert')).toHaveTextContent('Cannot remove this phone.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Cannot remove this phone.'));
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
     await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
     expect(onRemovePhone).toHaveBeenCalledTimes(2);
@@ -214,7 +214,7 @@ describe('phone actions', () => {
     await user.click(screen.getByRole('button', { name: 'Manage +1 (801) 555-0100' }));
     await user.click(screen.getByRole('menuitem', { name: 'Set as primary' }));
     expect(onSetPrimaryPhone).toHaveBeenCalledExactlyOnceWith('phone_1');
-    expect(await screen.findByRole('alert')).toHaveTextContent('Unable to update primary phone.');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Unable to update primary phone.'));
     expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
   });
   it('requires confirmation before removing a phone number', async () => {

packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx

@@ -29,7 +29,7 @@ describe('UserProfilePictureRowView', () => {
     await user.click(screen.getByRole('button', { name: 'Manage profile picture' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove avatar' }));
 
-    expect(await screen.findByRole('alert')).toHaveTextContent("This action couldn't be completed.");
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent("This action couldn't be completed."));
   });
 
   it('replaces a rejected pick with the result of a removal', async () => {