fix: adding value length check for full name field

src/common-components/tests/ThirdPartyAuthAlert.test.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
 
-import { REGISTER_PAGE } from '../../data/constants';
+import { PENDING_STATE, REGISTER_PAGE } from '../../data/constants';
 import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
 
 describe('ThirdPartyAuthAlert', () => {
@@ -38,4 +38,19 @@ describe('ThirdPartyAuthAlert', () => {
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders skeleton for pending third-party auth', () => {
+    props = {
+      ...props,
+      thirdPartyAuthApiStatus: PENDING_STATE,
+      isThirdPartyAuthActive: true,
+    };
+
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <ThirdPartyAuthAlert {...props} />
+      </IntlProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap

@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ThirdPartyAuthAlert renders skeleton for pending third-party auth 1`] = `
+<div
+  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
+  id="tpa-alert"
+  role="alert"
+>
+  <div
+    className="pgn__alert-message-wrapper"
+  >
+    <div
+      className="alert-message-content"
+    >
+      <p>
+        You have successfully signed into Google, but your Google account does not have a linked Your Platform Name Here account. To link your accounts, sign in now using your Your Platform Name Here password.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
 <div
   className="fade alert-content alert-warning mt-n2 mb-5 alert show"
@@ -51,3 +71,23 @@ exports[`ThirdPartyAuthAlert should match register page third party auth alert m
   </h4>,
 ]
 `;
+
+exports[`ThirdPartyAuthAlert should render skeleton when thirdPartyAuthApiStatus is PENDING_STATE and isThirdPartyAuthActive is true 1`] = `
+<div
+  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
+  id="tpa-alert"
+  role="alert"
+>
+  <div
+    className="pgn__alert-message-wrapper"
+  >
+    <div
+      className="alert-message-content"
+    >
+      <p>
+        You have successfully signed into Google, but your Google account does not have a linked Your Platform Name Here account. To link your accounts, sign in now using your Your Platform Name Here password.
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/register/RegistrationFields/NameField/NameField.test.jsx

@@ -94,6 +94,25 @@ describe('NameField', () => {
       );
     });
 
+    it('should validate for full name length', () => {
+      const longName = `
+        5cnx16mn7qTSbtiha1W473ZtV5prGBCEtNrfLkqizJirf
+        v5kbzBpLRbdh7FY5qujb8viQ9zPziE1fWnbFu5tj4FXaY5GDESvVwjQkE
+        txUPE3r9mk4HYcSfXVJPWAWRuK2LJZycZWDm0BMFLZ63YdyQAZhjyvjn7
+        SCqKjSHDx7mgwFp35PF4CxwtwNLxY11eqf5F88wQ9k2JQ9U8uKSFyTKCM
+        A456CGA5KjUugYdT1qKdvvnXtaQr8WA87m9jpe16
+      `;
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+      const nameInput = container.querySelector('input#name');
+      fireEvent.blur(nameInput, { target: { value: longName, name: 'name' } });
+
+      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+      expect(props.handleErrorChange).toHaveBeenCalledWith(
+        'name',
+        'Full name cannot be longer than 255 characters',
+      );
+    });
+
     it('should clear error on focus', () => {
       const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 

src/register/RegistrationFields/NameField/validator.js

@@ -15,6 +15,8 @@ const validateName = (value, formatMessage) => {
     fieldError = formatMessage(messages['empty.name.field.error']);
   } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
     fieldError = formatMessage(messages['name.validation.message']);
+  } else if (value && value.length > 255) {
+    fieldError = formatMessage(messages['name.validation.length.message']);
   }
   return fieldError;
 };

src/register/messages.jsx

@@ -126,6 +126,11 @@ const messages = defineMessages({
     defaultMessage: 'Enter a valid name',
     description: 'Validation message that appears when fullname contain URL',
   },
+  'name.validation.length.message': {
+    id: 'name.validation.message',
+    defaultMessage: 'Full name cannot be longer than 255 characters',
+    description: 'Validation message that appears when fullname contain URL',
+  },
   'password.validation.message': {
     id: 'password.validation.message',
     defaultMessage: 'Password criteria has not been met',