moves withStyles to containers (#1949)

* moves withStyles to containers
removes dive where applied and modifies tests
closes #1948

* adds jsdoc to styles

__tests__/src/components/App.test.js

@@ -2,7 +2,7 @@ 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 WorkspaceControlPanel from '../../../src/containers/WorkspaceControlPanel';
 import Workspace from '../../../src/containers/Workspace';
 import WorkspaceAdd from '../../../src/containers/WorkspaceAdd';
 import App from '../../../src/components/App';
@@ -21,7 +21,7 @@ function createWrapper(props) {
       classes={{}}
       {...props}
     />,
-  ).dive(); // to unwrapp HOC created by withStyle()
+  );
 }
 
 describe('App', () => {

__tests__/src/components/CompanionWindow.test.js

@@ -14,7 +14,7 @@ function createWrapper(props) {
       position="right"
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('CompanionWindow', () => {

__tests__/src/components/ManifestListItem.test.js

@@ -15,7 +15,7 @@ function createWrapper(props) {
       t={t => t}
       {...props}
     />,
-  ).dive(); // to unwrapp HOC created by withStyle()
+  );
 }
 
 describe('ManifestListItem', () => {

__tests__/src/components/ManifestListItemError.test.js

@@ -9,13 +9,14 @@ import ManifestListItemError from '../../../src/components/ManifestListItemError
 function createWrapper(props) {
   return shallow(
     <ManifestListItemError
+      classes={{}}
       manifestId="http://example.com"
       onDismissClick={() => {}}
       onTryAgainClick={() => {}}
       t={key => key}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('ManifestListItemError', () => {

__tests__/src/components/WindowSideBar.test.js

@@ -5,7 +5,7 @@ import WindowSideBar from '../../../src/components/WindowSideBar';
 describe('WindowSideBar', () => {
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<WindowSideBar windowId="1" classes={{}} />).dive();
+    wrapper = shallow(<WindowSideBar windowId="1" classes={{}} />);
   });
 
   it('renders without an error', () => {

__tests__/src/components/WindowSideBarCanvasPanel.test.js

@@ -27,7 +27,7 @@ describe('WindowSideBarCanvasPanel', () => {
         setCanvas={setCanvas}
         config={{ canvasNavigation: { height: 100 } }}
       />,
-    ).dive();
+    );
   });
 
   it('renders all needed elements', () => {

__tests__/src/components/WindowSideBarInfoPanel.test.js

@@ -21,7 +21,7 @@ describe('WindowSideBarInfoPanel', () => {
           manifestMetadata={metadata}
           t={str => str}
         />,
-      ).dive();
+      );
     });
 
     it('renders header', () => {
@@ -89,7 +89,7 @@ describe('WindowSideBarInfoPanel', () => {
     beforeEach(() => {
       wrapper = shallow(
         <WindowSideBarInfoPanel />,
-      ).dive();
+      );
     });
 
     it('does render header', () => {

__tests__/src/components/WindowTopBar.test.js

@@ -24,7 +24,7 @@ function createWrapper(props) {
       toggleWindowSideBar={() => {}}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('WindowTopBar', () => {

__tests__/src/components/WindowTopMenuButton.test.js

@@ -14,7 +14,7 @@ function createWrapper(props) {
       t={str => str}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('WindowTopMenuButton', () => {

__tests__/src/components/WorkspaceAdd.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import WorkspaceAdd from '../../../src/components/WorkspaceAdd';
+import ManifestListItem from '../../../src/containers/ManifestListItem';
 import fixture from '../../fixtures/version-2/002.json';
+import ManifestForm from '../../../src/containers/ManifestForm';
 
 /** create wrapper */
 function createWrapper(props) {
@@ -13,20 +15,20 @@ function createWrapper(props) {
       t={str => str}
       {...props}
     />,
-  ).dive();
+  );
 }
 
-describe('WorkspaceAddButton', () => {
+describe('WorkspaceAdd', () => {
   it('renders a list item for each manifest in the state', () => {
     const wrapper = createWrapper();
-    expect(wrapper.find('Connect(LoadNamespace(WithStyles(ManifestListItem)))').length).toBe(2);
+    expect(wrapper.find(ManifestListItem).length).toBe(2);
   });
 
   it('toggles the workspace visibility', () => {
     const setWorkspaceAddVisibility = jest.fn();
     const wrapper = createWrapper({ setWorkspaceAddVisibility });
 
-    wrapper.find('Connect(LoadNamespace(WithStyles(ManifestListItem)))').first().props().handleClose();
+    wrapper.find(ManifestListItem).first().props().handleClose();
     expect(setWorkspaceAddVisibility).toHaveBeenCalledWith(false);
   });
 
@@ -54,8 +56,8 @@ describe('WorkspaceAddButton', () => {
     const wrapper = createWrapper();
     wrapper.setState({ addResourcesOpen: true });
 
-    expect(wrapper.find('WithStyles(Drawer) Connect(LoadNamespace(ManifestForm))').length).toBe(1);
-    wrapper.find('WithStyles(Drawer) Connect(LoadNamespace(ManifestForm))').props().onCancel();
+    expect(wrapper.find('WithStyles(Drawer)').find(ManifestForm).length).toBe(1);
+    wrapper.find('WithStyles(Drawer)').find(ManifestForm).props().onCancel();
     expect(wrapper.find('WithStyles(Drawer)').props().open).toBe(false);
   });
 });

__tests__/src/components/WorkspaceAddButton.test.js

@@ -13,7 +13,7 @@ function createWrapper(props) {
       t={str => str}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('WorkspaceAddButton', () => {

__tests__/src/components/WorkspaceControlPanel.test.js

@@ -11,7 +11,12 @@ describe('WorkspaceControlPanel', () => {
   beforeEach(() => {
     store.dispatch(actions.receiveManifest('foo', fixture));
     store.dispatch(actions.receiveManifest('bar', fixture));
-    wrapper = shallow(<WorkspaceControlPanel store={store} />).dive();
+    wrapper = shallow(
+      <WorkspaceControlPanel
+        classes={{}}
+        store={store}
+      />,
+    );
   });
 
   it('renders without an error', () => {

__tests__/src/components/WorkspaceFullScreenButton.test.js

@@ -12,7 +12,7 @@ describe('WorkspaceFullScreenButton', () => {
         classes={{}}
         setWorkspaceFullscreen={setWorkspaceFullscreen}
       />,
-    ).dive();
+    );
   });
 
   it('renders without an error', () => {

__tests__/src/components/WorkspaceMenuButton.test.js

@@ -7,7 +7,7 @@ describe('WorkspaceMenuButton', () => {
   beforeEach(() => {
     wrapper = shallow(
       <WorkspaceMenuButton classes={{}} />,
-    ).dive();
+    );
   });
 
   it('renders without an error', () => {

__tests__/src/components/ZoomControls.test.js

@@ -12,12 +12,13 @@ describe('ZoomControls', () => {
     updateViewport = jest.fn();
     wrapper = shallow(
       <ZoomControls
+        classes={{}}
         windowId="xyz"
         viewer={viewer}
         showZoomControls={showZoomControls}
         updateViewport={updateViewport}
       />,
-    ).dive();
+    );
   });
 
   describe('with showZoomControls=false', () => {
@@ -32,12 +33,13 @@ describe('ZoomControls', () => {
       updateViewport = jest.fn();
       wrapper = shallow(
         <ZoomControls
+          classes={{}}
           windowId="xyz"
           viewer={viewer}
           showZoomControls
           updateViewport={updateViewport}
         />,
-      ).dive();
+      );
     });
 
     it('renders a couple buttons', () => {

src/components/App.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Fullscreen from 'react-fullscreen-crossbrowser';
 import { I18nextProvider } from 'react-i18next';
-import WorkspaceControlPanel from './WorkspaceControlPanel';
+import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
 import Workspace from '../containers/Workspace';
 import WorkspaceAdd from '../containers/WorkspaceAdd';
 import ns from '../config/css-ns';
@@ -68,14 +68,6 @@ App.defaultProps = {
   isFullscreenEnabled: false,
   isWorkspaceAddVisible: false,
 };
-/**
- Material UI style overrides
- @private
- */
-const styles = theme => ({
-  background: {
-    background: theme.palette.background.default,
-  },
-});
 
-export default withStyles(styles)(App);
+
+export default App;

src/components/CompanionWindow.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import CloseIcon from '@material-ui/icons/Close';
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
 import ns from '../config/css-ns';
 import WindowSideBarInfoPanel from '../containers/WindowSideBarInfoPanel';
 import WindowSideBarCanvasPanel from '../containers/WindowSideBarCanvasPanel';
@@ -76,20 +75,4 @@ CompanionWindow.defaultProps = {
   t: key => key,
 };
 
-/**
- * Styles for Material-UI HOC
- */
-const styles = theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  root: {
-    ...theme.mixins.gutters(),
-    width: '200px',
-    overflowY: 'scroll',
-  },
-});
-
-export default withStyles(styles)(CompanionWindow);
+export default CompanionWindow;

src/components/ManifestListItem.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Grid from '@material-ui/core/Grid';
@@ -161,15 +160,4 @@ ManifestListItem.defaultProps = {
   isFetching: false,
 };
 
-/** */
-const styles = theme => ({
-  root: {
-    ...theme.mixins.gutters(),
-  },
-  label: {
-    textTransform: 'initial',
-    textAlign: 'left',
-  },
-});
-
-export default withStyles(styles)(ManifestListItem);
+export default ManifestListItem;

src/components/ManifestListItemError.js

@@ -4,7 +4,6 @@ import Button from '@material-ui/core/Button';
 import ErrorIcon from '@material-ui/icons/ErrorOutline';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
 
 /**
  * ManifestListItemError renders a component displaying a
@@ -61,19 +60,4 @@ ManifestListItemError.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-/**
- Material UI styles
- @private
- */
-const styles = theme => ({
-  errorIcon: {
-    color: theme.palette.error.main,
-    height: '2rem',
-    width: '2rem',
-  },
-  manifestIdText: {
-    wordBreak: 'break-all',
-  },
-});
-
-export default withStyles(styles)(ManifestListItemError);
+export default ManifestListItemError;

src/components/WindowSideBar.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Drawer from '@material-ui/core/Drawer';
-import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import WindowSideBarButtons from '../containers/WindowSideBarButtons';
 import WindowSideBarPanel from '../containers/WindowSideBarPanel';
@@ -74,22 +73,4 @@ WindowSideBar.defaultProps = {
   sideBarPanel: 'closed',
 };
 
-/**
- Material UI style overrides
- @private
- */
-const styles = theme => ({
-  toolbar: theme.mixins.toolbar,
-  drawer: {
-    overflowX: 'hidden',
-    left: 0,
-    width: 55,
-    flexShrink: 0,
-    height: '100%',
-  },
-  grow: {
-    flexGrow: 1,
-  },
-});
-
-export default withStyles(styles)(WindowSideBar);
+export default WindowSideBar;