diff --git a/package.json b/package.json index 9cef3bbb74a0c2943be96be912353091d3992b32..129f35bf76805154ea371799a8a559b968e0d032 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "prop-types": "^15.5.8", "pubsweet-component-login": "^0.5.2", "react": "^15.4.4", + "react-css-themr": "^2.1.2", "react-redux": "^5.0.2", "react-router-dom": "^4.2.2", "react-router-redux": "next", diff --git a/src/components/Root.js b/src/components/Root.js index 6392126cb547f84a990e66bbc39427a9cbcbc8c1..f40aafc770a532d7aa17be50218d3d270826d322 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -2,22 +2,21 @@ import React from 'react' import { ConnectedRouter } from 'react-router-redux' import { Provider } from 'react-redux' import PropTypes from 'prop-types' +import { ThemeProvider } from 'react-css-themr' -export default class Root extends React.Component { - render() { - const { store, history, routes } = this.props - return ( - <Provider store={store}> - <div> - <ConnectedRouter history={history}>{routes}</ConnectedRouter> - </div> - </Provider> - ) - } -} +const Root = ({ store, history, routes, theme }) => ( + <Provider store={store}> + <ConnectedRouter history={history}> + <ThemeProvider theme={theme}>{routes}</ThemeProvider> + </ConnectedRouter> + </Provider> +) Root.propTypes = { routes: PropTypes.node.isRequired, history: PropTypes.object.isRequired, store: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, } + +export default Root diff --git a/test/components/Root.test.jsx b/test/components/Root.test.jsx new file mode 100644 index 0000000000000000000000000000000000000000..d53aa3cf91f2ad66ea92e9d00fcca7905e24a679 --- /dev/null +++ b/test/components/Root.test.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import { shallow } from 'enzyme' +import { themr } from 'react-css-themr' +import createHistory from 'history/createBrowserHistory' + +global.PUBSWEET_COMPONENTS = [] + +const Root = require('../../src/components/Root').default +const configureStore = require('../../src/store/configureStore') + +const history = createHistory() +const store = configureStore(history, {}) + +const theme = { ThemedComponent: {testClass: 'mappedClassName'} } + +const ThemedComponent = themr('ThemedComponent')(({ theme }) => ( + <div className={theme.testClass}></div> +)) + +function makeWrapper(props = {}) { + return shallow( + <Root + store={store} + history={history} + routes={<ThemedComponent />} + theme={theme} + {...props} + /> + ) +} + +describe('<Root/>', () => { + it('Adds a theme to context', async () => { + const wrapper = makeWrapper({ theme }) + expect(wrapper.html()).toBe('<div class="mappedClassName"></div>') + }) +}) diff --git a/yarn.lock b/yarn.lock index fc21a15e7fb0cfd0556834c309e4bfd72af183b9..2860c32ad9120581836b3365919e9540073b4357 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2100,6 +2100,10 @@ hoek@4.x.x: version "4.2.0" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" +hoist-non-react-statics@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" + hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0" @@ -3614,6 +3618,13 @@ react-bootstrap@^0.31.3: uncontrollable "^4.1.0" warning "^3.0.0" +react-css-themr@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-2.1.2.tgz#e017514e471c232f43a754a55b49d81faf5dafb8" + dependencies: + hoist-non-react-statics "^1.2.0" + invariant "^2.2.1" + react-dom@^15.6.1: version "15.6.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"