From effdf62c9e520ac9c11fad1c2c8c7e8916bf3e00 Mon Sep 17 00:00:00 2001 From: Adeel Khan Date: Tue, 16 Feb 2021 03:24:04 +0500 Subject: [PATCH] Fix login page validations 1) Removing focusout calls. 2) Adds email < 3 character length. VAN-362 --- src/login/LoginPage.jsx | 10 ++----- src/login/messages.jsx | 5 ++++ src/login/tests/LoginPage.test.jsx | 48 +++++++++++++++++++----------- 3 files changed, 37 insertions(+), 26 deletions(-) diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index a3c5c5bf..11b84ebb 100644 --- a/src/login/LoginPage.jsx +++ b/src/login/LoginPage.jsx @@ -66,12 +66,6 @@ class LoginPage extends React.Component { this.setState(prevState => ({ institutionLogin: !prevState.institutionLogin })); } - handleOnBlur = () => { - if (this.state.isSubmitted) { - this.setState({ isSubmitted: false }); - } - } - handleSubmit = (e) => { e.preventDefault(); this.setState({ isSubmitted: true }); @@ -107,6 +101,8 @@ class LoginPage extends React.Component { if (email === '') { errors.email = this.props.intl.formatMessage(messages['email.validation.message']); + } else if (email.length < 3) { + errors.email = this.props.intl.formatMessage(messages['email.format.validation.less.chars.message']); } else if (!regex.test(email)) { errors.email = this.props.intl.formatMessage(messages['email.format.validation.message']); } else { @@ -212,7 +208,6 @@ class LoginPage extends React.Component { invalidMessage={errors.email} value={email} helpText={intl.formatMessage(messages['email.help.message'])} - onBlur={(e) => { this.handleOnBlur(); this.validateEmail(e.target.value); }} onChange={(e) => this.setState({ email: e.target.value, isSubmitted: false })} /> { this.handleOnBlur(); this.validatePassword(e.target.value); }} onChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })} /> diff --git a/src/login/messages.jsx b/src/login/messages.jsx index 0099cca7..834dfe41 100644 --- a/src/login/messages.jsx +++ b/src/login/messages.jsx @@ -91,6 +91,11 @@ const messages = defineMessages({ defaultMessage: 'The email address you\'ve provided isn\'t formatted correctly.', description: 'Validation message that appears when email address format is incorrect', }, + 'email.format.validation.less.chars.message': { + id: 'email.format.validation.less.chars.message', + defaultMessage: 'Email must have at least 3 characters.', + description: 'Validation message that appears when email address is less than 3 characters', + }, 'email.validation.message': { id: 'email.validation.message', defaultMessage: 'Please enter your Email.', diff --git a/src/login/tests/LoginPage.test.jsx b/src/login/tests/LoginPage.test.jsx index e89a8bc2..fffa6120 100644 --- a/src/login/tests/LoginPage.test.jsx +++ b/src/login/tests/LoginPage.test.jsx @@ -146,7 +146,7 @@ describe('LoginPage', () => { expect(root.find('button.field-link').first().text()).toEqual('Need help signing in?'); }); - it('updates the error state for invalid email', () => { + it('updates the error state for empty email input on form submission', () => { const errorState = { email: 'Please enter your Email.', password: '' }; store.dispatch = jest.fn(store.dispatch); @@ -161,6 +161,35 @@ describe('LoginPage', () => { ); }); + it('updates the error state for invalid email; less than 3 characters on form submission', () => { + const errorState = { email: 'Email must have at least 3 characters.', password: '' }; + store.dispatch = jest.fn(store.dispatch); + + const loginPage = (mount(reduxWrapper())).find('LoginPage'); + + loginPage.find('input#password').simulate('change', { target: { value: 'test', name: 'password' } }); + loginPage.find('input#email').simulate('change', { target: { value: 'te', name: 'email' } }); + loginPage.find('button.btn-brand').simulate('click'); + + expect(loginPage.state('errors')).toEqual(errorState); + expect(store.dispatch).toHaveBeenCalledWith( + loginRequestFailure({ errorCode: 'invalid-form', context: errorState }), + ); + }); + + it('updates the error state for invalid email format validation on form submission', () => { + const errorState = { email: 'The email address you\'ve provided isn\'t formatted correctly.', password: '' }; + store.dispatch = jest.fn(store.dispatch); + + const loginPage = (mount(reduxWrapper())).find('LoginPage'); + + loginPage.find('input#password').simulate('change', { target: { value: 'test', name: 'password' } }); + loginPage.find('input#email').simulate('change', { target: { value: 'test@', name: 'email' } }); + loginPage.find('button.btn-brand').simulate('click'); + + expect(loginPage.state('errors')).toEqual(errorState); + }); + it('updates the error state for invalid password', () => { const errorState = { email: '', password: 'Please enter your Password.' }; store.dispatch = jest.fn(store.dispatch); @@ -176,26 +205,9 @@ describe('LoginPage', () => { ); }); - it('should update the error message on focus out', () => { - const errorState = { email: 'Please enter your Email.', password: 'Please enter your Password.' }; - const loginPage = (mount(reduxWrapper())).find('LoginPage'); - - loginPage.find('input#password').simulate('blur', { target: { value: '', name: 'password' } }); - loginPage.find('input#email').simulate('blur', { target: { value: '', name: 'email' } }); - - expect(loginPage.state('errors')).toEqual(errorState); - - errorState.email = 'The email address you\'ve provided isn\'t formatted correctly.'; - - // Enter email with invalid format - loginPage.find('input#email').simulate('blur', { target: { value: 'invalid-email', name: 'email' } }); - expect(loginPage.state('errors')).toEqual(errorState); - }); - it('submits login request for valid email and password values', () => { store.dispatch = jest.fn(store.dispatch); const loginPage = (mount(reduxWrapper())).find('LoginPage'); - loginPage.find('input#email').simulate('change', { target: { value: 'test@example.com' } }); loginPage.find('input#password').simulate('change', { target: { value: 'password' } }); loginPage.find('button.btn-brand').simulate('click');