From 631eb26fa02687726a38aa660ef3170eff6836a6 Mon Sep 17 00:00:00 2001 From: Zainab Amir Date: Tue, 15 Dec 2020 15:12:41 +0500 Subject: [PATCH] VAN-130: Add translation strings (#44) --- src/logistration/LoginFailure.jsx | 1 + src/logistration/LoginHelpLinks.jsx | 6 +- src/logistration/LoginPage.jsx | 29 +++-- src/logistration/RegistrationFailure.jsx | 1 + src/logistration/RegistrationPage.jsx | 31 +++-- src/logistration/messages.jsx | 87 ++++++++++++- .../tests/LoginHelpLinks.test.jsx | 5 +- .../tests/RegistrationPage.test.jsx | 64 ++++------ .../__snapshots__/LoginPage.test.jsx.snap | 18 ++- .../RegistrationPage.test.jsx.snap | 120 ++++++++++++++++++ 10 files changed, 287 insertions(+), 75 deletions(-) diff --git a/src/logistration/LoginFailure.jsx b/src/logistration/LoginFailure.jsx index a5743991..fb3d1802 100644 --- a/src/logistration/LoginFailure.jsx +++ b/src/logistration/LoginFailure.jsx @@ -71,6 +71,7 @@ LoginFailureMessage.defaultProps = { errors: '', errorCode: null, }; + LoginFailureMessage.propTypes = { errors: PropTypes.string, errorCode: PropTypes.string, diff --git a/src/logistration/LoginHelpLinks.jsx b/src/logistration/LoginHelpLinks.jsx index 12d18e61..7b01affc 100644 --- a/src/logistration/LoginHelpLinks.jsx +++ b/src/logistration/LoginHelpLinks.jsx @@ -5,7 +5,7 @@ import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import SwitchContent from './SwitchContent'; -import { REGISTER_PAGE, RESET_PAGE } from '../data/constants'; +import { LOGIN_PAGE, REGISTER_PAGE, RESET_PAGE } from '../data/constants'; import messages from './messages'; const LoginHelpLinks = (props) => { @@ -31,7 +31,7 @@ const LoginHelpLinks = (props) => { const getHelpButtonMessage = () => { let mid = 'logistration.need.other.help.signing.in.collapsible.menu'; - if (page === 'login') { + if (page === LOGIN_PAGE) { mid = 'logistration.need.help.signing.in.collapsible.menu'; } @@ -40,7 +40,7 @@ const LoginHelpLinks = (props) => { const renderLoginHelp = () => (
- { page === 'login' ? forgotPasswordLink() : signUpLink()} + { page === LOGIN_PAGE ? forgotPasswordLink() : signUpLink()} {intl.formatMessage(messages['logistration.other.sign.in.issues'])} diff --git a/src/logistration/LoginPage.jsx b/src/logistration/LoginPage.jsx index a4e7babc..f3efd183 100644 --- a/src/logistration/LoginPage.jsx +++ b/src/logistration/LoginPage.jsx @@ -16,7 +16,9 @@ import { RedirectLogistration } from '../common-components'; import SocialAuthProviders from './SocialAuthProviders'; import ThirdPartyAuthAlert from './ThirdPartyAuthAlert'; -import { DEFAULT_REDIRECT_URL, DEFAULT_STATE, REGISTER_PAGE } from '../data/constants'; +import { + DEFAULT_REDIRECT_URL, DEFAULT_STATE, LOGIN_PAGE, REGISTER_PAGE, +} from '../data/constants'; import { forgotPasswordResultSelector } from '../forgot-password'; class LoginPage extends React.Component { @@ -146,7 +148,10 @@ class LoginPage extends React.Component { {this.props.forgotPassword.status === 'complete' ? : null}

- First time here?Create an Account. + {intl.formatMessage(messages['logistration.first.time.here'])} + + {intl.formatMessage(messages['logistration.create.an.account'])}. +

@@ -160,7 +165,7 @@ class LoginPage extends React.Component { buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])} />
-

{intl.formatMessage(messages['logistration.login.institution.login.sign.in.with'])}

+

{intl.formatMessage(messages['logistration.or.sign.in.with'])}

) : null } @@ -170,9 +175,11 @@ class LoginPage extends React.Component { - +

-

The email address you used to register with edX.

+

{intl.formatMessage(messages['logistration.email.help.message'])}

- +
- +
-

or sign in with

+

{intl.formatMessage(messages['logistration.or.sign.in.with'])}

diff --git a/src/logistration/RegistrationFailure.jsx b/src/logistration/RegistrationFailure.jsx index ff0ba71a..c346bcd2 100644 --- a/src/logistration/RegistrationFailure.jsx +++ b/src/logistration/RegistrationFailure.jsx @@ -46,6 +46,7 @@ const RegistrationFailureMessage = (props) => { RegistrationFailureMessage.defaultProps = { errors: '', }; + RegistrationFailureMessage.propTypes = { errors: PropTypes.shape({ email: PropTypes.array, diff --git a/src/logistration/RegistrationPage.jsx b/src/logistration/RegistrationPage.jsx index 7966258f..027880ac 100644 --- a/src/logistration/RegistrationPage.jsx +++ b/src/logistration/RegistrationPage.jsx @@ -103,6 +103,7 @@ class RegistrationPage extends React.Component { payload[key] = this.state[camelCase(key)]; } }); + const next = params.get('next'); const courseId = params.get('course_id'); if (next) { @@ -363,7 +364,7 @@ class RegistrationPage extends React.Component { onSubmitHandler={this.handleInstitutionLogin} secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders} headingTitle={intl.formatMessage(messages['logistration.register.institution.login.page.title'])} - buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.page.back.button'])} + buttonTitle={intl.formatMessage(messages['logistration.create.an.account'])} /> ); } @@ -410,9 +411,11 @@ class RegistrationPage extends React.Component { - + - + - + - + this.handleOnOptional(e)} required /> - + { this.state.enableOptionalField ? this.addExtraOptionalFields() : null} { let props = {}; @@ -17,7 +18,7 @@ describe('LoginHelpLinks', () => { it('renders help links on button click', () => { props = { ...props, - page: 'login', + page: LOGIN_PAGE, }; const loginHelpLinks = mount(reduxWrapper()); @@ -29,7 +30,7 @@ describe('LoginHelpLinks', () => { it('should display login page help links', () => { props = { ...props, - page: 'login', + page: LOGIN_PAGE, }; const wrapper = mount(reduxWrapper()); diff --git a/src/logistration/tests/RegistrationPage.test.jsx b/src/logistration/tests/RegistrationPage.test.jsx index f0d01f13..4dd90e6d 100644 --- a/src/logistration/tests/RegistrationPage.test.jsx +++ b/src/logistration/tests/RegistrationPage.test.jsx @@ -33,6 +33,7 @@ describe('./RegistrationPage.js', () => { errorMessages: { required: 'You must agree to the Your Platform Name Here Honor Code', }, + required: true, }], }, }, @@ -153,25 +154,12 @@ describe('./RegistrationPage.js', () => { ...initialState.logistration, formData: { fields: [ - { - label: 'I agree to the Your Platform Name Here Honor Code', - name: 'honor_code', - type: 'checkbox', - errorMessages: { - required: validationMessage.honorCode, - }, - required: true, - }, + ...initialState.logistration.formData.fields, { label: 'The country or region where you live.', name: 'country', type: 'select', - options: [{ - value: '', name: '--', - }, - { - value: 'AF', name: 'Afghanistan', - }], + options: [{ value: '', name: '--' }, { value: 'AF', name: 'Afghanistan' }], errorMessages: { required: validationMessage.country, }, @@ -193,15 +181,16 @@ describe('./RegistrationPage.js', () => { }); it('should toggle optional fields state on checkbox click', () => { - store = mockStore({ - ...initialState, - logistration: { - ...initialState.logistration, - }, - }); const registrationPage = mount(reduxWrapper()); + registrationPage.find('input#optional').simulate('change', { target: { checked: true } }); - registrationPage.update(); + expect(registrationPage.find('RegistrationPage').state('enableOptionalField')).toEqual(true); + }); + + it('should toggle optional fields state on text click', () => { + const registrationPage = mount(reduxWrapper()); + + registrationPage.find('#additionalFields').simulate('click'); expect(registrationPage.find('RegistrationPage').state('enableOptionalField')).toEqual(true); }); @@ -211,28 +200,27 @@ describe('./RegistrationPage.js', () => { logistration: { ...initialState.logistration, formData: { - fields: [{ - label: 'Tell us why you\'re interested in edX', - name: 'goals', - type: 'textarea', - required: false, - }, - { - label: 'Highest level of Education completed.', - name: 'level_of_education', - type: 'select', - options: [{ - value: '', name: '--', + fields: [ + { + label: 'Tell us why you\'re interested in edX', + name: 'goals', + type: 'textarea', + required: false, }, { - value: 'p', name: 'Doctorate', - }], - required: false, - }], + label: 'Highest level of Education completed.', + name: 'level_of_education', + type: 'select', + options: [{ value: '', name: '--' }, { value: 'p', name: 'Doctorate' }], + required: false, + }, + ], }, }, }); + const registrationPage = mount(reduxWrapper()); + registrationPage.find('input#optional').simulate('change', { target: { checked: true } }); registrationPage.update(); expect(registrationPage.find('textarea#goals').length).toEqual(1); diff --git a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap index 6f020579..a4e94338 100644 --- a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap +++ b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap @@ -21,7 +21,8 @@ exports[`LoginPage should match TPA provider snapshot 1`] = ` className="ml-1" href="/register" > - Create an Account. + Create an Account + .

@@ -225,7 +226,8 @@ exports[`LoginPage should match default section snapshot 1`] = ` className="ml-1" href="/register" > - Create an Account. + Create an Account + .

@@ -395,7 +397,8 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = ` className="ml-1" href="/register" > - Create an Account. + Create an Account + .

@@ -565,7 +568,8 @@ exports[`LoginPage should match pending button state snapshot 1`] = ` className="ml-1" href="/register" > - Create an Account. + Create an Account + .

@@ -767,7 +771,8 @@ exports[`LoginPage should show error message on 400 1`] = ` className="ml-1" href="/register" > - Create an Account. + Create an Account + .

@@ -968,7 +973,8 @@ exports[`LoginPage should show error message on 400 on receiving link 1`] = ` className="ml-1" href="/register" > - Create an Account. + Create an Account + .

diff --git a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap index bc01d9c0..e324841f 100644 --- a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap +++ b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap @@ -167,6 +167,36 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = ` This password is too short. It must contain at least 8 characters. This password must contain at least 1 number. +
+ + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
@@ -334,6 +364,36 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = ` This password is too short. It must contain at least 8 characters. This password must contain at least 1 number.
+
+ + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
@@ -501,6 +561,36 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] = This password is too short. It must contain at least 8 characters. This password must contain at least 1 number.
+
+ + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
@@ -715,6 +805,36 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = ` This password is too short. It must contain at least 8 characters. This password must contain at least 1 number.
+
+ + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +