Merge pull request #478 from etn-ccis/fix/4684-frogot-password-initia…

…lEmailValue-prop Fix/4684 frogot password initial email value prop
etn-ccis · Sep 18, 2023 · 6738fcc · 6738fcc
2 parents 7b46e70 + 14dbb80
commit 6738fcc
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { cleanup, fireEvent, render, RenderResult, screen } from '@testing-library/react';
 import { ForgotPasswordScreenProps } from './types';
-import { AuthContextProvider, i18nAuthInstance } from '../../contexts';
+import { AuthContextProvider } from '../../contexts';
 import { BrowserRouter } from 'react-router-dom';
 import { ForgotPasswordScreen } from './ForgotPasswordScreen';
 import '@testing-library/jest-dom';
@@ -170,4 +170,20 @@ describe('Forgot Password Screen tests', () => {
 
         expect(screen.getByTestId('blui-spinner')).toBeInTheDocument();
     });
+
+    it('should disable submit button when initialEmailValue prop is invalid', () => {
+        render(
+            <AuthContextProvider {...authContextProviderProps}>
+                <BrowserRouter>
+                    <ForgotPasswordScreen initialEmailValue="test" />
+                </BrowserRouter>
+            </AuthContextProvider>
+        );
+
+        const nextButton = screen.getByText('Submit');
+
+        expect(nextButton).toBeInTheDocument();
+        expect(screen.getByText(/Submit/i)).toBeDisabled();
+        expect(screen.getByText(/Please enter a valid email/i)).toBeInTheDocument();
+    });
 });
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.test.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.test.tsx
@@ -35,7 +35,7 @@ describe('Forgot Password Screen Base', () => {
                     currentStep: 2,
                     totalSteps: 6,
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
         expect(screen.getByText('Forgot Password')).toBeInTheDocument();
@@ -57,7 +57,7 @@ describe('Forgot Password Screen Base', () => {
                     }
                     return 'Please enter a valid email';
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
 
@@ -75,12 +75,38 @@ describe('Forgot Password Screen Base', () => {
                     }
                     return 'Please enter a valid email';
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
         expect(verifyEmailInput).toHaveAttribute('aria-invalid', 'true');
     });
 
+    it('it disables next button when initialEmailValue prop is invalid', () => {
+        render(
+            <ForgotPasswordScreenBase
+                WorkflowCardHeaderProps={{ title: 'Forgot Password' }}
+                initialEmailValue={'test'}
+                emailValidator={(email: string): boolean | string => {
+                    if (email?.length > 5) {
+                        return true;
+                    }
+                    return 'Please enter a valid email';
+                }}
+                WorkflowCardActionsProps={{
+                    showNext: true,
+                    nextLabel: 'Next',
+                    showPrevious: true,
+                    previousLabel: 'Back',
+                    canGoNext: true,
+                }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
+            />
+        );
+        expect(screen.getByText('Forgot Password')).toBeInTheDocument();
+        expect(screen.getByText('Next')).toBeInTheDocument();
+        expect(screen.getByText(/Next/i)).toBeDisabled();
+    });
+
     it('does not set error state when email is long enough', () => {
         const { getByLabelText, rerender } = render(
             <ForgotPasswordScreenBase
@@ -92,7 +118,7 @@ describe('Forgot Password Screen Base', () => {
                     }
                     return 'Please enter a valid email';
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
 
@@ -110,7 +136,7 @@ describe('Forgot Password Screen Base', () => {
                     }
                     return 'Please enter a valid email';
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
         expect(verifyEmailInput).not.toHaveAttribute('aria-invalid', 'true');
@@ -127,7 +153,7 @@ describe('Forgot Password Screen Base', () => {
                     currentStep: 1,
                     totalSteps: 6,
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
 
@@ -148,7 +174,7 @@ describe('Forgot Password Screen Base', () => {
                     }
                     return 'Please enter a valid email';
                 }}
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
 
@@ -162,7 +188,7 @@ describe('Forgot Password Screen Base', () => {
                 WorkflowCardHeaderProps={{ title: 'Title' }}
                 WorkflowCardInstructionProps={{ instructions: 'Instructions' }}
                 emailLabel="Email Address"
-                slots={{ SuccessScreen: <Box>Success</Box> }}
+                slots={{ SuccessScreen: (): JSX.Element => <Box>Success</Box> }}
             />
         );
 

diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -55,9 +55,11 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
     const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
-    const [isEmailValid, setIsEmailValid] = useState(emailValidator(initialEmailValue) ?? false);
-    const [emailError, setEmailError] = useState('');
-    const [shouldValidateEmail, setShouldValidateEmail] = useState(false);
+    const validateEmail = (): boolean => typeof emailValidator(initialEmailValue) !== 'string';
+
+    const [isEmailValid, setIsEmailValid] = useState(validateEmail);
+    const [emailError, setEmailError] = useState(validateEmail ? emailValidator(initialEmailValue) : '');
+    const [shouldValidateEmail, setShouldValidateEmail] = useState(initialEmailValue !== '' ?? validateEmail);
 
     const handleEmailInputChange = useCallback(
         (email: string) => {