diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js index 145241c5e9499b3ffb0a7aac8a51a78e22fd59a0..258bc47b49d9e4de45e91dbd991d4db1a21ae34b 100644 --- a/__tests__/src/components/App.test.js +++ b/__tests__/src/components/App.test.js @@ -1,29 +1,52 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { MuiThemeProvider } from '@material-ui/core/styles'; +import Fullscreen from 'react-fullscreen-crossbrowser'; +import WorkspaceControlPanel from '../../../src/components/WorkspaceControlPanel'; +import Workspace from '../../../src/containers/Workspace'; import App from '../../../src/components/App'; +/** */ +function createWrapper(props) { + return shallow( + <App + isFullscreenEnabled={false} + setWorkspaceFullscreen={() => {}} + theme="light" + classes={{}} + {...props} + />, + ).dive(); // to unwrapp HOC created by withStyle() +} + describe('App', () => { - it('renders without an error', () => { - const wrapper = shallow( - <App - manifests={[]} - workspace={{}} - config={{ theme: 'light' }} - />, - ); - expect(wrapper.dive().find('div.mirador-app').length).toBe(1); + it('should render outer element correctly', () => { + const wrapper = createWrapper(); + expect(wrapper.find('div.mirador-app').length).toBe(1); + }); + + it('should render all needed elements ', () => { + const wrapper = createWrapper(); + expect(wrapper.find(MuiThemeProvider).length).toBe(1); + expect(wrapper.find(Fullscreen).length).toBe(1); + expect(wrapper.find(Workspace).length).toBe(1); + expect(wrapper.find(WorkspaceControlPanel).length).toBe(1); }); - describe('FullScreen', () => { - it('is enabled by the workspace.fullscreen state', () => { - const wrapper = shallow( - <App - manifests={[]} - workspace={{ isFullscreenEnabled: true }} - config={{ theme: 'light' }} - />, - ); - expect(wrapper.dive().find('FullScreen').first().prop('enabled')).toEqual(true); - }); + it('should pass setWorkspaceFullscreen to Fullscreen.onChange', () => { + const mockFn = jest.fn(); + const wrapper = createWrapper({ setWorkspaceFullscreen: mockFn }); + expect(wrapper.find(Fullscreen).first().prop('onChange')) + .toBe(mockFn); + }); + + it('should pass isFullscreenEnabled to Fullscreen.enabled', () => { + let wrapper = createWrapper({ isFullscreenEnabled: false }); + expect(wrapper.find(Fullscreen).first().prop('enabled')) + .toEqual(false); + + wrapper = createWrapper({ isFullscreenEnabled: true }); + expect(wrapper.find(Fullscreen).first().prop('enabled')) + .toEqual(true); }); }); diff --git a/src/components/App.js b/src/components/App.js index 05b03c507cdb06412824ea44fb36eab0c445973e..d0c8b78337d3118a540cecb12e591fb66830f857 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -13,28 +13,34 @@ import ns from '../config/css-ns'; */ class App extends Component { /** - * render - * @return {String} - HTML markup for the component - */ - render() { - const { - workspace, setWorkspaceFullscreen, config, classes, - } = this.props; - const theme = createMuiTheme({ + */ + makeMuiTheme() { + const { theme } = this.props; + return createMuiTheme({ palette: { - type: config.theme, + type: theme, }, typography: { useNextVariants: true, }, }); + } + + /** + * render + * @return {String} - HTML markup for the component + */ + render() { + const { + isFullscreenEnabled, setWorkspaceFullscreen, classes, + } = this.props; return ( <div className={classNames(classes.background, ns('app'))}> - <MuiThemeProvider theme={theme}> + <MuiThemeProvider theme={this.makeMuiTheme()}> <Fullscreen - enabled={workspace.isFullscreenEnabled} - onChange={isFullscreenEnabled => setWorkspaceFullscreen(isFullscreenEnabled)} + enabled={isFullscreenEnabled} + onChange={setWorkspaceFullscreen} > <Workspace /> </Fullscreen> @@ -46,15 +52,10 @@ class App extends Component { } App.propTypes = { - config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types - workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types + theme: PropTypes.string.isRequired, // eslint-disable-line react/forbid-prop-types + isFullscreenEnabled: PropTypes.bool.isRequired, // eslint-disable-line react/forbid-prop-types classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types, - setWorkspaceFullscreen: PropTypes.func, -}; - -App.defaultProps = { - workspace: {}, - setWorkspaceFullscreen: () => {}, + setWorkspaceFullscreen: PropTypes.func.isRequired, }; /** diff --git a/src/containers/App.js b/src/containers/App.js index aa351221c3c86f47cff6e27be3c63c9b170aacd9..1806662aebf92f736f8fe3038c6d733ca73d54e3 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -10,9 +10,8 @@ import App from '../components/App'; */ const mapStateToProps = state => ( { - config: state.config, - workspace: state.workspace, - manifests: state.manifests, + theme: state.config.theme, + isFullscreenEnabled: state.workspace.isFullscreenEnabled, } ); @@ -22,7 +21,6 @@ const mapStateToProps = state => ( * @private */ const mapDispatchToProps = { - fetchManifest: actions.fetchManifest, setWorkspaceFullscreen: actions.setWorkspaceFullscreen, };