Skip to content

Commit

Permalink
#3087: segregate 'MainRoute' per @webdeveloperpr
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeff1evesque
jeff1evesque committed May 13, 2018
1 parent 08ab937 commit 66933d6
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 38 deletions.
37 changes: 5 additions & 32 deletions src/jsx/import/layout/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,10 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import LoginLayout from './login.jsx';
import RegisterLayout from './register.jsx';
import Spinner from '../general/spinner.jsx';
import HomePageState from '../redux/container/home-page.jsx';
import MainMenu from '../route/main-route.jsx';
import UserMenuState from '../redux/container/user-menu.jsx';
import HeaderMenuState from '../redux/container/header-menu.jsx';
import AnalysisLayoutState from '../redux/container/analysis-layout.jsx';
import { BreakpointRender } from 'rearm/lib/Breakpoint';
import { breakpoints } from '../general/breakpoints.js';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -52,44 +48,21 @@ class PageLayout extends Component {
!!this.props.user.name &&
this.props.user.name != 'anonymous'
) {
var mainMenu = <UserMenuState />;
var sideBar = <UserMenuState />;
var authStatus = 'authenticated';
} else {
var mainMenu = <div><HeaderMenuState /></div>;
var sideBar = <div><HeaderMenuState /></div>;
var authStatus = 'anonymous';
}

return (
<div className={`${bpoint}-viewport container-fluid`}>
<div className={authStatus}>
<div className='menu-container'>
{mainMenu}
{sideBar}
</div>
<div className='content'>
<Route
component={HomePageState}
exact
path='/'
/>
<Route
component={LoginLayout}
exact
path='/login'
/>
<Route
component={LoginLayout}
exact
path='/logout'
/>
<Route
component={RegisterLayout}
exact
path='/register'
/>
<Route
component={AnalysisLayoutState}
path='/session'
/>
<MainRoute/>
</div>
{spinner}
</div>
Expand Down
53 changes: 53 additions & 0 deletions src/jsx/import/route/main-route.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* main-route.jsx: upper level routes.
*
* Note: this script implements jsx (reactjs) syntax.
*
* Note: importing 'named export' (multiple export statements in a module),
* requires the object being imported, to be surrounded by { brackets }.
*
*/

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router-dom';
import LoginLayout from './login.jsx';
import RegisterLayout from './register.jsx';
import HomePageState from '../redux/container/home-page.jsx';
import AnalysisLayoutState from '../redux/container/analysis-layout.jsx';

class MainRoute extends Component {
render() {
return (
<div>
<Route
component={HomePageState}
exact
path='/'
/>
<Route
component={LoginLayout}
exact
path='/login'
/>
<Route
component={LoginLayout}
exact
path='/logout'
/>
<Route
component={RegisterLayout}
exact
path='/register'
/>
<Route
component={AnalysisLayoutState}
path='/session'
/>
</div>
);
}
}

// indicate which class can be exported, and instantiated via 'require'
export default MainRoute;
12 changes: 6 additions & 6 deletions test/jest/__tests__/layout/page.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from 'react';
import { MemoryRouter } from 'react-router';
import Enzyme, { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import PageLayout from '../../../../src/jsx/import/layout/page.jsx';
import MainRoute from '../../../../src/jsx/import/route/main-route.jsx';
import HomePageState from '../../../../src/jsx/import/redux/container/home-page.jsx';
import UserMenuState from '../../../../src/jsx/import/redux/container/user-menu.jsx';
import HeaderMenuState from '../../../../src/jsx/import/redux/container/header-menu.jsx';
Expand All @@ -21,7 +21,7 @@ describe('PageLayout Component', () => {
it('should render home route', () => {
const wrapper = mount(
<MemoryRouter initialEntries={[ '/' ]}>
<PageLayout/>
<MainRoute/>
</MemoryRouter>
);
expect(wrapper.find(HomePageState)).toHaveLength(1);
Expand All @@ -30,7 +30,7 @@ describe('PageLayout Component', () => {
it('should render login route', () => {
const wrapper = mount(
<MemoryRouter initialEntries={[ '/login' ]}>

This comment has been minimized.

Sign in to view

Copy link
@betancourtl

betancourtl May 13, 2018

Try wrapping the MemoryRouter with a <Provider /> component and then pass the props that the /login path requires. You also might want to use shallow render to render only 1 level deep.
<PageLayout/>
<MainRoute/>
</MemoryRouter>
);
expect(wrapper.find(LoginLayout)).toHaveLength(1);
Expand All @@ -39,7 +39,7 @@ describe('PageLayout Component', () => {
it('should render logout route', () => {
const wrapper = mount(
<MemoryRouter initialEntries={[ '/logout' ]}>
<PageLayout/>
<MainRoute/>
</MemoryRouter>
);
expect(wrapper.find(LoginLayout)).toHaveLength(1);
Expand All @@ -48,7 +48,7 @@ describe('PageLayout Component', () => {
it('should render register route', () => {
const wrapper = mount(
<MemoryRouter initialEntries={[ '/register' ]}>
<PageLayout/>
<MainRoute/>
</MemoryRouter>
);
expect(wrapper.find(RegisterLayout)).toHaveLength(1);
Expand All @@ -57,7 +57,7 @@ describe('PageLayout Component', () => {
it('should render analysis route', () => {
const wrapper = mount(
<MemoryRouter initialEntries={[ '/register' ]}>
<PageLayout/>
<MainRoute/>
</MemoryRouter>
);
expect(wrapper.find(AnalysisLayoutState)).toHaveLength(1);
Expand Down

0 comments on commit 66933d6

Please sign in to comment.