From 1d63e78f04d6eff9ff6c84b6ea46b28cd73e1f79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Maa=C3=9F?= <mathias.maass@uni-leipzig.de>
Date: Fri, 8 Feb 2019 14:31:13 +0100
Subject: [PATCH] Refactor <WindowThumbnailSettings/> component.
---
.../WindowThumbnailSettings.test.js | 48 +++++++++++++------
__tests__/src/selectors/index.test.js | 25 ++++++++++
src/components/WindowThumbnailSettings.js | 2 -
src/containers/WindowThumbnailSettings.js | 3 +-
src/state/selectors/index.js | 10 ++++
5 files changed, 71 insertions(+), 17 deletions(-)
diff --git a/__tests__/src/components/WindowThumbnailSettings.test.js b/__tests__/src/components/WindowThumbnailSettings.test.js
index 6453d313c..7b835555a 100644
--- a/__tests__/src/components/WindowThumbnailSettings.test.js
+++ b/__tests__/src/components/WindowThumbnailSettings.test.js
@@ -1,27 +1,47 @@
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';
+/** create wrapper */
+function createWrapper(props) {
+ return shallow(
+ <WindowThumbnailSettings
+ windowId="xyz"
+ setWindowThumbnailPosition={() => {}}
+ thumbnailNavigationPosition="off"
+ {...props}
+ />,
+ );
+}
+
describe('WindowThumbnailSettings', () => {
- let wrapper;
- const setWindowThumbnailPosition = jest.fn();
- beforeEach(() => {
- wrapper = shallow(
- <WindowThumbnailSettings
- windowId="xyz"
- setWindowThumbnailPosition={setWindowThumbnailPosition}
- thumbnailNavigationPosition="bottom"
- />,
- );
+ 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');
});
});
diff --git a/__tests__/src/selectors/index.test.js b/__tests__/src/selectors/index.test.js
index 3eb2acd62..f3b3d48e8 100644
--- a/__tests__/src/selectors/index.test.js
+++ b/__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();
+ });
+});
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index ced6f4958..e30663e4f 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/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);
}
diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js
index 75b0e9472..c50b45016 100644
--- a/src/containers/WindowThumbnailSettings.js
+++ b/src/containers/WindowThumbnailSettings.js
@@ -1,6 +1,7 @@
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),
}
);
diff --git a/src/state/selectors/index.js b/src/state/selectors/index.js
index 67664ed65..7cc2c24ec 100644
--- a/src/state/selectors/index.js
+++ b/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;
+}
--
GitLab