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, panelIlluminated, panelRef, 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 panel 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 show panel when clicking on its button', () => {
  38         const childs = [
  39             <PanelMock key={1}>This is one panel</PanelMock>,
  40         ];
  41         props.panelStates = [
  42             {name: 'Initially invisible Panel', visible: false},
  43         ]
  44
  45         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  46
  47         // Initial state: panel not visible
  48         expect(wrapper.html()).not.toContain('This is one panel');
  49         expect(wrapper.html()).toContain('All panels are hidden');
  50
  51         // Panel visible when clicking on its button
  52         wrapper.find(Button).simulate('click');
  53         expect(wrapper.html()).toContain('This is one panel');
  54         expect(wrapper.html()).not.toContain('All panels are hidden');
  55     });
  56
  57     it('should show custom panel buttons when config provided', () => {
  58         const childs = [
  59             <PanelMock key={1}>This is one panel</PanelMock>,
  60             <PanelMock key={2}>This is another panel</PanelMock>,
  61         ];
  62         props.panelStates = [
  63             {name: 'First Panel'},
  64         ]
  65         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  66         expect(wrapper.find(Button).first().html()).toContain('First Panel');
  67         expect(wrapper.html()).toContain('This is one panel');
  68         // Second panel received the default button naming and hidden status by default
  69         expect(wrapper.find(Button).last().html()).toContain('Panel 2');
  70         expect(wrapper.html()).not.toContain('This is another panel');
  71         wrapper.find(Button).last().simulate('click');
  72         expect(wrapper.html()).toContain('This is another panel');
  73     });
  74
  75     it('should set panel hidden when requested', () => {
  76         const childs = [
  77             <PanelMock key={1}>This is one panel</PanelMock>,
  78         ];
  79         props.panelStates = [
  80             {name: 'First Panel', visible: false},
  81         ]
  82         const wrapper = mount(<MPVContainer {...props}>{[...childs]}</MPVContainer>);
  83         expect(wrapper.find(Button).html()).toContain('First Panel');
  84         expect(wrapper.html()).not.toContain('This is one panel');
  85         expect(wrapper.html()).toContain('All panels are hidden');
  86     });
  87 });