feat(ui): implement filter for slow tests

packages/ui/client/components/FilterStatus.vue

@@ -16,7 +16,7 @@ function toggle() {
 
 <template>
   <label
-    class="font-light text-sm checkbox flex items-center py-1 text-sm w-full gap-y-1 mb-1px"
+    class="font-light text-sm checkbox flex items-center py-1 w-full gap-y-1 mb-1px"
     :class="disabled ? 'cursor-not-allowed op50' : 'cursor-pointer'"
     v-bind="$attrs"
     @click.prevent="toggle"
@@ -26,6 +26,7 @@ function toggle() {
         modelValue ? 'i-carbon:checkbox-checked-filled' : 'i-carbon:checkbox',
       ]"
       text-lg
+      flex-shrink-0
       aria-hidden="true"
     />
     <input
@@ -34,7 +35,7 @@ function toggle() {
       :disabled="disabled"
       sr-only
     >
-    <span flex-1 ms-2 select-none>{{ label }}</span>
+    <span flex-1 ms-2 select-none whitespace-nowrap>{{ label }}</span>
   </label>
 </template>
 

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

@@ -3,11 +3,12 @@ import { explorerTree } from '~/composables/explorer'
 import { filter } from '~/composables/explorer/state'
 import DashboardEntry from './DashboardEntry.vue'
 
-function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
+function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'slow' | 'total') {
   // Reset all filters first
   filter.success = false
   filter.failed = false
   filter.skipped = false
+  filter.slow = false
 
   if (type === 'total') {
     return
@@ -74,6 +75,21 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
         {{ explorerTree.summary.testsSkipped }}
       </template>
     </DashboardEntry>
+    <DashboardEntry
+      v-if="explorerTree.summary.testsSlow"
+      text-yellow5
+      data-testid="slow-entry"
+      cursor-pointer
+      hover="op80"
+      @click="toggleFilter('slow')"
+    >
+      <template #header>
+        Slow
+      </template>
+      <template #body>
+        {{ explorerTree.summary.testsSlow }}
+      </template>
+    </DashboardEntry>
     <DashboardEntry
       v-if="explorerTree.summary.testsTodo"
       op50

packages/ui/client/components/explorer/Explorer.vue

@@ -62,13 +62,21 @@ const filterHeaderClass = ref<string>('grid-col-span-2')
 
 const testExplorerRef = ref<HTMLElement | undefined>()
 useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
-  if (contentRect.width < 420) {
+  if (contentRect.width < 220) {
+    filterClass.value = 'grid-cols-1'
+    filterHeaderClass.value = 'grid-col-span-1'
+  }
+  else if (contentRect.width < 340) {
     filterClass.value = 'grid-cols-2'
     filterHeaderClass.value = 'grid-col-span-2'
   }
+  else if (contentRect.width < 540) {
+    filterClass.value = 'grid-cols-3'
+    filterHeaderClass.value = 'grid-col-span-3'
+  }
   else {
-    filterClass.value = 'grid-cols-4'
-    filterHeaderClass.value = 'grid-col-span-4'
+    filterClass.value = 'grid-cols-5'
+    filterHeaderClass.value = 'grid-col-span-5'
   }
 })
 </script>
@@ -242,6 +250,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
         <FilterStatus v-model="filter.success" label="Pass" />
         <FilterStatus v-model="filter.skipped" label="Skip" />
         <FilterStatus v-model="filter.onlyTests" label="Only Tests" />
+        <FilterStatus v-model="filter.slow" label="Slow" />
       </div>
     </div>
     <div class="scrolls" flex-auto py-1 @scroll.passive="hideAllPoppers">
@@ -343,6 +352,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
                 :project-name-color="item.projectNameColor ?? ''"
                 :state="item.state"
                 :duration="item.duration"
+                :slow="item.slow === true"
                 :opened="item.expanded"
                 :disable-task-location="!includeTaskLocation"
                 :class="selectedTest === item.id || (!selectedTest && activeFileId === item.id) ? 'bg-active' : ''"

packages/ui/client/components/explorer/ExplorerItem.vue

@@ -20,6 +20,7 @@ const {
   indent,
   name,
   duration,
+  slow,
   current,
   opened,
   expandable,
@@ -35,6 +36,7 @@ const {
   indent: number
   typecheck?: boolean
   duration?: number
+  slow?: boolean
   state?: TaskState
   current: boolean
   type: TaskTreeNodeType
@@ -220,7 +222,12 @@ const tagsBgGradient = computed(() => {
         </span>
         <span :text="state === 'fail' ? 'red-500' : ''" v-html="highlighted" />
       </span>
-      <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
+      <span
+        v-if="typeof duration === 'number'"
+        text="xs"
+        :class="slow ? 'text-yellow5 op80' : 'op20'"
+        style="white-space: nowrap"
+      >
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>

packages/ui/client/composables/explorer/collector.ts

@@ -20,6 +20,7 @@ import {
   createOrUpdateNodeTask,
   createOrUpdateSuiteTask,
   isRunningTestNode,
+  isSlowTestTask,
 } from '~/composables/explorer/utils'
 import { isSuite } from '~/utils/task'
 import { hasFailedSnapshot } from '../../../../vitest/src/utils/tasks'
@@ -41,6 +42,7 @@ export function runLoadFiles(
     failed: filter.failed,
     success: filter.success,
     skipped: filter.skipped,
+    slow: filter.slow,
     onlyTests: filter.onlyTests,
   })
 }
@@ -294,6 +296,7 @@ export function resetCollectorInfo(summary: CollectorInfo) {
   summary.testsSkipped = 0
   summary.testsTodo = 0
   summary.testsExpectedFail = 0
+  summary.testsSlow = 0
   summary.totalTests = 0
   summary.failedSnapshotEnabled = false
 }
@@ -321,6 +324,7 @@ function collectData(
     testsSkipped: 0,
     testsTodo: 0,
     testsExpectedFail: 0,
+    testsSlow: 0,
     totalTests: 0,
     failedSnapshot: false,
     failedSnapshotEnabled: false,
@@ -356,6 +360,7 @@ function collectData(
       ignored,
       todo,
       expectedFail,
+      slow,
     } = collectTests(f)
 
     data.totalTests += total
@@ -364,6 +369,7 @@ function collectData(
     data.testsSkipped += skipped
     data.testsTodo += todo
     data.testsExpectedFail += expectedFail
+    data.testsSlow += slow
     data.testsIgnore += ignored
   }
 
@@ -379,6 +385,7 @@ function collectData(
   summary.testsSuccess = data.testsSuccess
   summary.testsTodo = data.testsTodo
   summary.testsExpectedFail = data.testsExpectedFail
+  summary.testsSlow = data.testsSlow
   summary.testsIgnore = data.testsIgnore
   summary.testsSkipped = data.testsSkipped
   summary.totalTests = data.totalTests
@@ -394,11 +401,15 @@ function collectTests(file: File, search: SearchMatcher = () => true, filter?: F
     ignored: 0,
     todo: 0,
     expectedFail: 0,
+    slow: 0,
   } satisfies CollectFilteredTests
 
   for (const t of testsCollector(file)) {
     if (!filter || testMatcher(t, search, filter)) {
       data.total++
+      if (isSlowTestTask(t)) {
+        data.slow++
+      }
       if (t.result?.state === 'fail') {
         data.failed++
       }

packages/ui/client/composables/explorer/filter.ts

@@ -1,6 +1,6 @@
 import type { Task } from '@vitest/runner'
 import type { FileTreeNode, Filter, FilterResult, ParentTreeNode, SearchMatcher, UITaskTreeNode } from '~/composables/explorer/types'
-import { client, findById } from '~/composables/client'
+import { client, config, findById } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
 import { currentProjectName, filteredFiles, projectSort, uiEntries } from '~/composables/explorer/state'
 import {
@@ -220,6 +220,15 @@ function* filterParents(
 }
 
 function matchState(task: Task, filter: Filter) {
+  if (filter.slow) {
+    if (task.type === 'test') {
+      const threshold = config.value.slowTestThreshold
+      if (typeof threshold === 'number' && typeof task.result?.duration === 'number' && task.result.duration > threshold) {
+        return true
+      }
+    }
+  }
+
   if (filter.success || filter.failed) {
     if ('result' in task) {
       if (filter.success && task.result?.state === 'pass') {
@@ -245,7 +254,8 @@ function matchTask(
 ) {
   // search and filter will apply together
   if (search(task)) {
-    if (filter.success || filter.failed || filter.skipped) {
+    const hasStatusFilter = filter.success || filter.failed || filter.skipped || filter.slow
+    if (hasStatusFilter) {
       if (matchState(task, filter)) {
         return true
       }

packages/ui/client/composables/explorer/search.ts

@@ -62,6 +62,7 @@ export function useSearch(
     filter.failed = false
     filter.success = false
     filter.skipped = false
+    filter.slow = false
     filter.onlyTests = false
     if (focus) {
       searchBox.value?.focus()
@@ -94,6 +95,7 @@ export function useSearch(
     failedValue: boolean,
     successValue: boolean,
     skippedValue: boolean,
+    slowValue: boolean,
     onlyTestsValue: boolean,
     projectValue: string,
     projectSortValue: SortUIType,
@@ -106,6 +108,7 @@ export function useSearch(
     treeFilter.value.failed = failedValue
     treeFilter.value.success = successValue
     treeFilter.value.skipped = skippedValue
+    treeFilter.value.slow = slowValue
     treeFilter.value.onlyTests = onlyTestsValue
     treeFilter.value.project = projectValue
     treeFilter.value.projectSort = projectSortValue === 'default' ? undefined : projectSortValue
@@ -117,16 +120,18 @@ export function useSearch(
       filter.failed,
       filter.success,
       filter.skipped,
+      filter.slow,
       filter.onlyTests,
       currentProject.value,
       projectSort.value,
     ] as const,
-    ([search, failed, success, skipped, onlyTests, project, projectSort]) => {
+    ([search, failed, success, skipped, slow, onlyTests, project, projectSort]) => {
       updateFilterStorage(
         search,
         failed,
         success,
         skipped,
+        slow,
         onlyTests,
         project,
         projectSort,

packages/ui/client/composables/explorer/state.ts

@@ -24,6 +24,7 @@ export const treeFilter = useLocalStorage<TreeFilterState>(
     failed: false,
     success: false,
     skipped: false,
+    slow: false,
     onlyTests: false,
     search: '',
     project: ALL_PROJECTS,
@@ -92,6 +93,7 @@ export const filter = reactive<Filter>({
   failed: treeFilter.value.failed,
   success: treeFilter.value.success,
   skipped: treeFilter.value.skipped,
+  slow: treeFilter.value.slow,
   onlyTests: treeFilter.value.onlyTests,
 })
 export const isFilteredByStatus = computed(() => {
@@ -107,6 +109,10 @@ export const isFilteredByStatus = computed(() => {
     return true
   }
 
+  if (filter.slow) {
+    return true
+  }
+
   return false
 })
 export const filteredFiles = shallowRef<File[]>([])

packages/ui/client/composables/explorer/tree.ts

@@ -51,6 +51,7 @@ export class ExplorerTree {
       testsSkipped: 0,
       testsTodo: 0,
       testsExpectedFail: 0,
+      testsSlow: 0,
       totalTests: 0,
       failedSnapshot: false,
       failedSnapshotEnabled: false,
@@ -73,6 +74,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       },
     )
@@ -127,6 +129,7 @@ export class ExplorerTree {
             failed: filter.failed,
             success: filter.success,
             skipped: filter.skipped,
+            slow: filter.slow,
             onlyTests: filter.onlyTests,
           },
           end ? this.executionTime : performance.now() - this.startTime,
@@ -143,6 +146,7 @@ export class ExplorerTree {
           failed: filter.failed,
           success: filter.success,
           skipped: filter.skipped,
+          slow: filter.slow,
           onlyTests: filter.onlyTests,
         },
         end ? this.executionTime : performance.now() - this.startTime,
@@ -160,6 +164,7 @@ export class ExplorerTree {
       failed: filter.failed,
       success: filter.success,
       skipped: filter.skipped,
+      slow: filter.slow,
       onlyTests: filter.onlyTests,
     })
   }
@@ -176,6 +181,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
@@ -193,6 +199,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
@@ -204,6 +211,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })