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

openedx · Feb 7, 2024 · e40c49d · e40c49d
1 parent ba5aece
commit e40c49d
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 92 deletions.
diff --git a/src/register/RegistrationFields/NameField/NameField.test.jsx b/src/register/RegistrationFields/NameField/NameField.test.jsx
@@ -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',
  );
  });

diff --git a/src/register/RegistrationFields/NameField/validator.js b/src/register/RegistrationFields/NameField/validator.js
@@ -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;
 };

diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
@@ -121,10 +121,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));
  }
@@ -323,22 +323,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"

diff --git a/src/register/RegistrationPage.test.jsx b/src/register/RegistrationPage.test.jsx
@@ -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: '[email protected]',
  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: '[email protected]',
  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: '[email protected]',
  password: 'password1',
@@ -616,8 +616,8 @@ describe('RegistrationPage', () => {
  registrationFormData: {
  ...registrationFormData,
  formFields: {
- firstname: 'John',
- lastname: 'Doe',
+ firstName: 'John',
+ lastName: 'Doe',
  username: 'john_doe',
  email: '[email protected]',
  password: 'password1',
@@ -631,8 +631,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');
@@ -760,8 +760,8 @@ describe('RegistrationPage', () => {
  thirdPartyAuthContext: {
  ...initialState.commonComponents.thirdPartyAuthContext,
  pipelineUserDetails: {
- firstname: 'John',
- lastname: 'Doe',
+ firstName: 'John',
+ lastName: 'Doe',
  username: 'john_doe',
  email: '[email protected]',
  },
@@ -792,8 +792,8 @@ describe('RegistrationPage', () => {
  registrationFormData: {
  ...registrationFormData,
  formFields: {
- firstname: 'John',
- lastname: 'Doe',
+ firstName: 'John',
+ lastName: 'Doe',
  username: 'john_doe',
  email: '[email protected]',
  },
@@ -813,8 +813,8 @@ describe('RegistrationPage', () => {
  ...initialState.commonComponents.thirdPartyAuthContext,
  currentProvider: 'Apple',
  pipelineUserDetails: {
- firstname: 'John',
- lastname: 'Doe',
+ firstName: 'John',
+ lastName: 'Doe',
  username: 'john_doe',
  email: '[email protected]',
  },
@@ -826,8 +826,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: '[email protected]',
  country: 'PK',

diff --git a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
@@ -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: '[email protected]',
  password: 'password1',

diff --git a/src/register/data/reducers.js b/src/register/data/reducers.js
@@ -23,13 +23,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,

diff --git a/src/register/data/tests/reducers.test.js b/src/register/data/tests/reducers.test.js
@@ -23,13 +23,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,