Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: TPA data not auto-populated (#1156)

Browse Source
This commit is contained in:
Attiya Ishaque
2024-02-07 18:49:32 +05:00
committed by Zainab Amir
parent 94e823663e
commit 25909563a4
8 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/register/RegistrationFields/NameField/NameField.test.jsx
View File

@@ -67,43 +67,43 @@ describe('NameField', () => {
describe('Test Name Field', () => {
it('should run first name field validation when onBlur is fired', () => {
props.name = 'firstname';
props.name = 'firstName';
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const firstNameInput = container.querySelector('input#firstname');
fireEvent.blur(firstNameInput, { target: { value: '', name: 'firstname' } });
const firstNameInput = container.querySelector('input#firstName');
fireEvent.blur(firstNameInput, { target: { value: '', name: 'firstName' } });
expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
expect(props.handleErrorChange).toHaveBeenCalledWith(
'firstname',
'firstName',
'Enter your first name',
);
});
it('should update first name field error for frontend validations', () => {
props.name = 'firstname';
props.name = 'firstName';
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const firstNameInput = container.querySelector('input#firstname');
fireEvent.blur(firstNameInput, { target: { value: 'https://invalid-name.com', name: 'firstname' } });
const firstNameInput = container.querySelector('input#firstName');
fireEvent.blur(firstNameInput, { target: { value: 'https://invalid-name.com', name: 'firstName' } });
expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
expect(props.handleErrorChange).toHaveBeenCalledWith(
'firstname',
'firstName',
'Enter a valid first name',
);
});
it('should clear first name error on focus', () => {
props.name = 'firstname';
props.name = 'firstName';
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const firstNameInput = container.querySelector('input#firstname');
fireEvent.focus(firstNameInput, { target: { value: '', name: 'firstname' } });
const firstNameInput = container.querySelector('input#firstName');
fireEvent.focus(firstNameInput, { target: { value: '', name: 'firstName' } });
expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
expect(props.handleErrorChange).toHaveBeenCalledWith(
'firstname',
'firstName',
'',
);
});
@@ -115,12 +115,12 @@ describe('NameField', () => {
shouldFetchUsernameSuggestions: true,
fullName: 'test test',
};
props.name = 'lastname';
props.name = 'lastName';
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const lastNameInput = container.querySelector('input#lastname');
const lastNameInput = container.querySelector('input#lastName');
// Enter a valid name so that frontend validations are passed
fireEvent.blur(lastNameInput, { target: { value: 'test', name: 'lastname' } });
fireEvent.blur(lastNameInput, { target: { value: 'test', name: 'lastName' } });
expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ name: props.fullName }));
});
@@ -137,41 +137,41 @@ describe('NameField', () => {
},
});
props.name = 'lastname';
props.name = 'lastName';
store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const lastNameInput = container.querySelector('input#lastname');
const lastNameInput = container.querySelector('input#lastName');
fireEvent.focus(lastNameInput, { target: { value: 'test', name: 'lastname' } });
fireEvent.focus(lastNameInput, { target: { value: 'test', name: 'lastName' } });
expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('lastname'));
expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('lastName'));
});
it('should run last name field validation when onBlur is fired', () => {
props.name = 'lastname';
props.name = 'lastName';
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const lastNameInput = container.querySelector('input#lastname');
fireEvent.blur(lastNameInput, { target: { value: '', name: 'lastname' } });
const lastNameInput = container.querySelector('input#lastName');
fireEvent.blur(lastNameInput, { target: { value: '', name: 'lastName' } });
expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
expect(props.handleErrorChange).toHaveBeenCalledWith(
'lastname',
'lastName',
'Enter your last name',
);
});
it('should update last name field error for frontend validation', () => {
props.name = 'lastname';
props.name = 'lastName';
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
const lastNameInput = container.querySelector('input#lastname');
fireEvent.blur(lastNameInput, { target: { value: 'https://invalid-name.com', name: 'lastname' } });
const lastNameInput = container.querySelector('input#lastName');
fireEvent.blur(lastNameInput, { target: { value: 'https://invalid-name.com', name: 'lastName' } });
expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
expect(props.handleErrorChange).toHaveBeenCalledWith(
'lastname',
'lastName',
'Enter a valid last name',
);
});

12
src/register/RegistrationFields/NameField/validator.js
View File

@@ -12,13 +12,13 @@ export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
const validateName = (value, fieldName, formatMessage) => {
let fieldError;
if (!value.trim()) {
fieldError = fieldName === 'lastname'
? formatMessage(messages['empty.lastname.field.error'])
: formatMessage(messages['empty.firstname.field.error']);
fieldError = fieldName === 'lastName'
? formatMessage(messages['empty.lastName.field.error'])
: formatMessage(messages['empty.firstName.field.error']);
} else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
fieldError = fieldName === 'lastname'
? formatMessage(messages['lastname.validation.message'])
: formatMessage(messages['firstname.validation.message']);
fieldError = fieldName === 'lastName'
? formatMessage(messages['lastName.validation.message'])
: formatMessage(messages['firstName.validation.message']);
}
return fieldError;
};

