mirror of
https://github.com/vitest-dev/vitest.git
synced 2025-12-08 18:26:03 +00:00
b8f34eb8ca
* feat: vitest html report * chore: copy ui to vitest dist * feat: report copy ui dist * feat: ui report version builder * fix: copy file * chore: remove * feat: html metadata path * feat: add declare * feat: static file client * feat: mock rpc * fix: mock error * chore: update meta * chore: compress json * chore: comment * chore: update merge config * chore: lock * feat: remove all control command from ui * chore: remove * feat: report command * feat: version tag * chore: reset lock file * feat: remove hooks * chore: update * fix: runningPromise * chore: update debug mode and disable click on transform * docs: report * chore: remove the version mark * feat: report * fix: lint * chore: copy ui from @vitest/ui * chore: export report from ui * chore: update * fix: lint * docs: ui html report * feat: ensurePackageInstalled * update * feat: more info * chore: improve documentation and tests * chore: fix UI bundle size * chore: ui tests * perf: remove output report using the global variable to judge report mode * chore: update * fix: build * fix: report * fix: parse * chore: fix html reporters test * chore: don't store config in html reporter test * chore: update ui docs * feat: log * chore: fix tests * test: fix html reporter tests * docs add vitest fo UI reporter Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>
107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { client, current, currentLogs, isReport } from '~/composables/client'
|
|
import type { Params } from '~/composables/params'
|
|
import { viewMode } from '~/composables/params'
|
|
import type { ModuleGraph } from '~/composables/module-graph'
|
|
import { getModuleGraph } from '~/composables/module-graph'
|
|
import type { ModuleGraphData } from '#types'
|
|
|
|
const data = ref<ModuleGraphData>({ externalized: [], graph: {}, inlined: [] })
|
|
const graph = ref<ModuleGraph>({ nodes: [], links: [] })
|
|
const draft = ref(false)
|
|
const hasGraphBeenDisplayed = ref(false)
|
|
|
|
debouncedWatch(
|
|
current,
|
|
async (c, o) => {
|
|
if (c && c.filepath !== o?.filepath) {
|
|
data.value = await client.rpc.getModuleGraph(c.filepath)
|
|
graph.value = getModuleGraph(data.value, c.filepath)
|
|
}
|
|
},
|
|
{ debounce: 100, immediate: true },
|
|
)
|
|
|
|
const open = () => {
|
|
const filePath = current.value?.filepath
|
|
if (filePath)
|
|
fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
|
|
}
|
|
|
|
const changeViewMode = (view: Params['view']) => {
|
|
if (view === 'graph')
|
|
hasGraphBeenDisplayed.value = true
|
|
|
|
viewMode.value = view
|
|
}
|
|
const consoleCount = computed(() => {
|
|
return currentLogs.value?.reduce((s, { size }) => s + size, 0) ?? 0
|
|
})
|
|
function onDraft(value: boolean) {
|
|
draft.value = value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="current" flex flex-col h-full max-h-full overflow-hidden>
|
|
<div>
|
|
<div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
|
|
<StatusIcon :task="current" />
|
|
<div flex-1 font-light op-50 ws-nowrap truncate text-sm>
|
|
{{ current?.filepath }}
|
|
</div>
|
|
<div class="flex text-lg">
|
|
<IconButton
|
|
v-if="!isReport"
|
|
v-tooltip.bottom="'Open in editor'"
|
|
title="Open in editor"
|
|
icon="i-carbon-launch"
|
|
:disabled="!current?.filepath"
|
|
@click="open"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div flex="~" items-center bg-header border="b-2 base" text-sm h-41px>
|
|
<button
|
|
tab-button
|
|
:class="{ 'tab-button-active': viewMode == null }"
|
|
@click="changeViewMode(null)"
|
|
>
|
|
Report
|
|
</button>
|
|
<button
|
|
tab-button
|
|
:class="{ 'tab-button-active': viewMode === 'graph' }"
|
|
@click="changeViewMode('graph')"
|
|
>
|
|
Module Graph
|
|
</button>
|
|
<button
|
|
v-if="!isReport"
|
|
tab-button
|
|
:class="{ 'tab-button-active': viewMode === 'editor' }"
|
|
@click="changeViewMode('editor')"
|
|
>
|
|
{{ draft ? '* ' : '' }}Code
|
|
</button>
|
|
<button
|
|
tab-button
|
|
:class="{ 'tab-button-active': viewMode === 'console', 'op20': viewMode !== 'console' && consoleCount === 0 }"
|
|
@click="changeViewMode('console')"
|
|
>
|
|
Console ({{ consoleCount }})
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div flex flex-col flex-1 overflow="hidden">
|
|
<div v-if="hasGraphBeenDisplayed" flex-1>
|
|
<ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
|
|
</div>
|
|
<ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" @draft="onDraft" />
|
|
<ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" />
|
|
<ViewReport v-else-if="!viewMode" :file="current" />
|
|
</div>
|
|
</div>
|
|
</template>
|