services/workbench2/src/components/conditional-tabs/conditional-tabs.cy.js

   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 { ConditionalTabs, TabData } from "./conditional-tabs";
   7 import { Tab } from "@mui/material";
   8
   9 describe("<ConditionalTabs />", () => {
  10     let tabs = [];
  11     let WrappedComponent;
  12
  13     beforeEach(() => {
  14         tabs = [{
  15             show: true,
  16             label: "Tab1",
  17             content: <div id="content1">Content1</div>,
  18         },{
  19             show: false,
  20             label: "Tab2",
  21             content: <div id="content2">Content2</div>,
  22         },{
  23             show: true,
  24             label: "Tab3",
  25             content: <div id="content3">Content3</div>,
  26         }];
  27
  28         //necessary to update the props of a component after mounting
  29         WrappedComponent = ({ tabs }) => {
  30             const [newTabs, setNewTabs] = React.useState(tabs);
  31
  32             window.updateProps = (newTabs) => {
  33                 setNewTabs(newTabs);
  34             };
  35
  36             return <ConditionalTabs tabs={newTabs} />;
  37         };
  38     });
  39
  40     it("renders only visible tabs", () => {
  41         // given
  42         cy.mount(<WrappedComponent tabs={tabs} />);
  43
  44         // expect 2 visible tabs
  45         cy.get('button[role=tab]').should('have.length', 2);
  46         cy.get('button[role=tab]').eq(0).should('contain', 'Tab1');
  47         cy.get('button[role=tab]').eq(1).should('contain', 'Tab3');
  48
  49         // expect visible content 1 and tab 3 to be hidden but exist
  50         // content 2 stays unrendered since the tab is hidden
  51         cy.contains('Content1').should('exist');
  52         cy.contains('Content2').should('not.exist');
  53         cy.contains('Content3').should('have.attr', 'hidden');
  54
  55         // Show second tab
  56         cy.window().then((win) => {
  57             win.updateProps([...tabs, tabs[1].show = true]);
  58         });
  59
  60         // Expect 3 visible tabs
  61         cy.get('button[role=tab]').should('have.length', 3);
  62         cy.get('button[role=tab]').eq(0).should('contain', 'Tab1');
  63         cy.get('button[role=tab]').eq(1).should('contain', 'Tab2');
  64         cy.get('button[role=tab]').eq(2).should('contain', 'Tab3');
  65
  66         // Expect visible content 1 and hidden content 2/3
  67         cy.get('div#content1').should('contain', 'Content1');
  68         cy.get('div#content1').should('not.have.attr', 'hidden');
  69         cy.get('div#content2').should('have.attr', 'hidden');
  70         cy.get('div#content3').should('have.attr', 'hidden');
  71
  72         // Click on Tab2 (position 1)
  73         cy.get('button[role=tab]').eq(1).click();
  74
  75         // Expect 3 visible tabs
  76         cy.get('button[role=tab]').should('have.length', 3);
  77         cy.get('button[role=tab]').eq(0).should('contain', 'Tab1');
  78         cy.get('button[role=tab]').eq(1).should('contain', 'Tab2');
  79         cy.get('button[role=tab]').eq(2).should('contain', 'Tab3');
  80
  81         // Expect visible content2 and hidden content 1/3
  82         cy.get('div#content2').should('contain', 'Content2');
  83         cy.get('div#content1').should('have.attr', 'hidden');
  84         cy.get('div#content2').should('not.have.attr', 'hidden');
  85         cy.get('div#content3').should('have.attr', 'hidden');
  86     });
  87
  88     it("resets selected tab on tab visibility change", () => {
  89         // given
  90         cy.mount(<WrappedComponent tabs={tabs} />);
  91
  92         // Expect second tab to be Tab3
  93         cy.get('button[role=tab]').eq(1).should('contain', 'Tab3');
  94         // Click on Tab3 (position 2)
  95         cy.get('button[role=tab]').eq(1).click();
  96         cy.get('div#content3').should('contain', 'Content3');
  97         cy.get('div#content1').should('have.attr', 'hidden');
  98         cy.get('div#content2').should('not.exist');
  99         cy.get('div#content3').should('not.have.attr', 'hidden');
 100
 101         // Show second tab
 102         cy.window().then((win) => {
 103             win.updateProps([...tabs, tabs[1].show = true]);
 104         });
 105
 106         // Selected tab resets to 1, tabs 2/3 are hidden
 107         cy.get('div#content1').should('contain', 'Content1');
 108         cy.get('div#content1').should('not.have.attr', 'hidden');
 109         cy.get('div#content2').should('have.attr', 'hidden');
 110         cy.get('div#content3').should('have.attr', 'hidden');
 111     });
 112 });