feat(ui): add summary #493

userquin · 2022-01-09T14:18:20Z

This PR includes:

fix scrolls on navigation and suite panel
adds a new panel to add report state (rn only the global state)
adds current module again to control the ui summary
adds show ui summary logic on vitest logo

netlify · 2022-01-09T14:18:28Z

✔️ Deploy Preview for vitest-dev ready!

🔨 Explore the source changes: 48c0cbd

🔍 Inspect the deploy log: https://app.netlify.com/sites/vitest-dev/deploys/61e6554a4fb39e000796e332

😎 Browse the preview: https://deploy-preview-493--vitest-dev.netlify.app

# Conflicts: # packages/ui/client/components/Navigation.vue # packages/ui/client/components/TasksList.vue

dammy001 · 2022-01-09T18:48:15Z

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 }>()


Why not destructure this props so you can just use the values directly inside template instead of props.value

total can be outside the computed i.e const total = unref(total) since it's been reused in multiple places

dammy001

@userquin well done 👏👏👏

dammy001 · 2022-01-09T19:04:15Z

packages/ui/client/components/ReportSummary.vue

+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(() => {


I think all this computed values should be before methods

userquin · 2022-01-09T19:16:54Z

we need to fix the scrolls and the new pre on ModuleTransformResultView.vue and review the code mirror scrolls also on ViewEditor.vue

dammy001 · 2022-01-09T19:35:56Z

Should I work on this @userquin?

userquin · 2022-01-09T19:40:05Z

@dammy001 sure, the problem is that some changes breaks the scrolls on code mirrors, and we need to fix them (ModuleTransformResultView.vue and ViewEditor.vue).

We should ask Anthony the pre included on ModuleTransformResultView.vue: https://imgur.com/7qOMeTp

…serquin/feat-ui-summary # Conflicts: # packages/ui/client/components/FileDetails.vue

antfu · 2022-01-11T17:31:47Z

Reviewing now

antfu · 2022-01-11T17:48:01Z

packages/ui/client/components/Navigation.vue

 import type { Task } from '#types'
 import { toggleDark } from '~/composables'
 import { files, runAll } from '~/composables/client'
 import { activeFileId } from '~/composables/params'

+const summaryVisible = injectSummaryVisible()
+const showSummary = injectShowSummary()
+const currentModule = injectCurrentModule()


What's the reason for using inject/provide here? I would prefer to directly use global ref/computed for it. We are a SPA so we don't need to worry about the state mixing, I see inject/provide only add complexity but is not really helpful.

…serquin/feat-ui-summary

userquin · 2022-01-11T21:07:12Z

there is a flickering on the progress bar on initial load, not all files are collected and there is no way to now when the running files finish

userquin · 2022-01-11T23:33:02Z

@antfu @patak-dev : with the new dashboard layout each box will shift when running the tests since the values will make text grow, I have uploaded to discord server on ui room some videos using grid (1 row) and flex (2 columns) (I follow all your instructions).

EDIT: I've added/modified some min sizes, gaps and paddings, maybe we can set each entry on its row, the container is a grid.

dammy001 · 2022-01-13T08:49:21Z

@userquin @sheremet-va how do I run the UI? I keep getting this error.

WebSocket connection to 'ws:https://localhost:51204/__vitest_api__' failed:

userquin · 2022-01-13T09:31:17Z

@dammy001 after running pnpm install && pnpm run build from root folder vitest --ui or running on 2 shells:

cd packages/ui && pnpm run dev:ui
from root folder vitest -r test/core --api or pnpm run test

EDIT: second approach will start the vite dev server for the UI so use it for development

dammy001 · 2022-01-13T09:58:47Z

@userquin Thanks.

edimitchel · 2022-01-14T01:10:47Z

Very nice work!
By trying that PR, I though to get code coverage summary, could this be relevant?

userquin · 2022-01-14T12:13:02Z

Very nice work! By trying that PR, I though to get code coverage summary, could this be relevant?

sure, but beware, Anthony is changing the UI and there are no commits yet

@antfu any updates here? can you push your local changes (at least resolving conflicts)?

…vitest-dev#493)

* feat(useTransition): support for vectors (vitest-dev#376) * refactor(useTransition): cleaning up (vitest-dev#385) * refactor(useWebWorkerFn): Small doc and type improvements (vitest-dev#382) Co-authored-by: Anthony Fu <[email protected]> * feat: pwa reload prompt * chore: update docs * refactor(useWebWorkerFn): Small doc and type improvements (vitest-dev#382) Co-authored-by: Anthony Fu <[email protected]> * chore: update docs * test: simpilfy tests for useTransition * chore: fix tests * feat(useTransition): support for delayed transitions (vitest-dev#386) * feat(useTransition): support for disabled transitions (vitest-dev#436) * feat!: introduce `controls` option * chore: update * chore: update * refactor(useRafFn): remove depreacted APIs * chore: enabled tests for next branch * fix(useFetch)!: allow setting response type before doing request (vitest-dev#454) Co-authored-by: Anthony Fu <[email protected]> * chore: resolve conflicts * feat(useMediaControls): expose source types (vitest-dev#495) * fix(useMediaControls): Removes tracks that have been inserted in html (vitest-dev#493) * chore: release v4.9.3 * fix(usePermission): tolerate error on FireFox * fix(useDevicesList): treat as premssion granted after getUserMedia * chore: release v4.9.4 * chore: fix typo (vitest-dev#502) * feat(useWebSocket): add immediate option (vitest-dev#503) * feat(useAxios): bring API into line with useFetch (vitest-dev#499) * feat(createEventHook): new function (#497) * chore: release v4.10.0 * fix(useMediaControls): Doesn't rewrite default media properties (vitest-dev#500) * feat(useMediaControls): add error event (vitest-dev#509) * feat(useStorage): optimize event handling logic (vitest-dev#505) * feat(useFetch): add afterFetch option, onFetchResponse, and onFetchError (vitest-dev#506) * feat(useWebWoker): return worker (vitest-dev#507) Co-authored-by: Anthony Fu <[email protected]> * fix: Change `onMediaError` to `onSourceError` (vitest-dev#510) * feat(onClickOutside): default to just pointerDown (vitest-dev#508) Co-authored-by: Anthony Fu <[email protected]> Co-authored-by: sibbng <[email protected]> * chore: update docs * chore: release v4.11.0 * fix(onClickOutside): duplicate code (vitest-dev#519) Co-authored-by: Nurettin Kaya <[email protected]> * feat(createEventHook): added interface (vitest-dev#531) * feat(createEventHook): added interface * added types for EventHookOn, EventHookOff, and EventHook trigger * feat(useStorage): allow custom serializer (vitest-dev#528) * feat(useStorage): allow custom serializer * update test * refactor(useMediaControls): Deprecate options that can simply be set as attributes (vitest-dev#514) * useMediaControls: Add `volumechange` event listener * fix: `mute` returned * feat: Deprecate video options: * `poster` * `autoplay` * `preload` * `loop` * `controls` * `playsinline` * `autoPictureInPicture` * fix: Fix deprecated behaviour in demo * fix: Remove deprecated usage from doc * refactor: More polite messages * fix: Remove `console.warn`s * chore: release v4.11.1 * refactor!: remove deprecated apis * chore: add next tag * chore: release v5.0.0-beta.1 * feat: introduce `components` & `directives` (vitest-dev#486) Co-authored-by: Anthony Fu <[email protected]> * docs: re-organize * chore: fix lint * docs: about components * chore: include directives * chore: release v5.0.0-beta.2 * chore: rollback jest * chore: fix docs build * docs: readme for components * docs: add @vueuse/gesture * chore: ship indexes.json * chore: release v5.0.0-beta.3 * feat(typedef): add return typedefs (vitest-dev#543) (vitest-dev#544) * refactor!: change publish strcture and support submodules, close vitest-dev#469 * chore: cleanup stories.tsx * docs: update docs about submodules * chore: fix docs * chore: release v5.0.0-beta.4 * chore: update lock * chore: release v5.0.0-beta.5 * chore: update deps and extend publish memory * refactor: remove `useDeviceLight` * chore: update * chore: fix tests * chore: release v5.0.0-beta.7 * refactor(useWebSocket)!: change immediate default for 5.0.0 (vitest-dev#545) * feat(useIpcRenderer): new add-one & new functions (vitest-dev#547) Co-authored-by: Anthony Fu <[email protected]> * chore: update deps * chore: release v5.0.0-beta.8 * chore: fix docs build * chore(usePointerSwipe): fix typo (vitest-dev#557) * fix(useAuth): now reqiures the auth instance, close vitest-dev#538 * chore: update deps * docs(biSyncRef): fix console output comment (vitest-dev#555) * docs: removed deprecated value from example (vitest-dev#556) * docs(guidlines): added guidelines (vitest-dev#535) * docs: update guidelines * chore: update guidelines Co-authored-by: Scott Bedard <[email protected]> Co-authored-by: Fabian <[email protected]> Co-authored-by: Ismail Gjevori <[email protected]> Co-authored-by: Alex Kozack <[email protected]> Co-authored-by: Shinigami <[email protected]> Co-authored-by: wheat <[email protected]> Co-authored-by: sibbng <[email protected]> Co-authored-by: JserWang <[email protected]> Co-authored-by: Pig Fang <[email protected]> Co-authored-by: ArcherGu <[email protected]> Co-authored-by: Ilya Komichev <[email protected]> Co-authored-by: Daiki Ojima <[email protected]> Co-authored-by: Manaus <[email protected]>

userquin added 3 commits January 9, 2022 12:23

feat: ui summary

e28ae6e

Merge branch 'main' into userquin/feat-ui-summary

7babb57

feat(ui): add summary

3cb7181

userquin added 8 commits January 9, 2022 15:26

Merge branch 'main' into userquin/feat-ui-summary

070ab38

# Conflicts: # packages/ui/client/components/Navigation.vue # packages/ui/client/components/TasksList.vue

chore: include running + adjust colors

593b902

chore: use v-show for graph (save state)

7a3e47f

fix: initial file on F5

ca0a1a8

chore: add tests entry to summary

3aee56e

chore: update skipped test color legend

a707146

chore: revert current module handling

111ea57

chore: progress bars width changes, update logic

41d8847

dammy001 reviewed Jan 9, 2022

View reviewed changes

chore: add border top to global progress bars

0f607b7

dammy001 reviewed Jan 9, 2022

View reviewed changes

chore: update requested changes

d284f20

userquin added 11 commits January 9, 2022 21:07

chore: add global time

291351c

chore: use total instead unref

289dc94

chore: use tests instead files for time

e2029cc

chore: currentModule was reverted

ab39493

chore: add navigation logic again

e48bffe

Merge remote-tracking branch 'origin/userquin/feat-ui-summary' into u…

b23cc2d

…serquin/feat-ui-summary # Conflicts: # packages/ui/client/components/FileDetails.vue

chore: adjust debounce logic

103583a

chore: fix split panes layout

d9f3677

cleanup: remove split ref

3dd68ea

chore: initialize nav and suite width equals

9b85406

chore: make search input grow

0b86602

Merge branch 'main' into userquin/feat-ui-summary

4594f20

antfu reviewed Jan 11, 2022

View reviewed changes

userquin added 4 commits January 11, 2022 19:16

chore: buttons title + report summary

c09c678

Merge remote-tracking branch 'origin/userquin/feat-ui-summary' into u…

ab4eece

…serquin/feat-ui-summary

chore: replace inject/provide with globals

beb439d

chore: change summary with dashboard

5e33ff8

chore: update dashboard

d475161

userquin and others added 7 commits January 12, 2022 00:41

chore: update files and tests sizes, paddings and gaps

d984f55

chore: make progress bar always visible

27bc979

chore: update dark bg color on dashboard section

8878ea4

chore: fix summary dashboard layout

e477e24

wip

59d092d

Merge branch 'main' into userquin/feat-ui-summary

1574d01

chore: update

1c59ca4

antfu added 2 commits January 18, 2022 13:29

Merge branch 'main' into userquin/feat-ui-summary

9cfe8b8

chore: keep simple for now

48c0cbd

antfu merged commit bdedbc2 into main Jan 18, 2022

antfu deleted the userquin/feat-ui-summary branch January 18, 2022 05:53

chaii3 pushed a commit to chaii3/vitest that referenced this pull request May 13, 2022

fix(useMediaControls): Removes tracks that have been inserted in html (…

941ac53

…vitest-dev#493)

chaii3 pushed a commit to chaii3/vitest that referenced this pull request May 13, 2022

fix(useMediaControls): Removes tracks that have been inserted in html (…

fca400c

…vitest-dev#493)

userquin mentioned this pull request Nov 22, 2022

feat(ui): add coverage #2364

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): add summary #493

feat(ui): add summary #493

userquin commented Jan 9, 2022

netlify bot commented Jan 9, 2022 •

edited

Loading

dammy001 Jan 9, 2022

dammy001 Jan 9, 2022

dammy001 left a comment

dammy001 Jan 9, 2022

userquin commented Jan 9, 2022

dammy001 commented Jan 9, 2022

userquin commented Jan 9, 2022

antfu commented Jan 11, 2022 •

edited

Loading

antfu Jan 11, 2022

userquin commented Jan 11, 2022

userquin commented Jan 11, 2022 •

edited

Loading

dammy001 commented Jan 13, 2022

userquin commented Jan 13, 2022 •

edited

Loading

dammy001 commented Jan 13, 2022

edimitchel commented Jan 14, 2022 •

edited

Loading

userquin commented Jan 14, 2022

		@@ -0,0 +1,96 @@
		<script setup lang="ts">
		const props = defineProps<{ total: number; failed: number; pass: number; inProgress: boolean }>()

feat(ui): add summary #493

feat(ui): add summary #493

Conversation

userquin commented Jan 9, 2022

netlify bot commented Jan 9, 2022 • edited Loading

dammy001 Jan 9, 2022

Choose a reason for hiding this comment

dammy001 Jan 9, 2022

Choose a reason for hiding this comment

dammy001 left a comment

Choose a reason for hiding this comment

dammy001 Jan 9, 2022

Choose a reason for hiding this comment

userquin commented Jan 9, 2022

dammy001 commented Jan 9, 2022

userquin commented Jan 9, 2022

antfu commented Jan 11, 2022 • edited Loading

antfu Jan 11, 2022

Choose a reason for hiding this comment

userquin commented Jan 11, 2022

userquin commented Jan 11, 2022 • edited Loading

dammy001 commented Jan 13, 2022

userquin commented Jan 13, 2022 • edited Loading

dammy001 commented Jan 13, 2022

edimitchel commented Jan 14, 2022 • edited Loading

userquin commented Jan 14, 2022

netlify bot commented Jan 9, 2022 •

edited

Loading

antfu commented Jan 11, 2022 •

edited

Loading

userquin commented Jan 11, 2022 •

edited

Loading

userquin commented Jan 13, 2022 •

edited

Loading

edimitchel commented Jan 14, 2022 •

edited

Loading