[arvados] updated: 2.7.0-6429-gb7e59d3a31

[git repository hosting]

Summary of changes:
 .../conditional-tabs/conditional-tabs.test.tsx     | 53 +++++++++++++++++-----
 .../conditional-tabs/conditional-tabs.tsx          |  5 +-
 2 files changed, 44 insertions(+), 14 deletions(-)

       via  b7e59d3a314347e3ede2a683294a466b05ca5c90 (commit)
      from  2447ba1d6a912c806ce4bc3392667496bbcea49c (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit b7e59d3a314347e3ede2a683294a466b05ca5c90
Author: Stephen Smith <stephen at curii.com>
Date:   Mon Apr 29 12:37:47 2024 -0400

    21642: Fix unit tests to account for hidden instead of absent tab content
    
    Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>

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("<ConditionalTabs />", () => {
         tabs = [{
             show: true,
             label: "Tab1",
-            content: <div id="content">Content1</div>,
+            content: <div id="content1">Content1</div>,
         },{
             show: false,
             label: "Tab2",
-            content: <div id="content">Content2</div>,
+            content: <div id="content2">Content2</div>,
         },{
             show: true,
             label: "Tab3",
-            content: <div id="content">Content3</div>,
+            content: <div id="content3">Content3</div>,
         }];
     });
 
-    it("renders visible tabs", () => {
+    it("renders only visible tabs", () => {
         // given
         const tabContainer = mount(<ConditionalTabs
             tabs={tabs}
@@ -39,18 +39,42 @@ describe("<ConditionalTabs />", () => {
         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("<ConditionalTabs />", () => {
             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<TabsProps, 'value' | 'onChange'> & C
         </Tabs>
 
         {visibleTabs.map((tab, i) => (
-            React.cloneElement(tab.content, {hidden: i !== tabState})
+            React.cloneElement(tab.content, {key: i, hidden: i !== tabState})
         ))}
     </>;
 };

-----------------------------------------------------------------------


hooks/post-receive
--