Merge branch '21535-multi-wf-delete'

[arvados.git] / services / workbench2 / src / components / conditional-tabs / conditional-tabs.test.tsx

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 3cb206a5d067f6c7de6c9f544037902a733abcf9..db30135b2e382e09908700a4b4a4c45bd401363a 100644 (file)
--- 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();
     });
 });