22
src/register/RegistrationPage.jsx
View File

@@ -120,10 +120,10 @@ const RegistrationPage = (props) => {
}
if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {
const {
firstname = '', lastname = '', username = '', email = '',
firstName = '', lastName = '', username = '', email = '',
} = pipelineUserDetails;
setFormFields(prevState => ({
...prevState, firstname, lastname, username, email,
...prevState, firstName, lastName, username, email,
}));
dispatch(setUserPipelineDataLoaded(true));
}
@@ -312,22 +312,22 @@ const RegistrationPage = (props) => {
/>
<Form id="registration-form" name="registration-form">
<NameField
name="firstname"
value={formFields.firstname}
name="firstName"
value={formFields.firstName}
handleChange={handleOnChange}
handleErrorChange={handleErrorChange}
errorMessage={errors.firstname}
floatingLabel={formatMessage(messages['registration.firstname.label'])}
errorMessage={errors.firstName}
floatingLabel={formatMessage(messages['registration.firstName.label'])}
/>
<NameField
name="lastname"
value={formFields.lastname}
name="lastName"
value={formFields.lastName}
shouldFetchUsernameSuggestions={!formFields.username.trim()}
fullName={`${formFields.firstname} ${formFields.lastname}`}
fullName={`${formFields.firstName} ${formFields.lastName}`}
handleChange={handleOnChange}
handleErrorChange={handleErrorChange}
errorMessage={errors.lastname}
floatingLabel={formatMessage(messages['registration.lastname.label'])}
errorMessage={errors.lastName}
floatingLabel={formatMessage(messages['registration.lastName.label'])}
/>
<EmailField
name="email"

48
src/register/RegistrationPage.test.jsx
View File

@@ -64,13 +64,13 @@ describe('RegistrationPage', () => {
marketingEmailsOptIn: true,
},
formFields: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
emailSuggestion: {
suggestion: '', type: '',
},
errors: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
};
@@ -134,8 +134,8 @@ describe('RegistrationPage', () => {
});
const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
fireEvent.change(getByLabelText('First name'), { target: { value: payload.firstname, name: 'firstname' } });
fireEvent.change(getByLabelText('Last name'), { target: { value: payload.lastname, name: 'lastname' } });
fireEvent.change(getByLabelText('First name'), { target: { value: payload.first_name, name: 'firstName' } });
fireEvent.change(getByLabelText('Last name'), { target: { value: payload.last_name, name: 'lastName' } });
fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
@@ -153,8 +153,8 @@ describe('RegistrationPage', () => {
});
const emptyFieldValidation = {
firstname: 'Enter your first name',
lastname: 'Enter your last name',
firstName: 'Enter your first name',
lastName: 'Enter your last name',
username: 'Username must be between 2 and 30 characters',
email: 'Enter your email',
password: 'Password criteria has not been met',
@@ -171,8 +171,8 @@ describe('RegistrationPage', () => {
window.location = { href: getConfig().BASE_URL, search: '?next=/course/demo-course-url' };
const payload = {
firstname: 'John',
lastname: 'Doe',
first_name: 'John',
last_name: 'Doe',
username: 'john_doe',
email: 'john.doe@gmail.com',
password: 'password1',
@@ -195,8 +195,8 @@ describe('RegistrationPage', () => {
jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
const formPayload = {
firstname: 'John',
lastname: 'Doe',
first_name: 'John',
last_name: 'Doe',
username: 'john_doe',
email: 'john.doe@example.com',
country: 'Pakistan',
@@ -232,8 +232,8 @@ describe('RegistrationPage', () => {
jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
const payload = {
firstname: 'John',
lastname: 'Doe',
first_name: 'John',
last_name: 'Doe',
username: 'john_doe',
email: 'john.doe@gmail.com',
password: 'password1',
@@ -584,8 +584,8 @@ describe('RegistrationPage', () => {
registrationFormData: {
...registrationFormData,
formFields: {
firstname: 'John',
lastname: 'Doe',
firstName: 'John',
lastName: 'Doe',
username: 'john_doe',
email: 'john.doe@yopmail.com',
password: 'password1',
@@ -599,8 +599,8 @@ describe('RegistrationPage', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
const firstNameInput = container.querySelector('input#firstname');
const lastNameInput = container.querySelector('input#lastname');
const firstNameInput = container.querySelector('input#firstName');
const lastNameInput = container.querySelector('input#lastName');
const usernameInput = container.querySelector('input#username');
const emailInput = container.querySelector('input#email');
const passwordInput = container.querySelector('input#password');
@@ -728,8 +728,8 @@ describe('RegistrationPage', () => {
thirdPartyAuthContext: {
...initialState.commonComponents.thirdPartyAuthContext,
pipelineUserDetails: {
firstname: 'John',
lastname: 'Doe',
firstName: 'John',
lastName: 'Doe',
username: 'john_doe',
email: 'john.doe@example.com',
},
@@ -760,8 +760,8 @@ describe('RegistrationPage', () => {
registrationFormData: {
...registrationFormData,
formFields: {
firstname: 'John',
lastname: 'Doe',
firstName: 'John',
lastName: 'Doe',
username: 'john_doe',
email: 'john.doe@example.com',
},
@@ -781,8 +781,8 @@ describe('RegistrationPage', () => {
...initialState.commonComponents.thirdPartyAuthContext,
currentProvider: 'Apple',
pipelineUserDetails: {
firstname: 'John',
lastname: 'Doe',
firstName: 'John',
lastName: 'Doe',
username: 'john_doe',
email: 'john.doe@example.com',
},
@@ -794,8 +794,8 @@ describe('RegistrationPage', () => {
render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
firstname: 'John',
lastname: 'Doe',
first_name: 'John',
last_name: 'Doe',
username: 'john_doe',
email: 'john.doe@example.com',
country: 'PK',

12
src/register/components/tests/ConfigurableRegistrationForm.test.jsx
View File

@@ -56,13 +56,13 @@ describe('ConfigurableRegistrationForm', () => {
marketingEmailsOptIn: true,
},
formFields: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
emailSuggestion: {
suggestion: '', type: '',
},
errors: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
};
@@ -128,8 +128,8 @@ describe('ConfigurableRegistrationForm', () => {
});
const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
fireEvent.change(getByLabelText('First name'), { target: { value: payload.firstname, name: 'firstname' } });
fireEvent.change(getByLabelText('Last name'), { target: { value: payload.lastname, name: 'lastname' } });
fireEvent.change(getByLabelText('First name'), { target: { value: payload.first_name, name: 'firstName' } });
fireEvent.change(getByLabelText('Last name'), { target: { value: payload.last_name, name: 'lastName' } });
fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
@@ -239,8 +239,8 @@ describe('ConfigurableRegistrationForm', () => {
});
const payload = {
firstname: 'John',
lastname: 'Doe',
first_name: 'John',
last_name: 'Doe',
username: 'john_doe',
email: 'john.doe@example.com',
password: 'password1',

4
src/register/data/reducers.js
View File

@@ -22,13 +22,13 @@ export const defaultState = {
marketingEmailsOptIn: true,
},
formFields: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
emailSuggestion: {
suggestion: '', type: '',
},
errors: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
},
validations: null,

4
src/register/data/tests/reducers.test.js
View File

@@ -22,13 +22,13 @@ describe('Registration Reducer Tests', () => {
marketingEmailsOptIn: true,
},
formFields: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
emailSuggestion: {
suggestion: '', type: '',
},
errors: {
firstname: '', lastname: '', email: '', username: '', password: '',
firstName: '', lastName: '', email: '', username: '', password: '',
},
},
validations: null,

28
src/register/messages.jsx
View File

@@ -7,13 +7,13 @@ const messages = defineMessages({
description: 'register page title',
},
// Field labels
'registration.firstname.label': {
id: 'registration.firstname.label',
'registration.firstName.label': {
id: 'registration.firstName.label',
defaultMessage: 'First name',
description: 'Label that appears above first name field',
},
'registration.lastname.label': {
id: 'registration.lastname.label',
'registration.lastName.label': {
id: 'registration.lastName.label',
defaultMessage: 'Last name',
description: 'Label that appears above last name field',
},
@@ -43,8 +43,8 @@ const messages = defineMessages({
description: 'Text for opt in option on register page.',
},
// Help text
'help.text.firstname': {
id: 'help.text.firstname',
'help.text.firstName': {
id: 'help.text.firstName',
defaultMessage: 'This name will be used by any certificates that you earn.',
description: 'Help text for first name field on registration page',
},
@@ -81,13 +81,13 @@ const messages = defineMessages({
description: 'Heading of institution page',
},
// Validation messages
'empty.firstname.field.error': {
id: 'empty.firstname.field.error',
'empty.firstName.field.error': {
id: 'empty.firstName.field.error',
defaultMessage: 'Enter your first name',
description: 'Error message for empty first name field',
},
'empty.lastname.field.error': {
id: 'empty.lastname.field.error',
'empty.lastName.field.error': {
id: 'empty.lastName.field.error',
defaultMessage: 'Enter your last name',
description: 'Error message for empty last name field',
},
@@ -131,13 +131,13 @@ const messages = defineMessages({
defaultMessage: 'Username must be between 2 and 30 characters',
description: 'Error message for empty username field',
},
'firstname.validation.message': {
id: 'firstname.validation.message',
'firstName.validation.message': {
id: 'firstName.validation.message',
defaultMessage: 'Enter a valid first name',
description: 'Validation message that appears when first name contain URL',
},
'lastname.validation.message': {
id: 'lastname.validation.message',
'lastName.validation.message': {
id: 'lastName.validation.message',
defaultMessage: 'Enter a valid last name',
description: 'Validation message that appears when last name contain URL',
},