--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from "react";
+import { configure, mount } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import { MPVContainer } from './multi-panel-view';
+import { Button } from "@material-ui/core";
+
+configure({ adapter: new Adapter() });
+
+const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, children, ...rest}) =>
+ <div {...rest}>{children}</div>;
+
+describe('<MPVContainer />', () => {
+ let props;
+
+ beforeEach(() => {
+ props = {
+ classes: {},
+ };
+ });
+
+ it('should show default toggle buttons for every child', () => {
+ const childs = [
+ <PanelMock key={1}>This is one panel</PanelMock>,
+ <PanelMock key={2}>This is another panel</PanelMock>,
+ ];
+ const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
+ expect(wrapper.find(Button).first().html()).toContain('Panel 1');
+ expect(wrapper.html()).toContain('This is one panel');
+ expect(wrapper.find(Button).last().html()).toContain('Panel 2');
+ expect(wrapper.html()).toContain('This is another panel');
+ });
+
+ it('should toggle panel when clicking on its button', () => {
+ const childs = [
+ <PanelMock key={1}>This is one panel</PanelMock>,
+ ];
+ const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
+
+ // Initial state: panel visible
+ expect(wrapper.html()).toContain('This is one panel');
+
+ // Panel toggling
+ wrapper.find(Button).simulate('click');
+ expect(wrapper.html()).not.toContain('This is one panel');
+ expect(wrapper.html()).toContain('All panels are hidden');
+ wrapper.find(Button).simulate('click');
+ expect(wrapper.html()).toContain('This is one panel');
+ expect(wrapper.html()).not.toContain('All panels are hidden');
+ });
+
+ it('should show custom toggle buttons when config provided', () => {
+ const childs = [
+ <PanelMock key={1}>This is one panel</PanelMock>,
+ <PanelMock key={2}>This is another panel</PanelMock>,
+ ];
+ props.panelStates = [
+ {name: 'First Panel'},
+ ]
+ const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
+ expect(wrapper.find(Button).first().html()).toContain('First Panel');
+ expect(wrapper.html()).toContain('This is one panel');
+ // Second panel received the default button naming and hidden status by default
+ expect(wrapper.find(Button).last().html()).toContain('Panel 2');
+ expect(wrapper.html()).not.toContain('This is another panel');
+ wrapper.find(Button).last().simulate('click');
+ expect(wrapper.html()).toContain('This is another panel');
+ });
+
+ it('should set panel hidden when requested', () => {
+ const childs = [
+ <PanelMock key={1}>This is one panel</PanelMock>,
+ ];
+ props.panelStates = [
+ {name: 'First Panel', visible: false},
+ ]
+ const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
+ expect(wrapper.find(Button).html()).toContain('First Panel');
+ expect(wrapper.html()).not.toContain('This is one panel');
+ expect(wrapper.html()).toContain('All panels are hidden');
+ });
+});
\ No newline at end of file
? `Panel ${idx+1}`
: (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
const toggleVariant = panelVisibility[idx]
- ? "raised"
- : "flat";
+ ? "contained"
+ : "text";
const toggleTooltip = panelVisibility[idx]
? `Hide ${panelName} panel`
: `Show ${panelName} panel`;
];
const aPanel =
- <MPVHideablePanel visible={panelVisibility[idx]} name={panelName}
+ <MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
maximized={panelIsMaximized}
doHidePanel={toggleFn(idx)} doMaximizePanel={maximizeFn(idx)}>
{children[idx]}
return <Grid container {...props}>
<Grid container item direction="row">
- { toggles.map(tgl => <Grid item>{tgl}</Grid>) }
+ { toggles.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
</Grid>
<Grid container item {...props} xs className={classes.content}>
{ panelVisibility.includes(true)