[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
feat(ui): harmonization of sizes and paddings (#605)
authored by
Michel EDIGHOFFER
and committed by
GitHub
(Jan 22, 2022, 3:56 AM +0800)
d0440b60
cba243c9
+88
-65
+46
-18
pnpm-lock.yaml
+46
-18
pnpm-lock.yaml
···
106
106
lit: 2.1.1
107
107
devDependencies:
108
108
'@vitest/ui': link:../../packages/ui
109
-
happy-dom: 2.27.2
109
+
happy-dom: 2.28.0
110
110
vite: 2.7.13
111
111
vitest: link:../../packages/vitest
112
112
···
395
395
devDependencies:
396
396
'@vitejs/plugin-vue': 2.0.1_vite@2.7.13+vue@3.2.26
397
397
'@vue/test-utils': 2.0.0-rc.18_vue@3.2.26
398
-
happy-dom: 2.27.2
398
+
happy-dom: 2.28.0
399
399
unplugin-auto-import: 0.5.11_0300e2fc4592cc668512bad114c07138
400
400
unplugin-vue-components: 0.17.14_19c514bd5e4e89f4f64a7d4f3f15a1ba
401
401
vitest: link:../../packages/vitest
···
412
412
devDependencies:
413
413
'@vitejs/plugin-vue': 2.0.1_vite@2.7.13+vue@3.2.26
414
414
'@vue/test-utils': 2.0.0-rc.18_vue@3.2.26
415
-
happy-dom: 2.27.2
415
+
happy-dom: 2.28.0
416
416
vitest: link:../../packages/vitest
417
417
418
418
examples/vue-jsx:
···
428
428
'@vitejs/plugin-vue': 2.0.1_vite@2.7.13+vue@3.2.26
429
429
'@vitejs/plugin-vue-jsx': 1.3.3
430
430
'@vue/test-utils': 2.0.0-rc.18_vue@3.2.26
431
-
happy-dom: 2.27.2
431
+
happy-dom: 2.28.0
432
432
vite: 2.7.13
433
433
vitest: link:../../packages/vitest
434
434
vue: 3.2.26
···
446
446
codemirror: ^5.65.0
447
447
codemirror-theme-vars: ^0.1.1
448
448
d3-graph-controller: ^2.2.1
449
+
floating-vue: ^2.0.0-beta.3
449
450
picocolors: ^1.0.0
450
451
rollup: ^2.64.0
451
452
sirv: ^2.0.2
452
453
splitpanes: ^3.0.6
453
-
tippy.js: ^6.3.7
454
454
unocss: ^0.22.4
455
455
unplugin-auto-import: ^0.5.11
456
456
unplugin-vue-components: ^0.17.13
···
471
471
codemirror: 5.65.0
472
472
codemirror-theme-vars: 0.1.1
473
473
d3-graph-controller: 2.2.2
474
+
floating-vue: 2.0.0-beta.3_vue@3.2.26
474
475
picocolors: 1.0.0
475
476
rollup: 2.64.0
476
477
splitpanes: 3.0.6
477
-
tippy.js: 6.3.7
478
478
unocss: 0.22.4
479
479
unplugin-auto-import: 0.5.11_420fb798aa2a20fbf563b9961b692a6d
480
480
unplugin-vue-components: 0.17.14_19c514bd5e4e89f4f64a7d4f3f15a1ba
···
2802
2802
strip-json-comments: 3.1.1
2803
2803
transitivePeerDependencies:
2804
2804
- supports-color
2805
+
dev: true
2806
+
2807
+
/@floating-ui/core/0.3.1:
2808
+
resolution: {integrity: sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==}
2809
+
dev: true
2810
+
2811
+
/@floating-ui/dom/0.1.10:
2812
+
resolution: {integrity: sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==}
2813
+
dependencies:
2814
+
'@floating-ui/core': 0.3.1
2805
2815
dev: true
2806
2816
2807
2817
/@gar/promisify/1.1.2:
···
10209
10219
/flatted/3.2.4:
10210
10220
resolution: {integrity: sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==}
10211
10221
10222
+
/floating-vue/2.0.0-beta.3_vue@3.2.26:
10223
+
resolution: {integrity: sha512-3vkivXbVVl1Mh3b1qgx7V9V7be9V03shqodF8wPeOQ4PyXiqISwKuJ2T6VAmNJf6zsUDNpTbhMAfctpp2loMlQ==}
10224
+
peerDependencies:
10225
+
vue: ^3.2.0
10226
+
dependencies:
10227
+
'@floating-ui/dom': 0.1.10
10228
+
vue: 3.2.26
10229
+
vue-resize: 2.0.0-alpha.1_vue@3.2.26
10230
+
dev: true
10231
+
10212
10232
/flush-write-stream/1.1.1:
10213
10233
resolution: {integrity: sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==}
10214
10234
dependencies:
···
10714
10734
10715
10735
/happy-dom/2.27.2:
10716
10736
resolution: {integrity: sha512-JOVjQIA+YzxJLVbrpSqWZLHDDPTcjLCqPJ5wlT+IMkoY5LKp4NVU9yWmXc8yKooU8tzKHN0VK+alj4msohqsDg==}
10737
+
dependencies:
10738
+
he: 1.2.0
10739
+
node-fetch: 2.6.6
10740
+
sync-request: 6.1.0
10741
+
webidl-conversions: 7.0.0
10742
+
whatwg-encoding: 1.0.5
10743
+
whatwg-mimetype: 2.3.0
10744
+
dev: true
10745
+
10746
+
/happy-dom/2.28.0:
10747
+
resolution: {integrity: sha512-J65003xw/uTXNczNzfTt3EJRODzWbFXVj+zqq0LNlE8tR6n26VYk4Apm0mlqUYO3THGVdKcVqSQ2P8Ss6DHSpQ==}
10717
10748
dependencies:
10718
10749
he: 1.2.0
10719
10750
node-fetch: 2.6.6
···
13583
13614
dependencies:
13584
13615
nanoid: 3.1.30
13585
13616
picocolors: 1.0.0
13586
-
source-map-js: 1.0.1
13617
+
source-map-js: 1.0.2
13587
13618
13588
13619
/preact/10.6.4:
13589
13620
resolution: {integrity: sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ==}
···
15071
15102
resolution: {integrity: sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==}
15072
15103
dev: true
15073
15104
15074
-
/source-map-js/1.0.1:
15075
-
resolution: {integrity: sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==}
15076
-
engines: {node: '>=0.10.0'}
15077
-
15078
15105
/source-map-js/1.0.2:
15079
15106
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
15080
15107
engines: {node: '>=0.10.0'}
15081
-
dev: true
15082
15108
15083
15109
/source-map-resolve/0.5.3:
15084
15110
resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
···
15751
15777
resolution: {integrity: sha512-4VXqQzzh9gC5uOLk77cLr9R3wqJq07xJlgM9IUdCNJCet139r+046ETKbU1x7mGs7B0k7eopyH5U6yflbBXNyA==}
15752
15778
engines: {node: '>=14.0.0'}
15753
15779
dev: false
15754
-
15755
-
/tippy.js/6.3.7:
15756
-
resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
15757
-
dependencies:
15758
-
'@popperjs/core': 2.11.0
15759
-
dev: true
15760
15780
15761
15781
/tmp/0.0.33:
15762
15782
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
···
16599
16619
semver: 7.3.5
16600
16620
transitivePeerDependencies:
16601
16621
- supports-color
16622
+
dev: true
16623
+
16624
+
/vue-resize/2.0.0-alpha.1_vue@3.2.26:
16625
+
resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
16626
+
peerDependencies:
16627
+
vue: ^3.0.0
16628
+
dependencies:
16629
+
vue: 3.2.26
16602
16630
dev: true
16603
16631
16604
16632
/vue-router/4.0.12_vue@3.2.26:
+1
-1
packages/ui/package.json
+1
-1
packages/ui/package.json
···
40
40
"codemirror": "^5.65.0",
41
41
"codemirror-theme-vars": "^0.1.1",
42
42
"d3-graph-controller": "^2.2.1",
43
+
"floating-vue": "^2.0.0-beta.3",
43
44
"picocolors": "^1.0.0",
44
45
"rollup": "^2.64.0",
45
46
"splitpanes": "^3.0.6",
46
-
"tippy.js": "^6.3.7",
47
47
"unocss": "^0.22.4",
48
48
"unplugin-auto-import": "^0.5.11",
49
49
"unplugin-vue-components": "^0.17.13",
+7
-3
packages/ui/client/main.ts
+7
-3
packages/ui/client/main.ts
···
1
1
import { createApp } from 'vue'
2
2
import { createRouter, createWebHistory } from 'vue-router'
3
3
import routes from 'virtual:generated-pages'
4
-
import tooltip from './directives/tooltip'
4
+
import FloatingVue, { VTooltip } from 'floating-vue'
5
5
import App from './App.vue'
6
6
7
7
import 'd3-graph-controller/default.css'
···
9
9
import '@unocss/reset/tailwind.css'
10
10
import 'codemirror/lib/codemirror.css'
11
11
import 'codemirror-theme-vars/base.css'
12
-
import 'tippy.js/dist/tippy.css'
12
+
import 'floating-vue/dist/style.css'
13
13
import './styles/main.css'
14
14
import 'uno.css'
15
15
···
19
19
routes,
20
20
})
21
21
app.use(router)
22
-
app.directive('tooltip', tooltip)
22
+
23
+
app.directive('tooltip', VTooltip)
24
+
FloatingVue.options.instantMove = true
25
+
FloatingVue.options.distance = 10
26
+
23
27
app.mount('#app')
+3
-2
packages/ui/client/components/Dashboard.vue
+3
-2
packages/ui/client/components/Dashboard.vue
+1
-1
packages/ui/client/components/DetailsPanel.vue
+1
-1
packages/ui/client/components/DetailsPanel.vue
···
8
8
9
9
<template>
10
10
<div :open="open" class="details-panel" @toggle="open = $event.target.open">
11
-
<div p="y1" text-sm items-center gap-2 :class="color" w-full flex select-none cursor-pointer>
11
+
<div p="y1" text-sm bg-base items-center z-5 gap-2 :class="color" w-full flex select-none sticky top="-1">
12
12
<div flex-1 h-1px border="base b" op80 />
13
13
<slot name="summary" :open="open" />
14
14
<div flex-1 h-1px border="base b" op80 />
+1
-1
packages/ui/client/components/FileDetails.vue
+1
-1
packages/ui/client/components/FileDetails.vue
+1
-3
packages/ui/client/components/StatusIcon.vue
+1
-3
packages/ui/client/components/StatusIcon.vue
···
8
8
<template>
9
9
<div
10
10
v-if="task.result?.state === 'pass'"
11
-
v-tooltip.right="'Passed'"
12
11
text-green-500
13
12
flex-shrink-0
14
13
i-carbon:checkmark
15
14
/>
16
15
<div
17
16
v-else-if="hasFailedSnapshot(task)"
18
-
v-tooltip.right="'Failed snapshot'"
17
+
v-tooltip.right="'Contains failed snapshot'"
19
18
text-red-500
20
19
flex-shrink-0
21
20
i-carbon:compare
22
21
/>
23
22
<div
24
23
v-else-if="task.result?.state === 'fail'"
25
-
v-tooltip.right="'Failed'"
26
24
text-red-500
27
25
flex-shrink-0
28
26
i-carbon:close
+2
-2
packages/ui/client/components/Suites.vue
+2
-2
packages/ui/client/components/Suites.vue
···
12
12
<div v-if="current" h-full>
13
13
<TasksList :tasks="current.tasks" :nested="true">
14
14
<template #header>
15
-
<StatusIcon :task="current" />
16
-
<span font-light text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
15
+
<StatusIcon mx-1 :task="current" />
16
+
<span font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
17
17
<div class="flex text-lg">
18
18
<IconButton
19
19
v-if="failedSnapshot"
+1
-1
packages/ui/client/components/TaskTree.vue
+1
-1
packages/ui/client/components/TaskTree.vue
···
24
24
v-if="!search || task.name.match(search)"
25
25
v-bind="$attrs"
26
26
:task="task"
27
-
:style="{ paddingLeft: `${indent * 0.75 + 0.5}rem`}"
27
+
:style="{ paddingLeft: `${indent * 0.75 + 1}rem`}"
28
28
@click="onItemClick && onItemClick(task)"
29
29
/>
30
30
<div v-if="nested && task.type === 'suite' && task.tasks.length">
+10
-6
packages/ui/client/components/TasksList.vue
+10
-6
packages/ui/client/components/TasksList.vue
···
52
52
<div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
53
53
<slot name="header" :filteredTests="isFiltered ? filteredTests : undefined" />
54
54
</div>
55
-
<div p="x4 y2" flex="~ gap-2" items-center bg-header border="b base">
55
+
<div
56
+
p="x3 y2"
57
+
flex="~ gap-2"
58
+
items-center
59
+
bg-header
60
+
border="b-2 base"
61
+
>
56
62
<div i-carbon:search flex-shrink-0 />
57
63
<input
58
64
v-model="search"
···
62
68
font="light"
63
69
text="sm"
64
70
flex-1
71
+
pl-1
65
72
:op="search.length ? '100' : '50'"
66
73
@keydown.esc="search = ''"
67
74
@keydown.enter="emit('run', isFiltered ? filteredTests : undefined)"
···
83
90
:task="task"
84
91
:nested="nested"
85
92
:search="search"
86
-
:indent="1"
87
93
:class="activeFileId === task.id ? 'bg-active' : ''"
88
94
:on-item-click="onItemClick"
89
95
/>
···
100
106
:task="task"
101
107
:nested="nested"
102
108
:search="search"
103
-
:indent="1"
104
109
:class="activeFileId === task.id ? 'bg-active' : ''"
105
110
:on-item-click="onItemClick"
106
111
/>
···
117
122
:task="task"
118
123
:nested="nested"
119
124
:search="search"
120
-
:indent="1"
121
125
:class="activeFileId === task.id ? 'bg-active' : ''"
122
126
:on-item-click="onItemClick"
123
127
/>
···
134
138
:task="task"
135
139
:nested="nested"
136
140
:search="search"
137
-
:indent="1"
138
141
:class="activeFileId === task.id ? 'bg-active' : ''"
139
142
:on-item-click="onItemClick"
140
143
/>
···
160
163
No matched test
161
164
</div>
162
165
<button
163
-
font-light op="50 hover:100"
166
+
font-light
167
+
op="50 hover:100"
164
168
text-sm
165
169
border="~ gray-400/50 rounded"
166
170
p="x2 y0.5"
-25
packages/ui/client/directives/tooltip.ts
-25
packages/ui/client/directives/tooltip.ts
···
1
-
import tippy from 'tippy.js'
2
-
import type { Directive } from 'vue'
3
-
import type { Instance, Placement, Props } from 'tippy.js'
4
-
5
-
const getTippyInstance = (el: Element, instanceCallback: (instance?: Instance) => void): void => {
6
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
7
-
// @ts-expect-error
8
-
instanceCallback('_tippy' in el ? el._tippy as Instance : undefined)
9
-
}
10
-
11
-
const tooltip: Directive = (el: Element, { value, oldValue, modifiers }) => {
12
-
const config: Partial<Props> = {
13
-
content: value,
14
-
placement: Object.keys(modifiers).at(0) as unknown as Placement,
15
-
}
16
-
getTippyInstance(el, (instance) => {
17
-
instance === undefined // mount if instance not yet created, else update content
18
-
? tippy(el, {
19
-
delay: 200,
20
-
...config,
21
-
})
22
-
: value !== oldValue && instance.setProps(config)
23
-
})
24
-
}
25
-
export default tooltip
+14
-1
packages/ui/client/styles/main.css
+14
-1
packages/ui/client/styles/main.css
···
8
8
--color-text-light: #000;
9
9
--color-text-dark: #ddd;
10
10
--color-text: var(--color-text-light);
11
+
--background-color: #e4e4e4;
11
12
}
12
13
13
14
14
15
html.dark {
15
16
--color-text: var(--color-text-dark);
17
+
--background-color: #141414;
16
18
color: var(--color-text);
17
-
background-color: #141414;
19
+
background-color: var(--background-color);
18
20
color-scheme: dark;
19
21
}
20
22
···
167
169
border-right: none;
168
170
}
169
171
172
+
.v-popper__popper .v-popper__inner {
173
+
font-size: 12px;
174
+
padding: 4px 6px;
175
+
border-radius: 4px;
176
+
background-color: var(--background-color);
177
+
color: var(--color-text);
178
+
}
179
+
180
+
.v-popper__popper .v-popper__arrow-outer {
181
+
border-color: var(--background-color);
182
+
}