src/components/multi-panel-view/multi-panel-view.test.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { configure, mount } from "enzyme";
   7 import Adapter from "enzyme-adapter-react-16";
   8 import { MPVContainer } from './multi-panel-view';
   9 import { Button } from "@material-ui/core";
  10
  11 configure({ adapter: new Adapter() });
  12
  13 const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, children, ...rest}) =>
  14     <div {...rest}>{children}</div>;
  15
  16 describe('<MPVContainer />', () => {
  17     let props;
  18
  19     beforeEach(() => {
  20         props = {
  21             classes: {},
  22         };
  23     });
  24
  25     it('should show default toggle buttons for every child', () => {
  26         const childs = [
  27             <PanelMock key={1}>This is one panel</PanelMock>,
  28             <PanelMock key={2}>This is another panel</PanelMock>,
  29         ];
  30         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  31         expect(wrapper.find(Button).first().html()).toContain('Panel 1');
  32         expect(wrapper.html()).toContain('This is one panel');
  33         expect(wrapper.find(Button).last().html()).toContain('Panel 2');
  34         expect(wrapper.html()).toContain('This is another panel');
  35     });
  36
  37     it('should toggle panel when clicking on its button', () => {
  38         const childs = [
  39             <PanelMock key={1}>This is one panel</PanelMock>,
  40         ];
  41         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  42
  43         // Initial state: panel visible
  44         expect(wrapper.html()).toContain('This is one panel');
  45
  46         // Panel toggling
  47         wrapper.find(Button).simulate('click');
  48         expect(wrapper.html()).not.toContain('This is one panel');
  49         expect(wrapper.html()).toContain('All panels are hidden');
  50         wrapper.find(Button).simulate('click');
  51         expect(wrapper.html()).toContain('This is one panel');
  52         expect(wrapper.html()).not.toContain('All panels are hidden');
  53     });
  54
  55     it('should show custom toggle buttons when config provided', () => {
  56         const childs = [
  57             <PanelMock key={1}>This is one panel</PanelMock>,
  58             <PanelMock key={2}>This is another panel</PanelMock>,
  59         ];
  60         props.panelStates = [
  61             {name: 'First Panel'},
  62         ]
  63         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  64         expect(wrapper.find(Button).first().html()).toContain('First Panel');
  65         expect(wrapper.html()).toContain('This is one panel');
  66         // Second panel received the default button naming and hidden status by default
  67         expect(wrapper.find(Button).last().html()).toContain('Panel 2');
  68         expect(wrapper.html()).not.toContain('This is another panel');
  69         wrapper.find(Button).last().simulate('click');
  70         expect(wrapper.html()).toContain('This is another panel');
  71     });
  72
  73     it('should set panel hidden when requested', () => {
  74         const childs = [
  75             <PanelMock key={1}>This is one panel</PanelMock>,
  76         ];
  77         props.panelStates = [
  78             {name: 'First Panel', visible: false},
  79         ]
  80         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  81         expect(wrapper.find(Button).html()).toContain('First Panel');
  82         expect(wrapper.html()).not.toContain('This is one panel');
  83         expect(wrapper.html()).toContain('All panels are hidden');
  84     });
  85 });