scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge branch 'develop' into hotfix/hoc-2-tutorials-2019

Browse source
This commit is contained in:
Eric Rosenbaum 2019-10-23 15:47:57 -04:00 committed by GitHub
commit cb601d245b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 1252 additions and 643 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1123
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -89,7 +89,7 @@
"formsy-react-components": "1.0.0",
"git-bundle-sha": "0.0.2",
"glob": "5.0.15",
"google-libphonenumber": "3.2.3",
"google-libphonenumber": "3.2.5",
"html-webpack-plugin": "2.22.0",
"iso-3166-2": "0.4.0",
"jest": "^23.6.0",
@ -115,7 +115,7 @@
"react": "16.2.0",
"react-dom": "16.2.0",
"react-intl": "2.8.0",
"react-modal": "3.8.2",
"react-modal": "3.10.1",
"react-onclickoutside": "6.7.1",
"react-redux": "5.0.7",
"react-responsive": "3.0.0",

4
src/_colors.scss
View file

@ -28,8 +28,9 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
$ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
$ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
$ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Control Primary
$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Events Primary
$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Blocks Primary
$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary
@ -63,3 +64,4 @@ $link-blue: $ui-blue;
/* Down Deep */
$dd-darkblue: hsla(195, 72.4, 17.1, 1);
$dd-medium-blue: hsla(195, 72.4, 42, .65);

7
src/components/errorboundary/errorboundary.jsx
View file

