feat(ui): add html coverage (#3071)

Co-authored-by: Vladimir Sheremet <[email protected]>

Author: userquin

.eslintrc

@@ -23,6 +23,18 @@
           }
         ]
       }
+    },
+    {
+      // these files define vitest as peer dependency
+      "files": "packages/{coverage-*,ui,browser}/**/*.*",
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": ["path"]
+          }
+        ]
+      }
     }
   ]
 }

docs/config/index.md

@@ -776,6 +776,8 @@ The reporter has three different types:
   }
   ```
 
+Since Vitest 0.31.0, you can check your coverage report in Vitest UI: check [Vitest UI Coverage](/guide/coverage#vitest-ui) for more details.
+
 #### coverage.skipFull
 
 - **Type:** `boolean`

docs/guide/coverage.md

@@ -164,3 +164,15 @@ if (condition) {
 ## Other Options
 
 To see all configurable options for coverage, see the [coverage Config Reference](https://vitest.dev/config/#coverage).
+
+## Vitest UI
+
+Since Vitest 0.31.0, you can check your coverage report in [Vitest UI](./ui).
+
+If you have configured coverage reporters, don't forget to add `html` reporter to the list, Vitest UI will only enable html coverage report if it is present.
+
+<img alt="html coverage activation in Vitest UI" img-light src="/vitest-ui-show-coverage-light.png">
+<img alt="html coverage activation in Vitest UI" img-dark src="/vitest-ui-show-coverage-dark.png">
+
+<img alt="html coverage in Vitest UI" img-light src="/vitest-ui-coverage-light.png">
+<img alt="html coverage in Vitest UI" img-dark src="/vitest-ui-coverage-dark.png">

docs/guide/ui.md

@@ -34,6 +34,8 @@ export default {
 }
 ```
 
+Since Vitest 0.31.0, you can check your coverage report in Vitest UI: check [Vitest UI Coverage](/guide/coverage#vitest-ui) for more details.
+
 ::: warning
 If you still want to see how your tests are running in real time in the terminal, don't forget to add `default` reporter to `reporters` option: `['default', 'html']`.
 :::

docs/public/vitest-ui-coverage-dark.png

@@ -1,5 +1,4 @@
 import { createClient } from '@vitest/ws-client'
-// eslint-disable-next-line no-restricted-imports
 import type { ResolvedConfig } from 'vitest'
 import type { CancelReason, VitestRunner } from '@vitest/runner'
 import { createBrowserRunner } from './runner'

docs/public/vitest-ui-coverage-light.png

@@ -9,7 +9,6 @@ import { provider } from 'std-env'
 import type { EncodedSourceMap } from 'vite-node'
 import { coverageConfigDefaults } from 'vitest/config'
 import { BaseCoverageProvider } from 'vitest/coverage'
-// eslint-disable-next-line no-restricted-imports
 import type { AfterSuiteRunMeta, CoverageC8Options, CoverageProvider, ReportContext, ResolvedCoverageOptions } from 'vitest'
 import type { Vitest } from 'vitest/node'
 import type { Report } from 'c8'