fix(ui): add suite level report view (#11038)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>
Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

Author: 3 people

packages/ui/client/components/FileDetails.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RunnerTask, RunnerTestCase } from 'vitest'
+import type { RunnerTask } from 'vitest'
 import type { Params } from '~/composables/params'
 import { computed, ref } from 'vue'
 import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
@@ -25,10 +25,10 @@ import ViewTestReport from './views/ViewTestReport.vue'
 
 const draft = ref(false)
 
-const test = computed(() => {
-  return selectedTest.value
-    ? client.state.idMap.get(selectedTest.value) as RunnerTestCase
-    : undefined
+const selectedTask = computed(() => {
+  return (selectedTest.value
+    ? client.state.idMap.get(selectedTest.value)
+    : undefined) ?? current.value
 })
 
 const failedSnapshot = computed(() => {
@@ -212,8 +212,10 @@ const tags = computed(() => {
         :file="current"
         data-testid="console"
       />
-      <ViewReport v-else-if="!viewMode && !test && current" :file="current" data-testid="report" />
-      <ViewTestReport v-else-if="!viewMode && test" :test="test" data-testid="report" />
+      <template v-else-if="!viewMode && selectedTask">
+        <ViewTestReport v-if="selectedTask.type === 'test'" :test="selectedTask" data-testid="report" />
+        <ViewReport v-else :suite="selectedTask" data-testid="report" />
+      </template>
     </div>
   </div>
 </template>

packages/ui/client/components/views/ViewReport.spec.ts

@@ -57,7 +57,7 @@ describe.todo('ViewReport', () => {
     beforeEach(async () => {
       await render(ViewReport, {
         props: {
-          file: fileWithTextStacks,
+          suite: fileWithTextStacks,
         },
         attrs: {
           'data-testid': viewReportTestId,
@@ -100,7 +100,7 @@ describe.todo('ViewReport', () => {
       ],
     }
     const container = await render(ViewReport, {
-      props: { file },
+      props: { suite: file },
     })
     const taskError = container.getByTestId(taskErrorTestId)
     const preElements = taskError.element().querySelectorAll('pre')
@@ -149,7 +149,7 @@ describe.todo('ViewReport', () => {
       ],
     }
     const container = await render(ViewReport, {
-      props: { file },
+      props: { suite: file },
     })
     const taskError = container.getByTestId(taskErrorTestId)
     const preElements = taskError.element().querySelectorAll('pre')
@@ -193,7 +193,7 @@ describe.todo('ViewReport', () => {
   it('test diff display', async () => {
     const component = await render(ViewReport, {
       props: {
-        file: fileWithTextStacks,
+        suite: fileWithTextStacks,
       },
     })
 

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

@@ -6,7 +6,7 @@ import FailureScreenshot from '../FailureScreenshot.vue'
 import ViewReportError from './ViewReportError.vue'
 
 const props = defineProps<{
-  file: RunnerTestFile
+  suite: RunnerTestFile | RunnerTestSuite
 }>()
 
 type LeveledTask = RunnerTask & {
@@ -30,29 +30,21 @@ function collectFailed(task: RunnerTask, level: number): LeveledTask[] {
 }
 
 const failed = computed(() => {
-  const file = props.file
-  const failedFlatMap = file.tasks?.flatMap(t => collectFailed(t, 0)) ?? []
-  const result = file.result
-  const fileError = result?.errors?.[0]
-  // we must check also if the test cannot compile
-  if (fileError) {
-    // create a dummy one
-    const fileErrorTask: RunnerTestSuite & { level: number } = {
-      id: file!.id,
-      file: file!,
-      name: file!.name,
-      fullName: file!.name,
+  const suite = props.suite
+  const failedFlatMap = suite.tasks.flatMap(t => collectFailed(t, 0))
+  // prepend suite level errors as same indent level as children errors
+  if (suite.result?.errors?.length) {
+    const taskError: LeveledTask = {
+      ...suite,
       level: 0,
-      type: 'suite',
-      mode: 'run',
-      meta: {},
       tasks: [],
-      result,
     }
-    failedFlatMap.unshift(fileErrorTask)
+    failedFlatMap.unshift(taskError)
   }
   return failedFlatMap
 })
+
+const isFile = computed(() => 'filepath' in props.suite)
 </script>
 
 <template>
@@ -78,17 +70,17 @@ const failed = computed(() => {
               v-for="(error, idx) of task.result.errors"
               :key="idx"
               :error="error"
-              :filename="file.name"
+              :filename="task.file.name"
               :root="config.root"
-              :file-id="file.id"
+              :file-id="task.file.id"
             />
           </template>
         </div>
       </div>
     </template>
     <template v-else>
       <div bg="green-500/10" text="green-500 sm" p="x4 y2" m-2 rounded>
-        All tests passed in this file
+        All tests passed in this {{ isFile ? 'file' : 'suite' }}
       </div>
     </template>
   </div>

packages/ui/client/composables/navigation.ts

@@ -127,24 +127,14 @@ export function navigateTo({ file, line, view, test, column }: Omit<Params, 'tra
 }
 
 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,
-      })
-    }
+  const isFile = 'filepath' in task
+  if (!isFile && viewMode.value === 'editor') {
+    showTaskSource(task)
   }
   else {
     navigateTo({
       file: task.file.id,
-      test: null,
+      test: isFile ? null : task.id,
       line: null,
       view: viewMode.value,
       column: null,

packages/ui/client/composables/params.ts

@@ -1,9 +1,11 @@
 import { toRef, useUrlSearchParams } from '@vueuse/core'
 
 export interface Params {
+  // File.id
   file: string
   view: null | 'graph' | 'editor' | 'console'
   line: null | number
+  // Task.id of either Test or Suite (but not File)
   test: null | string
   column: null | number
   traceAttempt: null | string

test/ui/fixtures/main/node/suite-report.test.ts

@@ -0,0 +1,29 @@
+import { beforeAll, describe, expect, it } from 'vitest'
+
+describe('successful suite', () => {
+  it('successful child', () => {
+    expect(true).toBe(true)
+  })
+})
+
+describe('hook failure suite', () => {
+  beforeAll(() => {
+    throw new Error('before-all-marker')
+  })
+
+  it('blocked child', () => {})
+})
+
+describe('child failure suite', () => {
+  it('failing child', () => {
+    throw new Error('direct-child-marker')
+  })
+})
+
+describe('nested failure suite', () => {
+  describe('failing nested suite', () => {
+    it('failing nested child', () => {
+      throw new Error('nested-child-marker')
+    })
+  })
+})

test/ui/test/helper.ts

@@ -56,11 +56,12 @@ export async function startHtmlReportPreview(
   }
 }
 
-export async function assertTestCounts(page: Page, { pass, fail }: { pass: number; fail: number }) {
+export async function assertTestCounts(page: Page, { pass, fail, skip = 0 }: { pass: number; fail: number; skip?: number }) {
+  const skipped = skip ? ` ${skip} Skip` : ''
   await expect
     .soft(page.getByTestId('tests-entry'))
     .toContainText(
-      `${pass} Pass ${fail} Fail ${pass + fail} Total`,
+      `${pass} Pass ${fail} Fail${skipped} ${pass + fail + skip} Total`,
     )
 }