feat(ui): add summary

packages/ui/client/components.d.ts

@@ -12,6 +12,8 @@ declare module 'vue' {
  Modal: typeof import('./components/Modal.vue')['default']
  ModuleTransformResultView: typeof import('./components/ModuleTransformResultView.vue')['default']
  Navigation: typeof import('./components/Navigation.vue')['default']
+ ProgressBar: typeof import('./components/ProgressBar.vue')['default']
+ ReportSummary: typeof import('./components/ReportSummary.vue')['default']
  StatusIcon: typeof import('./components/StatusIcon.vue')['default']
  Suites: typeof import('./components/Suites.vue')['default']
  TaskItem: typeof import('./components/TaskItem.vue')['default']

packages/ui/client/components/FileDetails.vue

@@ -7,7 +7,7 @@ import { getModuleGraph } from '~/composables/module-graph'
 import type { ModuleGraphData } from '#types'
 
 function open() {
- const filePath = current.value?.filepath
+ const filePath = currentModule.value?.filepath
  if (filePath)
  fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
 }
@@ -56,7 +56,7 @@ const changeViewMode = (view: Params['view']) => {
  </div>
  </div>
  <div flex flex-col flex-1 overflow="hidden">
- <ViewModuleGraph v-if="viewMode === 'graph'" :graph="graph" class="file-details-graph" />
+ <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" class="file-details-graph" />
  <ViewEditor v-if="viewMode === 'editor'" :file="current" />
  <ViewReport v-else-if="!viewMode" :file="current" />
  </div>

packages/ui/client/components/Navigation.vue

@@ -29,5 +29,8 @@ function onItemClick(task: Task) {
  />
  </div>
  </template>
+ <template #footer>
+ <ReportSummary />
+ </template>
  </TasksList>
 </template>

packages/ui/client/components/ProgressBar.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const props = defineProps<{ total: number; failed: number; pass: number; inProgress: boolean }>()
+const widthPass = computed(() => {
+ const total = props.total
+ return total > 0 ? (350 * props.pass / total) : 0
+})
+const widthFailed = computed(() => {
+ const total = props.total
+ return total > 0 ? (350 * props.failed / total) : 0
+})
+const pending = computed(() => {
+ return props.total - props.failed - props.pass
+})
+const widthPending = computed(() => {
+ const total = props.total
+ return total > 0 ? (350 * pending.value / total) : 0
+})
+</script>
+
+<template>
+ <div h-8 line-height-1 px-0 grid="~ auto-cols-max" justify-items-center>
+ <div h-1rem relative max-w-300px min-w-300px w-300px overflow-hidden class="px-0">
+ <div
+ absolute
+ left-0
+ top-0
+ h-full
+ line-height-1
+ text-right
+ bg-red5
+ :class="[{'in-progress': props.inProgress}]"
+ :style="`width: ${widthFailed}px;`"
+ >
+ <template v-if="!inProgress">
+ <div vertical-align-middle c-white text-xs m="y-0 x-5px" ws-nowrap>
+ {{ props.failed }}
+ </div>
+ </template>
+ </div>
+ <div
+ absolute
+ left-0
+ top-0
+ h-full
+ line-height-1
+ text-right
+ bg-green5
+ :class="[{'in-progress': props.inProgress}]"
+ :style="`left: ${widthFailed}px; width: ${widthPass}px;`"
+ >
+ <template v-if="!inProgress">
+ <div vertical-align-middle c-white text-xs m="y-0 x-5px" ws-nowrap>
+ {{ props.pass }}
+ </div>
+ </template>
+ </div>
+ <div
+ absolute
+ left-0
+ top-0
+ h-full
+ line-height-1
+ text-right
+ bg-yellow5
+ class="test-bg-pending"
+ :class="[{'in-progress': props.inProgress}]"
+ :style="`left: ${widthPass + widthFailed}px; width: ${widthPending}px;`"
+ >
+ <template v-if="!inProgress">
+ <div vertical-align-middle c-white font-size-12px m="y-0 x-5px" ws-nowrap>
+ &#160;
+ </div>
+ </template>
+ </div>
+ </div>
+ <div text-center text-xs>
+ <slot />
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.in-progress {
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-size: 40px 40px;
+ animation: in-progress-stripes 2s linear infinite;
+}
+@keyframes in-progress-stripes {
+ from {
+ background-position: 40px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+</style>

packages/ui/client/components/ReportSummary.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Task, Test } from 'vitest/src'
+import { files, isConnected } from '~/composables/client'
+
+const failed = computed(() => files.value.filter(f => f.result?.state === 'fail'))
+const success = computed(() => files.value.filter(f => f.result?.state === 'pass'))
+const ignore = computed(() => files.value.filter(f => f.mode === 'skip' || f.mode === 'todo'))
+const running = computed(() => files.value.filter(f =>
+ !failed.value.includes(f)
+ && !success.value.includes(f)
+ && !ignore.value.includes(f),
+))
+const skipped = computed(() => ignore.value.filter(f => f.mode === 'skip'))
+const todo = computed(() => ignore.value.filter(f => f.mode === 'todo'))
+const finished = computed(() => {
+ return running.value.length === 0
+})
+type Nullable<T> = T | null | undefined
+type Arrayable<T> = T | Array<T>
+function toArray<T>(array?: Nullable<Arrayable<T>>): Array<T> {
+ array = array || []
+ if (Array.isArray(array))
+ return array
+ return [array]
+}
+function getTests(suite: Arrayable<Task>): Test[] {
+ return toArray(suite).flatMap(s => s.type === 'test' ? [s] : s.tasks.flatMap(c => c.type === 'test' ? [c] : getTests(c)))
+}
+const tests = computed(() => {
+ return getTests(files.value)
+})
+const testsFailed = computed(() => {
+ return tests.value.filter(f => f.result?.state === 'fail')
+})
+const testsSuccess = computed(() => {
+ return tests.value.filter(f => f.result?.state === 'pass')
+})
+const testsIgnore = computed(() => tests.value.filter(f => f.mode === 'skip' || f.mode === 'todo'))
+const testsSkipped = computed(() => testsIgnore.value.filter(f => f.mode === 'skip'))
+const testsTodo = computed(() => testsIgnore.value.filter(f => f.mode === 'todo'))
+const totalTests = computed(() => {
+ return testsFailed.value.length + testsSuccess.value.length
+})
+</script>
+
+<template>
+ <div v-if="isConnected" flex="~ col" items-center justify-center gap-y-1 p-y-2>
+ <ProgressBar :total="files.length" :failed="failed.length" :pass="success.length" :in-progress="!finished">
+ Test Files <span text-red5>{{ failed.length }} failed</span> | <span text-green5>{{ success.length }} passed</span> | <span text-yellow5>{{ running.length }} running</span> <span c-gray op-75>({{ files.length }})</span>
+ </ProgressBar>
+ <ProgressBar :total="totalTests" :failed="testsFailed.length" :pass="testsSuccess.length" :in-progress="!finished">
+ Tests <span text-red5>{{ testsFailed.length }} failed</span> | <span text-green5>{{ testsSuccess.length }} passed</span> | <span text-yellow5>{{ testsSkipped.length }} skipped</span> | <span c-gray op-75>{{ testsTodo.length }} todo</span> <span c-gray op-75>({{ tests.length }})</span>
+ </ProgressBar>
+ <div>Time: </div>
+ </div>
+</template>

packages/ui/client/components/TasksList.vue

@@ -155,5 +155,8 @@ export default {
  />
  </template>
  </div>
+ <footer v-if="$slots.footer">
+ <slot name="footer" />
+ </footer>
  </div>
 </template>

packages/ui/client/pages/index.vue

@@ -9,10 +9,9 @@ function onResize(event: { size: number }[]) {
  sizes[i] = e.size
  })
 }
-
 onMounted(() => {
  const width = window.innerWidth
- const panelWidth = Math.min(width / 3, 300)
+ const panelWidth = Math.min(width / 3, 316)
  const panelPercent = panelWidth / width * 100
  sizes[0] = panelPercent
  sizes[1] = panelPercent

packages/ui/client/styles/main.css

@@ -110,7 +110,8 @@ html.dark {
 }
 
 .splitpanes--vertical > .splitpanes__splitter:before {
- left: -10px;
+ /* make vertical scroll usable */
+ /*left: -10px;*/
  right: -10px;
  height: 100%;
 }
@@ -163,3 +164,4 @@ html.dark {
  padding-bottom: unset !important;
 }
 
+

packages/vitest/LICENSE.md

@@ -372,6 +372,23 @@ Repository: [email protected]:moxystudio/node-cross-spawn.git
 
 ---------------------------------------
 
+## detect-indent
+License: MIT
+By: Sindre Sorhus
+Repository: sindresorhus/detect-indent
+
+> MIT License
+> 
+> Copyright (c) Sindre Sorhus <[email protected]> (https://sindresorhus.com)
+> 
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+> 
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+> 
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---------------------------------------
+
 ## diff
 License: BSD-3-Clause
 Repository: git:https://github.com/kpdecker/jsdiff.git