From 7ec298eb37f314a61ac7e747a497c9225e26e841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Thu, 27 Jun 2024 14:47:31 +0200
Subject: [PATCH] feat(ui): add action to explorer item to show the test/suite
 line in the source code tab (#5948)

Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>
---
 docs/config/index.md                          |  4 +
 packages/ui/client/auto-imports.d.ts          |  5 ++
 packages/ui/client/components.d.ts            |  2 +-
 ...CodeMirror.vue => CodeMirrorContainer.vue} | 16 ++--
 packages/ui/client/components/FileDetails.vue |  1 -
 .../components/ModuleTransformResultView.vue  |  6 +-
 packages/ui/client/components/Navigation.vue  | 15 +---
 .../client/components/explorer/Explorer.vue   |  6 +-
 .../components/explorer/ExplorerItem.vue      | 82 +++++++++++++++----
 .../ui/client/components/views/ViewEditor.vue | 59 +++++++++----
 .../ui/client/composables/client/static.ts    | 14 ++--
 packages/ui/client/composables/codemirror.ts  | 12 +++
 packages/ui/client/composables/navigation.ts  | 20 ++++-
 packages/ui/client/composables/params.ts      |  3 +
 packages/ui/node/reporter.ts                  | 13 +++
 packages/vitest/src/node/config.ts            | 22 +++++
 .../tests/__snapshots__/html.test.ts.snap     | 36 ++++++++
 17 files changed, 248 insertions(+), 68 deletions(-)
 rename packages/ui/client/components/{CodeMirror.vue => CodeMirrorContainer.vue} (75%)

