feat: clickable dashboard numbers (#7406)

packages/ui/client/components/dashboard/TestsEntry.vue

@@ -1,10 +1,30 @@
 <script setup lang="ts">
 import { explorerTree } from '~/composables/explorer'
+import { filter } from '~/composables/explorer/state'
+
+function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
+  // Reset all filters first
+  filter.success = false
+  filter.failed = false
+  filter.skipped = false
+
+  if (type === 'total') {
+    return
+  }
+  // Then set the selected one
+  filter[type] = true
+}
 </script>
 
 <template>
   <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative>
-    <DashboardEntry text-green5 data-testid="pass-entry">
+    <DashboardEntry
+      text-green5
+      data-testid="pass-entry"
+      cursor-pointer
+      hover="op80"
+      @click="toggleFilter('success')"
+    >
       <template #header>
         Pass
       </template>
@@ -15,6 +35,9 @@ import { explorerTree } from '~/composables/explorer'
     <DashboardEntry
       :class="{ 'text-red5': explorerTree.summary.testsFailed, 'op50': !explorerTree.summary.testsFailed }"
       data-testid="fail-entry"
+      cursor-pointer
+      hover="op80"
+      @click="toggleFilter('failed')"
     >
       <template #header>
         Fail
@@ -25,7 +48,11 @@ import { explorerTree } from '~/composables/explorer'
     </DashboardEntry>
     <DashboardEntry
       v-if="explorerTree.summary.testsSkipped"
-      op50 data-testid="skipped-entry"
+      op50
+      data-testid="skipped-entry"
+      cursor-pointer
+      hover="op80"
+      @click="toggleFilter('skipped')"
     >
       <template #header>
         Skip
@@ -35,7 +62,8 @@ import { explorerTree } from '~/composables/explorer'
       </template>
     </DashboardEntry>
     <DashboardEntry
-      v-if="explorerTree.summary.testsTodo" op50
+      v-if="explorerTree.summary.testsTodo"
+      op50
       data-testid="todo-entry"
     >
       <template #header>
@@ -45,7 +73,13 @@ import { explorerTree } from '~/composables/explorer'
         {{ explorerTree.summary.testsTodo }}
       </template>
     </DashboardEntry>
-    <DashboardEntry :tail="true" data-testid="total-entry">
+    <DashboardEntry
+      :tail="true"
+      data-testid="total-entry"
+      cursor-pointer
+      hover="op80"
+      @click="toggleFilter('total')"
+    >
       <template #header>
         Total
       </template>

test/ui/test/ui.spec.ts

@@ -260,6 +260,35 @@ test.describe('ui', () => {
     await page.getByLabel('Run current test').click()
     await expect(page.getByText('All tests passed in this file')).toBeVisible()
   })
+
+  test('dashboard entries filter tests correctly', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    // Initial state should show all tests
+    await expect(page.getByTestId('pass-entry')).toBeVisible()
+    await expect(page.getByTestId('fail-entry')).toBeVisible()
+    await expect(page.getByTestId('total-entry')).toBeVisible()
+
+    // Click "Pass" entry and verify only passing tests are shown
+    await page.getByTestId('pass-entry').click()
+    await expect(page.getByLabel(/pass/i)).toBeChecked()
+
+    // Click "Fail" entry and verify only failing tests are shown
+    await page.getByTestId('fail-entry').click()
+    await expect(page.getByLabel(/fail/i)).toBeChecked()
+
+    // Click "Skip" entry if there are skipped tests
+    if (await page.getByTestId('skipped-entry').isVisible()) {
+      await page.getByTestId('skipped-entry').click()
+      await expect(page.getByLabel(/skip/i)).toBeChecked()
+    }
+
+    // Click "Total" entry to reset filters and show all tests again
+    await page.getByTestId('total-entry').click()
+    await expect(page.getByLabel(/pass/i)).not.toBeChecked()
+    await expect(page.getByLabel(/fail/i)).not.toBeChecked()
+    await expect(page.getByLabel(/skip/i)).not.toBeChecked()
+  })
 })
 
 test.describe('standalone', () => {