Skip to content

Commit 642853e

Browse files
fix: adding value length check for full name field (#1561)
Co-authored-by: Artur Filippovskii <118079918+filippovskii09@users.noreply.github.com>
1 parent 4cb7922 commit 642853e

5 files changed

Lines changed: 66 additions & 1 deletion

File tree

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import { IntlProvider } from '@edx/frontend-platform/i18n';
44
import renderer from 'react-test-renderer';
55

6-
import { REGISTER_PAGE } from '../../data/constants';
6+
import { PENDING_STATE, REGISTER_PAGE } from '../../data/constants';
77
import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
88

99
describe('ThirdPartyAuthAlert', () => {
@@ -38,4 +38,19 @@ describe('ThirdPartyAuthAlert', () => {
3838
).toJSON();
3939
expect(tree).toMatchSnapshot();
4040
});
41+
42+
it('renders skeleton for pending third-party auth', () => {
43+
props = {
44+
...props,
45+
thirdPartyAuthApiStatus: PENDING_STATE,
46+
isThirdPartyAuthActive: true,
47+
};
48+
49+
const tree = renderer.create(
50+
<IntlProvider locale="en">
51+
<ThirdPartyAuthAlert {...props} />
52+
</IntlProvider>,
53+
).toJSON();
54+
expect(tree).toMatchSnapshot();
55+
});
4156
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`ThirdPartyAuthAlert renders skeleton for pending third-party auth 1`] = `
4+
<div
5+
className="fade alert-content alert-warning mt-n2 mb-5 alert show"
6+
id="tpa-alert"
7+
role="alert"
8+
>
9+
<div
10+
className="pgn__alert-message-wrapper"
11+
>
12+
<div
13+
className="alert-message-content"
14+
>
15+
<p>
16+
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.
17+
</p>
18+
</div>
19+
</div>
20+
</div>
21+
`;
22+
323
exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
424
<div
525
className="fade alert-content alert-warning mt-n2 mb-5 alert show"

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import { BrowserRouter as Router } from 'react-router-dom';
66
import configureStore from 'redux-mock-store';
77

88
import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
9+
import messages from '../../messages';
910
import { NameField } from '../index';
11+
import { MAX_FULL_NAME_LENGTH } from './validator';
1012

1113
const mockStore = configureStore();
1214

@@ -92,6 +94,25 @@ describe('NameField', () => {
9294
);
9395
});
9496

97+
it('should validate for full name length', () => {
98+
const longName = `
99+
5cnx16mn7qTSbtiha1W473ZtV5prGBCEtNrfLkqizJirf
100+
v5kbzBpLRbdh7FY5qujb8viQ9zPziE1fWnbFu5tj4FXaY5GDESvVwjQkE
101+
txUPE3r9mk4HYcSfXVJPWAWRuK2LJZycZWDm0BMFLZ63YdyQAZhjyvjn7
102+
SCqKjSHDx7mgwFp35PF4CxwtwNLxY11eqf5F88wQ9k2JQ9U8uKSFyTKCM
103+
A456CGA5KjUugYdT1qKdvvnXtaQr8WA87m9jpe16
104+
`;
105+
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
106+
const nameInput = container.querySelector('input#name');
107+
fireEvent.blur(nameInput, { target: { value: longName, name: 'name' } });
108+
109+
expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
110+
expect(props.handleErrorChange).toHaveBeenCalledWith(
111+
'name',
112+
messages['name.validation.length.message'].defaultMessage.replace('{limit}', MAX_FULL_NAME_LENGTH),
113+
);
114+
});
115+
95116
it('should clear error on focus', () => {
96117
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
97118

src/register/RegistrationFields/NameField/validator.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@ export const HTML_REGEX = /<|>/u;
99
// regex from backend
1010
export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
1111

12+
export const MAX_FULL_NAME_LENGTH = 255;
13+
1214
const validateName = (value, formatMessage) => {
1315
let fieldError = '';
1416
if (!value.trim()) {
1517
fieldError = formatMessage(messages['empty.name.field.error']);
1618
} else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
1719
fieldError = formatMessage(messages['name.validation.message']);
20+
} else if (value && value.length > MAX_FULL_NAME_LENGTH) {
21+
fieldError = formatMessage(messages['name.validation.length.message'], { limit: MAX_FULL_NAME_LENGTH });
1822
}
1923
return fieldError;
2024
};

src/register/messages.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,11 @@ const messages = defineMessages({
126126
defaultMessage: 'Enter a valid name',
127127
description: 'Validation message that appears when fullname contain URL',
128128
},
129+
'name.validation.length.message': {
130+
id: 'registration.name.validation.length.message',
131+
defaultMessage: 'Full name cannot be longer than {limit} characters',
132+
description: 'Validation message that appears when the full name exceeds the character limit',
133+
},
129134
'password.validation.message': {
130135
id: 'password.validation.message',
131136
defaultMessage: 'Password criteria has not been met',

0 commit comments

Comments
 (0)