From 27c254acbd896f710ae6d7c2ac8e15cdddcb1ab0 Mon Sep 17 00:00:00 2001
From: Cesar N <11819101+cesnietor@users.noreply.github.com>
Date: Thu, 4 May 2023 11:35:24 -0700
Subject: [PATCH] Add tests for Describe tab content in PVC and Pods (#1596)

---
 .../TenantDetails/pods/PodDescribe.tsx        | 242 +++++++++---------
 .../TenantDetails/pvcs/PVCDescribe.tsx        |  91 ++++---
 .../operator/tenant/test-1/tenant-test-1.ts   |  31 ++-
 3 files changed, 206 insertions(+), 158 deletions(-)

diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx
index 9dd6395220f..df982bfe2a2 100644
--- a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx
+++ b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx
@@ -181,16 +181,18 @@ const HeaderSection = ({ title }: { title: string }) => {
 const PodDescribeSummary = ({ describeInfo }: IPodDescribeSummaryProps) => {
   return (
     <React.Fragment>
-      <HeaderSection title={"Summary"} />
-      <Box sx={{ ...twoColCssGridLayoutConfig }}>
-        <LabelValuePair label={"Name"} value={describeInfo.name} />
-        <LabelValuePair label={"Namespace"} value={describeInfo.namespace} />
-        <LabelValuePair label={"Node"} value={describeInfo.nodeName} />
-        <LabelValuePair label={"Start time"} value={describeInfo.startTime} />
-        <LabelValuePair label={"Status"} value={describeInfo.phase} />
-        <LabelValuePair label={"QoS Class"} value={describeInfo.qosClass} />
-        <LabelValuePair label={"IP"} value={describeInfo.podIP} />
-      </Box>
+      <div id="pod-describe-summary-content">
+        <HeaderSection title={"Summary"} />
+        <Box sx={{ ...twoColCssGridLayoutConfig }}>
+          <LabelValuePair label={"Name"} value={describeInfo.name} />
+          <LabelValuePair label={"Namespace"} value={describeInfo.namespace} />
+          <LabelValuePair label={"Node"} value={describeInfo.nodeName} />
+          <LabelValuePair label={"Start time"} value={describeInfo.startTime} />
+          <LabelValuePair label={"Status"} value={describeInfo.phase} />
+          <LabelValuePair label={"QoS Class"} value={describeInfo.qosClass} />
+          <LabelValuePair label={"IP"} value={describeInfo.podIP} />
+        </Box>
+      </div>
     </React.Fragment>
   );
 };
@@ -200,16 +202,18 @@ const PodDescribeAnnotations = ({
 }: IPodDescribeAnnotationsProps) => {
   return (
     <React.Fragment>
-      <HeaderSection title={"Annotations"} />
-      <Box>
-        {annotations.map((annotation, index) => (
-          <Chip
-            style={{ margin: "0.5%" }}
-            label={`${annotation.key}: ${annotation.value}`}
-            key={index}
-          />
-        ))}
-      </Box>
+      <div id="pod-describe-annotations-content">
+        <HeaderSection title={"Annotations"} />
+        <Box>
+          {annotations.map((annotation, index) => (
+            <Chip
+              style={{ margin: "0.5%" }}
+              label={`${annotation.key}: ${annotation.value}`}
+              key={index}
+            />
+          ))}
+        </Box>
+      </div>
     </React.Fragment>
   );
 };
@@ -217,28 +221,32 @@ const PodDescribeAnnotations = ({
 const PodDescribeLabels = ({ labels }: IPodDescribeLabelsProps) => {
   return (
     <React.Fragment>
-      <HeaderSection title={"Labels"} />
-      <Box>
-        {labels.map((label, index) => (
-          <Chip
-            style={{ margin: "0.5%" }}
-            label={`${label.key}: ${label.value}`}
-            key={index}
-          />
-        ))}
-      </Box>
+      <div id="pod-describe-labels-content">
+        <HeaderSection title={"Labels"} />
+        <Box>
+          {labels.map((label, index) => (
+            <Chip
+              style={{ margin: "0.5%" }}
+              label={`${label.key}: ${label.value}`}
+              key={index}
+            />
+          ))}
+        </Box>
+      </div>
     </React.Fragment>
   );
 };
 
 const PodDescribeConditions = ({ conditions }: IPodDescribeConditionsProps) => {
   return (
-    <PodDescribeTable
-      title="Conditions"
-      columns={["type", "status"]}
-      columnsLabels={["Type", "Status"]}
-      items={conditions}
-    />
+    <div id="pod-describe-conditions-content">
+      <PodDescribeTable
+        title="Conditions"
+        columns={["type", "status"]}
+        columnsLabels={["Type", "Status"]}
+        items={conditions}
+      />
+    </div>
   );
 };
 
@@ -246,41 +254,45 @@ const PodDescribeTolerations = ({
   tolerations,
 }: IPodDescribeTolerationsProps) => {
   return (
-    <PodDescribeTable
-      title="Tolerations"
-      columns={["effect", "key", "operator", "tolerationSeconds"]}
-      columnsLabels={["Effect", "Key", "Operator", "Seconds of toleration"]}
-      items={tolerations}
-    />
+    <div id="pod-describe-tolerations-content">
+      <PodDescribeTable
+        title="Tolerations"
+        columns={["effect", "key", "operator", "tolerationSeconds"]}
+        columnsLabels={["Effect", "Key", "Operator", "Seconds of toleration"]}
+        items={tolerations}
+      />
+    </div>
   );
 };
 
 const PodDescribeVolumes = ({ volumes }: IPodDescribeVolumesProps) => {
   return (
     <React.Fragment>
-      {volumes.map((volume, index) => (
-        <React.Fragment key={index}>
-          <HeaderSection title={`Volume ${volume.name}`} />
-          <Box sx={{ ...twoColCssGridLayoutConfig }}>
-            {volume.pvc && (
-              <React.Fragment>
-                <LabelValuePair
-                  label={"Type"}
-                  value="Persistant Volume Claim"
-                />
-                <LabelValuePair
-                  label={"Claim Name"}
-                  value={volume.pvc.claimName}
-                />
-              </React.Fragment>
-            )}
-            {/* TODO Add component to display projected data (Maybe change API response) */}
-            {volume.projected && (
-              <LabelValuePair label={"Type"} value="Projected" />
-            )}
-          </Box>
-        </React.Fragment>
-      ))}
+      <div id="pod-describe-volumes-content">
+        {volumes.map((volume, index) => (
+          <React.Fragment key={index}>
+            <HeaderSection title={`Volume ${volume.name}`} />
+            <Box sx={{ ...twoColCssGridLayoutConfig }}>
+              {volume.pvc && (
+                <React.Fragment>
+                  <LabelValuePair
+                    label={"Type"}
+                    value="Persistant Volume Claim"
+                  />
+                  <LabelValuePair
+                    label={"Claim Name"}
+                    value={volume.pvc.claimName}
+                  />
+                </React.Fragment>
+              )}
+              {/* TODO Add component to display projected data (Maybe change API response) */}
+              {volume.projected && (
+                <LabelValuePair label={"Type"} value="Projected" />
+              )}
+            </Box>
+          </React.Fragment>
+        ))}
+      </div>
     </React.Fragment>
   );
 };
@@ -325,57 +337,59 @@ const PodDescribeTable = ({
 const PodDescribeContainers = ({ containers }: IPodDescribeContainersProps) => {
   return (
     <React.Fragment>
-      {containers.map((container, index) => (
-        <React.Fragment key={index}>
-          <HeaderSection title={`Container ${container.name}`} />
-          <Box
-            style={{ wordBreak: "break-all" }}
-            sx={{ ...twoColCssGridLayoutConfig }}
-          >
-            <LabelValuePair label={"Image"} value={container.image} />
-            <LabelValuePair label={"Ready"} value={`${container.ready}`} />
-            <LabelValuePair
-              label={"Ports"}
-              value={container.ports.join(", ")}
-            />
-            <LabelValuePair
-              label={"Host Ports"}
-              value={container.hostPorts.join(", ")}
+      <div id="pod-describe-containers-content">
+        {containers.map((container, index) => (
+          <React.Fragment key={index}>
+            <HeaderSection title={`Container ${container.name}`} />
+            <Box
+              style={{ wordBreak: "break-all" }}
+              sx={{ ...twoColCssGridLayoutConfig }}
+            >
+              <LabelValuePair label={"Image"} value={container.image} />
+              <LabelValuePair label={"Ready"} value={`${container.ready}`} />
+              <LabelValuePair
+                label={"Ports"}
+                value={container.ports.join(", ")}
+              />
+              <LabelValuePair
+                label={"Host Ports"}
+                value={container.hostPorts.join(", ")}
+              />
+              <LabelValuePair
+                label={"Arguments"}
+                value={container.args.join(", ")}
+              />
+              <LabelValuePair
+                label={"Started"}
+                value={container.state?.started}
+              />
+              <LabelValuePair label={"State"} value={container.state?.state} />
+            </Box>
+            <Box
+              style={{ wordBreak: "break-all" }}
+              sx={{ ...twoColCssGridLayoutConfig }}
+            >
+              <LabelValuePair label={"Image ID"} value={container.imageID} />
+              <LabelValuePair
+                label={"Container ID"}
+                value={container.containerID}
+              />
+            </Box>
+            <PodDescribeTable
+              title="Mounts"
+              columns={["name", "mountPath"]}
+              columnsLabels={["Name", "Mount Path"]}
+              items={container.mounts}
             />
-            <LabelValuePair
-              label={"Arguments"}
-              value={container.args.join(", ")}
+            <PodDescribeTable
+              title="Environment Variables"
+              columns={["key", "value"]}
+              columnsLabels={["Key", "Value"]}
+              items={container.environmentVariables}
             />
-            <LabelValuePair
-              label={"Started"}
-              value={container.state?.started}
-            />
-            <LabelValuePair label={"State"} value={container.state?.state} />
-          </Box>
-          <Box
-            style={{ wordBreak: "break-all" }}
-            sx={{ ...twoColCssGridLayoutConfig }}
-          >
-            <LabelValuePair label={"Image ID"} value={container.imageID} />
-            <LabelValuePair
-              label={"Container ID"}
-              value={container.containerID}
-            />
-          </Box>
-          <PodDescribeTable
-            title="Mounts"
-            columns={["name", "mountPath"]}
-            columnsLabels={["Name", "Mount Path"]}
-            items={container.mounts}
-          />
-          <PodDescribeTable
-            title="Environment Variables"
-            columns={["key", "value"]}
-            columnsLabels={["Key", "Value"]}
-            items={container.environmentVariables}
-          />
-        </React.Fragment>
-      ))}
+          </React.Fragment>
+        ))}
+      </div>
     </React.Fragment>
   );
 };
diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
index 03b135cc08a..54598ab9ff0 100644
--- a/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
+++ b/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
@@ -74,27 +74,32 @@ const HeaderSection = ({ title }: { title: string }) => {
 const PVCDescribeSummary = ({ describeInfo }: IPVCDescribeSummaryProps) => {
   return (
     <Fragment>
-      <HeaderSection title={"Summary"} />
-      <Box sx={{ ...twoColCssGridLayoutConfig }}>
-        <LabelValuePair label={"Name"} value={describeInfo.name} />
-        <LabelValuePair label={"Namespace"} value={describeInfo.namespace} />
-        <LabelValuePair label={"Capacity"} value={describeInfo.capacity} />
-        <LabelValuePair label={"Status"} value={describeInfo.status} />
-        <LabelValuePair
-          label={"Storage Class"}
-          value={describeInfo.storageClass}
-        />
-        <LabelValuePair
-          label={"Access Modes"}
-          value={describeInfo.accessModes.join(", ")}
-        />
-        <LabelValuePair
-          label={"Finalizers"}
-          value={describeInfo.finalizers.join(", ")}
-        />
-        <LabelValuePair label={"Volume"} value={describeInfo.volume} />
-        <LabelValuePair label={"Volume Mode"} value={describeInfo.volumeMode} />
-      </Box>
+      <div id="pvc-describe-summary-content">
+        <HeaderSection title={"Summary"} />
+        <Box sx={{ ...twoColCssGridLayoutConfig }}>
+          <LabelValuePair label={"Name"} value={describeInfo.name} />
+          <LabelValuePair label={"Namespace"} value={describeInfo.namespace} />
+          <LabelValuePair label={"Capacity"} value={describeInfo.capacity} />
+          <LabelValuePair label={"Status"} value={describeInfo.status} />
+          <LabelValuePair
+            label={"Storage Class"}
+            value={describeInfo.storageClass}
+          />
+          <LabelValuePair
+            label={"Access Modes"}
+            value={describeInfo.accessModes.join(", ")}
+          />
+          <LabelValuePair
+            label={"Finalizers"}
+            value={describeInfo.finalizers.join(", ")}
+          />
+          <LabelValuePair label={"Volume"} value={describeInfo.volume} />
+          <LabelValuePair
+            label={"Volume Mode"}
+            value={describeInfo.volumeMode}
+          />
+        </Box>
+      </div>
     </Fragment>
   );
 };
@@ -104,16 +109,18 @@ const PVCDescribeAnnotations = ({
 }: IPVCDescribeAnnotationsProps) => {
   return (
     <Fragment>
-      <HeaderSection title={"Annotations"} />
-      <Box>
-        {annotations.map((annotation, index) => (
-          <Chip
-            style={{ margin: "0.5%" }}
-            label={`${annotation.key}: ${annotation.value}`}
-            key={index}
-          />
-        ))}
-      </Box>
+      <div id="pvc-describe-annotations-content">
+        <HeaderSection title={"Annotations"} />
+        <Box>
+          {annotations.map((annotation, index) => (
+            <Chip
+              style={{ margin: "0.5%" }}
+              label={`${annotation.key}: ${annotation.value}`}
+              key={index}
+            />
+          ))}
+        </Box>
+      </div>
     </Fragment>
   );
 };
@@ -121,16 +128,18 @@ const PVCDescribeAnnotations = ({
 const PVCDescribeLabels = ({ labels }: IPVCDescribeLabelsProps) => {
   return (
     <Fragment>
-      <HeaderSection title={"Labels"} />
-      <Box>
-        {labels.map((label, index) => (
-          <Chip
-            style={{ margin: "0.5%" }}
-            label={`${label.key}: ${label.value}`}
-            key={index}
-          />
-        ))}
-      </Box>
+      <div id="pvc-describe-labels-content">
+        <HeaderSection title={"Labels"} />
+        <Box>
+          {labels.map((label, index) => (
+            <Chip
+              style={{ margin: "0.5%" }}
+              label={`${label.key}: ${label.value}`}
+              key={index}
+            />
+          ))}
+        </Box>
+      </div>
     </Fragment>
   );
 };
diff --git a/web-app/tests/operator/tenant/test-1/tenant-test-1.ts b/web-app/tests/operator/tenant/test-1/tenant-test-1.ts
index 6c764dad603..647a45de9aa 100644
--- a/web-app/tests/operator/tenant/test-1/tenant-test-1.ts
+++ b/web-app/tests/operator/tenant/test-1/tenant-test-1.ts
@@ -27,7 +27,6 @@ import {
 
 fixture("For user with default permissions").page("http://localhost:9090");
 
-// Test 1
 test("Create Tenant and List Tenants", async (t) => {
   const tenantName = `tenant-${Math.floor(Math.random() * 10000)}`;
   await loginToOperator();
@@ -35,7 +34,6 @@ test("Create Tenant and List Tenants", async (t) => {
   await deleteTenant(tenantName);
 });
 
-// Test 3
 test("Test describe section for PODs in new tenant", async (t) => {
   const tenantName = "myminio";
   await loginToOperator();
@@ -46,6 +44,7 @@ const testPODDescribe = async (tenantName: string) => {
   await goToPodInTenant(tenantName);
   await goToPodSection(1);
   await checkPodDescribeHasSections();
+  await checkRendersPodDecribeTabContents();
 };
 
 const checkPodDescribeHasSections = async () => {
@@ -66,7 +65,26 @@ const checkPodDescribeHasSections = async () => {
     .ok();
 };
 
-// Test 4
+const checkRendersPodDecribeTabContents = async () => {
+  await checkRendersTabContentOnClick("#pod-describe-summary");
+  await checkRendersTabContentOnClick("#pod-describe-annotations");
+  await checkRendersTabContentOnClick("#pod-describe-labels");
+  await checkRendersTabContentOnClick("#pod-describe-conditions");
+  await checkRendersTabContentOnClick("#pod-describe-tolerations");
+  await checkRendersTabContentOnClick("#pod-describe-volumes");
+  await checkRendersTabContentOnClick("#pod-describe-containers");
+};
+
+const checkRendersTabContentOnClick = async (tabSection: string) => {
+  //  expects tab content id to be like `<tab-id>-content`
+  const contentId = tabSection + "-content";
+  await t
+    .click(tabSection)
+    .expect(Selector(contentId).exists)
+    .ok(contentId + " not found")
+    .wait(100);
+};
+
 test("Test describe section for PVCs in new tenant", async (t) => {
   const tenantName = `myminio`;
   await loginToOperator();
@@ -77,6 +95,13 @@ const testPvcDescribe = async (tenantName: string) => {
   await goToPvcInTenant(tenantName);
   await goToPvcSection(1);
   await checkPvcDescribeHasSections();
+  await checkRendersPvcDecribeTabContents();
+};
+
+const checkRendersPvcDecribeTabContents = async () => {
+  await checkRendersTabContentOnClick("#pvc-describe-summary");
+  await checkRendersTabContentOnClick("#pvc-describe-annotations");
+  await checkRendersTabContentOnClick("#pvc-describe-labels");
 };
 
 const checkPvcDescribeHasSections = async () => {