From 7900f9f89c6a37928df9ea1ae473e526883d6d43 Mon Sep 17 00:00:00 2001
From: Vladimir <sleuths.slews0s@icloud.com>
Date: Fri, 31 May 2024 21:33:31 +0200
Subject: [PATCH] feat(ui): render tests in a tree (#5807)

---
 packages/ui/client/auto-imports.d.ts          |  1 +
 packages/ui/client/components.d.ts            |  2 +-
 packages/ui/client/components/FileDetails.vue |  4 +
 packages/ui/client/components/IconAction.vue  | 15 ++++
 packages/ui/client/components/Navigation.vue  | 34 ++++++++-
 packages/ui/client/components/Suites.vue      | 45 -----------
 packages/ui/client/components/TaskItem.vue    | 74 ++++++++++++++-----
 packages/ui/client/components/TaskTree.vue    | 46 ++++++++++--
 packages/ui/client/components/TasksList.vue   | 11 +++
 packages/ui/client/composables/navigation.ts  |  1 +
 packages/ui/client/pages/index.vue            |  9 +--
 packages/ui/client/utils/task.ts              | 14 ++++
 packages/ui/vite.config.ts                    | 16 ++--
 test/ui/test/html-report.spec.ts              |  9 ++-
 test/ui/test/ui.spec.ts                       | 13 +++-
 15 files changed, 200 insertions(+), 94 deletions(-)
 create mode 100644 packages/ui/client/components/IconAction.vue
 delete mode 100644 packages/ui/client/components/Suites.vue

diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index 1ae5d56efcd3..f2cbcae93687 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -89,6 +89,7 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const openInEditor: typeof import('./composables/error')['openInEditor']
+  const openedTreeItems: typeof import('./composables/navigation')['openedTreeItems']
   const params: typeof import('./composables/params')['params']
   const parseError: typeof import('./composables/error')['parseError']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
diff --git a/packages/ui/client/components.d.ts b/packages/ui/client/components.d.ts
index 2cbf34ccdfa9..b80951f9c47f 100644
--- a/packages/ui/client/components.d.ts
+++ b/packages/ui/client/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     DetailsPanel: typeof import('./components/DetailsPanel.vue')['default']
     ErrorEntry: typeof import('./components/dashboard/ErrorEntry.vue')['default']
     FileDetails: typeof import('./components/FileDetails.vue')['default']
+    IconAction: typeof import('./components/IconAction.vue')['default']
     IconButton: typeof import('./components/IconButton.vue')['default']
     Modal: typeof import('./components/Modal.vue')['default']
     ModuleTransformResultView: typeof import('./components/ModuleTransformResultView.vue')['default']
@@ -23,7 +24,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StatusIcon: typeof import('./components/StatusIcon.vue')['default']
-    Suites: typeof import('./components/Suites.vue')['default']
     TaskItem: typeof import('./components/TaskItem.vue')['default']
     TasksList: typeof import('./components/TasksList.vue')['default']
     TaskTree: typeof import('./components/TaskTree.vue')['default']
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 1bbe4a9ef286..653d97db7c9a 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -5,6 +5,7 @@ import type { Params } from '~/composables/params'
 import { viewMode } from '~/composables/params'
 import type { ModuleGraph } from '~/composables/module-graph'
 import { getModuleGraph } from '~/composables/module-graph'
+import { getProjectNameColor } from '~/utils/task';
 
 const data = ref<ModuleGraphData>({ externalized: [], graph: {}, inlined: [] })
 const graph = ref<ModuleGraph>({ nodes: [], links: [] })
@@ -49,6 +50,9 @@ function onDraft(value: boolean) {
     <div>
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <StatusIcon :task="current" />
+        <div font-light op-50 text-sm :style="{ color: getProjectNameColor(current?.file.projectName) }">
+          [{{ current?.file.projectName || '' }}]
+        </div>
         <div flex-1 font-light op-50 ws-nowrap truncate text-sm>
           {{ current?.filepath }}
         </div>
diff --git a/packages/ui/client/components/IconAction.vue b/packages/ui/client/components/IconAction.vue
new file mode 100644
index 000000000000..9d3243332907
--- /dev/null
+++ b/packages/ui/client/components/IconAction.vue
@@ -0,0 +1,15 @@
+<script setup type="ts">
+defineProps({
+  icon: String,
+})
+</script>
+
+<template>
+  <div 
+    bg="gray-200" 
+    rounded-1 
+    p-0.5
+  >
+    <div :class="icon" op50></div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index 489cad5e3c69..95070726a8ec 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -16,6 +16,7 @@ import { client, findById } from '../composables/client'
 import { isDark, toggleDark } from '~/composables'
 import { files, isReport, runAll } from '~/composables/client'
 import { activeFileId } from '~/composables/params'
+import { openedTreeItems } from '~/composables/navigation'
 
 const failedSnapshot = computed(() => files.value && hasFailedSnapshot(files.value))
 function updateSnapshot() {
@@ -25,8 +26,8 @@ function updateSnapshot() {
 const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
 
 function onItemClick(task: Task) {
-  activeFileId.value = task.id
-  currentModule.value = findById(task.id)
+  activeFileId.value = task.file.id
+  currentModule.value = findById(task.file.id)
   showDashboard(false)
 }
 
@@ -41,14 +42,41 @@ async function onRunAll(files?: File[]) {
   }
   await runAll(files)
 }
+
+function collapseTests() {
+  openedTreeItems.value = []
+}
+
+function expandTests() {
+  files.value.forEach(file => {
+    if (!openedTreeItems.value.includes(file.id)) {
+      openedTreeItems.value.push(file.id)
+    }
+  })
+}
 </script>
 
 <template>
-  <TasksList border="r base" :tasks="files" :on-item-click="onItemClick" :group-by-type="true" @run="onRunAll">
+  <!-- TODO: have test tree so the folders are also nested: test -> filename -> suite -> test -->
+  <TasksList border="r base" :tasks="files" :on-item-click="onItemClick" :group-by-type="true" @run="onRunAll" :nested="true">
     <template #header="{ filteredTests }">
       <img w-6 h-6 src="/favicon.svg" alt="Vitest logo">
       <span font-light text-sm flex-1>Vitest</span>
       <div class="flex text-lg">
+        <IconButton 
+          v-show="openedTreeItems.length > 0"
+          v-tooltip.bottom="'Collapse tests'"
+          title="Collapse tests"
+          icon="i-carbon:collapse-all" 
+          @click="collapseTests()"
+        />
+        <IconButton 
+          v-show="openedTreeItems.length === 0"
+          v-tooltip.bottom="'Expand tests'"
+          title="Expand tests"
+          icon="i-carbon:expand-all" 
+          @click="expandTests()"
+        />
         <IconButton
           v-show="(coverageConfigured && !coverageEnabled) || !dashboardVisible"
           v-tooltip.bottom="'Dashboard'"
diff --git a/packages/ui/client/components/Suites.vue b/packages/ui/client/components/Suites.vue
deleted file mode 100644
index c9a1d8038194..000000000000
--- a/packages/ui/client/components/Suites.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { hasFailedSnapshot } from '@vitest/ws-client'
-import { coverageEnabled, disableCoverage } from '../composables/navigation'
-import { client, current, isReport, runCurrent } from '~/composables/client'
-
-const name = computed(() => current.value?.name.split(/\//g).pop())
-
-const failedSnapshot = computed(() => current.value?.tasks && hasFailedSnapshot(current.value?.tasks))
-function updateSnapshot() {
-  return current.value && client.rpc.updateSnapshot(current.value)
-}
-async function onRunCurrent() {
-  if (coverageEnabled.value) {
-    disableCoverage.value = true
-    await nextTick()
-  }
-  await runCurrent()
-}
-</script>
-
-<template>
-  <div v-if="current" h-full>
-    <TasksList :tasks="current.tasks" :nested="true">
-      <template #header>
-        <StatusIcon mx-1 :task="current" />
-        <div v-if="current.type === 'suite' && current.meta.typecheck" i-logos:typescript-icon flex-shrink-0 mr-1 />
-        <span data-testid="filenames" font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
-        <div class="flex text-lg">
-          <IconButton
-            v-if="(failedSnapshot && !isReport)"
-            v-tooltip.bottom="`Update failed snapshot(s) of ${current.name}`"
-            icon="i-carbon-result-old"
-            @click="updateSnapshot()"
-          />
-          <IconButton
-            v-if="!isReport"
-            v-tooltip.bottom="'Rerun file'"
-            icon="i-carbon-play"
-            @click="onRunCurrent()"
-          />
-        </div>
-      </template>
-    </TasksList>
-  </div>
-</template>
diff --git a/packages/ui/client/components/TaskItem.vue b/packages/ui/client/components/TaskItem.vue
index f9cc9937e823..e718ddb1795d 100644
--- a/packages/ui/client/components/TaskItem.vue
+++ b/packages/ui/client/components/TaskItem.vue
@@ -1,29 +1,25 @@
 <script setup lang="ts">
 import type { Task } from 'vitest'
+import { getProjectNameColor } from '~/utils/task';
+import { activeFileId } from '~/composables/params';
+import { isReport } from '~/constants';
 
 const props = defineProps<{
   task: Task
+  opened: boolean
+  failedSnapshot: boolean
+}>()
+
+const emit = defineEmits<{
+  run: []
+  preview: []
+  fixSnapshot: [],
 }>()
 
 const duration = computed(() => {
   const { result } = props.task
   return result && Math.round(result.duration || 0)
 })
-
-function getProjectNameColor(name: string | undefined) {
-  if (!name)
-    return ''
-  const index = name.split('').reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
-  const colors = [
-    'blue',
-    'yellow',
-    'cyan',
-    'green',
-    'magenta',
-  ]
-  return colors[index % colors.length]
-}
-
 </script>
 
 <template>
@@ -35,13 +31,20 @@ function getProjectNameColor(name: string | undefined) {
     border-rounded
     cursor-pointer
     hover="bg-active"
+    class="item-wrapper"
+    :aria-label="task.name"
+    :data-current="activeFileId === task.id"
   >
+    <div v-if="task.type === 'suite'" pr-1>
+      <div v-if="opened" i-carbon-chevron-down op20 />
+      <div v-else i-carbon-chevron-right op20 />
+    </div>
     <StatusIcon :task="task" mr-2 />
     <div v-if="task.type === 'suite' && task.meta.typecheck" i-logos:typescript-icon flex-shrink-0 mr-2 />
-    <div flex items-end gap-2 :text="task?.result?.state === 'fail' ? 'red-500' : ''">
+    <div flex items-end gap-2 :text="task?.result?.state === 'fail' ? 'red-500' : ''" overflow-hidden>
       <span text-sm truncate font-light>
         <!-- only show [] in files view -->
-        <span v-if="task.filepath && task.file.projectName" :style="{ color: getProjectNameColor(task.file.projectName) }">
+        <span v-if="'filepath' in task && task.projectName" :style="{ color: getProjectNameColor(task.file.projectName) }">
           [{{ task.file.projectName }}]
         </span>
         {{ task.name }}
@@ -50,5 +53,42 @@ function getProjectNameColor(name: string | undefined) {
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>
+    <div v-if="task.type === 'suite' && 'filepath' in task" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+      <IconAction
+        v-if="!isReport && failedSnapshot"
+        v-tooltip.bottom="'Fix failed snapshot(s)'"
+        data-testid="btn-fix-snapshot"
+        title="Fix failed snapshot(s)"
+        icon="i-carbon-result-old"
+        @click.prevent.stop="emit('fixSnapshot')"
+      />
+      <IconAction 
+        v-tooltip.bottom="'Open test details'"
+        data-testid="btn-open-details"
+        title="Open test details"
+        icon="i-carbon-intrusion-prevention"
+        @click.prevent.stop="emit('preview')"
+      />
+      <IconAction
+        v-if="!isReport"
+        v-tooltip.bottom="'Run current test'"
+        data-testid="btn-run-test"
+        title="Run current test"
+        icon="i-carbon-play-filled-alt"
+        text="green-500"
+        @click.prevent.stop="emit('run')"
+      />
+    </div>
   </div>
 </template>
+
+<style scoped>
+.test-actions {
+  display: none;
+}
+
+.item-wrapper:hover .test-actions,
+.item-wrapper[data-current="true"] .test-actions {
+  display: flex;
+}
+</style>
diff --git a/packages/ui/client/components/TaskTree.vue b/packages/ui/client/components/TaskTree.vue
index a8608c200161..229597c78c61 100644
--- a/packages/ui/client/components/TaskTree.vue
+++ b/packages/ui/client/components/TaskTree.vue
@@ -1,32 +1,68 @@
 <script setup lang="ts">
 import type { Task } from 'vitest'
+import { nextTick } from 'vue'
+import { runFiles, client } from '~/composables/client';
 import { caseInsensitiveMatch } from '~/utils/task'
+import { openedTreeItems, coverageEnabled } from '~/composables/navigation';
 
 defineOptions({ inheritAttrs: false })
 
-const { task, indent = 0, nested = false, search, onItemClick } = defineProps<{
+// TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
+const { task, indent = 0, nested = false, search, onItemClick, opened = false } = defineProps<{
   task: Task
+  failedSnapshot: boolean
   indent?: number
+  opened?: boolean
   nested?: boolean
   search?: string
   onItemClick?: (task: Task) => void
 }>()
+
+const isOpened = computed(() => opened || openedTreeItems.value.includes(task.id))
+
+function toggleOpen() {
+  if (isOpened.value) {
+    const tasksIds = 'tasks' in task ? task.tasks.map(t => t.id) : []
+    openedTreeItems.value = openedTreeItems.value.filter(id => id !== task.id && !tasksIds.includes(id))
+  } else {
+    openedTreeItems.value = [...openedTreeItems.value, task.id]
+  }
+}
+
+async function onRun() {
+  onItemClick?.(task)
+  if (coverageEnabled.value) {
+    disableCoverage.value = true
+    await nextTick()
+  }
+  await runFiles([task.file])
+}
+
+function updateSnapshot() {
+  return client.rpc.updateSnapshot(task)
+}
 </script>
 
 <template>
   <!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword  -->
   <!-- v-if = keepStructure ||  (!search || caseInsensitiveMatch(task.name, search)) -->
   <TaskItem
-    v-if="!nested || !search || caseInsensitiveMatch(task.name, search)"
+    v-if="opened || !nested || !search || caseInsensitiveMatch(task.name, search)"
     v-bind="$attrs"
     :task="task"
-    :style="{ paddingLeft: `${indent * 0.75 + 1}rem` }"
-    @click="onItemClick && onItemClick(task)"
+    :style="{ paddingLeft: indent ? `${indent * 0.75 + (task.type === 'suite' ? 0.50 : 1.75)}rem` : '1rem' }"
+    :opened="isOpened && task.type === 'suite' && task.tasks.length"
+    :failed-snapshot="failedSnapshot"
+    @click="toggleOpen()"
+    @run="onRun()"
+    @fix-snapshot="updateSnapshot()"
+    @preview="onItemClick?.(task)"
   />
-  <div v-if="nested && task.type === 'suite' && task.tasks.length">
+  <div v-if="nested && task.type === 'suite' && task.tasks.length" v-show="isOpened">
     <TaskTree
       v-for="suite in task.tasks"
       :key="suite.id"
+      :failed-snapshot="false"
       :task="suite"
       :nested="nested"
       :indent="indent + 1"
diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
index 53481ff3f970..f4249bc45f4b 100644
--- a/packages/ui/client/components/TasksList.vue
+++ b/packages/ui/client/components/TasksList.vue
@@ -4,6 +4,7 @@ import type { File, Task } from 'vitest'
 import { findById, testRunState } from '~/composables/client'
 import { activeFileId } from '~/composables/params'
 import { caseInsensitiveMatch, isSuite } from '~/utils/task'
+import { hasFailedSnapshot } from '@vitest/ws-client'
 
 defineOptions({ inheritAttrs: false })
 
@@ -125,6 +126,8 @@ function matchTasks(tasks: Task[], search: string): boolean {
             :task="task"
             :nested="nested"
             :search="search"
+            :opened="isFiltered"
+            :failed-snapshot="hasFailedSnapshot(task)"
             :class="activeFileId === task.id ? 'bg-active' : ''"
             :on-item-click="onItemClick"
           />
@@ -141,6 +144,8 @@ function matchTasks(tasks: Task[], search: string): boolean {
             :task="task"
             :nested="nested"
             :search="search"
+            :opened="isFiltered"
+            :failed-snapshot="hasFailedSnapshot(task)"
             :class="activeFileId === task.id ? 'bg-active' : ''"
             :on-item-click="onItemClick"
           />
@@ -156,6 +161,8 @@ function matchTasks(tasks: Task[], search: string): boolean {
             :key="task.id"
             :task="task"
             :nested="nested"
+            :opened="isFiltered"
+            :failed-snapshot="hasFailedSnapshot(task)"
             :search="search"
             :class="activeFileId === task.id ? 'bg-active' : ''"
             :on-item-click="onItemClick"
@@ -171,7 +178,9 @@ function matchTasks(tasks: Task[], search: string): boolean {
             v-for="task in skipped"
             :key="task.id"
             :task="task"
+            :opened="isFiltered"
             :nested="nested"
+            :failed-snapshot="hasFailedSnapshot(task)"
             :search="search"
             :class="activeFileId === task.id ? 'bg-active' : ''"
             :on-item-click="onItemClick"
@@ -186,6 +195,8 @@ function matchTasks(tasks: Task[], search: string): boolean {
           :key="task.id"
           :task="task"
           :nested="nested"
+          :opened="isFiltered"
+          :failed-snapshot="hasFailedSnapshot(task)"
           :search="search"
           :class="activeFileId === task.id ? 'bg-active' : ''"
           :on-item-click="onItemClick"
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 1054c1790abc..98607508c209 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -12,6 +12,7 @@ export const coverageEnabled = computed(() => {
   return coverageConfigured.value
     && coverage.value.reporter.map(([reporterName]) => reporterName).includes('html')
 })
+export const openedTreeItems = useLocalStorage<string[]>('vitest-ui_task-tree-opened', [])
 // TODO
 // For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report.
 // Handling other cases seems difficult, so this limitation is mentioned in the documentation for now.
diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue
index 341fa639591a..df0f8fdef819 100644
--- a/packages/ui/client/pages/index.vue
+++ b/packages/ui/client/pages/index.vue
@@ -44,14 +44,7 @@ function resizeMain() {
         <transition>
           <Dashboard v-if="dashboardVisible" key="summary" />
           <Coverage v-else-if="coverageVisible" key="coverage" :src="coverageUrl" />
-          <Splitpanes v-else key="detail" @resized="onModuleResized">
-            <Pane :size="detailSizes[0]">
-              <Suites />
-            </Pane>
-            <Pane :size="detailSizes[1]">
-              <FileDetails />
-            </Pane>
-          </Splitpanes>
+          <FileDetails v-else />
         </transition>
       </Pane>
     </Splitpanes>
diff --git a/packages/ui/client/utils/task.ts b/packages/ui/client/utils/task.ts
index 4e2b59bab666..ec0d23b08925 100644
--- a/packages/ui/client/utils/task.ts
+++ b/packages/ui/client/utils/task.ts
@@ -9,3 +9,17 @@ export function caseInsensitiveMatch(target: string, str2: string) {
     return false
   return target.toLowerCase().includes(str2.toLowerCase())
 }
+
+export function getProjectNameColor(name: string | undefined) {
+  if (!name)
+    return ''
+  const index = name.split('').reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
+  const colors = [
+    'blue',
+    'yellow',
+    'cyan',
+    'green',
+    'magenta',
+  ]
+  return colors[index % colors.length]
+}
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index d0a1bfeadd92..ec2bf955eede 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -12,7 +12,7 @@ import { presetAttributify, presetIcons, presetUno } from 'unocss'
 // for debug:
 // open a static file serve to share the report json
 // and ui using the link to load the report json data
-const debugLink = 'http://127.0.0.1:4173/__vitest__'
+// const debugLink = 'http://127.0.0.1:4173/__vitest__'
 
 export const config: UserConfig = {
   root: __dirname,
@@ -71,13 +71,13 @@ export const config: UserConfig = {
       ],
       injectAtEnd: true,
     }),
-    {
-      name: 'debug-html-report',
-      apply: 'serve',
-      transformIndexHtml(html) {
-        return html.replace('<!-- !LOAD_METADATA! -->', `<script>window.METADATA_PATH="${debugLink}/html.meta.json.gz"</script>`)
-      },
-    },
+    // {
+    //   name: 'debug-html-report',
+    //   apply: 'serve',
+    //   transformIndexHtml(html) {
+    //     return html.replace('<!-- !LOAD_METADATA! -->', `<script>window.METADATA_PATH="${debugLink}/html.meta.json.gz"</script>`)
+    //   },
+    // },
   ],
   build: {
     outDir: './dist/client',
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
index b7b732460684..4f9e22061d64 100644
--- a/test/ui/test/html-report.spec.ts
+++ b/test/ui/test/html-report.spec.ts
@@ -44,9 +44,10 @@ test.describe('html report', () => {
     await expect(page.getByTestId('unhandled-errors-details')).toContainText('Unknown Error: 1')
 
     // report
-    await page.getByTestId('details-panel').getByText('sample.test.ts').click()
+    const sample = page.getByTestId('details-panel').getByLabel('sample.test.ts')
+    await sample.hover()
+    await sample.getByTestId('btn-open-details').click()
     await page.getByText('All tests passed in this file').click()
-    await expect(page.getByTestId('filenames')).toContainText('sample.test.ts')
 
     // graph tab
     await page.getByTestId('btn-graph').click()
@@ -67,7 +68,9 @@ test.describe('html report', () => {
 
   test('error', async ({ page }) => {
     await page.goto(pageUrl)
-    await page.getByText('fixtures/error.test.ts').click()
+    const sample = page.getByTestId('details-panel').getByLabel('fixtures/error.test.ts')
+    await sample.hover()
+    await sample.getByTestId('btn-open-details').click()
     await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
   })
 })
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index 1acb52c5362d..a01150aa05e1 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -49,9 +49,10 @@ test.describe('ui', () => {
     await expect(page.getByTestId('unhandled-errors-details')).toContainText('Unknown Error: 1')
 
     // report
-    await page.getByTestId('details-panel').getByText('sample.test.ts').click()
+    const sample = page.getByTestId('details-panel').getByLabel('sample.test.ts')
+    await sample.hover()
+    await sample.getByTestId('btn-open-details').click()
     await page.getByText('All tests passed in this file').click()
-    await expect(page.getByTestId('filenames')).toContainText('sample.test.ts')
 
     // graph tab
     await page.getByTestId('btn-graph').click()
@@ -72,7 +73,9 @@ test.describe('ui', () => {
 
   test('console', async ({ page }) => {
     await page.goto(pageUrl)
-    await page.getByText('fixtures/console.test.ts').click()
+    const item = page.getByLabel('fixtures/console.test.ts')
+    await item.hover()
+    await item.getByTestId('btn-open-details').click()
     await page.getByTestId('btn-console').click()
     await page.getByText('/(?<char>\\w)/').click()
 
@@ -82,7 +85,9 @@ test.describe('ui', () => {
 
   test('error', async ({ page }) => {
     await page.goto(pageUrl)
-    await page.getByText('fixtures/error.test.ts').click()
+    const item = page.getByLabel('fixtures/error.test.ts')
+    await item.hover()
+    await item.getByTestId('btn-open-details').click()
     await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
   })