feat(ui): add dark theme to istanbul html reporter #6281

userquin · 2024-08-05T19:20:28Z

Description

This PR adds custom dark theme css for istambul html reporter modified from this https://userstyles.world/style/14631/istanbul-lcov-material-theme-darker

Check also istanbuljs/istanbuljs#553 (comment)

I need to override the css files when using standalone, rn only works when running Vitest UI (shouldn't work when running npx serve coverage)

index with dark theme

index with light theme

detail with dark theme

detail with light theme

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
Ideally, include a test that fails without this PR but passes with it.
Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

Run the tests with pnpm test:ci.

Documentation

If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

netlify · 2024-08-05T19:22:53Z

✅ Deploy Preview for vitest-dev ready!

Name	Link
🔨 Latest commit	`c7d8895`
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/66b125ffb806f40008b845de
😎 Deploy Preview	https://deploy-preview-6281--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 configuration.

userquin · 2024-08-05T22:28:14Z

Coverage including html folder when running standalone report (--reporter=html), no idea what's happening.

Added onFinishedReportCoverage to the html reporter to allow copy/paste custom css and dark script to html pages after coverage finish (update vitest core to call it), cannot use onFinished since the coverage run after it.

The html reporter not being resolved from local (added the reporter subpackage to root tsconfig base with no luck).

AriPerkkio

Instead of making this UI specific, could we jus create a custom coverage reporter that extends Istanbul's html reporter with theme toggle? And when ever user defines html reporter, we use that custom built-in one instead?

userquin · 2024-08-06T08:51:29Z

Html reporter is the custom reporter you are asking for. Vitest will check for html reporter in the configuration to include the reporter from the ui package: check coverage docs (for example, will not work with html-spa reporter).

This reporter is only used with Vitest UI or Browser Mode and will work only with the istambul html reporter (both istambul and v8 using this reporter).

IIRC Vlad asked in discord about changing the reporter name to web.

packages/ui/package.json

packages/ui/node/utils.ts

AriPerkkio · 2024-08-06T10:26:49Z

Html reporter is the custom reporter you are asking for. Vitest will check for html reporter in the configuration to include the reporter from the ui package: check coverage docs (for example, will not work with html-spa reporter).

This reporter is only used with Vitest UI or Browser Mode and will work only with the istambul html reporter (both istambul and v8 using this reporter).

Sorry I'm not sure I'm following here. Istanbul's html reporter is used to generate the report that Vitest UI shows. This PR wants to add custom CSS/JS for that report.

Why does this need to be Vitest UI specific only?

IIRC Vlad asked in discord about changing the reporter name to web.

Sure, we can do that. For the public API we would require users to specify web reporter, and then internally convert that to Istanbul's html reporter.

userquin · 2024-08-06T10:56:10Z

Sorry I'm not sure I'm following here. Istanbul's html reporter is used to generate the report that Vitest UI shows. This PR wants to add custom CSS/JS for that report.

Vitest UI will show the coverage link in the UI only when html reporter added to the configuration and coverage.enabled flag enabled. This PR changes the css styles and the html pages generated by Istanbul html reporter to support dark theme inside Vitest UI (rn, when switching Vitest UI to dark, the html from the coverage folder doesn't support dark theme: Vitest UI adding iframe for coverage via coverage middleware).

This PR is about integrating Istanbul html reporter in Vitest UI: it is out of scope how can we integrate dark theme outside Vitest UI. For example, some users may want to use system theme, others may want dark or light only (with a custom color palette like https://userstyles.world/style/14631/istanbul-lcov-material-theme-darker).

Vitest UI using vueuse to switch between dark and light themes, this PR adds the corresponding script to all html pages to access and watch the corresponding local storage theme key and updates the css files to match Vitest UI color palette.

Check linked Istanbul issue, there is a PR to add system theme to the html reporter.

NOTE: the Vitest UI html reporter also generating standalone output when enabling it via --reporter=html (check last tip in the docs: https://vitest.dev/guide/ui.html#vitest-ui).

userquin · 2024-08-06T15:53:19Z

packages/vitest/src/node/core.ts

@@ -1097,6 +1097,9 @@ export class Vitest {
        if (reporter instanceof WebSocketReporter) {
          reporter.onFinishedReportCoverage()
        }
+        else if ('onFinishedReportCoverage' in reporter && typeof reporter.onFinishedReportCoverage === 'function') {
+          await reporter.onFinishedReportCoverage()


should we find a better way to do this?

Is it possible to check reporter instanceof HTMLReporter just like WebSocketReporter above?

In #5242 (comment), we discussed and we didn't go with onFinishedReportCoverage at interface Reporter level for now (though it might change in reporter API rework #6147).

HTMLReporter is defined in @vitest/ui, not in vitest, so I don't think we can do that. Maybe we can add a special property 🤷🏻

How about adding a new type like BuildReporter?

userquin · 2024-08-06T16:49:55Z

packages/ui/node/reporter.ts

+  async onFinishedReportCoverage() {
+    await prepareReportCoverageFolder(this.ctx)
+  }
+
  async onFinished() {
    const result: HTMLReportData = {


This logic should be moved to onFinishedReportCoverage since the coverage still not generated:

running the standalone html reporter script will include ui client in the coverage report

we should remove the html folder on every run using standalone html reporter, otherwise the ui client from previous run will be included in the coverage report (when included the coverage inside the build)

Running this script from examples/basic folder:
pnpm vitest --ui --open --coverage.enabled=true --coverage.reporter=html --reporter=html --coverage.reportsDirectory=./html/coverage/

Running first time standalone html reporter (all good):

Running second time without cleanup html folder:

feat(ui): add dark theme to istambul html reporter

c7d8895

userquin added 2 commits August 5, 2024 21:25

chore: include istambul source link in base css

f27a687

chore: prepare standalone report

b1a85cf

AriPerkkio reviewed Aug 6, 2024

View reviewed changes

sheremet-va changed the title ~~feat(ui): add dark theme to istambul html reporter~~ feat(ui): add dark theme to istanbul html reporter Aug 6, 2024

userquin commented Aug 6, 2024

View reviewed changes

packages/ui/package.json Outdated Show resolved Hide resolved

userquin commented Aug 6, 2024

View reviewed changes

packages/ui/node/utils.ts Outdated Show resolved Hide resolved

userquin added 4 commits August 6, 2024 16:57

chore: rename istanbul css files

c54e7ce

chore: cleanup html reporter

5f37dfe

chore: update prepare report coverage folder logic

31ad9c8

chore: use dynamic import to load html reporter

5e93688

userquin marked this pull request as ready for review August 6, 2024 15:52

userquin commented Aug 6, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): add dark theme to istanbul html reporter #6281

feat(ui): add dark theme to istanbul html reporter #6281

userquin commented Aug 5, 2024 •

edited

Loading

netlify bot commented Aug 5, 2024

userquin commented Aug 5, 2024 •

edited

Loading

AriPerkkio left a comment

userquin commented Aug 6, 2024

AriPerkkio commented Aug 6, 2024

userquin commented Aug 6, 2024 •

edited

Loading

userquin Aug 6, 2024

hi-ogawa Aug 7, 2024

sheremet-va Aug 7, 2024 •

edited

Loading

userquin Aug 7, 2024

userquin Aug 6, 2024 •

edited

Loading

feat(ui): add dark theme to istanbul html reporter #6281

Are you sure you want to change the base?

feat(ui): add dark theme to istanbul html reporter #6281

Conversation

userquin commented Aug 5, 2024 • edited Loading

Description

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Documentation

Changesets

netlify bot commented Aug 5, 2024

✅ Deploy Preview for vitest-dev ready!

userquin commented Aug 5, 2024 • edited Loading

AriPerkkio left a comment

Choose a reason for hiding this comment

userquin commented Aug 6, 2024

AriPerkkio commented Aug 6, 2024

userquin commented Aug 6, 2024 • edited Loading

userquin Aug 6, 2024

Choose a reason for hiding this comment

hi-ogawa Aug 7, 2024

Choose a reason for hiding this comment

sheremet-va Aug 7, 2024 • edited Loading

Choose a reason for hiding this comment

userquin Aug 7, 2024

Choose a reason for hiding this comment

userquin Aug 6, 2024 • edited Loading

Choose a reason for hiding this comment

userquin commented Aug 5, 2024 •

edited

Loading

userquin commented Aug 5, 2024 •

edited

Loading

userquin commented Aug 6, 2024 •

edited

Loading

sheremet-va Aug 7, 2024 •

edited

Loading

userquin Aug 6, 2024 •

edited

Loading