fix: adding value length check for full name field (#1561)

Co-authored-by: Artur Filippovskii <118079918+filippovskii09@users.noreply.github.com>

Author: cmltaWt0

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"

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

@@ -6,7 +6,9 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
+import messages from '../../messages';
 import { NameField } from '../index';
+import { MAX_FULL_NAME_LENGTH } from './validator';
 
 const mockStore = configureStore();
 
@@ -92,6 +94,25 @@ describe('NameField', () => {
       );
     });
 
+    it('should validate for full name length', () => {
+      const longName = `
+        5cnx16mn7qTSbtiha1W473ZtV5prGBCEtNrfLkqizJirf
+        v5kbzBpLRbdh7FY5qujb8viQ9zPziE1fWnbFu5tj4FXaY5GDESvVwjQkE
+        txUPE3r9mk4HYcSfXVJPWAWRuK2LJZycZWDm0BMFLZ63YdyQAZhjyvjn7
+        SCqKjSHDx7mgwFp35PF4CxwtwNLxY11eqf5F88wQ9k2JQ9U8uKSFyTKCM
+        A456CGA5KjUugYdT1qKdvvnXtaQr8WA87m9jpe16
+      `;
+      const { container } = render(routerWrapper(reduxWrapper(<NameField {...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',
+        messages['name.validation.length.message'].defaultMessage.replace('{limit}', MAX_FULL_NAME_LENGTH),
+      );
+    });
+
     it('should clear error on focus', () => {
       const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
 

src/register/RegistrationFields/NameField/validator.js

@@ -9,12 +9,16 @@ export const HTML_REGEX = /<|>/u;
 // regex from backend
 export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
 
+export const MAX_FULL_NAME_LENGTH = 255;
+
 const validateName = (value, formatMessage) => {
   let fieldError = '';
   if (!value.trim()) {
     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 > MAX_FULL_NAME_LENGTH) {
+    fieldError = formatMessage(messages['name.validation.length.message'], { limit: MAX_FULL_NAME_LENGTH });
   }
   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: 'registration.name.validation.length.message',
+    defaultMessage: 'Full name cannot be longer than {limit} characters',
+    description: 'Validation message that appears when the full name exceeds the character limit',
+  },
   'password.validation.message': {
     id: 'password.validation.message',
     defaultMessage: 'Password criteria has not been met',