fix(ui): handle suite report navigation

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,12 +25,20 @@ import ViewTestReport from './views/ViewTestReport.vue'
 
 const draft = ref(false)
 
-const test = computed(() => {
+const selectedTask = computed(() => {
   return selectedTest.value
-    ? client.state.idMap.get(selectedTest.value) as RunnerTestCase
+    ? client.state.idMap.get(selectedTest.value)
     : undefined
 })
 
+const test = computed(() => {
+  return selectedTask.value?.type === 'test' ? selectedTask.value : undefined
+})
+
+const reportTask = computed(() => {
+  return selectedTask.value?.type === 'suite' ? selectedTask.value : current.value
+})
+
 const failedSnapshot = computed(() => {
   return current.value && hasFailedSnapshot(current.value)
 })
@@ -212,7 +220,7 @@ const tags = computed(() => {
         :file="current"
         data-testid="console"
       />
-      <ViewReport v-else-if="!viewMode && !test && current" :file="current" data-testid="report" />
+      <ViewReport v-else-if="!viewMode && !test && reportTask" :task="reportTask" data-testid="report" />
       <ViewTestReport v-else-if="!viewMode && test" :test="test" data-testid="report" />
     </div>
   </div>

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

@@ -57,7 +57,7 @@ describe.todo('ViewReport', () => {
     beforeEach(async () => {
       await render(ViewReport, {
         props: {
-          file: fileWithTextStacks,
+          task: fileWithTextStacks,
         },
         attrs: {
           'data-testid': viewReportTestId,
@@ -100,7 +100,7 @@ describe.todo('ViewReport', () => {
       ],
     }
     const container = await render(ViewReport, {
-      props: { file },
+      props: { task: 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: { task: 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,
+        task: 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
+  task: RunnerTestFile | RunnerTestSuite
 }>()
 
 type LeveledTask = RunnerTask & {
@@ -30,65 +30,57 @@ 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 task = props.task
+  const failedFlatMap = task.tasks.flatMap(t => collectFailed(t, 0))
+  if (task.result?.errors?.length) {
+    const taskError: LeveledTask = {
+      ...task,
       level: 0,
-      type: 'suite',
-      mode: 'run',
-      meta: {},
       tasks: [],
-      result,
     }
-    failedFlatMap.unshift(fileErrorTask)
+    failedFlatMap.unshift(taskError)
   }
   return failedFlatMap
 })
+
+// Files and suites both have type "suite", but only files have a filepath.
+const isFile = computed(() => 'filepath' in props.task)
 </script>
 
 <template>
   <div h-full class="scrolls">
     <template v-if="failed.length">
-      <div v-for="task of failed" :id="task.id" :key="task.id">
+      <div v-for="failedTask of failed" :id="failedTask.id" :key="failedTask.id">
         <div
           bg="red-500/10"
           text="red-500 sm"
           p="x3 y2"
           m-2
           rounded
           :style="{
-            'margin-left': `${2 * (task as LeveledTask).level + 0.5}rem`,
+            'margin-left': `${2 * (failedTask as LeveledTask).level + 0.5}rem`,
           }"
         >
           <div flex="~ gap-2 items-center">
-            <span>{{ task.name }}</span>
-            <FailureScreenshot :task="task" />
+            <span>{{ failedTask.name }}</span>
+            <FailureScreenshot :task="failedTask" />
           </div>
-          <template v-if="task.result?.errors && config.root">
+          <template v-if="failedTask.result?.errors && config.root">
             <ViewReportError
-              v-for="(error, idx) of task.result.errors"
+              v-for="(error, idx) of failedTask.result.errors"
               :key="idx"
               :error="error"
-              :filename="file.name"
+              :filename="failedTask.file.name"
               :root="config.root"
-              :file-id="file.id"
+              :file-id="failedTask.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>

test/ui/test/ui.spec.ts

@@ -194,6 +194,11 @@ test.describe('ui', () => {
     await testVisualRegression(page)
   })
 
+  test('report tab is scoped to the selected suite', async ({ page }) => {
+    await page.goto(pageUrl)
+    await testSuiteReport(page)
+  })
+
   test('can edit file', async ({ page }) => {
     await page.goto(pageUrl)
     await testWriteFile(page, { enabled: true })
@@ -287,6 +292,11 @@ test.describe('html report', () => {
     await testVisualRegression(page)
   })
 
+  test('report tab is scoped to the selected suite', async ({ page }) => {
+    await page.goto(pageUrl)
+    await testSuiteReport(page)
+  })
+
   test('cannot edit file', async ({ page }) => {
     await page.goto(pageUrl)
     await testWriteFile(page, { enabled: false })
@@ -502,6 +512,16 @@ async function testError(page: Page) {
   ])
 }
 
+async function testSuiteReport(page: Page) {
+  const suite = getExplorerItem(page, 'suite')
+  await suite.hover()
+  await suite.getByTestId('btn-open-details').click()
+  await expect(page.getByTestId('editor')).toBeVisible()
+
+  await page.getByTestId('btn-report').click()
+  await expect(page.getByTestId('report')).toContainText('All tests passed in this suite')
+}
+
 async function testTagsFilter(page: Page) {
   await page.getByPlaceholder('Search...').fill('tag:db')