feat: adding e2e tests for DataTable (#188)

Co-authored-by: UncleGedd <42304551+UncleGedd@users.noreply.github.com>

ui/src/lib/components/k8s/DataTable/component.svelte

@@ -139,11 +139,13 @@
   <div class="table-container">
     <div class="table-content">
       <div class="table-header">
-        <span class="dark:text-white">{name}</span>
+        <span class="dark:text-white" data-testid="table-header">{name}</span>
         {#if isFiltering}
-          <span class="dark:text-gray-500 pl-2">(showing {$rows.length} of {$numResources})</span>
+          <span class="dark:text-gray-500 pl-2" data-testid="table-header-results">
+            (showing {$rows.length} of {$numResources})
+          </span>
         {:else}
-          <span class="dark:text-gray-500 pl-2">({$numResources})</span>
+          <span class="dark:text-gray-500 pl-2" data-testid="table-header-results">({$numResources})</span>
         {/if}
         <div class="relative group">
           <Information class="ml-2 w-4 h-4 text-gray-400" />
@@ -199,11 +201,13 @@
         <div class="flex-grow"></div>
         <div>
           {#if isNamespaced}
-            <select id="stream" bind:value={$namespace}>
-              <option value="">All Namespaces</option>
+            <select id="stream" bind:value={$namespace} data-testid="table-filter-namespace-select">
+              <option value="" data-testid="namespace-select-all">All Namespaces</option>
               <hr />
               {#each $namespaces as ns}
-                <option value={ns.table.name}>{ns.table.name}</option>
+                <option value={ns.table.name} data-testid={`namespace-select-${ns.table.name}`}>
+                  {ns.table.name}
+                </option>
               {/each}
             </select>
           {/if}

ui/src/lib/features/k8s/cluster-overview/component.svelte

@@ -206,7 +206,7 @@
     <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
       <div class="px-4 py-5 sm:p-6">
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Running Nodes</dt>
-        <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+        <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white" data-testid="node-count">
           {clusterData.totalNodes}
         </dd>
       </div>

ui/tests/navigation.spec.ts

@@ -14,9 +14,8 @@ test.describe('Navigation', async () => {
   test('Overview page', async ({ page }) => {
     await page.getByRole('link', { name: 'Overview' }).click()
 
-    const query = '1' // number of running nodes
-    const element = page.locator(`//dd[normalize-space(text())="${query}"]`)
-    await expect(element).toHaveText('1') // ensure exact match
+    const nodeCountEl = page.getByTestId(`node-count`)
+    await expect(nodeCountEl).toHaveText('1')
   })
 
   test.describe('navigates to Applications', async () => {

ui/tests/sse.spec.ts

@@ -4,13 +4,16 @@
 import k8s from '@kubernetes/client-node'
 import { expect, test } from '@playwright/test'
 
+// Annotate entire file as serial.
+test.describe.configure({ mode: 'serial' })
+
 async function deletePod(namespace: string, podName: string) {
   try {
     const kc = new k8s.KubeConfig()
     kc.loadFromDefault() // Load the kubeconfig file from default location
 
     const k8sApi = kc.makeApiClient(k8s.CoreV1Api)
-    await k8sApi.deleteNamespacedPod({ name: podName, namespace: namespace })
+    await k8sApi.deleteNamespacedPod({ name: podName, namespace: namespace, gracePeriodSeconds: 0 })
     console.log(`Pod ${podName} deleted successfully`)
   } catch (err) {
     console.error(`Failed to delete pod ${podName}:`, err)

ui/tests/table.spec.ts

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2024-Present The UDS Authors
+
+import { expect, test } from '@playwright/test'
+
+test.describe('DataTable', async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/workloads/pods')
+  })
+
+  test('filters rows when we click the namespace link in a row', async ({ page }) => {
+    await page.getByRole('button', { name: 'podinfo' }).click()
+
+    expect(await page.getByTestId('table-header-results').textContent()).toBe('(showing 1 of 7)')
+
+    await page.getByTestId('table-filter-namespace-select').selectOption({ label: 'All Namespaces' })
+
+    await page.getByRole('button', { name: 'kube-system' }).first().click()
+
+    expect(await page.getByTestId('table-header-results').textContent()).toBe('(showing 3 of 7)')
+  })
+
+  test('filters rows when we select the namespace from the drop down option', async ({ page }) => {
+    await page.getByTestId('table-filter-namespace-select').selectOption({ label: 'podinfo' })
+
+    expect(await page.getByTestId('table-header-results').textContent()).toBe('(showing 1 of 7)')
+
+    await page.getByTestId('table-filter-namespace-select').selectOption({ label: 'kube-system' })
+
+    expect(await page.getByTestId('table-header-results').textContent()).toBe('(showing 3 of 7)')
+  })
+})