@ -17,6 +17,10 @@ class ErrorBoundary extends React.Component {
componentDidCatch (error, errorInfo) {
// Display fallback UI
Sentry.withScope(scope => {
scope.setTag('project', 'scratch-www');
if (this.props.componentName) {
scope.setTag('component', this.props.componentName);
}
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
@ -46,7 +50,8 @@ class ErrorBoundary extends React.Component {
}
}
ErrorBoundary.propTypes = {
children: PropTypes.node
children: PropTypes.node,
componentName: PropTypes.string
};
module.exports = ErrorBoundary;

4
src/components/formik-forms/formik-radio-button.jsx
View file

@ -89,8 +89,12 @@ const FormikRadioButton = ({
>
{isCustomInput && (
<FormikInput
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="formik-radio-input"
name="custom"
spellCheck={false}
wrapperClassName="formik-radio-input-wrapper"
/* eslint-disable react/jsx-no-bind */
onChange={event => onSetCustom(event.target.value)}

3
src/components/formik-forms/formik-radio-button.scss
View file

@ -39,7 +39,7 @@ input[type="radio"].formik-radio-button {
input.formik-radio-input, .formik-radio-input input {
height: 2.1875rem;
width: 10.25rem;
width: 100%;
margin-bottom: 0;
border-radius: .5rem;
background-color: $ui-white;
@ -52,6 +52,7 @@ input.formik-radio-input, .formik-radio-input input {
.formik-radio-input-wrapper {
margin-left: auto;
margin-right: .25rem;
width: 10.25rem;
}
.formik-radio-label-other {

12
src/components/intro/intro.jsx
View file

@ -44,12 +44,12 @@ class Intro extends React.Component {
<a
className="intro-button join-button button"
href="#"
onClick={this.props.handleOpenRegistration}
onClick={this.props.handleClickRegistration}
>
{this.props.messages['intro.join']}
</a>
</FlexRow>
</FlexRow>
<FlexRow className="intro-video-container">
{this.state.videoOpen ?
@ -77,7 +77,7 @@ class Intro extends React.Component {
}
</FlexRow>
</FlexRow>
<FlexRow className="intro-subnav">
<a
href="/about"
@ -107,7 +107,7 @@ class Intro extends React.Component {
}
Intro.propTypes = {
handleOpenRegistration: PropTypes.func,
handleClickRegistration: PropTypes.func,
messages: PropTypes.shape({
'intro.aboutScratch': PropTypes.string,
'intro.forEducators': PropTypes.string,
@ -139,9 +139,9 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
handleOpenRegistration: event => {
handleClickRegistration: event => {
event.preventDefault();
dispatch(navigationActions.setRegistrationOpen(true));
dispatch(navigationActions.handleRegistrationRequested());
}
});

1
src/components/join-flow/birthdate-step.jsx
View file

@ -90,6 +90,7 @@ class BirthDateStep extends React.Component {
} = props;
return (
<JoinFlowStep
headerImgClass="birthdate-step-image"
headerImgSrc="/images/join-flow/birthdate-header.png"
innerClassName="join-flow-inner-birthdate-step"
title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}

1
src/components/join-flow/country-step.jsx
View file

@ -69,6 +69,7 @@ class CountryStep extends React.Component {
} = props;
return (
<JoinFlowStep
headerImgClass="country-step-image"
headerImgSrc="/images/join-flow/country-header.png"
innerClassName="join-flow-inner-country-step"
title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})}

31
src/components/join-flow/email-step.jsx
View file

@ -21,6 +21,7 @@ class EmailStep extends React.Component {
'handleSetEmailRef',
'handleValidSubmit',
'validateEmail',
'validateEmailRemotelyWithCache',
'validateForm',
'setCaptchaRef',
'captchaSolved',
@ -30,14 +31,18 @@ class EmailStep extends React.Component {
this.state = {
captchaIsLoading: true
};
// simple object to memoize remote requests for email addresses.
// keeps us from submitting multiple requests for same data.
this.emailRemoteCache = {};
}
componentDidMount () {
// automatically start with focus on username field
if (this.emailInput) this.emailInput.focus();
// If grecaptcha doesn't exist on window, we havent loaded the captcha js yet. Load it.
if (!window.grecaptcha) {
if (window.grecaptcha) {
this.onCaptchaLoad();
} else {
// If grecaptcha doesn't exist on window, we havent loaded the captcha js yet. Load it.
// ReCaptcha calls a callback when the grecatpcha object is usable. That callback
// needs to be global so set it on the window.
window.grecaptchaOnLoad = this.onCaptchaLoad;
@ -78,11 +83,24 @@ class EmailStep extends React.Component {
},
true);
}
// simple function to memoize remote requests for usernames
validateEmailRemotelyWithCache (email) {
if (this.emailRemoteCache.hasOwnProperty(email)) {
return Promise.resolve(this.emailRemoteCache[email]);
}
// email is not in our cache
return validate.validateEmailRemotely(email).then(
remoteResult => {
this.emailRemoteCache[email] = remoteResult;
return remoteResult;
}
);
}
validateEmail (email) {
if (!email) return this.props.intl.formatMessage({id: 'general.required'});
const localResult = validate.validateEmailLocally(email);
if (!localResult.valid) return this.props.intl.formatMessage({id: localResult.errMsgId});
return validate.validateEmailRemotely(email).then(
return this.validateEmailRemotelyWithCache(email).then(
remoteResult => {
if (remoteResult.valid === true) {
return null;
@ -151,6 +169,7 @@ class EmailStep extends React.Component {
}}
/>
)}
headerImgClass="email-step-image"
headerImgSrc="/images/join-flow/email-header.png"
innerClassName="join-flow-inner-email-step"
nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
@ -160,6 +179,9 @@ class EmailStep extends React.Component {
onSubmit={handleSubmit}
>
<FormikInput
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className={classNames(
'join-flow-input',
'join-flow-input-tall',
@ -169,6 +191,7 @@ class EmailStep extends React.Component {
id="email"
name="email"
placeholder={this.props.intl.formatMessage({id: 'general.emailAddress'})}
type="email"
validate={this.validateEmail}
validationClassName="validation-full-width-input"
/* eslint-disable react/jsx-no-bind */

14
src/components/join-flow/join-flow-step.jsx
View file

@ -14,6 +14,7 @@ const JoinFlowStep = ({
description,
descriptionClassName,
footerContent,
headerImgClass,
headerImgSrc,
nextButton,
onSubmit,
@ -21,10 +22,18 @@ const JoinFlowStep = ({
titleClassName,
waiting
}) => (
<form onSubmit={onSubmit}>
<form
autoComplete="off"
onSubmit={onSubmit}
>
<div className="join-flow-outer-content">
{headerImgSrc && (
<div className="join-flow-header-image-wrapper">
<div
className={classNames(
'join-flow-header-image-wrapper',
headerImgClass
)}
>
<img
className="join-flow-header-image"
src={headerImgSrc}
@ -80,6 +89,7 @@ JoinFlowStep.propTypes = {
description: PropTypes.string,
descriptionClassName: PropTypes.string,
footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
headerImgClass: PropTypes.string,
headerImgSrc: PropTypes.string,
innerClassName: PropTypes.string,
nextButton: PropTypes.node,

5
src/components/join-flow/join-flow-step.scss
View file

@ -12,7 +12,7 @@
.join-flow-inner-content {
box-shadow: none;
width: calc(100% - 5.875rem);
width: calc(50% + 7.84375rem);
/* must use padding for top, rather than margin, because margins will collapse */
margin: 0 auto;
padding: 2.3125rem 0 2.5rem;
@ -36,8 +36,7 @@
/* overflow will only work if this class is set on parent of img, not img itself */
.join-flow-header-image-wrapper {
width: 100%;
min-height: 7.5rem;
max-height: 8.75rem;
height: 7.5rem;
overflow: hidden;
margin: 0;
border-top-left-radius: 1rem;

27
src/components/join-flow/join-flow-steps.scss
View file

@ -89,10 +89,18 @@
.select .join-flow-select-month {
margin-right: .5rem;
width: 9.125rem;
@media #{$small} {
width: 8.25rem;
}
}
.select .join-flow-select-year {
width: 9.125rem;
@media #{$small} {
width: 8.25rem;
}
}
.select .join-flow-select-country {
@ -100,6 +108,10 @@
margin: 0 auto;
}
.country-step-image {
background-color: $ui-purple;
}
.join-flow-password-section {
margin-top: 1.125rem;
}
@ -109,6 +121,10 @@
margin: 0 auto;
}
.birthdate-step-image {
background-color: $ui-magenta;
}
.join-flow-privacy-message {
margin: 1rem auto;
font-size: .75rem;
@ -157,7 +173,12 @@
margin-top: 0;
}
.email-step-image {
background-color: $dd-medium-blue;
}
.join-flow-registration-error {
user-select: text; /* make text selectable, so users can copy errors */
padding-top: 5.5rem;
}
@ -183,9 +204,13 @@
margin-bottom: 1.25rem;
}
.welcome-step-image {
background-color: $ui-yellow;
}
.gender-radio-row {
transition: all .125s ease;
width: 20.875rem;
width: 97%;
min-height: 2.85rem;
background-color: $ui-gray;
border-radius: .5rem;

34
src/components/join-flow/join-flow.jsx
View file

@ -23,17 +23,26 @@ class JoinFlow extends React.Component {
super(props);
bindAll(this, [
'handleAdvanceStep',
'handleErrorNext',
'handleRegistrationError',
'handlePrepareToRegister',
'handleRegistrationResponse',
'handleSubmitRegistration'
]);
this.state = {
this.initialState = {
numAttempts: 0,
formData: {},
registrationError: null,
step: 0,
waiting: false
};
// it's ok to set state by reference, because state is treated as immutable,
// so any changes to its fields will result in a new state which does not
// reference its past fields
this.state = this.initialState;
}
canTryAgain () {
return (this.state.numAttempts <= 1);
}
handleRegistrationError (message) {
if (!message) {
@ -64,7 +73,11 @@ class JoinFlow extends React.Component {
// "success": false
// }
// ]
this.setState({waiting: false}, () => {
// username: 'username exists'
this.setState({
numAttempts: this.state.numAttempts + 1,
waiting: false
}, () => {
let errStr = '';
if (!err && res.statusCode === 200) {
if (body && body[0]) {
@ -100,7 +113,9 @@ class JoinFlow extends React.Component {
});
}
handleSubmitRegistration (formData) {
this.setState({waiting: true}, () => {
this.setState({
waiting: true
}, () => {
api({
host: '',
uri: '/accounts/register_new_user/',
@ -133,14 +148,25 @@ class JoinFlow extends React.Component {
step: this.state.step + 1
});
}
handleErrorNext () {
if (this.canTryAgain()) {
this.handleSubmitRegistration(this.state.formData);
} else {
this.resetState();
}
}
resetState () {
this.setState(this.initialState);
}
render () {
return (
<React.Fragment>
{this.state.registrationError ? (
<RegistrationErrorStep
canTryAgain={this.canTryAgain()}
errorMsg={this.state.registrationError}
/* eslint-disable react/jsx-no-bind */
onTryAgain={() => this.handleSubmitRegistration(this.state.formData)}
onSubmit={this.handleErrorNext}
/* eslint-enable react/jsx-no-bind */
/>
) : (

10
src/components/join-flow/registration-error-step.jsx
View file

@ -19,14 +19,17 @@ class RegistrationErrorStep extends React.Component {
// But here, we're not really submitting, so we need to prevent
// the form from navigating away from the current page.
e.preventDefault();
this.props.onTryAgain();
this.props.onSubmit();
}
render () {
return (
<JoinFlowStep
description={this.props.errorMsg}
innerClassName="join-flow-registration-error"
nextButton={this.props.intl.formatMessage({id: 'general.tryAgain'})}
nextButton={this.props.canTryAgain ?
this.props.intl.formatMessage({id: 'general.tryAgain'}) :
this.props.intl.formatMessage({id: 'general.startOver'})
}
title={this.props.intl.formatMessage({id: 'registration.generalError'})}
onSubmit={this.handleSubmit}
/>
@ -35,9 +38,10 @@ class RegistrationErrorStep extends React.Component {
}
RegistrationErrorStep.propTypes = {
canTryAgain: PropTypes.bool,
errorMsg: PropTypes.string,
intl: intlShape,
onTryAgain: PropTypes.func
onSubmit: PropTypes.func
};
const IntlRegistrationErrorStep = injectIntl(RegistrationErrorStep);

31
src/components/join-flow/username-step.jsx
View file

@ -26,11 +26,15 @@ class UsernameStep extends React.Component {
'validatePasswordIfPresent',
'validatePasswordConfirmIfPresent',
'validateUsernameIfPresent',
'validateUsernameRemotelyWithCache',
'validateForm'
]);
this.state = {
focused: null
};
// simple object to memoize remote requests for usernames.
// keeps us from submitting multiple requests for same data.
this.usernameRemoteCache = {};
}
componentDidMount () {
// automatically start with focus on username field
@ -44,12 +48,25 @@ class UsernameStep extends React.Component {
handleSetUsernameRef (usernameInputRef) {
this.usernameInput = usernameInputRef;
}
// simple function to memoize remote requests for usernames
validateUsernameRemotelyWithCache (username) {
if (this.usernameRemoteCache.hasOwnProperty(username)) {
return Promise.resolve(this.usernameRemoteCache[username]);
}
// username is not in our cache
return validate.validateUsernameRemotely(username).then(
remoteResult => {
this.usernameRemoteCache[username] = remoteResult;
return remoteResult;
}
);
}
// we allow username to be empty on blur, since you might not have typed anything yet
validateUsernameIfPresent (username) {
if (!username) return null; // skip validation if username is blank; null indicates valid
// if username is not blank, run both local and remote validations
const localResult = validate.validateUsernameLocally(username);
return validate.validateUsernameRemotely(username).then(
return this.validateUsernameRemotelyWithCache(username).then(
remoteResult => {
// there may be multiple validation errors. Prioritize vulgarity, then
// length, then having invalid chars, then all other remote reports
@ -143,6 +160,9 @@ class UsernameStep extends React.Component {
{this.props.intl.formatMessage({id: 'registration.createUsername'})}
</div>
<FormikInput
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className={classNames(
'join-flow-input'
)}
@ -150,6 +170,7 @@ class UsernameStep extends React.Component {
id="username"
name="username"
placeholder={this.props.intl.formatMessage({id: 'general.username'})}
spellCheck={false}
toolTip={this.state.focused === 'username' && !touched.username &&
this.props.intl.formatMessage({id: 'registration.usernameAdviceShort'})}
validate={this.validateUsernameIfPresent}
@ -170,6 +191,9 @@ class UsernameStep extends React.Component {
{this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
</div>
<FormikInput
autoCapitalize="off"
autoComplete={values.showPassword ? 'off' : 'new-password'}
autoCorrect="off"
className={classNames(
'join-flow-input',
{'join-flow-input-password':
@ -179,6 +203,7 @@ class UsernameStep extends React.Component {
id="password"
name="password"
placeholder={this.props.intl.formatMessage({id: 'general.password'})}
spellCheck={false}
toolTip={this.state.focused === 'password' && !touched.password &&
this.props.intl.formatMessage({id: 'registration.passwordAdviceShort'})}
type={values.showPassword ? 'text' : 'password'}
@ -195,6 +220,9 @@ class UsernameStep extends React.Component {
/* eslint-enable react/jsx-no-bind */
/>
<FormikInput
autoCapitalize="off"
autoComplete={values.showPassword ? 'off' : 'new-password'}
autoCorrect="off"
className={classNames(
'join-flow-input',
'join-flow-password-confirm',
@ -210,6 +238,7 @@ class UsernameStep extends React.Component {
placeholder={this.props.intl.formatMessage({
id: 'registration.confirmPasswordInstruction'
})}
spellCheck={false}
toolTip={
this.state.focused === 'passwordConfirm' && !touched.passwordConfirm &&
this.props.intl.formatMessage({

1
src/components/join-flow/welcome-step.jsx
View file

@ -43,6 +43,7 @@ class WelcomeStep extends React.Component {
id: 'registration.welcomeStepDescriptionNonEducator'
})}
descriptionClassName="join-flow-welcome-description"
headerImgClass="welcome-step-image"
headerImgSrc="/images/join-flow/welcome-header.png"
innerClassName="join-flow-inner-welcome-step"
nextButton={this.props.createProjectOnComplete ? (

21
src/components/navigation/www/navigation.jsx
View file

@ -27,7 +27,6 @@ class Navigation extends React.Component {
super(props);
bindAll(this, [
'getProfileUrl',
'handleClickRegistration',
'handleSearchSubmit'
]);
this.state = {
@ -78,13 +77,6 @@ class Navigation extends React.Component {
if (!this.props.user) return;
return `/users/${this.props.user.username}/`;
}
handleClickRegistration (event) {
if (this.props.useScratch3Registration) {
this.props.navigateToRegistration(event);
} else {
this.props.handleOpenRegistration(event);
}
}
handleSearchSubmit (formData) {
let targetUrl = '/search/projects';
if (formData.q) {
@ -201,7 +193,7 @@ class Navigation extends React.Component {
<a
className="registrationLink"
href="#"
onClick={this.handleClickRegistration}
onClick={this.props.handleClickRegistration}
>
<FormattedMessage id="general.joinScratch" />
</a>
@ -239,13 +231,12 @@ class Navigation extends React.Component {
Navigation.propTypes = {
accountNavOpen: PropTypes.bool,
getMessageCount: PropTypes.func,
handleClickRegistration: PropTypes.func,
handleCloseAccountNav: PropTypes.func,
handleLogOut: PropTypes.func,
handleOpenRegistration: PropTypes.func,
handleToggleAccountNav: PropTypes.func,
handleToggleLoginOpen: PropTypes.func,
intl: intlShape,
navigateToRegistration: PropTypes.func,
permissions: PropTypes.shape({
admin: PropTypes.bool,
social: PropTypes.bool,
@ -296,9 +287,9 @@ const mapDispatchToProps = dispatch => ({
handleCloseAccountNav: () => {
dispatch(navigationActions.setAccountNavOpen(false));
},
handleOpenRegistration: event => {
handleClickRegistration: event => {
event.preventDefault();
dispatch(navigationActions.setRegistrationOpen(true));
dispatch(navigationActions.handleRegistrationRequested());
},
handleLogOut: event => {
event.preventDefault();
@ -308,10 +299,6 @@ const mapDispatchToProps = dispatch => ({
event.preventDefault();
dispatch(navigationActions.toggleLoginOpen());
},
navigateToRegistration: event => {
event.preventDefault();
navigationActions.navigateToRegistration();
},
setMessageCount: newCount => {
dispatch(messageCountActions.setCount(newCount));
}

2
src/components/page/www/page.jsx
View file

@ -10,7 +10,7 @@ const Page = ({
children,
className
}) => (
<ErrorBoundary>
<ErrorBoundary componentName="Page">
<div className={classNames('page', className)}>
<div
className={classNames({

3
src/l10n.json
View file

@ -82,6 +82,7 @@
"general.search": "Search",
"general.searchEmpty": "Nothing found",
"general.signIn": "Sign in",
"general.startOver": "Start over",
"general.statistics": "Statistics",
"general.studios": "Studios",
"general.support": "Support",
@ -182,7 +183,7 @@
"registration.invitedBy": "invited by",
"registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
"registration.lastStepDescription": "We are currently processing your application. ",
"registration.makeProject": "Make a Project",
"registration.makeProject": "Make a project",
"registration.mustBeNewStudent": "You must be a new student to complete your registration",
"registration.nameStepTooltip": "This information is used for verification and to aggregate usage statistics.",
"registration.newPassword": "New Password",

22
src/lib/country-data.js
View file

@ -1060,23 +1060,25 @@ const dupeCommonCountries = module.exports.dupeCommonCountries = (startingCountr
/*
* registrationCountryOptions is the result of taking the standard countryInfo,
* and duplicating 'United States of America' and 'United Kingdom' at the top of the list.
* setting a 'value' key and a 'label' key both to the country data's 'name' value,
* but using the 'display' value for 'label' instead of 'name' if 'display' exists;
* then duplicating 'United States of America' and 'United Kingdom' at the top of the list.
* The result is an array like:
* [
* {code: 'us', name: 'United States', display: 'United States of America'},
* {code: 'gb', name: 'United Kingdom'},
* {code: 'af', name: 'Afghanistan'},
* {value: 'United States', label: 'United States of America'},
* {value: 'United Kingdom', label: 'United Kingdom'},
* {value: 'Afghanistan', label: 'Afghanistan'},
* ...
* {code: 'ae', name: 'United Arab Emirates'},
* {code: 'us', name: 'United States', display: 'United States of America'},
* {code: 'gb', name: 'United Kingdom'},
* {code: 'uz', name: 'Uzbekistan'},
* {value: 'United Arab Emirates', label: 'United Arab Emirates'},
* {value: 'United States', label: 'United States of America'},
* {value: 'United Kingdom', label: 'United Kingdom'},
* {value: 'Uzbekistan', label: 'Uzbekistan'},
* ...
* {code: 'zm', name: 'Zimbabwe'}
* {value: 'Zimbabwe', label: 'Zimbabwe'}
* ]
*/
module.exports.registrationCountryOptions =
countryOptions(dupeCommonCountries(countryInfo, ['us', 'gb']), 'code');
countryOptions(dupeCommonCountries(countryInfo, ['us', 'gb']), 'name');
/* subdivisionOptions uses iso-3166 data to produce an array like:
* [

15
src/redux/navigation.js
View file

@ -14,7 +14,8 @@ const Types = keyMirror({
SET_LOGIN_OPEN: null,
TOGGLE_LOGIN_OPEN: null,
SET_CANCELED_DELETION_OPEN: null,
SET_REGISTRATION_OPEN: null
SET_REGISTRATION_OPEN: null,
HANDLE_REGISTRATION_REQUESTED: null
});
module.exports.getInitialState = () => ({
@ -49,6 +50,12 @@ module.exports.navigationReducer = (state, action) => {
return defaults({canceledDeletionOpen: action.isOpen}, state);
case Types.SET_REGISTRATION_OPEN:
return defaults({registrationOpen: action.isOpen}, state);
case Types.HANDLE_REGISTRATION_REQUESTED:
if (state.useScratch3Registration) {
window.location.assign('/join');
return state;
}
return defaults({registrationOpen: true}, state);
default:
return state;
}
@ -92,9 +99,9 @@ module.exports.setSearchTerm = searchTerm => ({
searchTerm: searchTerm
});
module.exports.navigateToRegistration = () => {
window.location = '/join';
};
module.exports.handleRegistrationRequested = () => ({
type: Types.HANDLE_REGISTRATION_REQUESTED
});
module.exports.handleCompleteRegistration = createProject => (dispatch => {
if (createProject) {

8
src/routes.json
View file

@ -512,7 +512,13 @@
},
{
"name": "fly-tutorial-redirect",
"pattern": "^/(makeit)?fly/?$",
"pattern": "^/fly/?$",
"routeAlias": "/(makeit)?fly/?$",
"redirect": "/projects/editor/?tutorial=make-it-fly"
},
{
"name": "makeitfly-tutorial-redirect",
"pattern": "^/makeitfly/?$",
"routeAlias": "/(makeit)?fly/?$",
"redirect": "/projects/editor/?tutorial=make-it-fly"
},

5
src/views/join/join.jsx
View file

@ -5,9 +5,12 @@ const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx'
// Require this even though we don't use it because, without it, webpack runs out of memory...
const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
const initSentry = require('../../lib/sentry.js');
initSentry();
require('./join.scss');
const Register = () => (
<ErrorBoundary>
<ErrorBoundary componentName="Join">
<div className="join">
<a
aria-label="Scratch"

9
src/views/preview/embed-view.jsx
View file

@ -5,7 +5,6 @@ const PropTypes = require('prop-types');
const connect = require('react-redux').connect;
const injectIntl = require('react-intl').injectIntl;
const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
const projectShape = require('./projectshape.jsx').projectShape;
const NotAvailable = require('../../components/not-available/not-available.jsx');
const Meta = require('./meta.jsx');
@ -35,11 +34,9 @@ class EmbedView extends React.Component {
render () {
if (this.props.projectNotAvailable || this.state.invalidProject) {
return (
<ErrorBoundary>
<div className="preview">
<NotAvailable />
</div>
</ErrorBoundary>
<div className="preview">
<NotAvailable />
</div>
);
}

9
src/views/preview/embed.jsx
View file

@ -13,7 +13,9 @@ const UnsupportedBrowser = require('./unsupported-browser.jsx');
if (isSupportedBrowser()) {
const EmbedView = require('./embed-view.jsx');
render(
<EmbedView.View />,
<ErrorBoundary componentName="EmbedView">
<EmbedView.View />
</ErrorBoundary>,
document.getElementById('app'),
{
preview: previewActions.previewReducer,
@ -26,5 +28,8 @@ if (isSupportedBrowser()) {
EmbedView.guiMiddleware
);
} else {
render(<ErrorBoundary><UnsupportedBrowser /></ErrorBoundary>, document.getElementById('app'));
render(
<ErrorBoundary componentName="UnsupportedBrowser"><UnsupportedBrowser /></ErrorBoundary>,
document.getElementById('app')
);
}

83
test/unit/components/email-step.test.jsx
View file

@ -1,11 +1,30 @@
const React = require('react');
const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
const EmailStep = require('../../../src/components/join-flow/email-step.jsx');
const JoinFlowStep = require('../../../src/components/join-flow/join-flow-step.jsx');
const FormikInput = require('../../../src/components/formik-forms/formik-input.jsx');
const FormikCheckbox = require('../../../src/components/formik-forms/formik-checkbox.jsx');
const mockedValidateEmailRemotely = jest.fn(() => (
/* eslint-disable no-undef */
Promise.resolve({valid: false, errMsgId: 'registration.validationEmailInvalid'})
/* eslint-enable no-undef */
));
jest.mock('../../../src/lib/validate.js', () => (
{
...(jest.requireActual('../../../src/lib/validate.js')),
validateEmailRemotely: mockedValidateEmailRemotely
}
));
// must come after validation mocks, so validate.js will be mocked before it is required
const EmailStep = require('../../../src/components/join-flow/email-step.jsx');
describe('EmailStep test', () => {
afterEach(() => {
jest.clearAllMocks();
});
test('send correct props to formik', () => {
const wrapper = shallowWithIntl(<EmailStep />);
@ -174,4 +193,66 @@ describe('EmailStep test', () => {
const val = formikWrapper.instance().validateEmail();
expect(val).toBe('general.required');
});
test('validateEmailRemotelyWithCache calls validate.validateEmailRemotely', done => {
const wrapper = shallowWithIntl(
<EmailStep />);
const instance = wrapper.dive().instance();
instance.validateEmailRemotelyWithCache('some-email@some-domain.com')
.then(response => {
expect(mockedValidateEmailRemotely).toHaveBeenCalled();
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationEmailInvalid');
done();
});
});
test('validateEmailRemotelyWithCache, called twice with different data, makes two remote requests', done => {
const wrapper = shallowWithIntl(
<EmailStep />
);
const instance = wrapper.dive().instance();
instance.validateEmailRemotelyWithCache('some-email@some-domain.com')
.then(response => {
expect(mockedValidateEmailRemotely).toHaveBeenCalledTimes(1);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationEmailInvalid');
})
.then(() => {
// make the same request a second time
instance.validateEmailRemotelyWithCache('different-email@some-domain.org')
.then(response => {
expect(mockedValidateEmailRemotely).toHaveBeenCalledTimes(2);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationEmailInvalid');
done();
});
});
});
test('validateEmailRemotelyWithCache, called twice with same data, only makes one remote request', done => {
const wrapper = shallowWithIntl(
<EmailStep />
);
const instance = wrapper.dive().instance();
instance.validateEmailRemotelyWithCache('some-email@some-domain.com')
.then(response => {
expect(mockedValidateEmailRemotely).toHaveBeenCalledTimes(1);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationEmailInvalid');
})
.then(() => {
// make the same request a second time
instance.validateEmailRemotelyWithCache('some-email@some-domain.com')
.then(response => {
expect(mockedValidateEmailRemotely).toHaveBeenCalledTimes(1);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationEmailInvalid');
done();
});
});
});
});

76
test/unit/components/errorboundary.test.jsx Normal file
View file

@ -0,0 +1,76 @@
import React from 'react';
const {mountWithIntl} = require('../../helpers/intl-helpers.jsx');
jest.mock('@sentry/browser', () => {
const setExtra = jest.fn();
const setTag = jest.fn();
const makeScope = (setExtraParam, setTagParam) => {
const thisScope = {
setExtra: setExtraParam,
setTag: setTagParam
};
return thisScope;
};
const Sentry = {
captureException: jest.fn(),
lastEventId: function () {
return 0;
},
setExtra: setExtra,
setTag: setTag,
withScope: jest.fn(cb => {
cb(makeScope(setExtra, setTag));
})
};
return Sentry;
});
const Sentry = require('@sentry/browser');
import ErrorBoundary from '../../../src/components/errorboundary/errorboundary.jsx';
describe('ErrorBoundary', () => {
let errorBoundaryWrapper;
const ChildClass = () => (
<div>
Children here
</div>
);
beforeEach(() => {
errorBoundaryWrapper = mountWithIntl(
<ErrorBoundary
componentName="TestEBName"
>
<ChildClass id="childClass" />
</ErrorBoundary>
);
});
test('calling ErrorBoundary\'s componentDidCatch() calls Sentry.withScope()', () => {
const errorBoundaryInstance = errorBoundaryWrapper.instance();
errorBoundaryInstance.componentDidCatch('error', {});
expect(Sentry.withScope).toHaveBeenCalled();
});
test('calling ErrorBoundary\'s componentDidCatch() calls Sentry.captureException()', () => {
const errorBoundaryInstance = errorBoundaryWrapper.instance();
errorBoundaryInstance.componentDidCatch('error', {});
expect(Sentry.captureException).toHaveBeenCalledWith('error');
});
test('throwing error under ErrorBoundary calls Sentry.withScope()', () => {
const child = errorBoundaryWrapper.find('#childClass');
expect(child.exists()).toEqual(true);
child.simulateError({}, {});
expect(Sentry.withScope).toHaveBeenCalled();
});
test('ErrorBoundary with name prop causes Sentry to setTag with that name', () => {
const child = errorBoundaryWrapper.find('#childClass');
expect(child.exists()).toEqual(true);
child.simulateError({});
expect(Sentry.setTag).toHaveBeenCalledWith('component', 'TestEBName');
});
});

69
test/unit/components/join-flow.test.jsx
View file

@ -1,5 +1,6 @@
import React from 'react';
const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
const defaults = require('lodash.defaultsdeep');
import configureStore from 'redux-mock-store';
import JoinFlow from '../../../src/components/join-flow/join-flow';
import Progression from '../../../src/components/progression/progression.jsx';
@ -126,6 +127,7 @@ describe('JoinFlow', () => {
expect(joinFlowInstance.props.refreshSession).not.toHaveBeenCalled();
expect(joinFlowInstance.state.registrationError).toBe('registration.generalError (400)');
});
test('handleRegistrationError with no message ', () => {
const joinFlowInstance = getJoinFlowWrapper().instance();
joinFlowInstance.setState({});
@ -175,4 +177,71 @@ describe('JoinFlow', () => {
expect(registrationErrorWrapper).toHaveLength(0);
expect(progressionWrapper).toHaveLength(1);
});
test('when numAttempts is 0, RegistrationErrorStep receives canTryAgain prop with value true', () => {
const joinFlowWrapper = getJoinFlowWrapper();
joinFlowWrapper.instance().setState({
numAttempts: 0,
registrationError: 'halp there is a errors!!'
});
const registrationErrorWrapper = joinFlowWrapper.find(RegistrationErrorStep);
expect(registrationErrorWrapper.first().props().canTryAgain).toEqual(true);
});
test('when numAttempts is 1, RegistrationErrorStep receives canTryAgain prop with value true', () => {
const joinFlowWrapper = getJoinFlowWrapper();
joinFlowWrapper.instance().setState({
numAttempts: 1,
registrationError: 'halp there is a errors!!'
});
const registrationErrorWrapper = joinFlowWrapper.find(RegistrationErrorStep);
expect(registrationErrorWrapper.first().props().canTryAgain).toEqual(true);
});
test('when numAttempts is 2, RegistrationErrorStep receives canTryAgain prop with value false', () => {
const joinFlowWrapper = getJoinFlowWrapper();
joinFlowWrapper.instance().setState({
numAttempts: 2,
registrationError: 'halp there is a errors!!'
});
const registrationErrorWrapper = joinFlowWrapper.find(RegistrationErrorStep);
expect(registrationErrorWrapper.first().props().canTryAgain).toEqual(false);
});
test('resetState resets entire state, does not leave any state keys out', () => {
const joinFlowWrapper = getJoinFlowWrapper();
const joinFlowInstance = joinFlowWrapper.instance();
Object.keys(joinFlowInstance.state).forEach(key => {
joinFlowInstance.setState({[key]: 'Different than the initial value'});
});
joinFlowInstance.resetState();
Object.keys(joinFlowInstance.state).forEach(key => {
expect(joinFlowInstance.state[key]).not.toEqual('Different than the initial value');
});
});
test('resetState makes each state field match initial state', () => {
const joinFlowWrapper = getJoinFlowWrapper();
const joinFlowInstance = joinFlowWrapper.instance();
const stateSnapshot = {};
Object.keys(joinFlowInstance.state).forEach(key => {
stateSnapshot[key] = joinFlowInstance.state[key];
});
joinFlowInstance.resetState();
Object.keys(joinFlowInstance.state).forEach(key => {
expect(stateSnapshot[key]).toEqual(joinFlowInstance.state[key]);
});
});
test('calling resetState results in state.formData which is not same reference as before', () => {
const joinFlowWrapper = getJoinFlowWrapper();
const joinFlowInstance = joinFlowWrapper.instance();
joinFlowInstance.setState({
formData: defaults({}, {username: 'abcdef'})
});
const formDataReference = joinFlowInstance.state.formData;
joinFlowInstance.resetState();
expect(formDataReference).not.toBe(joinFlowInstance.state.formData);
expect(formDataReference).not.toEqual(joinFlowInstance.state.formData);
});
});

52
test/unit/components/navigation.test.jsx
View file

@ -2,6 +2,7 @@ const React = require('react');
const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
import configureStore from 'redux-mock-store';
const Navigation = require('../../../src/components/navigation/www/navigation.jsx');
const Registration = require('../../../src/components/registration/registration.jsx');
const sessionActions = require('../../../src/redux/session.js');
describe('Navigation', () => {
@ -24,7 +25,41 @@ describe('Navigation', () => {
.dive(); // unwrap injectIntl(JoinFlow)
};
test('when using old join flow, clicking Join Scratch attemps to open registration', () => {
test('when using old join flow, when registrationOpen is true, iframe shows', () => {
store = mockStore({
navigation: {
registrationOpen: true,
useScratch3Registration: false
},
session: {
status: sessionActions.Status.FETCHED
},
messageCount: {
messageCount: 0
}
});
const navWrapper = getNavigationWrapper();
expect(navWrapper.contains(<Registration />)).toEqual(true);
});
test('when using new join flow, when registrationOpen is true, iframe does not show', () => {
store = mockStore({
navigation: {
registrationOpen: true,
useScratch3Registration: true
},
session: {
status: sessionActions.Status.FETCHED
},
messageCount: {
messageCount: 0
}
});
const navWrapper = getNavigationWrapper();
expect(navWrapper.contains(<Registration />)).toEqual(false);
});
test('when using old join flow, clicking Join Scratch calls handleRegistrationRequested', () => {
store = mockStore({
navigation: {
useScratch3Registration: false
@ -37,16 +72,17 @@ describe('Navigation', () => {
}
});
const props = {
handleOpenRegistration: jest.fn()
handleClickRegistration: jest.fn()
};
const navWrapper = getNavigationWrapper(props);
const navInstance = navWrapper.instance();
navWrapper.find('a.registrationLink').simulate('click');
expect(navInstance.props.handleOpenRegistration).toHaveBeenCalled();
// simulate click, with mocked event
navWrapper.find('a.registrationLink').simulate('click', {preventDefault () {}});
expect(navInstance.props.handleClickRegistration).toHaveBeenCalled();
});
test('when using new join flow, clicking Join Scratch attemps to navigate to registration', () => {
test('when using new join flow, clicking Join Scratch calls handleRegistrationRequested', () => {
store = mockStore({
navigation: {
useScratch3Registration: true
@ -59,12 +95,12 @@ describe('Navigation', () => {
}
});
const props = {
navigateToRegistration: jest.fn()
handleClickRegistration: jest.fn()
};
const navWrapper = getNavigationWrapper(props);
const navInstance = navWrapper.instance();
navWrapper.find('a.registrationLink').simulate('click');
expect(navInstance.props.navigateToRegistration).toHaveBeenCalled();
navWrapper.find('a.registrationLink').simulate('click', {preventDefault () {}});
expect(navInstance.props.handleClickRegistration).toHaveBeenCalled();
});
});

42
test/unit/components/registration-error-step.test.jsx
View file

@ -4,30 +4,46 @@ import JoinFlowStep from '../../../src/components/join-flow/join-flow-step';
import RegistrationErrorStep from '../../../src/components/join-flow/registration-error-step';
describe('RegistrationErrorStep', () => {
const onTryAgain = jest.fn();
let wrapper;
const onSubmit = jest.fn();
beforeEach(() => {
wrapper = shallowWithIntl(
const getRegistrationErrorStepWrapper = props => {
const wrapper = shallowWithIntl(
<RegistrationErrorStep
errorMsg={'error message'}
onTryAgain={onTryAgain}
onSubmit={onSubmit}
{...props}
/>
);
});
return wrapper
.dive(); // unwrap injectIntl()
};
test('shows JoinFlowStep with props', () => {
// Dive to get past the anonymous component.
const joinFlowStepWrapper = wrapper.dive().find(JoinFlowStep);
test('when canTryAgain is true, show tryAgain message', () => {
const props = {canTryAgain: true};
const joinFlowStepWrapper = getRegistrationErrorStepWrapper(props).find(JoinFlowStep);
expect(joinFlowStepWrapper).toHaveLength(1);
expect(joinFlowStepWrapper.props().description).toBe('error message');
expect(joinFlowStepWrapper.props().nextButton).toBe('general.tryAgain');
});
test('when submitted, onTryAgain is called', () => {
// Dive to get past the anonymous component.
const joinFlowStepWrapper = wrapper.dive().find(JoinFlowStep);
test('when canTryAgain is false, show startOver message', () => {
const props = {canTryAgain: false};
const joinFlowStepWrapper = getRegistrationErrorStepWrapper(props).find(JoinFlowStep);
expect(joinFlowStepWrapper).toHaveLength(1);
expect(joinFlowStepWrapper.props().description).toBe('error message');
expect(joinFlowStepWrapper.props().nextButton).toBe('general.startOver');
});
test('when canTryAgain is missing, show startOver message', () => {
const joinFlowStepWrapper = getRegistrationErrorStepWrapper().find(JoinFlowStep);
expect(joinFlowStepWrapper).toHaveLength(1);
expect(joinFlowStepWrapper.props().description).toBe('error message');
expect(joinFlowStepWrapper.props().nextButton).toBe('general.startOver');
});
test('when submitted, onSubmit is called', () => {
const joinFlowStepWrapper = getRegistrationErrorStepWrapper().find(JoinFlowStep);
joinFlowStepWrapper.props().onSubmit(new Event('event')); // eslint-disable-line no-undef
expect(onTryAgain).toHaveBeenCalled();
expect(onSubmit).toHaveBeenCalled();
});
});

118
test/unit/components/username-step.test.jsx Normal file
View file

@ -0,0 +1,118 @@
const React = require('react');
const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
const mockedValidateUsernameRemotely = jest.fn(() => (
/* eslint-disable no-undef */
Promise.resolve({valid: false, errMsgId: 'registration.validationUsernameNotAllowed'})
/* eslint-enable no-undef */
));
jest.mock('../../../src/lib/validate.js', () => (
{
...(jest.requireActual('../../../src/lib/validate.js')),
validateUsernameRemotely: mockedValidateUsernameRemotely
}
));
// must come after validation mocks, so validate.js will be mocked before it is required
const UsernameStep = require('../../../src/components/join-flow/username-step.jsx');
describe('UsernameStep test', () => {
afterEach(() => {
jest.clearAllMocks();
});
test('send correct props to formik', () => {
const wrapper = shallowWithIntl(<UsernameStep />);
const formikWrapper = wrapper.dive();
expect(formikWrapper.props().initialValues.username).toBe('');
expect(formikWrapper.props().initialValues.password).toBe('');
expect(formikWrapper.props().initialValues.passwordConfirm).toBe('');
expect(formikWrapper.props().initialValues.showPassword).toBe(true);
expect(formikWrapper.props().validateOnBlur).toBe(false);
expect(formikWrapper.props().validateOnChange).toBe(false);
expect(formikWrapper.props().validate).toBe(formikWrapper.instance().validateForm);
expect(formikWrapper.props().onSubmit).toBe(formikWrapper.instance().handleValidSubmit);
});
test('handleValidSubmit passes formData to next step', () => {
const formikBag = {
setSubmitting: jest.fn()
};
const formData = {item1: 'thing', item2: 'otherthing'};
const mockedOnNextStep = jest.fn();
const wrapper = shallowWithIntl(
<UsernameStep
onNextStep={mockedOnNextStep}
/>
);
const instance = wrapper.dive().instance();
instance.handleValidSubmit(formData, formikBag);
expect(formikBag.setSubmitting).toHaveBeenCalledWith(false);
expect(mockedOnNextStep).toHaveBeenCalledWith(formData);
});
test('validateUsernameRemotelyWithCache calls validate.validateUsernameRemotely', done => {
const wrapper = shallowWithIntl(
<UsernameStep />);
const instance = wrapper.dive().instance();
instance.validateUsernameRemotelyWithCache('newUniqueUsername55')
.then(response => {
expect(mockedValidateUsernameRemotely).toHaveBeenCalled();
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationUsernameNotAllowed');
done();
});
});
test('validateUsernameRemotelyWithCache, called twice with different data, makes two remote requests', done => {
const wrapper = shallowWithIntl(
<UsernameStep />
);
const instance = wrapper.dive().instance();
instance.validateUsernameRemotelyWithCache('newUniqueUsername55')
.then(response => {
expect(mockedValidateUsernameRemotely).toHaveBeenCalledTimes(1);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationUsernameNotAllowed');
})
.then(() => {
// make the same request a second time
instance.validateUsernameRemotelyWithCache('secondDifferent66')
.then(response => {
expect(mockedValidateUsernameRemotely).toHaveBeenCalledTimes(2);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationUsernameNotAllowed');
done();
});
});
});
test('validateUsernameRemotelyWithCache, called twice with same data, only makes one remote request', done => {
const wrapper = shallowWithIntl(
<UsernameStep />
);
const instance = wrapper.dive().instance();
instance.validateUsernameRemotelyWithCache('newUniqueUsername55')
.then(response => {
expect(mockedValidateUsernameRemotely).toHaveBeenCalledTimes(1);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationUsernameNotAllowed');
})
.then(() => {
// make the same request a second time
instance.validateUsernameRemotelyWithCache('newUniqueUsername55')
.then(response => {
expect(mockedValidateUsernameRemotely).toHaveBeenCalledTimes(1);
expect(response.valid).toBe(false);
expect(response.errMsgId).toBe('registration.validationUsernameNotAllowed');
done();
});
});
});
});

17
test/unit/lib/country-data.test.js
View file

@ -74,6 +74,15 @@ describe('unit test lib/country-data.js', () => {
expect(ukItems.length).toEqual(2);
});
test('registrationCountryOptions object uses country names for both option label and option value', () => {
expect(typeof registrationCountryOptions).toBe('object');
// test that there is one option with label and value === 'Brazil'
const brazilOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
(thisCountry.value === 'Brazil' && thisCountry.label === 'Brazil') ? [...acc, thisCountry] : acc
), []);
expect(brazilOptions.length).toEqual(1);
});
test('registrationCountryOptions object places USA and UK at start, with display name versions', () => {
expect(typeof registrationCountryOptions).toBe('object');
const numCountries = countryInfo.length;
@ -81,17 +90,17 @@ describe('unit test lib/country-data.js', () => {
// test that the two entries have been added to the start of the array, and that
// the name of the USA includes "America"
expect(registrationCountryOptions.length).toEqual(numCountries + 2);
expect(registrationCountryOptions[0]).toEqual({value: 'us', label: 'United States of America'});
expect(registrationCountryOptions[1]).toEqual({value: 'gb', label: 'United Kingdom'});
expect(registrationCountryOptions[0]).toEqual({value: 'United States', label: 'United States of America'});
expect(registrationCountryOptions[1]).toEqual({value: 'United Kingdom', label: 'United Kingdom'});
// test that there are now two entries for USA
const usaOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
thisCountry.value === 'us' ? [...acc, thisCountry] : acc
thisCountry.value === 'United States' ? [...acc, thisCountry] : acc
), []);
expect(usaOptions.length).toEqual(2);
// test that there are now two entries for UK
const ukOptions = registrationCountryOptions.reduce((acc, thisCountry) => (
thisCountry.value === 'gb' ? [...acc, thisCountry] : acc
thisCountry.value === 'United Kingdom' ? [...acc, thisCountry] : acc
), []);
expect(ukOptions.length).toEqual(2);
});

32
test/unit/redux/navigation.test.js
View file

@ -7,11 +7,17 @@ const {
setLoginOpen,
setRegistrationOpen,
setSearchTerm,
toggleLoginOpen
toggleLoginOpen,
handleRegistrationRequested
} = require('../../../src/redux/navigation');
describe('unit test lib/validate.js', () => {
beforeEach(() => {
// mock window navigation
global.window.location.assign = jest.fn();
});
test('initialState', () => {
let defaultState;
/* navigationReducer(state, action) */
@ -238,4 +244,28 @@ describe('unit test lib/validate.js', () => {
const resultState = navigationReducer(initialState, action);
expect(resultState.loginOpen).toBe(false);
});
test('handleRegistrationRequested with useScratch3Registration true navigates user to /join, ' +
'and does NOT open scratch 2 registration', () => {
const initialState = {
registrationOpen: false,
useScratch3Registration: true
};
const action = handleRegistrationRequested();
const resultState = navigationReducer(initialState, action);
expect(resultState.registrationOpen).toBe(false);
expect(global.window.location.assign).toHaveBeenCalledWith('/join');
});
test('handleRegistrationRequested with useScratch3Registration false does NOT navigate user away, ' +
'DOES open scratch 2 registration', () => {
const initialState = {
registrationOpen: false,
useScratch3Registration: false
};
const action = handleRegistrationRequested();
const resultState = navigationReducer(initialState, action);
expect(resultState.registrationOpen).toBe(true);
expect(global.window.location.assign).not.toHaveBeenCalled();
});
});