fix(react): Hide loading spinner on CompleteResetPassword only when c…

…hecks complete

Because:
* Users with a recovery key see a flash of CompleteResetPassword before being redirected to AccountRecoveryConfirmKey

This commit:
* Adjusts the loading spinner state to only hide when recovery key checks have completed

Fixes FXA-7170

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx

@@ -94,11 +94,11 @@ describe('CompleteResetPassword page', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the component as expected', () => {
+  it('renders the component as expected', async () => {
     renderSubject(account);
     // testAllL10n(screen, bundle);
 
-    screen.getByRole('heading', {
+    await screen.findByRole('heading', {
       name: 'Create new password',
     });
     screen.getByLabelText('New password');
@@ -112,7 +112,9 @@ describe('CompleteResetPassword page', () => {
   it('displays password requirements when the new password field is in focus', async () => {
     renderSubject(account);
 
-    const newPasswordField = screen.getByTestId('new-password-input-field');
+    const newPasswordField = await screen.findByTestId(
+      'new-password-input-field'
+    );
 
     expect(screen.queryByText('Password requirements')).not.toBeInTheDocument();
 
@@ -192,8 +194,10 @@ describe('CompleteResetPassword page', () => {
 
       renderSubject(account);
 
-      fireEvent.input(screen.getByTestId('new-password-input-field'), {
-        target: { value: PASSWORD },
+      await waitFor(() => {
+        fireEvent.input(screen.getByTestId('new-password-input-field'), {
+          target: { value: PASSWORD },
+        });
       });
 
       fireEvent.input(screen.getByTestId('verify-password-input-field'), {
@@ -246,7 +250,7 @@ describe('CompleteResetPassword page', () => {
       hasRecoveryKey: jest.fn().mockResolvedValue(true),
     } as unknown as Account;
 
-    it('redirects as expected', () => {
+    it('redirects as expected', async () => {
       account = {
         resetPasswordStatus: jest.fn().mockResolvedValue(true),
         completeResetPassword: jest.fn().mockResolvedValue(true),
@@ -255,6 +259,8 @@ describe('CompleteResetPassword page', () => {
 
       renderSubject(account);
 
+      screen.getByLabelText('Loading…');
+
       expect(account.hasRecoveryKey).toHaveBeenCalledWith(
         mockCompleteResetPasswordParams.email
       );
@@ -285,8 +291,10 @@ describe('CompleteResetPassword page', () => {
 
   describe('can submit', () => {
     async function enterPasswordAndSubmit() {
-      fireEvent.input(screen.getByTestId('new-password-input-field'), {
-        target: { value: PASSWORD },
+      await waitFor(() => {
+        fireEvent.input(screen.getByTestId('new-password-input-field'), {
+          target: { value: PASSWORD },
+        });
       });
       fireEvent.input(screen.getByTestId('verify-password-input-field'), {
         target: { value: PASSWORD },

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx

@@ -116,11 +116,14 @@ const CompleteResetPassword = ({
       }
     };
 
-    if (!location.state?.lostRecoveryKey) {
-      checkForRecoveryKeyAndNavigate(params.email);
-    }
+    const handleRecoveryKeyStatus = async () => {
+      if (!location.state?.lostRecoveryKey) {
+        await checkForRecoveryKeyAndNavigate(params.email);
+      }
+      setShowLoadingSpinner(false);
+    };
 
-    setShowLoadingSpinner(false);
+    handleRecoveryKeyStatus();
   }, [
     account,
     navigate,
@@ -142,8 +145,6 @@ const CompleteResetPassword = ({
     };
 
     checkPasswordForgotToken(params.token);
-
-    setShowLoadingSpinner(false);
   }, [params.token, account, setLinkStatus]);
 
   const alertSuccessAndNavigate = useCallback(() => {