diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.test.tsx index 45d0508f..738089fd 100644 --- 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( + + + + + + ); + + 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 index fed9955a..fec1caac 100644 --- 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: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); expect(screen.getByText('Forgot Password')).toBeInTheDocument(); @@ -57,7 +57,7 @@ describe('Forgot Password Screen Base', () => { } return 'Please enter a valid email'; }} - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); @@ -75,12 +75,38 @@ describe('Forgot Password Screen Base', () => { } return 'Please enter a valid email'; }} - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); expect(verifyEmailInput).toHaveAttribute('aria-invalid', 'true'); }); + it('it disables next button when initialEmailValue prop is invalid', () => { + render( + { + 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 => Success }} + /> + ); + 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( { } return 'Please enter a valid email'; }} - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); @@ -110,7 +136,7 @@ describe('Forgot Password Screen Base', () => { } return 'Please enter a valid email'; }} - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); expect(verifyEmailInput).not.toHaveAttribute('aria-invalid', 'true'); @@ -127,7 +153,7 @@ describe('Forgot Password Screen Base', () => { currentStep: 1, totalSteps: 6, }} - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); @@ -148,7 +174,7 @@ describe('Forgot Password Screen Base', () => { } return 'Please enter a valid email'; }} - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); @@ -162,7 +188,7 @@ describe('Forgot Password Screen Base', () => { WorkflowCardHeaderProps={{ title: 'Title' }} WorkflowCardInstructionProps={{ instructions: 'Instructions' }} emailLabel="Email Address" - slots={{ SuccessScreen: Success }} + slots={{ SuccessScreen: (): JSX.Element => Success }} /> ); diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index d41b7037..0a0ba4a4 100644 --- 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 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) => {