diff --git a/docs/config/index.md b/docs/config/index.md
index 5749c8af7..26f052934 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -2297,6 +2297,10 @@ Should `location` property be included when Vitest API receives tasks in [report
 
 The `location` property has `column` and `line` values that correspond to the `test` or `describe` position in the original file.
 
+This option will be auto-enabled if you don't disable it explicitly, and you are running Vitest with:
+- [Vitest UI](/guide/ui)
+- or using the [Browser Mode](/guide/browser) without [headless](/guide/browser#headless) mode
+
 ::: tip
 This option has no effect if you do not use custom code that relies on this.
 :::
diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index b9f6880e6..34c081840 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/packages/ui/client/auto-imports.d.ts
@@ -10,6 +10,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 codemirrorRef: typeof import('./composables/codemirror')['codemirrorRef']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -61,8 +62,10 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const lineNumber: typeof import('./composables/params')['lineNumber']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
+  const navigateTo: typeof import('./composables/navigation')['navigateTo']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
@@ -117,6 +120,8 @@ declare global {
   const shouldOpenInEditor: typeof import('./composables/error')['shouldOpenInEditor']
   const showCoverage: typeof import('./composables/navigation')['showCoverage']
   const showDashboard: typeof import('./composables/navigation')['showDashboard']
+  const showLine: typeof import('./composables/codemirror')['showLine']
+  const showSource: typeof import('./composables/codemirror')['showSource']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
diff --git a/packages/ui/client/components.d.ts b/packages/ui/client/components.d.ts
index de49b1ec7..a7a4abf43 100644
--- a/packages/ui/client/components.d.ts
+++ b/packages/ui/client/components.d.ts
@@ -8,7 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BrowserIframe: typeof import('./components/BrowserIframe.vue')['default']
-    CodeMirror: typeof import('./components/CodeMirror.vue')['default']
+    CodeMirrorContainer: typeof import('./components/CodeMirrorContainer.vue')['default']
     ConnectionOverlay: typeof import('./components/ConnectionOverlay.vue')['default']
     Coverage: typeof import('./components/Coverage.vue')['default']
     Dashboard: typeof import('./components/Dashboard.vue')['default']
diff --git a/packages/ui/client/components/CodeMirror.vue b/packages/ui/client/components/CodeMirrorContainer.vue
similarity index 75%
rename from packages/ui/client/components/CodeMirror.vue
rename to packages/ui/client/components/CodeMirrorContainer.vue
index d76a3227c..83ee34dc4 100644
--- a/packages/ui/client/components/CodeMirror.vue
+++ b/packages/ui/client/components/CodeMirrorContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type CodeMirror from 'codemirror'
+import { codemirrorRef } from '~/composables/codemirror'
 
 const { mode, readOnly } = defineProps<{
   mode?: string
@@ -30,12 +30,9 @@ const modeMap: Record<string, any> = {
 
 const el = ref<HTMLTextAreaElement>()
 
-const cm = shallowRef<CodeMirror.EditorFromTextArea>()
-
-defineExpose({ cm })
-
 onMounted(async () => {
-  cm.value = useCodeMirror(el, modelValue as unknown as Ref<string>, {
+  // useCodeMirror will remove the codemirrorRef.value on onUnmounted callback
+  const codemirror = useCodeMirror(el, modelValue as unknown as Ref<string>, {
     ...attrs,
     mode: modeMap[mode || ''] || mode,
     readOnly: readOnly ? true : undefined,
@@ -48,9 +45,10 @@ onMounted(async () => {
       },
     },
   })
-  cm.value.setSize('100%', '100%')
-  cm.value.clearHistory()
-  setTimeout(() => cm.value!.refresh(), 100)
+  codemirror.setSize('100%', '100%')
+  codemirror.clearHistory()
+  codemirrorRef.value = codemirror
+  setTimeout(() => codemirrorRef.value!.refresh(), 100)
 })
 </script>
 
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 9184b1978..5bfe490c5 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -174,7 +174,6 @@ debouncedWatch(
           Module Graph
         </button>
         <button
-          v-if="!isReport"
           tab-button
           data-testid="btn-code"
           class="flex items-center gap-2"
diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue
index 625a5db80..f348532b6 100644
--- a/packages/ui/client/components/ModuleTransformResultView.vue
+++ b/packages/ui/client/components/ModuleTransformResultView.vue
@@ -52,14 +52,14 @@ onKeyStroke('Escape', () => {
         <div p="x3 y-1" bg-overlay border="base b t">
           Transformed
         </div>
-        <CodeMirror
+        <CodeMirrorContainer
           h-full
           :model-value="source"
           read-only
           v-bind="{ lineNumbers: true }"
           :mode="ext"
         />
-        <CodeMirror
+        <CodeMirrorContainer
           h-full
           :model-value="code"
           read-only
@@ -71,7 +71,7 @@ onKeyStroke('Escape', () => {
         <div p="x3 y-1" bg-overlay border="base b t">
           Source map (v{{ sourceMap.version }})
         </div>
-        <CodeMirror
+        <CodeMirrorContainer
           :model-value="sourceMap.mappings"
           read-only
           v-bind="{ lineNumbers: true }"
diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index 55f21c9a5..73353d9a6 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import { Tooltip as VueTooltip } from 'floating-vue'
-import type { File, Task } from 'vitest'
+import type { File } from 'vitest'
 import {
   coverageConfigured,
   coverageEnabled,
   coverageVisible,
-  currentModule,
   dashboardVisible,
   disableCoverage,
+  navigateTo,
   showCoverage,
   showDashboard,
 } from '~/composables/navigation'
-import { client, findById, isReport, runAll, runFiles } from '~/composables/client'
+import { client, isReport, runAll, runFiles } from '~/composables/client'
 import { isDark, toggleDark } from '~/composables'
-import { activeFileId } from '~/composables/params'
 import { explorerTree } from '~/composables/explorer'
 import { initialized, shouldShowExpandAll } from '~/composables/explorer/state'
 
@@ -23,12 +22,6 @@ function updateSnapshot() {
 
 const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
 
-function onItemClick(task: Task) {
-  activeFileId.value = task.file.id
-  currentModule.value = findById(task.file.id)
-  showDashboard(false)
-}
-
 async function onRunAll(files?: File[]) {
   if (coverageEnabled.value) {
     disableCoverage.value = true
@@ -57,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="onItemClick" :nested="true" @run="onRunAll">
+  <Explorer border="r base" :on-item-click="navigateTo" :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>
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 76362df51..c1f7613ee 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -9,6 +9,7 @@ import { activeFileId } from '~/composables/params'
 import { useSearch } from '~/composables/explorer/search'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import { config } from '~/composables/client'
 
 defineOptions({ inheritAttrs: false })
 
@@ -21,6 +22,8 @@ const emit = defineEmits<{
   (event: 'run', files?: File[]): void
 }>()
 
+const includeTaskLocation = computed(() => config.value.includeTaskLocation)
+
 const searchBox = ref<HTMLInputElement | undefined>()
 
 const {
@@ -203,6 +206,7 @@ useResizeObserver(testExplorerRef, (entries) => {
           >
             <template #default="{ item }">
               <ExplorerItem
+                class="h-28px m-0 p-0"
                 :task-id="item.id"
                 :expandable="item.expandable"
                 :type="item.type"
@@ -215,7 +219,7 @@ useResizeObserver(testExplorerRef, (entries) => {
                 :state="item.state"
                 :duration="item.duration"
                 :opened="item.expanded"
-                class="h-28px m-0 p-0"
+                :disable-task-location="!includeTaskLocation"
                 :class="activeFileId === item.id ? 'bg-active' : ''"
                 :on-item-click="onItemClick"
               />
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 2edcbc417..b2f008f7b 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -2,11 +2,13 @@
 import type { Task, TaskState } from '@vitest/runner'
 import { nextTick } from 'vue'
 import { hasFailedSnapshot } from '@vitest/ws-client'
+import { Tooltip as VueTooltip } from 'floating-vue'
 import { client, isReport, runFiles } from '~/composables/client'
 import { coverageEnabled } from '~/composables/navigation'
 import type { TaskTreeNodeType } from '~/composables/explorer/types'
 import { explorerTree } from '~/composables/explorer'
 import { search } from '~/composables/explorer/state'
+import { showSource } from '~/composables/codemirror'
 
 // TODO: better handling of "opened" - it means to forcefully open the tree item and set in TasksList right now
 const {
@@ -19,6 +21,7 @@ const {
   expandable,
   typecheck,
   type,
+  disableTaskLocation,
   onItemClick,
 } = defineProps<{
   taskId: string
@@ -34,12 +37,21 @@ const {
   search?: string
   projectName?: string
   projectNameColor: string
+  disableTaskLocation?: boolean
   onItemClick?: (task: Task) => void
 }>()
 
 const task = computed(() => client.state.idMap.get(taskId))
 
-const failedSnapshot = computed(() => task.value && hasFailedSnapshot(task.value))
+const failedSnapshot = computed(() => {
+  // don't traverse the tree if it's a report
+  if (isReport) {
+    return false
+  }
+
+  const t = task.value
+  return t && hasFailedSnapshot(t)
+})
 
 function toggleOpen() {
   if (!expandable) {
@@ -86,10 +98,9 @@ const gridStyles = computed(() => {
   }
   // text content
   gridColumns.push('minmax(0, 1fr)')
-  // buttons
-  if (type === 'file') {
-    gridColumns.push('min-content')
-  }
+  // action buttons
+  gridColumns.push('min-content')
+
   // all the vertical lines with width 1rem and mx-2: always centered
   return `grid-template-columns: ${
     entries.map(() => '1rem').join(' ')
@@ -107,6 +118,26 @@ const highlighted = computed(() => {
     ? name.replace(regex, match => `<span class="highlight">${match}</span>`)
     : name
 })
+
+const disableShowDetails = computed(() => type !== 'file' && disableTaskLocation)
+const showDetailsTooltip = computed(() => {
+  return type === 'file'
+    ? 'Open test details'
+    : type === 'suite'
+      ? 'View Suite Source Code'
+      : 'View Test Source Code'
+})
+const showDetailsClasses = computed(() => disableShowDetails.value ? 'color-red5 dark:color-#f43f5e' : null)
+
+function showDetails() {
+  const t = task.value!
+  if (type === 'file') {
+    onItemClick?.(t)
+  }
+  else {
+    showSource(t)
+  }
+}
 </script>
 
 <template>
@@ -136,7 +167,6 @@ const highlighted = computed(() => {
     <div v-if="type === 'suite' && typecheck" class="i-logos:typescript-icon" flex-shrink-0 mr-2 />
     <div flex items-end gap-2 :text="state === 'fail' ? 'red-500' : ''" overflow-hidden>
       <span text-sm truncate font-light>
-        <!-- only show [] in files view -->
         <span v-if="type === 'file' && projectName" :style="{ color: projectNameColor }">
           [{{ projectName }}]
         </span>
@@ -146,29 +176,46 @@ const highlighted = computed(() => {
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>
     </div>
-    <div v-if="type === 'file'" gap-1 justify-end flex-grow-1 pl-1 class="test-actions">
+    <div 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"
+        icon="i-carbon:result-old"
         @click.prevent.stop="updateSnapshot(task)"
       />
-      <IconAction
-        v-tooltip.bottom="'Open test details'"
-        data-testid="btn-open-details"
-        title="Open test details"
-        icon="i-carbon-intrusion-prevention"
-        @click.prevent.stop="onItemClick?.(task)"
-      />
-      <IconAction
+      <VueTooltip
+        placement="bottom"
+        class="w-1.4em h-1.4em op100 rounded flex"
+        :class="showDetailsClasses"
+      >
+        <IconButton
+          data-testid="btn-open-details"
+          icon="i-carbon:intrusion-prevention"
+          @click.prevent.stop="showDetails"
+        />
+        <template #popper>
+          <div v-if="disableShowDetails" class="op100 gap-1 p-y-1" grid="~ items-center cols-[1.5em_1fr]">
+            <div class="i-carbon:information-square w-1.5em h-1.5em" />
+            <div>{{ showDetailsTooltip }}: this feature is not available, you have disabled <span class="text-[#add467]">includeTaskLocation</span> in your configuration file.</div>
+            <div style="grid-column: 2">
+              Clicking this button the code tab will position the cursor at first line in the source code since the UI doesn't have the information available.
+            </div>
+          </div>
+          <div v-else>
+            {{ showDetailsTooltip }}
+          </div>
+        </template>
+      </VueTooltip>
+      <IconButton
         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-green5
+        :disabled="type !== 'file'"
         @click.prevent.stop="onRun(task)"
       />
     </div>
@@ -185,8 +232,7 @@ const highlighted = computed(() => {
 .test-actions {
   display: none;
 }
-.item-wrapper:hover .test-actions,
-.item-wrapper[data-current="true"] .test-actions {
+.item-wrapper:hover .test-actions {
   display: flex;
 }
 </style>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 2a6d41865..c223a7e02 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -3,7 +3,9 @@ import type CodeMirror from 'codemirror'
 import type { ErrorWithDiff, File } from 'vitest'
 import { createTooltip, destroyTooltip } from 'floating-vue'
 import { openInEditor } from '~/composables/error'
-import { client } from '~/composables/client'
+import { client, isReport } from '~/composables/client'
+import { codemirrorRef } from '~/composables/codemirror'
+import { lineNumber } from '~/composables/params'
 
 const props = defineProps<{
   file?: File
@@ -14,23 +16,52 @@ const emit = defineEmits<{ (event: 'draft', value: boolean): void }>()
 const code = ref('')
 const serverCode = shallowRef<string | undefined>(undefined)
 const draft = ref(false)
+const loading = ref(true)
 
 watch(
   () => props.file,
   async () => {
-    if (!props.file || !props.file?.filepath) {
-      code.value = ''
+    loading.value = true
+    try {
+      if (!props.file || !props.file?.filepath) {
+        code.value = ''
+        serverCode.value = code.value
+        draft.value = false
+        return
+      }
+
+      code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
       serverCode.value = code.value
       draft.value = false
-      return
     }
-    code.value = (await client.rpc.readTestFile(props.file.filepath)) || ''
-    serverCode.value = code.value
-    draft.value = false
+    finally {
+      // fire focusing editor after loading
+      nextTick(() => (loading.value = false))
+    }
   },
   { immediate: true },
 )
 
+watch(() => [loading.value, props.file, lineNumber.value] as const, ([loadingFile, _, l]) => {
+  if (!loadingFile) {
+    if (l != null) {
+      nextTick(() => {
+        const line = { line: l ?? 0, ch: 0 }
+        codemirrorRef.value?.scrollIntoView(line, 100)
+        nextTick(() => {
+          codemirrorRef.value?.focus()
+          codemirrorRef.value?.setCursor(line)
+        })
+      })
+    }
+    else {
+      nextTick(() => {
+        codemirrorRef.value?.focus()
+      })
+    }
+  }
+}, { flush: 'post' })
+
 const ext = computed(() => props.file?.filepath?.split(/\./g).pop() || 'js')
 const editor = ref<any>()
 
@@ -56,11 +87,11 @@ function clearListeners() {
 }
 
 useResizeObserver(editor, () => {
-  cm.value?.refresh()
+  codemirrorRef.value?.refresh()
 })
 
 function codemirrorChanges() {
-  draft.value = serverCode.value !== cm.value!.getValue()
+  draft.value = serverCode.value !== codemirrorRef.value!.getValue()
 }
 
 watch(
@@ -105,8 +136,8 @@ function createErrorElement(e: ErrorWithDiff) {
   }
   div.appendChild(span)
   listeners.push([span, el, () => destroyTooltip(span)])
-  handles.push(cm.value!.addLineClass(stack.line - 1, 'wrap', 'bg-red-500/10'))
-  widgets.push(cm.value!.addLineWidget(stack.line - 1, div))
+  handles.push(codemirrorRef.value!.addLineClass(stack.line - 1, 'wrap', 'bg-red-500/10'))
+  widgets.push(codemirrorRef.value!.addLineWidget(stack.line - 1, div))
 }
 
 watch(
@@ -120,7 +151,7 @@ watch(
     setTimeout(() => {
       clearListeners()
       widgets.forEach(widget => widget.clear())
-      handles.forEach(h => cm.value?.removeLineClass(h, 'wrap'))
+      handles.forEach(h => codemirrorRef.value?.removeLineClass(h, 'wrap'))
       widgets.length = 0
       handles.length = 0
 
@@ -146,11 +177,11 @@ async function onSave(content: string) {
 </script>
 
 <template>
-  <CodeMirror
+  <CodeMirrorContainer
     ref="editor"
     v-model="code"
     h-full
-    v-bind="{ lineNumbers: true }"
+    v-bind="{ lineNumbers: true, readOnly: isReport }"
     :mode="ext"
     data-testid="code-mirror"
     @save="onSave"
diff --git a/packages/ui/client/composables/client/static.ts b/packages/ui/client/composables/client/static.ts
index 19546390e..abf3e778f 100644
--- a/packages/ui/client/composables/client/static.ts
+++ b/packages/ui/client/composables/client/static.ts
@@ -17,6 +17,8 @@ interface HTMLReportMetadata {
   config: ResolvedConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
+  // filename -> source
+  sources: Record<string, string>
 }
 
 const noop: any = () => {}
@@ -51,13 +53,7 @@ export function createStaticClient(): VitestClient {
     getUnhandledErrors: () => {
       return metadata.unhandledErrors
     },
-    getTransformResult: async (id) => {
-      return {
-        code: id,
-        source: '',
-        map: null,
-      }
-    },
+    getTransformResult: asyncNoop,
     onDone: noop,
     onCollected: asyncNoop,
     onTaskUpdate: noop,
@@ -73,7 +69,9 @@ export function createStaticClient(): VitestClient {
     resolveSnapshotRawPath: asyncNoop,
     readSnapshotFile: asyncNoop,
     saveSnapshotFile: asyncNoop,
-    readTestFile: asyncNoop,
+    readTestFile: async (id: string) => {
+      return metadata.sources[id]
+    },
     removeSnapshotFile: asyncNoop,
     onUnhandledError: noop,
     saveTestFile: asyncNoop,
diff --git a/packages/ui/client/composables/codemirror.ts b/packages/ui/client/composables/codemirror.ts
index 8ddcc4bd6..f26d8a310 100644
--- a/packages/ui/client/composables/codemirror.ts
+++ b/packages/ui/client/composables/codemirror.ts
@@ -11,6 +11,10 @@ import 'codemirror/mode/jsx/jsx'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/addon/scroll/simplescrollbars'
 import 'codemirror/addon/scroll/simplescrollbars.css'
+import type { Task } from '@vitest/runner'
+import { navigateTo } from '~/composables/navigation'
+
+export const codemirrorRef = shallowRef<CodeMirror.EditorFromTextArea>()
 
 export function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
@@ -50,5 +54,13 @@ export function useCodeMirror(
     { immediate: true },
   )
 
+  onUnmounted(() => {
+    codemirrorRef.value = undefined
+  })
+
   return markRaw(cm)
 }
+
+export async function showSource(task: Task) {
+  navigateTo(task, task.location?.line ?? 0)
+}
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 2a25ca42b..c5cf8e28a 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -1,7 +1,7 @@
-import type { File } from '@vitest/runner'
+import type { File, Task } from '@vitest/runner'
 import { client, config, findById } from './client'
 import { testRunState } from './client/state'
-import { activeFileId } from './params'
+import { activeFileId, lineNumber, viewMode } from './params'
 
 export const currentModule = ref<File>()
 export const dashboardVisible = ref(true)
@@ -47,6 +47,7 @@ export const coverageUrl = computed(() => {
 
   return undefined
 })
+
 watch(
   testRunState,
   (state) => {
@@ -54,6 +55,7 @@ watch(
   },
   { immediate: true },
 )
+
 export function initializeNavigation() {
   const file = activeFileId.value
   if (file && file.length > 0) {
@@ -87,6 +89,20 @@ export function showDashboard(show: boolean) {
   }
 }
 
+export function navigateTo(task: Task, line: number | null = null) {
+  activeFileId.value = task.file.id
+  // reset line number
+  lineNumber.value = null
+  if (line != null) {
+    nextTick(() => {
+      lineNumber.value = line
+    })
+    viewMode.value = 'editor'
+  }
+  currentModule.value = findById(task.file.id)
+  showDashboard(false)
+}
+
 export function showCoverage() {
   coverageVisible.value = true
   dashboardVisible.value = false
diff --git a/packages/ui/client/composables/params.ts b/packages/ui/client/composables/params.ts
index 33ad473f8..07218439a 100644
--- a/packages/ui/client/composables/params.ts
+++ b/packages/ui/client/composables/params.ts
@@ -1,14 +1,17 @@
 export interface Params {
   file: string
   view: null | 'graph' | 'editor' | 'console'
+  line: null | number
 }
 
 export const params = useUrlSearchParams<Params>('hash', {
   initialValue: {
     file: '',
     view: null,
+    line: null,
   },
 })
 
 export const activeFileId = toRef(params, 'file')
 export const viewMode = toRef(params, 'view')
+export const lineNumber = toRef(params, 'line')
diff --git a/packages/ui/node/reporter.ts b/packages/ui/node/reporter.ts
index 47add940c..2dffe8bcd 100644
--- a/packages/ui/node/reporter.ts
+++ b/packages/ui/node/reporter.ts
@@ -38,6 +38,8 @@ interface HTMLReportData {
   config: ResolvedConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
+  // filename -> source
+  sources: Record<string, string>
 }
 
 const distDir = resolve(fileURLToPath(import.meta.url), '../../dist')
@@ -64,6 +66,7 @@ export default class HTMLReporter implements Reporter {
       config: this.ctx.config,
       unhandledErrors: this.ctx.state.getUnhandledErrors(),
       moduleGraph: {},
+      sources: {},
     }
     await Promise.all(
       result.files.map(async (file) => {
@@ -74,6 +77,16 @@ export default class HTMLReporter implements Reporter {
           projectName,
           file.filepath,
         )
+        if (!result.sources[file.filepath]) {
+          try {
+            result.sources[file.filepath] = await fs.readFile(file.filepath, {
+              encoding: 'utf-8',
+            })
+          }
+          catch (_) {
+            // just ignore
+          }
+        }
       }),
     )
     await this.writeReport(stringify(result))
diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts
index b009e7294..f07163183 100644
--- a/packages/vitest/src/node/config.ts
+++ b/packages/vitest/src/node/config.ts
@@ -720,6 +720,28 @@ export function resolveConfig(
     port: defaultBrowserPort,
   }
 
+  // enable includeTaskLocation by default in UI mode
+  if (resolved.browser.enabled) {
+    if (resolved.browser.ui) {
+      resolved.includeTaskLocation ??= true
+    }
+  }
+  else if (resolved.ui) {
+    resolved.includeTaskLocation ??= true
+  }
+
+  const htmlReporter = toArray(resolved.reporters).some((reporter) => {
+    if (Array.isArray(reporter)) {
+      return reporter[0] === 'html'
+    }
+
+    return false
+  })
+
+  if (htmlReporter) {
+    resolved.includeTaskLocation ??= true
+  }
+
   resolved.testTransformMode ??= {}
 
   resolved.testTimeout ??= resolved.browser.enabled ? 15000 : 5000
diff --git a/test/reporters/tests/__snapshots__/html.test.ts.snap b/test/reporters/tests/__snapshots__/html.test.ts.snap
index 24b03826e..6774077b8 100644
--- a/test/reporters/tests/__snapshots__/html.test.ts.snap
+++ b/test/reporters/tests/__snapshots__/html.test.ts.snap
@@ -28,6 +28,10 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
         {
           "file": [Circular],
           "id": 0,
+          "location": {
+            "column": 1,
+            "line": 5,
+          },
           "logs": [
             {
               "content": "json-fail>should fail
@@ -93,6 +97,18 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
   "paths": [
     "<rootDir>/test/reporters/fixtures/json-fail.test.ts",
   ],
+  "sources": {
+    "<rootDir>/test/reporters/fixtures/json-fail.test.ts": "import { expect, test } from 'vitest'
+
+// I am comment1
+// I am comment2
+test('should fail', () => {
+  // eslint-disable-next-line no-console
+  console.log('json-fail>should fail')
+  expect(2).toEqual(1)
+})
+",
+  },
   "unhandledErrors": [],
 }
 `;
@@ -125,6 +141,10 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
         {
           "file": [Circular],
           "id": 0,
+          "location": {
+            "column": 1,
+            "line": 3,
+          },
           "meta": {},
           "mode": "run",
           "name": "2 + 3 = 5",
@@ -144,6 +164,10 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
         {
           "file": [Circular],
           "id": "1111755131_1",
+          "location": {
+            "column": 6,
+            "line": 7,
+          },
           "meta": {},
           "mode": "skip",
           "name": "3 + 3 = 6",
@@ -169,6 +193,18 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
   "paths": [
     "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
   ],
+  "sources": {
+    "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": "import { expect, test } from 'vitest'
+
+test('2 + 3 = 5', () => {
+  expect(2 + 3).toBe(5)
+})
+
+test.skip('3 + 3 = 6', () => {
+  expect(3 + 3).toBe(6)
+})
+",
+  },
   "unhandledErrors": [],
 }
 `;
-- 
2.51.2