Merge pull request #1841 from ProjectMirador/refactor-windowthumbnailsettings-component

Refactor <WindowThumbnailSettings/> component.

__tests__/src/components/WindowThumbnailSettings.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Typography from '@material-ui/core/Typography';
 import WindowThumbnailSettings from '../../../src/components/WindowThumbnailSettings';
 
-describe('WindowThumbnailSettings', () => {
-  let wrapper;
-  const setWindowThumbnailPosition = jest.fn();
-  beforeEach(() => {
-    wrapper = shallow(
+/** create wrapper */
+function createWrapper(props) {
+  return shallow(
     <WindowThumbnailSettings
       windowId="xyz"
-        setWindowThumbnailPosition={setWindowThumbnailPosition}
-        thumbnailNavigationPosition="bottom"
+      setWindowThumbnailPosition={() => {}}
+      thumbnailNavigationPosition="off"
+      {...props}
     />,
   );
+}
+
+describe('WindowThumbnailSettings', () => {
+  it('renders all elements correctly', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(Typography).length).toBe(1);
+    expect(wrapper.find(RadioGroup).length).toBe(1);
+    const labels = wrapper.find(FormControlLabel);
+    expect(labels.length).toBe(3);
+    expect(labels.at(0).props().value).toBe('off');
+    expect(labels.at(1).props().value).toBe('bottom');
+    expect(labels.at(2).props().value).toBe('right');
   });
 
-  it('renders without an error', () => {
-    expect(wrapper.find('WithStyles(Typography)').dive().dive().text()).toBe('Thumbnails');
-    expect(wrapper.find('RadioGroup').props().value).toBe('bottom');
+  it('should set the correct label active', () => {
+    let wrapper = createWrapper({ thumbnailNavigationPosition: 'bottom' });
+    expect(wrapper.find(RadioGroup).props().value).toBe('bottom');
+    wrapper = createWrapper({ thumbnailNavigationPosition: 'right' });
+    expect(wrapper.find(RadioGroup).props().value).toBe('right');
   });
 
   it('updates state when the thumbnail config selection changes', () => {
-    wrapper.find('RadioGroup').first().simulate('change', { target: { value: 'off' } });
+    const setWindowThumbnailPosition = jest.fn();
+    const wrapper = createWrapper({ setWindowThumbnailPosition });
+    wrapper.find(RadioGroup).first().simulate('change', { target: { value: 'off' } });
     expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'off');
+    wrapper.find(RadioGroup).first().simulate('change', { target: { value: 'right' } });
+    expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'right');
   });
 });

__tests__/src/selectors/index.test.js

@@ -4,6 +4,7 @@ import {
   getWindowManifest,
   getManifestLogo,
   getManifestCanvases,
+  getThumbnailNavigationPosition,
 } from '../../../src/state/selectors';
 
 
@@ -69,3 +70,27 @@ describe('getManifestCanvases', () => {
     expect(received[0].id).toBe('https://iiif.bodleian.ox.ac.uk/iiif/canvas/9cca8fdd-4a61-4429-8ac1-f648764b4d6d.json');
   });
 });
+
+describe('getThumbnailNavigationPosition', () => {
+  const state = {
+    windows: {
+      a: { id: 'a', thumbnailNavigationPosition: 'bottom' },
+      b: { id: 'b' },
+    },
+  };
+
+  it('should return thumbnail navigation position if window exists', () => {
+    const received = getThumbnailNavigationPosition(state, 'a');
+    expect(received).toBe('bottom');
+  });
+
+  it('should return undefined if position does not exist in window', () => {
+    const received = getThumbnailNavigationPosition(state, 'b');
+    expect(received).toBeUndefined();
+  });
+
+  it('should return undefined if window does not exists', () => {
+    const received = getThumbnailNavigationPosition(state, 'c');
+    expect(received).toBeUndefined();
+  });
+});

src/components/WindowThumbnailSettings.js

@@ -16,8 +16,6 @@ export default class WindowThumbnailSettings extends Component {
    */
   constructor(props) {
     super(props);
-    this.state = {
-    };
     this.handleChange = this.handleChange.bind(this);
   }
 

src/containers/WindowThumbnailSettings.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from '../state/actions';
+import { getThumbnailNavigationPosition } from '../state/selectors';
 import WindowThumbnailSettings from '../components/WindowThumbnailSettings';
 
 /**
@@ -17,7 +18,7 @@ const mapDispatchToProps = { setWindowThumbnailPosition: actions.setWindowThumbn
  */
 const mapStateToProps = (state, props) => (
   {
-    thumbnailNavigationPosition: state.windows[props.windowId].thumbnailNavigationPosition,
+    thumbnailNavigationPosition: getThumbnailNavigationPosition(state, props.windowId),
   }
 );
 

src/state/selectors/index.js

@@ -33,3 +33,13 @@ export function getManifestCanvases(manifest) {
 
   return manifest.manifestation.getSequences()[0].getCanvases();
 }
+
+/** Return position of thumbnail navigation in a certain window.
+* @param {object} state
+* @param {String} windowId
+* @param {String}
+*/
+export function getThumbnailNavigationPosition(state, windowId) {
+  return state.windows[windowId]
+    && state.windows[windowId].thumbnailNavigationPosition;
+}