feat(ui): implement filter for slow tests

Also highlight slow tests with yellow color for duration text

Author: DerYeger

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/explorer/Explorer.vue

@@ -242,6 +242,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 +344,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

@@ -41,6 +41,7 @@ export function runLoadFiles(
     failed: filter.failed,
     success: filter.success,
     skipped: filter.skipped,
+    slow: filter.slow,
     onlyTests: filter.onlyTests,
   })
 }

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

@@ -73,6 +73,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       },
     )
@@ -127,6 +128,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 +145,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 +163,7 @@ export class ExplorerTree {
       failed: filter.failed,
       success: filter.success,
       skipped: filter.skipped,
+      slow: filter.slow,
       onlyTests: filter.onlyTests,
     })
   }
@@ -176,6 +180,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
@@ -193,6 +198,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })
@@ -204,6 +210,7 @@ export class ExplorerTree {
         failed: filter.failed,
         success: filter.success,
         skipped: filter.skipped,
+        slow: filter.slow,
         onlyTests: filter.onlyTests,
       })
     })

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

@@ -40,6 +40,7 @@ export interface UITaskTreeNode extends TaskTreeNode {
   indent: number
   state?: TaskState
   duration?: number
+  slow?: boolean
 }
 
 export interface TestTreeNode extends UITaskTreeNode {
@@ -73,6 +74,7 @@ export interface Filter {
   failed: boolean
   success: boolean
   skipped: boolean
+  slow: boolean
   onlyTests: boolean
 }
 

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

@@ -8,7 +8,7 @@ import type {
   UITaskTreeNode,
 } from '~/composables/explorer/types'
 import { isTestCase } from '@vitest/runner/utils'
-import { client } from '~/composables/client'
+import { client, config } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
 import { openedTreeItemsSet } from '~/composables/explorer/state'
 import { getBadgeNameColor, isSuite as isTaskSuite } from '~/utils/task'
@@ -33,6 +33,20 @@ export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | Suite
   return node.type === 'file' || node.type === 'suite'
 }
 
+export function isSlowTestTask(task: Task) {
+  if (task.type !== 'test') {
+    return false
+  }
+
+  const duration = task.result?.duration
+  if (typeof duration !== 'number') {
+    return false
+  }
+
+  const treshold = config.value.slowTestThreshold
+  return typeof treshold === 'number' && duration > treshold
+}
+
 export function getSortedRootTasks(sort: SortUIType, tasks = explorerTree.root.tasks) {
   const sorted = [...tasks]
 
@@ -73,6 +87,7 @@ export function createOrUpdateFileNode(
     fileNode.state = file.result?.state
     fileNode.mode = file.mode
     fileNode.duration = typeof file.result?.duration === 'number' ? Math.round(file.result.duration) : undefined
+    fileNode.slow = false
     fileNode.collectDuration = file.collectDuration
     fileNode.setupDuration = file.setupDuration
     fileNode.environmentLoad = file.environmentLoad
@@ -93,6 +108,7 @@ export function createOrUpdateFileNode(
       typecheck: !!file.meta && 'typecheck' in file.meta,
       indent: 0,
       duration: typeof file.result?.duration === 'number' ? Math.round(file.result.duration) : undefined,
+      slow: false,
       filepath: file.filepath,
       projectName: file.projectName || '',
       projectNameColor: explorerTree.colors.get(file.projectName || '') || getBadgeNameColor(file.projectName),
@@ -169,6 +185,7 @@ export function createOrUpdateNode(
       taskNode.name = task.name
       taskNode.mode = task.mode
       taskNode.duration = duration
+      taskNode.slow = isSlowTestTask(task)
       taskNode.state = task.result?.state
     }
     else {
@@ -184,6 +201,7 @@ export function createOrUpdateNode(
           expanded: false,
           indent: node.indent + 1,
           duration,
+          slow: isSlowTestTask(task),
           state: task.result?.state,
         } as TestTreeNode
       }
@@ -202,6 +220,7 @@ export function createOrUpdateNode(
           tasks: [],
           indent: node.indent + 1,
           duration,
+          slow: false,
           state: task.result?.state,
         } as SuiteTreeNode
       }