From 610ecb69a0bda2c2042cf64808d7ddf820e7524d Mon Sep 17 00:00:00 2001
From: Dima Alipov <dimaalipov@192.168.1.138>
Date: Tue, 23 Apr 2024 15:41:57 +0300
Subject: [PATCH] fix: adding value length check for full name field

---
 .../tests/ThirdPartyAuthAlert.test.jsx        | 17 +++++++++++++++-
 .../ThirdPartyAuthAlert.test.jsx.snap         | 20 +++++++++++++++++++
 .../NameField/NameField.test.jsx              | 19 ++++++++++++++++++
 .../RegistrationFields/NameField/validator.js |  2 ++
 src/register/messages.jsx                     |  5 +++++
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/common-components/tests/ThirdPartyAuthAlert.test.jsx b/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
index 435f122740..e60ebdb2ce 100644
--- a/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
+++ b/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();
+  });
 });
diff --git a/src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap b/src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap
index f399dc41a7..dab8c287cf 100644
--- a/src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap
+++ b/src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap
@@ -51,3 +51,23 @@ Array [
   </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>
+`;
diff --git a/src/register/RegistrationFields/NameField/NameField.test.jsx b/src/register/RegistrationFields/NameField/NameField.test.jsx
index 3d33467229..cf02aa01f2 100644
--- a/src/register/RegistrationFields/NameField/NameField.test.jsx
+++ b/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} />)));
 
diff --git a/src/register/RegistrationFields/NameField/validator.js b/src/register/RegistrationFields/NameField/validator.js
index aefaedfb3f..fce71cd593 100644
--- a/src/register/RegistrationFields/NameField/validator.js
+++ b/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;
 };
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index 39d9e7f549..404485b39d 100644
--- a/src/register/messages.jsx
+++ b/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',