Skip to content

GitLab

S
scratch-www
Unverified Commit d9bd2baf authored by Benjamin Wheeler's avatar Benjamin Wheeler Committed by GitHub
Browse files
Options

Merge pull request #3424 from benjiwheeler/join-flow-splash-join-button 

splash page join button works with new join flow
parents fdbbc5e6 0ac6aee9
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 36 deletions
src/components/intro/intro.jsx
View file @ d9bd2baf
......@@ -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/navigation/www/navigation.jsx
View file @ d9bd2baf
......@@ -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/redux/navigation.js
View file @ d9bd2baf
......@@ -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) {
......
test/unit/components/navigation.test.jsx
View file @ d9bd2baf
......@@ -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();
});
});
test/unit/redux/navigation.test.js
View file @ d9bd2baf
......@@ -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();
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment