From b7e59d3a314347e3ede2a683294a466b05ca5c90 Mon Sep 17 00:00:00 2001 From: Stephen Smith Date: Mon, 29 Apr 2024 12:37:47 -0400 Subject: [PATCH] 21642: Fix unit tests to account for hidden instead of absent tab content Arvados-DCO-1.1-Signed-off-by: Stephen Smith --- .../conditional-tabs.test.tsx | 53 +++++++++++++++---- .../conditional-tabs/conditional-tabs.tsx | 5 +- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/services/workbench2/src/components/conditional-tabs/conditional-tabs.test.tsx b/services/workbench2/src/components/conditional-tabs/conditional-tabs.test.tsx index 3cb206a5d0..db30135b2e 100644 --- a/services/workbench2/src/components/conditional-tabs/conditional-tabs.test.tsx +++ b/services/workbench2/src/components/conditional-tabs/conditional-tabs.test.tsx @@ -17,19 +17,19 @@ describe("", () => { tabs = [{ show: true, label: "Tab1", - content:
Content1
, + content:
Content1
, },{ show: false, label: "Tab2", - content:
Content2
, + content:
Content2
, },{ show: true, label: "Tab3", - content:
Content3
, + content:
Content3
, }]; }); - it("renders visible tabs", () => { + it("renders only visible tabs", () => { // given const tabContainer = mount(", () => { expect(tabContainer.find(Tab)).toHaveLength(2); expect(tabContainer.find(Tab).at(0).text()).toBe("Tab1"); expect(tabContainer.find(Tab).at(1).text()).toBe("Tab3"); - expect(tabContainer.find('div#content').text()).toBe("Content1"); + // expect visible content 1 and tab 3 to be hidden but exist + // content 2 stays unrendered since the tab is hidden + expect(tabContainer.find('div#content1').text()).toBe("Content1"); + expect(tabContainer.find('div#content1').prop('hidden')).toBeFalsy(); + expect(tabContainer.find('div#content2').exists()).toBeFalsy(); + expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy(); // Show second tab tabs[1].show = true; tabContainer.setProps({ tabs: tabs }); + tabContainer.update(); // Expect 3 visible tabs expect(tabContainer.find(Tab)).toHaveLength(3); expect(tabContainer.find(Tab).at(0).text()).toBe("Tab1"); expect(tabContainer.find(Tab).at(1).text()).toBe("Tab2"); expect(tabContainer.find(Tab).at(2).text()).toBe("Tab3"); - expect(tabContainer.find('div#content').text()).toBe("Content1"); + // Expect visible content 1 and hidden content 2/3 + expect(tabContainer.find('div#content1').text()).toBe("Content1"); + expect(tabContainer.find('div#content1').prop('hidden')).toBeFalsy(); + expect(tabContainer.find('div#content2').prop('hidden')).toBeTruthy(); + expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy(); + + // Click on Tab2 (position 1) + tabContainer.find(Tab).at(1).simulate('click'); + + // Expect 3 visible tabs + expect(tabContainer.find(Tab)).toHaveLength(3); + expect(tabContainer.find(Tab).at(0).text()).toBe("Tab1"); + expect(tabContainer.find(Tab).at(1).text()).toBe("Tab2"); + expect(tabContainer.find(Tab).at(2).text()).toBe("Tab3"); + // Expect visible content2 and hidden content 1/3 + expect(tabContainer.find('div#content2').text()).toBe("Content2"); + expect(tabContainer.find('div#content1').prop('hidden')).toBeTruthy(); + expect(tabContainer.find('div#content2').prop('hidden')).toBeFalsy(); + expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy(); }); it("resets selected tab on tab visibility change", () => { @@ -59,17 +83,24 @@ describe("", () => { tabs={tabs} />); - // Expext second tab to be Tab3 + // Expect second tab to be Tab3 expect(tabContainer.find(Tab).at(1).text()).toBe("Tab3"); - // Click on Tab3 + // Click on Tab3 (position 2) tabContainer.find(Tab).at(1).simulate('click'); - expect(tabContainer.find('div#content').text()).toBe("Content3"); + expect(tabContainer.find('div#content3').text()).toBe("Content3"); + expect(tabContainer.find('div#content1').prop('hidden')).toBeTruthy(); + expect(tabContainer.find('div#content2').exists()).toBeFalsy(); + expect(tabContainer.find('div#content3').prop('hidden')).toBeFalsy(); // when Tab2 becomes visible tabs[1].show = true; tabContainer.setProps({ tabs: tabs }); + tabContainer.update(); // Needed or else tab1 content will still be hidden - // Selected tab resets - expect(tabContainer.find('div#content').text()).toBe("Content1"); + // Selected tab resets to 1, tabs 2/3 are hidden + expect(tabContainer.find('div#content1').text()).toBe("Content1"); + expect(tabContainer.find('div#content1').prop('hidden')).toBeFalsy(); + expect(tabContainer.find('div#content2').prop('hidden')).toBeTruthy(); + expect(tabContainer.find('div#content3').prop('hidden')).toBeTruthy(); }); }); diff --git a/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx b/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx index 499e84df8a..248c9c0551 100644 --- a/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx +++ b/services/workbench2/src/components/conditional-tabs/conditional-tabs.tsx @@ -2,12 +2,11 @@ // // SPDX-License-Identifier: AGPL-3.0 -import React, { CSSProperties, ReactElement, useEffect, useState } from "react"; +import React, { ReactElement, useEffect, useState } from "react"; import { Tabs, Tab } from "@material-ui/core"; import { TabsProps } from "@material-ui/core/Tabs"; interface ComponentWithHidden { - styles: CSSProperties; hidden: boolean; }; @@ -45,7 +44,7 @@ export const ConditionalTabs = (props: Omit & C {visibleTabs.map((tab, i) => ( - React.cloneElement(tab.content, {hidden: i !== tabState}) + React.cloneElement(tab.content, {key: i, hidden: i !== tabState}) ))} ; }; -- 2.30.2