feat(kiali): resources card test coverage (#1821)

Increase resources card test coverage
janus-idp · Jun 20, 2024 · 4090fc2 · 4090fc2
1 parent 282a6b3
commit 4090fc2
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 8 deletions.
diff --git a/plugins/kiali/src/components/Health/HealthIndicator.tsx b/plugins/kiali/src/components/Health/HealthIndicator.tsx
@@ -34,7 +34,7 @@ export const HealthIndicator: React.FC<HealthIndicatorProps> = (
         position={PopoverPosition.auto}
         className={healthIndicatorStyle}
       >
-        {createTooltipIcon(icon)}
+        {createTooltipIcon(icon, 'health')}
       </Tooltip>
     );
   }

diff --git a/plugins/kiali/src/config/KialiIcon.tsx b/plugins/kiali/src/config/KialiIcon.tsx
@@ -202,8 +202,8 @@ Object.keys(KialiIcon).forEach(key => {
 // createTooltipIcon wraps the icon in a span element. Tooltip child elements that are
 // SVGs (icons) need to be wrapped in something to avoid the tooltip from disappearing on refresh.
 // See: https://github.com/kiali/kiali/issues/3583 for more details.
-export function createTooltipIcon(icon: any) {
-  return <span>{icon}</span>;
+export function createTooltipIcon(icon: any, dataTest?: string) {
+  return <span data-test={dataTest}>{icon}</span>;
 }
 
 export const createIcon = (

diff --git a/plugins/kiali/src/dynamic/EntityKialiResourcesCard.tsx b/plugins/kiali/src/dynamic/EntityKialiResourcesCard.tsx
@@ -117,17 +117,17 @@ export const EntityKialiResourcesCard = () => {
       value={value}
       data-test="kiali-tabbed-card"
     >
-      <CardTab label="Workloads" value="workload">
+      <CardTab label="Workloads" value="workload" data-test="workloads-tab">
         <div style={tabStyle}>
           <WorkloadListPage view={DRAWER} entity={entity} />
         </div>
       </CardTab>
-      <CardTab label="Services" value="service" data-test="service-tab">
+      <CardTab label="Services" value="service" data-test="services-tab">
         <div style={tabStyle}>
           <ServiceListPage view={DRAWER} entity={entity} />
         </div>
       </CardTab>
-      <CardTab label="Applications" value="application">
+      <CardTab label="Applications" value="application" data-test="apps-tab">
         <div style={tabStyle}>
           <AppListPage view={DRAWER} entity={entity} />
         </div>

diff --git a/plugins/kiali/tests/entityResources.spec.ts b/plugins/kiali/tests/entityResources.spec.ts
@@ -17,23 +17,149 @@ test.describe('Entity resources', () => {
       page.locator('[data-test="kiali-tabbed-card"]');
     });
 
+    // List container is loaded
     test('Workloads content', async () => {
       expect(page.locator('[data-test="virtual-list"]')).toBeDefined();
     });
 
+    // Update time
+    test('Update since time', async () => {
+      await page
+        .getByRole('button')
+        .filter({ hasText: /Last 10m/ })
+        .click();
+      await page
+        .getByRole('option')
+        .filter({ hasText: /Last 1h/ })
+        .click();
+      expect(
+        page.getByRole('button').filter({ hasText: /Last 1h/ }),
+      ).toBeDefined();
+    });
+
+    // Validate columns
+    test('All columns are valid', async () => {
+      const columns = [
+        'HEALTH',
+        'NAME',
+        'NAMESPACE',
+        'TYPE',
+        'LABELS',
+        'DETAILS',
+      ];
+      const tableHead = page.locator('.MuiTableHead-root');
+      for (let i = 0; i < columns.length; i++) {
+        await expect(tableHead).toContainText(columns[i]);
+      }
+    });
+
+    // Validate health
+    test('heath for workload details', async () => {
+      const icon = page
+        .locator(
+          '[data-test="VirtualItem_ClusterKubernetes_Nsbookinfo_Deployment_details-v1"]',
+        )
+        .locator('[data-test="health"]');
+      await icon.hover({ force: true }).then(async () => {
+        const tooltip = await page.locator('[role="tooltip"]');
+        await expect(tooltip).toContainText(`Healthy`);
+        await expect(tooltip).toContainText(`details-v1: 1 / 1`);
+      });
+    });
+
+    // Validate tags
+    test('tags for workload details', async () => {
+      await page
+        .locator(
+          '[data-test="VirtualItem_ClusterKubernetes_Nsbookinfo_Deployment_details-v1"]',
+        )
+        .locator('.MuiChip-label')
+        .hover();
+      const tooltip = page.locator('.MuiTooltip-popper');
+      await expect(tooltip).toContainText(`app=details`);
+      await expect(tooltip).toContainText(`version=v1`);
+    });
+
+    // After click on a workload, the drawer is open
     test('Workloads Drawer', async () => {
       await page.locator('#drawer_bookinfo_details-v1').click();
       expect(page.locator('[data-test="drawer"]')).toBeDefined();
     });
 
+    // The drawer is closed
     test('Close drawer', async () => {
       await page.locator('#close_drawer').click();
-      expect(page.locator('[data-test="service-tab"]')).toBeDefined();
+      expect(page.locator('[data-test="services-tab"]')).toBeDefined();
     });
 
+    // The services tab is working
     test('Services tab', async () => {
-      await page.locator('[data-test="service-tab"]').click();
+      await page.locator('[data-test="services-tab"]').click();
+      expect(page.locator('#drawer_bookinfo_details')).toBeDefined();
+    });
+
+    // Check service Istio Configs
+    test('Service productpage istio config', async () => {
+      const productRow = page
+        .locator(
+          '[data-test="VirtualItem_ClusterKubernetes_Nsbookinfo_productpage"]',
+        )
+        .getByRole('gridcell');
+      expect(productRow.filter({ hasText: /bookinfo-gateway/ })).toBeDefined();
+      expect(productRow.locator('#pfbadge-G')).toBeDefined();
+      expect(productRow.filter({ hasText: /bookinfo/ })).toBeDefined();
+      expect(productRow.locator('#pfbadge-VS')).toBeDefined();
+    });
+
+    // Click in Service details
+    test('Service details for productpage', async () => {
+      await page
+        .locator(
+          '[data-test="VirtualItem_ClusterKubernetes_Nsbookinfo_productpage"]',
+        )
+        .locator('#drawer_bookinfo_productpage')
+        .click();
+      expect(page.locator('[data-test="drawer"]')).toBeDefined();
+      expect(page.locator('#ServiceDescriptionCard')).toBeDefined();
+      expect(page.locator('#pfbadge-S')).toBeDefined();
+    });
+
+    // Navigate to workload
+    test('Go to workload link', async () => {
+      await page.getByRole('link', { name: 'productpage-v1' }).click();
+      expect(page.locator('[data-test="drawer"]')).toBeDefined();
+      expect(page.locator('#pfbadge-W')).toBeDefined();
+      // Then, close the drawer
+      await page.locator('#close_drawer').click();
+      expect(page.locator('[data-test="services-tab"]')).toBeDefined();
+    });
+
+    // The apps tab is working
+    test('Applications tab', async () => {
+      await page.locator('[data-test="apps-tab"]').click();
       expect(page.locator('#drawer_bookinfo_details')).toBeDefined();
     });
+
+    // Applications details
+    test('Application details', async () => {
+      await page.locator('#drawer_travel-agency_travels').click();
+      expect(page.locator('[data-test="drawer"]')).toBeDefined();
+      expect(page.locator('#AppDescriptionCard')).toBeDefined();
+      expect(page.locator('#pfbadge-A')).toBeDefined();
+    });
+
+    // Applications details
+    test('Applicatoin istio details', async () => {
+      const productRow = page
+        .locator(
+          '[data-test="VirtualItem_ClusterKubernetes_Nsbookinfo_productpage"]',
+        )
+        .getByRole('gridcell');
+      expect(productRow.filter({ hasText: /bookinfo-gateway/ })).toBeDefined();
+      expect(productRow.locator('#pfbadge-G')).toBeDefined();
+      // Then, close the drawer
+      await page.locator('#close_drawer').click();
+      expect(page.locator('[data-test="services-tab"]')).toBeDefined();
+    });
   });
 });