forked from vitest-dev/vitest
/
Navigation.vue
57 lines (54 loc) · 2.08 KB
/
Navigation.vue
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
<script setup lang="ts">
import { hasFailedSnapshot } from '@vitest/ws-client'
import { currentModule, dashboardVisible, showDashboard } from '../composables/navigation'
import { client, findById } from '../composables/client'
import type { Task } from '#types'
import { isDark, toggleDark } from '~/composables'
import { files, isReport, runAll } from '~/composables/client'
import { activeFileId } from '~/composables/params'
const failedSnapshot = computed(() => files.value && hasFailedSnapshot(files.value))
const updateSnapshot = () => client.rpc.updateSnapshot()
function onItemClick(task: Task) {
activeFileId.value = task.id
currentModule.value = findById(task.id)
showDashboard(false)
}
const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
</script>
<template>
<TasksList border="r base" :tasks="files" :on-item-click="onItemClick" :group-by-type="true" @run="runAll">
<template #header="{ filteredTests }">
<img w-6 h-6 src="/favicon.svg" alt="Vitest logo">
<span font-light text-sm flex-1>Vitest</span>
<div class="flex text-lg">
<IconButton
v-show="!dashboardVisible"
v-tooltip.bottom="'Dashboard'"
title="Show dashboard"
class="!animate-100ms"
animate-count-1
icon="i-carbon-dashboard"
@click="showDashboard(true)"
/>
<IconButton
v-if="(failedSnapshot && !isReport)"
v-tooltip.bottom="'Update all failed snapshot(s)'"
icon="i-carbon-result-old"
@click="updateSnapshot()"
/>
<IconButton
v-if="!isReport"
v-tooltip.bottom="filteredTests ? (filteredTests.length === 0 ? 'No test to run (clear filter)' : 'Rerun filtered') : 'Rerun all'"
:disabled="filteredTests?.length === 0"
icon="i-carbon-play"
@click="runAll(filteredTests)"
/>
<IconButton
v-tooltip.bottom="`Toggle to ${toggleMode} mode`"
icon="dark:i-carbon-moon i-carbon-sun"
@click="toggleDark()"
/>
</div>
</template>
</TasksList>
</template>