fix(reporter)!: move ctx.log to ctx.logger.log, improve log flicking

[userquin]

Instead clearing the screen when requested, we just store the message (usually the RERUN XXX message) and then on first log/error received we check if we have the pending log/error and log to the console the pending log/error and the message at once.

https://streamable.com/92bizj

EDIT: only tested on IntelliJ on windows, we should check it also on macos and linux and also on VSCode. We also need to check it on multiple tests changes.

@dominikg can you check this on linux on IntelliJ/WebStorm (sorry to ping you direclty)

[netlify]

✅ Deploy Preview for vitest-dev ready!

Name	Link
🔨 Latest commit	109466e
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/62c93328b4aba10008edcdbb
😎 Deploy Preview	https://deploy-preview-1166--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[userquin]

We should also change the message on clearScreen to required string

[userquin]

we can add ansi-escapes and use it to clear the screen: https://github.com/sindresorhus/ansi-escapes

[userquin]

with ansi-escapes equivalent, the flickering is still there, appears less (check the _clearScreen method): https://streamable.com/kjgduo

[dominikg]

It does reduce the "flicker" on linux too.

However i have 2 concerns with this

1. it complicates the clearscreen api by requiring to pass a message to it
2. the effect on ux feels contraproductive: The "flicker" is a visual indicator that a rerun happens. Without it slight changes (like the expectation change in the video) appear mostly static which may be misunderstood as "test was not rerun". vitest may be a victim of it's speed here 🙈

[patak-dev]

The feedback issue is interesting. It is expected in a web app HMR but here it may be surprising as you suggest. I think it could still lead to a better DX, but we may need to give feedback somehow. Maybe a color flash for the error? But it starts to get more complex... IMO this is still good, but it isnt straightforward at the end

[userquin]

@dominikg about the first entry, it is internal and used only when rerun tests on changes or when deleting tests

@patak-dev maybe we can randomize the RERUN color, currently using blue

On Vite we have a plugin to delay the dev server startup, also a plugin to notify HMR updates on dev, maybe we can add here a system notification (joking) 😂 (https://github.com/mikaelbr/node-notifier)

[patak-dev]

Changing the color of RERUN is interesting, but it may also be confusing to users. Maybe we could add a char next to rerun that changes from one run to the next?
Something like a spinner that is rotating as you do changes?

There seem to be some good ones:

2 steps:

◩ -> ◪ -> ◩ -> ◪

◒ -> ◓ -> ◒ -> ◓

4 steps:

◑ -> ◒ -> ◐ -> ◓

[sheremet-va]

Changing the color of RERUN is interesting

Maybe we can add a number of reruns to RERUN? Like RERUN (3)

[userquin]

Something like a spinner that is rotating as you do changes?

https://streamable.com/6ipv4b

[userquin]

Changing the color of RERUN is interesting

Maybe we can add a number of reruns to RERUN? Like RERUN (3)

The problem it is global, we should add one per test: the RERUN log is about the current test, not the global, and also what happens when pressing a?

[sheremet-va]

So, what's up with this PR? 👁️ 👁️

[userquin]

@sheremet-va: with the latest tests I did, it seems that we need to change the way we send the messages to the console, the flicker can't be removed as we do now (IIRC, the command to clean and to run the tests is produce from different modules and in an asynchronous way), I need to review it (I'll try to pick it up on my vacation): anyway, the PR is in draft, you can close it, but don't delete the branch (a few weeks ago I cleaned my laptop and I don't know if I have it locally)

[patak-dev]

I think @antfu wanted to play a bit with it too, as he wasn't sure about the best way to show feedback to the user. I think that if the flicker can be removed from a technical POV, then Vitest could show the "rerun" feedback better than using it.

The 4 steps still look acceptable to me

◑ -> ◒ -> ◐ -> ◓

Here it is added to the Rerun button in a video by @userquin from before in the thread: https://streamable.com/6ipv4b
(I think it could look better out of the button, probably to the right of it)

[antfu]

Kapture.2022-07-09.at.00.43.17.mp4

Made it like this.

But I think our file list is somehow missing

Main branch:

[patak-dev]

I love how stable it is, and I understand the idea but at least to me it feels strange that the console will keep constantly updating. It could be distracting while looking at the results. If you go this way, I would prefer a single "Updated" is shown and then it disappears. When updating too quickly, the Updated may not disappear between updates but it is fine since the last time it goes away is enough feedback. Maybe it could be full bright first, and then go with a low-key color, then disappear, kind of like an opacity animation.

[antfu]

Kapture.2022-07-09.at.01.34.12.mp4

🫠

[userquin]

on windows also looks good, there is no flickering, the force=false do the trick.

[antfu]

Merging this for now and we can iterates if later we have better idea of presenting the updates