Merge pull request #1820 from ProjectMirador/refactor-app-component

Refactor <App/> component.

__tests__/src/components/App.test.js

 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';
 
-describe('App', () => {
-  it('renders without an error', () => {
-    const wrapper = shallow(
+/** */
+function createWrapper(props) {
+  return shallow(
     <App
-        manifests={[]}
-        workspace={{}}
-        config={{ theme: 'light' }}
+      isFullscreenEnabled={false}
+      setWorkspaceFullscreen={() => {}}
+      theme="light"
+      classes={{}}
+      {...props}
     />,
-    );
-    expect(wrapper.dive().find('div.mirador-app').length).toBe(1);
+  ).dive(); // to unwrapp HOC created by withStyle()
+}
+
+describe('App', () => {
+  it('should render outer element correctly', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('div.mirador-app').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 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);
   });
+
+  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);
   });
 });

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,
 };
 
 /**

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,
 };