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 {