Skip to content
Snippets Groups Projects
Commit 341ad20c authored by Glenn Fischer's avatar Glenn Fischer Committed by Mathias Maaß
Browse files

1773 canvas navigation click and canvas change (#1913)

* adds click handler and canvas changes behaviour

* #1773: fix merge conflicts

* #1773: refactor test

* fix tests
parent 2af0a4e6
No related branches found
No related tags found
No related merge requests found
......@@ -3,16 +3,16 @@
describe('Window Sidebars', () => {
beforeAll(async () => {
await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
});
it('renders and updates canvas level metadata', async () => {
await expect(page).toClick('#addBtn');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/001');
await expect(page).toClick('#fetchBtn');
await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/001"] button');
await expect(page).toClick('[data-manifestid="http://localhost:5000/api/001"] button');
});
it('renders and updates canvas level metadata', async () => {
await expect(page).toMatchElement(
'h3',
{ text: 'Bodleian Library Human Freaks 2 (33)' },
......@@ -31,4 +31,19 @@ describe('Window Sidebars', () => {
await expect(page).toMatchElement(`#${windowId} button[aria-label="Open information companion window"]`);
});
it('renders canvas navigation and updates canvas after clicking a navigation item', async () => {
const windows = await page.evaluate(() => (
miradorInstance.store.getState().windows
));
const windowId = Object.values(windows)
.find(window => window.manifestId === 'http://localhost:5000/api/001')
.id;
await expect(page).toMatchElement(`#${windowId} button[aria-label="Toggle window sidebar"]`);
await expect(page).toClick(`#${windowId} button[aria-label="Toggle window sidebar"]`);
await expect(page).toMatchElement(`#${windowId} button[aria-label="Open canvas navigation companion window"]`);
});
});
......@@ -7,6 +7,7 @@ import WindowSideBarCanvasPanel from '../../../src/components/WindowSideBarCanva
describe('WindowSideBarCanvasPanel', () => {
let wrapper;
let setCanvas;
const canvasesIdAndLabel = [
{
id: 'testid1',
......@@ -19,12 +20,15 @@ describe('WindowSideBarCanvasPanel', () => {
];
beforeEach(() => {
setCanvas = jest.fn();
wrapper = shallow(
<WindowSideBarCanvasPanel
canvasesIdAndLabel={canvasesIdAndLabel}
classes={{}}
t={key => key}
windowId="xyz"
setCanvas={setCanvas}
/>,
).dive();
});
......@@ -51,4 +55,9 @@ describe('WindowSideBarCanvasPanel', () => {
.render()
.text()).toBe(canvasesIdAndLabel[1].label);
});
it('should call the onClick handler', () => {
wrapper.find(Typography).at(1).simulate('click');
expect(setCanvas).toHaveBeenCalledTimes(1);
});
});
......@@ -12,6 +12,7 @@
"canvasIndex": "Index",
"closeCompanionWindow": "Close this companion window",
"closeInfoCompanionWindow": "Close information companion window",
"closeCanvasNavigationCompanionWindow": "Close canvas navigation companion window",
"closeMenu": "Close Menu",
"closeWindow": "Close window",
"dark": "Dark",
......@@ -24,6 +25,7 @@
"menu": "Menu",
"off": "Off",
"openInfoCompanionWindow": "Open information companion window",
"openCanvasNavigationCompanionWindow": "Open canvas navigation companion window",
"openWindows": "Open windows",
"openInCompanionWindow": "Open in companion window",
"position": "Position",
......
......@@ -13,15 +13,24 @@ class WindowSideBarCanvasPanel extends Component {
* render
*/
render() {
const { canvasesIdAndLabel, classes, t } = this.props;
const {
canvasesIdAndLabel, setCanvas, windowId, classes, t,
} = this.props;
return (
<>
<Typography variant="h2" className={classes.windowSideBarH2}>{t('canvasIndex')}</Typography>
<List>
{
canvasesIdAndLabel.map(canvas => (
canvasesIdAndLabel.map((canvas, canvasIndex) => (
<ListItem key={canvas.id}>
<Typography variant="body2">{canvas.label}</Typography>
<Typography
className={classes.clickable}
variant="body2"
onClick={() => { setCanvas(windowId, canvasIndex); }}
>
{canvas.label}
</Typography>
</ListItem>
))
}
......@@ -32,17 +41,22 @@ class WindowSideBarCanvasPanel extends Component {
}
WindowSideBarCanvasPanel.propTypes = {
windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
windowId: PropTypes.string.isRequired,
canvasesIdAndLabel: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
setCanvas: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
t: PropTypes.func.isRequired,
};
/**
* @private
* custom style definitions
*/
const styles = theme => ({
windowSideBarH2: theme.typography.h5,
clickable: {
cursor: 'pointer',
},
});
export default withStyles(styles)(WindowSideBarCanvasPanel);
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withNamespaces } from 'react-i18next';
import * as actions from '../state/actions';
import WindowSideBarCanvasPanel from '../components/WindowSideBarCanvasPanel';
import {
getManifestCanvases,
......@@ -19,8 +20,10 @@ const mapStateToProps = (state, { windowId }) => {
};
};
const mapDispatchToProps = { setCanvas: actions.setCanvas };
const enhance = compose(
connect(mapStateToProps),
connect(mapStateToProps, mapDispatchToProps),
withNamespaces(),
);
......
......@@ -33,7 +33,7 @@ export function updateWorkspaceMosaicLayout(layout) {
/**
* updateWorkspaceMosaicLayout - action creator
*
* @param {Object} layout
* @param {Object} isWorkspaceAddVisible
* @memberof ActionCreators
*/
export function setWorkspaceAddVisibility(isWorkspaceAddVisible) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment