From 8971c9b29a5e73331ca4b52fa7dd8131f0308437 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 31 Mar 2017 15:50:21 +0300 Subject: [PATCH] Extract context helpers to separate file --- src/Routes.js | 2 +- src/components/NamedLink/NamedLink.js | 3 +- src/components/NamedRedirect/NamedRedirect.js | 3 +- .../__snapshots__/contextHelpers.test.js.snap | 7 +++ src/util/__snapshots__/routes.test.js.snap | 7 --- src/util/contextHelpers.js | 25 ++++++++++ src/util/contextHelpers.test.js | 49 +++++++++++++++++++ src/util/routes.js | 25 ---------- src/util/routes.test.js | 23 +-------- 9 files changed, 87 insertions(+), 57 deletions(-) create mode 100644 src/util/__snapshots__/contextHelpers.test.js.snap delete mode 100644 src/util/__snapshots__/routes.test.js.snap create mode 100644 src/util/contextHelpers.js create mode 100644 src/util/contextHelpers.test.js diff --git a/src/Routes.js b/src/Routes.js index 42d7e48c..1544d5d7 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import { Switch, Route, withRouter } from 'react-router-dom'; import { NotFoundPage } from './containers'; import { NamedRedirect } from './components'; -import { withFlattenedRoutes } from './util/routes'; +import { withFlattenedRoutes } from './util/contextHelpers'; import * as propTypes from './util/propTypes'; const { bool, arrayOf, object, func, shape, string, any } = PropTypes; diff --git a/src/components/NamedLink/NamedLink.js b/src/components/NamedLink/NamedLink.js index 171de1ab..cd74ca7a 100644 --- a/src/components/NamedLink/NamedLink.js +++ b/src/components/NamedLink/NamedLink.js @@ -20,7 +20,8 @@ import React, { PropTypes } from 'react'; import { Link, withRouter } from 'react-router-dom'; import classNames from 'classnames'; -import { pathByRouteName, withFlattenedRoutes } from '../../util/routes'; +import { pathByRouteName } from '../../util/routes'; +import { withFlattenedRoutes } from '../../util/contextHelpers'; import * as propTypes from '../../util/propTypes'; export const NamedLinkComponent = props => { diff --git a/src/components/NamedRedirect/NamedRedirect.js b/src/components/NamedRedirect/NamedRedirect.js index dca664ac..a4a1f501 100644 --- a/src/components/NamedRedirect/NamedRedirect.js +++ b/src/components/NamedRedirect/NamedRedirect.js @@ -4,7 +4,8 @@ */ import React, { PropTypes } from 'react'; import { Redirect } from 'react-router-dom'; -import { pathByRouteName, withFlattenedRoutes } from '../../util/routes'; +import { pathByRouteName } from '../../util/routes'; +import { withFlattenedRoutes } from '../../util/contextHelpers'; import * as propTypes from '../../util/propTypes'; const NamedRedirect = props => { diff --git a/src/util/__snapshots__/contextHelpers.test.js.snap b/src/util/__snapshots__/contextHelpers.test.js.snap new file mode 100644 index 00000000..b8186f2c --- /dev/null +++ b/src/util/__snapshots__/contextHelpers.test.js.snap @@ -0,0 +1,7 @@ +exports[`util/contextHelpers.js withFlattenedRoutes should inject the provided routes 1`] = ``; + +exports[`util/contextHelpers.js withFlattenedRoutes should inject the provided routes 2`] = ` +
+ SomePage +
+`; diff --git a/src/util/__snapshots__/routes.test.js.snap b/src/util/__snapshots__/routes.test.js.snap deleted file mode 100644 index 0694a70a..00000000 --- a/src/util/__snapshots__/routes.test.js.snap +++ /dev/null @@ -1,7 +0,0 @@ -exports[`util/routes.js withFlattenedRoutes should inject the provided routes 1`] = ``; - -exports[`util/routes.js withFlattenedRoutes should inject the provided routes 2`] = ` -
- SomePage -
-`; diff --git a/src/util/contextHelpers.js b/src/util/contextHelpers.js new file mode 100644 index 00000000..dad1bf71 --- /dev/null +++ b/src/util/contextHelpers.js @@ -0,0 +1,25 @@ +import React, { PropTypes } from 'react'; +import * as propTypes from './propTypes'; + +/** + * A higher order component (HOC) to take the flattened routes from + * the context that the RoutesProvider component has provided. + * + * Injects the routes as the `flattenedRoutes` prop in the given + * component. Works similarly as `withRouter` in React Router. + */ +export const withFlattenedRoutes = Component => { + const WithFlattenedRoutesComponent = (props, context) => ( + + ); + + WithFlattenedRoutesComponent.displayName = `withFlattenedRoutes(${Component.displayName || Component.name})`; + + const { arrayOf } = PropTypes; + + WithFlattenedRoutesComponent.contextTypes = { + flattenedRoutes: arrayOf(propTypes.route).isRequired, + }; + + return WithFlattenedRoutesComponent; +}; diff --git a/src/util/contextHelpers.test.js b/src/util/contextHelpers.test.js new file mode 100644 index 00000000..6ce6a7cc --- /dev/null +++ b/src/util/contextHelpers.test.js @@ -0,0 +1,49 @@ +import React, { PropTypes } from 'react'; +import { PageLayout, RoutesProvider } from '../components'; +import routesConfiguration from '../routesConfiguration'; +import { flattenRoutes } from './routes'; +import { renderDeep, renderShallow } from './test-helpers'; +import * as propTypes from './propTypes'; +import { withFlattenedRoutes, withTogglePageClasses } from './contextHelpers'; + +const { arrayOf, func } = PropTypes; + +describe('util/contextHelpers.js', () => { + describe('withFlattenedRoutes', () => { + it('should inject the provided routes', () => { + const CompComp = props =>
{props.flattenedRoutes[0].name}
; + CompComp.propTypes = { flattenedRoutes: arrayOf(propTypes.route).isRequired }; + const Comp = withFlattenedRoutes(CompComp); + const routes = [{ name: 'SomePage', path: 'some-page', component: () => null }]; + const shallowTree = renderShallow( + + + + ); + expect(shallowTree).toMatchSnapshot(); + const deepTree = renderDeep( + + + + ); + expect(deepTree).toMatchSnapshot(); + }); + }); + + describe('withTogglePageClasses', () => { + it('should inject the provided function', () => { + const CompComp = props =>
{typeof props.togglePageClasses}
; + CompComp.propTypes = { togglePageClasses: func.isRequired }; + const Comp = withTogglePageClasses(CompComp); + + const deepTree = renderDeep( + + + + + + ); + expect(deepTree).toMatchSnapshot(); + }); + }); +}); diff --git a/src/util/routes.js b/src/util/routes.js index 7585842f..dbd4d291 100644 --- a/src/util/routes.js +++ b/src/util/routes.js @@ -1,9 +1,7 @@ -import React, { PropTypes } from 'react'; import { find } from 'lodash'; import { matchPath } from 'react-router-dom'; import pathToRegexp from 'path-to-regexp'; import { stringify } from './urlHelpers'; -import * as propTypes from './propTypes'; // Flatten the routes config. // TODO: flatten the original config and remove this function @@ -70,29 +68,6 @@ export const matchPathname = (pathname, routesConfiguration) => { ); }; -/** - * A higher order component (HOC) to take the flattened routes from - * the context that the RoutesProvider component has provided. - * - * Injects the routes as the `flattenedRoutes` prop in the given - * component. Works similarly as `withRouter` in React Router. - */ -export const withFlattenedRoutes = Component => { - const WithFlattenedRoutesComponent = (props, context) => ( - - ); - - WithFlattenedRoutesComponent.displayName = `withFlattenedRoutes(${Component.displayName || Component.name})`; - - const { arrayOf } = PropTypes; - - WithFlattenedRoutesComponent.contextTypes = { - flattenedRoutes: arrayOf(propTypes.route).isRequired, - }; - - return WithFlattenedRoutesComponent; -}; - /** * ResourceLocatorString is used to direct webapp to correct page. * In contrast to Universal Resource Locator (URL), this doesn't contain protocol, host, or port. diff --git a/src/util/routes.test.js b/src/util/routes.test.js index 2476c9b2..f5563775 100644 --- a/src/util/routes.test.js +++ b/src/util/routes.test.js @@ -3,32 +3,11 @@ import { RoutesProvider } from '../components'; import routesConfiguration from '../routesConfiguration'; import { renderDeep, renderShallow } from './test-helpers'; import * as propTypes from './propTypes'; -import { createResourceLocatorString, flattenRoutes, withFlattenedRoutes } from './routes'; +import { createResourceLocatorString, flattenRoutes } from './routes'; const { arrayOf } = PropTypes; describe('util/routes.js', () => { - describe('withFlattenedRoutes', () => { - it('should inject the provided routes', () => { - const CompComp = props =>
{props.flattenedRoutes[0].name}
; - CompComp.propTypes = { flattenedRoutes: arrayOf(propTypes.route).isRequired }; - const Comp = withFlattenedRoutes(CompComp); - const routes = [{ name: 'SomePage', path: 'some-page', component: () => null }]; - const shallowTree = renderShallow( - - - - ); - expect(shallowTree).toMatchSnapshot(); - const deepTree = renderDeep( - - - - ); - expect(deepTree).toMatchSnapshot(); - }); - }); - describe('createResourceLocatorString', () => { const flattenedRoutes = flattenRoutes(routesConfiguration);