feat(ui): show all failed tasks in report (#685)

vitest-dev · Feb 5, 2022 · c7d081c · c7d081c
1 parent 77ba9fa
commit c7d081c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
@@ -1,12 +1,25 @@
 <script setup lang="ts">
-import type { File } from '#types'
+import type { File, Task } from '#types'
 import { config } from '~/composables/client'
 
 const props = defineProps<{
   file?: File
 }>()
 
-const failed = computed(() => props.file?.tasks.filter(i => i.result?.state === 'fail') || [])
+type LeveledTask = Task & {
+  level: number
+}
+
+function collectFailed(task: Task, level: number): LeveledTask[] {
+  if (task.result?.state !== 'fail') return []
+
+  if (task.type === 'test')
+    return [{ ...task, level }]
+  else
+    return [{ ...task, level }, ...task.tasks.flatMap(t => collectFailed(t, level + 1))]
+}
+
+const failed = computed(() => props.file?.tasks.flatMap(t => collectFailed(t, 0)) || [])
 
 function relative(p: string) {
   if (p.startsWith(config.value.root))
@@ -19,10 +32,9 @@ function relative(p: string) {
   <div h-full class="scrolls">
     <template v-if="failed.length">
       <div v-for="task of failed" :key="task.id">
-        <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded>
+        <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded :style="{ 'margin-left': `${2 * task.level + 0.5}rem`}">
           {{ task.name }}
-
-          <div v-if="task.result?.error">
+          <div v-if="task.result?.error" class="scrolls scrolls-rounded task-error">
             <pre><b>{{ task.result.error.name || task.result.error.nameStr }}</b>: {{ task.result.error.message }}</pre>
             <pre v-for="stack, i of task.result.error.stacks || []" :key="i" op80> - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
           </div>
@@ -36,3 +48,12 @@ function relative(p: string) {
     </template>
   </div>
 </template>
+
+<style scoped>
+.task-error {
+  --cm-ttc-c-thumb: #CCC;
+}
+html.dark .task-error {
+  --cm-ttc-c-thumb: #444;
+}
+</style>
diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
@@ -146,9 +146,13 @@ html.dark {
 .CodeMirror-scroll::-webkit-scrollbar-thumb,
 .scrolls::-webkit-scrollbar-thumb {
   background-color: var(--cm-ttc-c-thumb);
-  border-radius: 3px;
   border: 2px solid var(--cm-ttc-c-thumb);
 }
+.CodeMirror-scroll::-webkit-scrollbar-thumb,
+.scrolls::-webkit-scrollbar-thumb,
+.scrolls-rounded::-webkit-scrollbar-track {
+  border-radius: 3px;
+}
 .CodeMirror-scroll::-webkit-scrollbar-corner,
 .scrolls::-webkit-scrollbar-corner {
   background-color: var(--cm-ttc-c-track);
@@ -179,4 +183,4 @@ html.dark {
 
 .v-popper__popper .v-popper__arrow-outer {
   border-color: var(--background-color);
-}
+}