vitest/packages/ui/client/components/dashboard/TestFilesEntry.vue at c8d7e413751dfaaf5b6042ef409f9345e74c8e2d · DerYeger/vitest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<script setup lang="ts">
import { unhandledErrors } from '~/composables/client/state'
import { explorerTree } from '~/composables/explorer'
import ErrorEntry from './ErrorEntry.vue'
</script>

<template>
  <div
    data-testid="test-files-entry"
    grid="~ cols-[min-content_1fr_min-content]"
    items-center
    gap="x-2 y-3"
    p="x4"
    relative
    font-light
    w-80
    op80
  >
    <div i-carbon-document />
    <div>Files</div>
    <div class="number" data-testid="num-files">
      {{ explorerTree.summary.files }}
    </div>

    <template v-if="explorerTree.summary.filesSuccess">
      <div i-carbon-checkmark />
      <div>Pass</div>
      <div class="number">
        {{ explorerTree.summary.filesSuccess }}
      </div>
    </template>

    <template v-if="explorerTree.summary.filesSkipped">
      <div i-carbon:redo rotate-90 />
      <div>
        Skip
      </div>
      <div class="number" text-purple-700 dark:text-purple-400>
        {{ explorerTree.summary.filesSkipped }}
      </div>
    </template>

    <template v-if="explorerTree.summary.filesFailed">
      <div i-carbon-close />
      <div>
        Fail
      </div>
      <div class="number" text-red-700 dark:text-red-500>
        {{ explorerTree.summary.filesFailed }}
      </div>
    </template>

    <template v-if="explorerTree.summary.filesSnapshotFailed">
      <div i-carbon-compare />
      <div>
        Snapshot Fail
      </div>
      <div class="number" text-red-700 dark:text-red-500>
        {{ explorerTree.summary.filesSnapshotFailed }}
      </div>
    </template>

    <template v-if="unhandledErrors.length">
      <div i-carbon-checkmark-outline-error />
      <div>
        Errors
      </div>
      <div class="number" text-red-700 dark:text-red-500>
        {{ unhandledErrors.length }}
      </div>
    </template>

    <div i-carbon-timer />
    <div>Time</div>
    <div class="number" data-testid="run-time">
      {{ explorerTree.summary.time }}
    </div>
  </div>
  <template v-if="unhandledErrors.length">
    <div bg="red500/10" text="red500" p="x3 y2" max-w-xl m-2 rounded>
      <h3 text-center mb-2>
        Unhandled Errors
      </h3>
      <p text="sm" font-thin mb-2 data-testid="unhandled-errors">
        Vitest caught {{ unhandledErrors.length }} error{{ unhandledErrors.length > 1 ? 's' : '' }} during the test run.<br>
        This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
      </p>
      <details
        data-testid="unhandled-errors-details"
        class="scrolls unhandled-errors"
        text="sm"
        font-thin
        pe-2.5
        open:max-h-52
        overflow-auto
      >
        <summary font-bold cursor-pointer>
          Errors
        </summary>
        <ErrorEntry v-for="(e, idx) in unhandledErrors" :key="idx" :error="e" />
      </details>
    </div>
  </template>
</template>

<style scoped>
.number {
  font-weight: 400;
  text-align: right;
}

.unhandled-errors {
  --cm-ttc-c-thumb: #ccc;
}

html.dark .unhandled-errors {
  --cm-ttc-c-thumb: #444;
}
</style>