From 91fef1cb43d2b07ea9b92ab6f09bd06bab9788f7 Mon Sep 17 00:00:00 2001 From: Jack Reed Date: Tue, 4 Dec 2018 10:08:24 +0000 Subject: [PATCH] extracts topbar to its own component and adds close button --- .../mirador/window_actions.test.js | 15 +++++ .../__tests__/src/components/Window.test.js | 10 +-- .../src/components/WindowTopBar.test.js | 23 +++++++ minimal_redux_poc/src/components/Window.js | 8 ++- .../src/components/WindowTopBar.js | 62 +++++++++++++++++++ minimal_redux_poc/src/styles/index.scss | 8 ++- 6 files changed, 117 insertions(+), 9 deletions(-) create mode 100644 minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js create mode 100644 minimal_redux_poc/__tests__/src/components/WindowTopBar.test.js create mode 100644 minimal_redux_poc/src/components/WindowTopBar.js diff --git a/minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js b/minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js new file mode 100644 index 0000000..e16d8b4 --- /dev/null +++ b/minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js @@ -0,0 +1,15 @@ +describe('Window actions', () => { + beforeAll(async () => { + await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/'); + }); + it('opens a window and closes it', async () => { + await expect(page).toFill('#manifestURL', 'https://purl.stanford.edu/sn904cj3429/iiif/manifest'); + await expect(page).toClick('#fetchBtn'); + // TODO: Refactor the app so we get rid of the wait + await page.waitFor(1000); + await expect(page).toClick('li button'); + await expect(page).toMatchElement('.mirador-window'); + await expect(page).toClick('.mirador-window-close'); + await expect(page).not.toMatchElement('.mirador-window'); + }); +}); diff --git a/minimal_redux_poc/__tests__/src/components/Window.test.js b/minimal_redux_poc/__tests__/src/components/Window.test.js index 352b609..5dbe317 100644 --- a/minimal_redux_poc/__tests__/src/components/Window.test.js +++ b/minimal_redux_poc/__tests__/src/components/Window.test.js @@ -13,13 +13,16 @@ describe('Window', () => { [window] = store.getState().windows; wrapper = mount( , - // We need to attach this to something created by our JSDOM instance - { attachTo: document.getElementById('main') }, + // We need to attach this to something created by our JSDOM instance. + // Also need to provide context of the store so that connected sub components + // can render effectively. + { attachTo: document.getElementById('main'), context: { store } }, ); }); it('returns the width and height style attribute', () => { - expect(shallow().dive().instance().styleAttributes()) + wrapper = shallow(, { context: { store } }); + expect(wrapper.dive().instance().styleAttributes()) .toEqual({ width: '400px', height: '400px' }); }); @@ -27,7 +30,6 @@ describe('Window', () => { expect(wrapper.find('.mirador-window').prop('style')).toHaveProperty('width', '400px'); expect(wrapper.find('.mirador-window').prop('style')).toHaveProperty('height', '400px'); expect(wrapper.find('div.mirador-window').length).toBe(1); - expect(wrapper.find('div.mirador-window h3').text()).toBe('Test 24 Manifest: Image with IIIF Service - adapted with real image'); expect(wrapper.find('div.mirador-window img').prop('src')).toBe('http://placekitten.com/200/300'); }); diff --git a/minimal_redux_poc/__tests__/src/components/WindowTopBar.test.js b/minimal_redux_poc/__tests__/src/components/WindowTopBar.test.js new file mode 100644 index 0000000..6e24e2c --- /dev/null +++ b/minimal_redux_poc/__tests__/src/components/WindowTopBar.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { actions, store } from '../../../src/store'; +import WindowTopBar from '../../../src/components/WindowTopBar'; +import fixture from '../../fixtures/24.json'; + +describe('Window', () => { + let wrapper; + let window; + beforeEach(() => { + store.dispatch(actions.receiveManifest('foo', fixture)); + store.dispatch(actions.addWindow({ manifestId: 'foo' })); + const manifest = store.getState().manifests.foo; + [window] = store.getState().windows; + wrapper = shallow() + .dive(); + }); + + it('renders without an error', () => { + expect(wrapper.find('div.mirador-window-top-bar h3').text()).toBe('Test 24 Manifest: Image with IIIF Service - adapted with real image'); + expect(wrapper.find('button.mirador-window-close')); + }); +}); diff --git a/minimal_redux_poc/src/components/Window.js b/minimal_redux_poc/src/components/Window.js index bbd6f9d..df51142 100644 --- a/minimal_redux_poc/src/components/Window.js +++ b/minimal_redux_poc/src/components/Window.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import fetch from 'node-fetch'; import OpenSeaDragon from 'openseadragon'; import ns from '../config/css-ns'; +import WindowTopBar from './WindowTopBar'; /** * Represents a Window in the mirador workspace @@ -78,9 +79,10 @@ class Window extends Component { render() { return (
-
-

{this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}

-
+
+

{this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}

+ +
+ ); + } +} +// +// /** +// * mapStateToProps - used to hook up connect to action creators +// * @memberof Window +// * @private +// */ +// const mapStateToProps = ({ windows, manifests }, props) => { +// const window = windows.find(win => props.windowId === win.id); +// return { +// window, +// // +// manifest: manifests[window.manifestId], +// }; +// }; + +/** + * mapDispatchToProps - used to hook up connect to action creators + * @memberof ManifestListItem + * @private + */ +const mapDispatchToProps = dispatch => ({ + removeWindow: windowId => ( + dispatch(actions.removeWindow(windowId)) + ), +}); + +WindowTopBar.propTypes = { + manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types + removeWindow: PropTypes.func.isRequired, + windowId: PropTypes.string.isRequired, +}; + +WindowTopBar.defaultProps = { + manifest: null, +}; + + +export default connect(null, mapDispatchToProps)(WindowTopBar); diff --git a/minimal_redux_poc/src/styles/index.scss b/minimal_redux_poc/src/styles/index.scss index afa8b27..62ab946 100644 --- a/minimal_redux_poc/src/styles/index.scss +++ b/minimal_redux_poc/src/styles/index.scss @@ -34,11 +34,15 @@ body { position: relative; } - &-window-heading { + &-window-top-bar { background: linear-gradient(to bottom, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%); color: white; position: absolute; - z-index: 10; + z-index: 10; + + h3 { + margin: 0; + } } &-osd-container {