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

package.json

@@ -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",

src/_colors.scss

@@ -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);

src/components/errorboundary/errorboundary.jsx

@@ -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;

src/components/formik-forms/formik-radio-button.jsx

@@ -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)}

src/components/formik-forms/formik-radio-button.scss

@@ -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 {

src/components/intro/intro.jsx

@@ -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());
     }
 });
 

src/components/join-flow/birthdate-step.jsx

@@ -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'})}

src/components/join-flow/country-step.jsx

@@ -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'})}

src/components/join-flow/email-step.jsx

@@ -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 */

src/components/join-flow/join-flow-step.jsx

@@ -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,

src/components/join-flow/join-flow-step.scss

@@ -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;
+    height: 7.5rem;
-    max-height: 8.75rem;
     overflow: hidden;
     margin: 0;
     border-top-left-radius: 1rem;

src/components/join-flow/join-flow-steps.scss

@@ -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;

src/components/join-flow/join-flow.jsx

@@ -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 */
                     />
                 ) : (

src/components/join-flow/registration-error-step.jsx

@@ -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);

src/components/join-flow/username-step.jsx

@@ -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({

src/components/join-flow/welcome-step.jsx

@@ -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 ? (

src/components/navigation/www/navigation.jsx

@@ -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));
     }

src/components/page/www/page.jsx

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

src/l10n.json

@@ -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",

src/lib/country-data.js

@@ -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'},
+ *    {value: 'United States', label: 'United States of America'},
- *    {code: 'gb', name: 'United Kingdom'},
+ *    {value: 'United Kingdom', label: 'United Kingdom'},
- *    {code: 'af', name: 'Afghanistan'},
+ *    {value: 'Afghanistan', label: 'Afghanistan'},
  *    ...
- *    {code: 'ae', name: 'United Arab Emirates'},
+ *    {value: 'United Arab Emirates', label: 'United Arab Emirates'},
- *    {code: 'us', name: 'United States', display: 'United States of America'},
+ *    {value: 'United States', label: 'United States of America'},
- *    {code: 'gb', name: 'United Kingdom'},
+ *    {value: 'United Kingdom', label: 'United Kingdom'},
- *    {code: 'uz', name: 'Uzbekistan'},
+ *    {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:
  * [

src/redux/navigation.js

@@ -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 = () => {
+module.exports.handleRegistrationRequested = () => ({
-    window.location = '/join';
+    type: Types.HANDLE_REGISTRATION_REQUESTED
-};
+});
 
 module.exports.handleCompleteRegistration = createProject => (dispatch => {
     if (createProject) {

src/routes.json

@@ -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"
     },

src/views/join/join.jsx

@@ -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"

src/views/preview/embed-view.jsx

@@ -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">
-                    <div className="preview">
+                    <NotAvailable />
-                        <NotAvailable />
+                </div>
-                    </div>
-                </ErrorBoundary>
             );
         }
 

src/views/preview/embed.jsx

@@ -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')
+    );
 }

test/unit/components/email-step.test.jsx

@@ -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();
+                    });
+            });
+    });
 });

test/unit/components/errorboundary.test.jsx

@@ -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');
+    });
+});

test/unit/components/join-flow.test.jsx

@@ -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);
+    });
 });

test/unit/components/navigation.test.jsx

@@ -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');
+        // simulate click, with mocked event
-        expect(navInstance.props.handleOpenRegistration).toHaveBeenCalled();
+        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');
+        navWrapper.find('a.registrationLink').simulate('click', {preventDefault () {}});
-        expect(navInstance.props.navigateToRegistration).toHaveBeenCalled();
+        expect(navInstance.props.handleClickRegistration).toHaveBeenCalled();
     });
 });

test/unit/components/registration-error-step.test.jsx

@@ -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();
+    const onSubmit = jest.fn();
-    let wrapper;
 
-    beforeEach(() => {
+    const getRegistrationErrorStepWrapper = props => {
-        wrapper = shallowWithIntl(
+        const wrapper = shallowWithIntl(
             <RegistrationErrorStep
                 errorMsg={'error message'}
-                onTryAgain={onTryAgain}
+                onSubmit={onSubmit}
+                {...props}
             />
         );
-    });
+        return wrapper
+            .dive(); // unwrap injectIntl()
+    };
 
-    test('shows JoinFlowStep with props', () => {
+    test('when canTryAgain is true, show tryAgain message', () => {
-        // Dive to get past the anonymous component.
+        const props = {canTryAgain: true};
-        const joinFlowStepWrapper = wrapper.dive().find(JoinFlowStep);
+        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', () => {
+    test('when canTryAgain is false, show startOver message', () => {
-        // Dive to get past the anonymous component.
+        const props = {canTryAgain: false};
-        const joinFlowStepWrapper = wrapper.dive().find(JoinFlowStep);
+        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();
     });
 });

test/unit/components/username-step.test.jsx

@@ -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();
+                    });
+            });
+    });
+});

test/unit/lib/country-data.test.js

@@ -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[0]).toEqual({value: 'United States', label: 'United States of America'});
-        expect(registrationCountryOptions[1]).toEqual({value: 'gb', label: 'United Kingdom'});
+        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);
     });

test/unit/redux/navigation.test.js

@@ -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();
+    });
 });