fix(ui): keep the same tab open when clicking on different tests (#8599)

Author: sheremet-va

packages/ui/client/auto-imports.d.ts

@@ -11,6 +11,7 @@ declare global {
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const calcExternalLabels: typeof import('./composables/module-graph')['calcExternalLabels']
+  const clickOnTask: typeof import('./composables/navigation')['clickOnTask']
   const codemirrorRef: typeof import('./composables/codemirror')['codemirrorRef']
   const columnNumber: typeof import('./composables/params')['columnNumber']
   const computed: typeof import('vue')['computed']

packages/ui/client/components/Navigation.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { File } from 'vitest'
+import type { RunnerTestFile } from 'vitest'
 import { Tooltip as VueTooltip } from 'floating-vue'
 import { isDark, toggleDark } from '~/composables'
 import { client, isReport, runAll, runFiles } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer'
 import { initialized, shouldShowExpandAll } from '~/composables/explorer/state'
 import {
+  clickOnTask,
   coverageConfigured,
   coverageEnabled,
   coverageVisible,
   dashboardVisible,
   disableCoverage,
   showCoverage,
   showDashboard,
-  showReport,
 } from '~/composables/navigation'
 
 function updateSnapshot() {
@@ -22,7 +22,7 @@ function updateSnapshot() {
 
 const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
 
-async function onRunAll(files?: File[]) {
+async function onRunAll(files?: RunnerTestFile[]) {
   if (coverageEnabled.value) {
     disableCoverage.value = true
     await nextTick()
@@ -50,7 +50,7 @@ function expandTests() {
 
 <template>
   <!-- TODO: have test tree so the folders are also nested: test -> filename -> suite -> test -->
-  <Explorer border="r base" :on-item-click="showReport" :nested="true" @run="onRunAll">
+  <Explorer border="r base" :on-item-click="clickOnTask" :nested="true" @run="onRunAll">
     <template #header="{ filteredFiles }">
       <img w-6 h-6 src="/favicon.svg" alt="Vitest logo">
       <span font-light text-sm flex-1>Vitest</span>

packages/ui/client/components/views/ViewEditor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Task } from '@vitest/runner'
 import type CodeMirror from 'codemirror'
-import type { File, TestAnnotation, TestError } from 'vitest'
+import type { RunnerTestFile, TestAnnotation, TestError } from 'vitest'
 import { createTooltip, destroyTooltip } from 'floating-vue'
 import { getAttachmentUrl, sanitizeFilePath } from '~/composables/attachments'
 import { client, isReport } from '~/composables/client'
@@ -11,7 +11,7 @@ import { openInEditor } from '~/composables/error'
 import { columnNumber, lineNumber } from '~/composables/params'
 
 const props = defineProps<{
-  file?: File
+  file?: RunnerTestFile
 }>()
 
 const emit = defineEmits<{ (event: 'draft', value: boolean): void }>()

packages/ui/client/composables/codemirror.ts

@@ -67,7 +67,7 @@ export async function showTaskSource(task: Task) {
     file: task.file.id,
     line: task.location?.line ?? 0,
     view: 'editor',
-    test: null,
+    test: task.id,
     column: null,
   })
 }

packages/ui/client/composables/navigation.ts

@@ -111,14 +111,30 @@ export function navigateTo({ file, line, view, test, column }: Params) {
   showDashboard(false)
 }
 
-export function showReport(task: Task) {
-  navigateTo({
-    file: task.file.id,
-    test: task.type === 'test' ? task.id : null,
-    line: null,
-    view: null,
-    column: null,
-  })
+export function clickOnTask(task: Task) {
+  if (task.type === 'test') {
+    if (viewMode.value === 'editor') {
+      showTaskSource(task)
+    }
+    else {
+      navigateTo({
+        file: task.file.id,
+        line: null,
+        column: null,
+        view: viewMode.value,
+        test: task.id,
+      })
+    }
+  }
+  else {
+    navigateTo({
+      file: task.file.id,
+      test: null,
+      line: null,
+      view: viewMode.value,
+      column: null,
+    })
+  }
 }
 
 export function showCoverage() {