services/workbench2/src/components/conditional-tabs/conditional-tabs.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 { mount, configure } from "enzyme";
   7 import { ConditionalTabs, TabData } from "./conditional-tabs";
   8 import Adapter from 'enzyme-adapter-react-16';
   9 import { Tab } from "@material-ui/core";
  10
  11 configure({ adapter: new Adapter() });
  12
  13 describe("<ConditionalTabs />", () => {
  14     let tabs: TabData[] = [];
  15
  16     beforeEach(() => {
  17         tabs = [{
  18             show: true,
  19             label: "Tab1",
  20             content: <div id="content1">Content1</div>,
  21         },{
  22             show: false,
  23             label: "Tab2",
  24             content: <div id="content2">Content2</div>,
  25         },{
  26             show: true,
  27             label: "Tab3",
  28             content: <div id="content3">Content3</div>,
  29         }];
  30     });
  31
  32     it("renders only visible tabs", () => {
  33         // given
  34         const tabContainer = mount(<ConditionalTabs
  35             tabs={tabs}
  36         />);
  37
  38         // expect 2 visible tabs
  39         expect(tabContainer.find(Tab)).toHaveLength(2);
  40         expect(tabContainer.find(Tab).at(0).text()).toBe("Tab1");
  41         expect(tabContainer.find(Tab).at(1).text()).toBe("Tab3");
  42         // expect visible content 1 and tab 3 to be hidden but exist
  43         // content 2 stays unrendered since the tab is hidden
  44         expect(tabContainer.find('div#content1').text()).toBe("Content1");
  45         expect(tabContainer.find('div#content1').prop('hidden')).toBeFalsy();
  46         expect(tabContainer.find('div#content2').exists()).toBeFalsy();
  47         expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy();
  48
  49         // Show second tab
  50         tabs[1].show = true;
  51         tabContainer.setProps({ tabs: tabs });
  52         tabContainer.update();
  53
  54         // Expect 3 visible tabs
  55         expect(tabContainer.find(Tab)).toHaveLength(3);
  56         expect(tabContainer.find(Tab).at(0).text()).toBe("Tab1");
  57         expect(tabContainer.find(Tab).at(1).text()).toBe("Tab2");
  58         expect(tabContainer.find(Tab).at(2).text()).toBe("Tab3");
  59         // Expect visible content 1 and hidden content 2/3
  60         expect(tabContainer.find('div#content1').text()).toBe("Content1");
  61         expect(tabContainer.find('div#content1').prop('hidden')).toBeFalsy();
  62         expect(tabContainer.find('div#content2').prop('hidden')).toBeTruthy();
  63         expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy();
  64
  65         // Click on Tab2 (position 1)
  66         tabContainer.find(Tab).at(1).simulate('click');
  67
  68         // Expect 3 visible tabs
  69         expect(tabContainer.find(Tab)).toHaveLength(3);
  70         expect(tabContainer.find(Tab).at(0).text()).toBe("Tab1");
  71         expect(tabContainer.find(Tab).at(1).text()).toBe("Tab2");
  72         expect(tabContainer.find(Tab).at(2).text()).toBe("Tab3");
  73         // Expect visible content2 and hidden content 1/3
  74         expect(tabContainer.find('div#content2').text()).toBe("Content2");
  75         expect(tabContainer.find('div#content1').prop('hidden')).toBeTruthy();
  76         expect(tabContainer.find('div#content2').prop('hidden')).toBeFalsy();
  77         expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy();
  78     });
  79
  80     it("resets selected tab on tab visibility change", () => {
  81         // given
  82         const tabContainer = mount(<ConditionalTabs
  83             tabs={tabs}
  84         />);
  85
  86         // Expect second tab to be Tab3
  87         expect(tabContainer.find(Tab).at(1).text()).toBe("Tab3");
  88         // Click on Tab3 (position 2)
  89         tabContainer.find(Tab).at(1).simulate('click');
  90         expect(tabContainer.find('div#content3').text()).toBe("Content3");
  91         expect(tabContainer.find('div#content1').prop('hidden')).toBeTruthy();
  92         expect(tabContainer.find('div#content2').exists()).toBeFalsy();
  93         expect(tabContainer.find('div#content3').prop('hidden')).toBeFalsy();
  94
  95         // when Tab2 becomes visible
  96         tabs[1].show = true;
  97         tabContainer.setProps({ tabs: tabs });
  98         tabContainer.update(); // Needed or else tab1 content will still be hidden
  99
 100         // Selected tab resets to 1, tabs 2/3 are hidden
 101         expect(tabContainer.find('div#content1').text()).toBe("Content1");
 102         expect(tabContainer.find('div#content1').prop('hidden')).toBeFalsy();
 103         expect(tabContainer.find('div#content2').prop('hidden')).toBeTruthy();
 104         expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy();
 105     });
 106 });