Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add html reporter based on Vitest UI (#2444)
* feat: vitest html report * chore: copy ui to vitest dist * feat: report copy ui dist * feat: ui report version builder * fix: copy file * chore: remove * feat: html metadata path * feat: add declare * feat: static file client * feat: mock rpc * fix: mock error * chore: update meta * chore: compress json * chore: comment * chore: update merge config * chore: lock * feat: remove all control command from ui * chore: remove * feat: report command * feat: version tag * chore: reset lock file * feat: remove hooks * chore: update * fix: runningPromise * chore: update debug mode and disable click on transform * docs: report * chore: remove the version mark * feat: report * fix: lint * chore: copy ui from @vitest/ui * chore: export report from ui * chore: update * fix: lint * docs: ui html report * feat: ensurePackageInstalled * update * feat: more info * chore: improve documentation and tests * chore: fix UI bundle size * chore: ui tests * perf: remove output report using the global variable to judge report mode * chore: update * fix: build * fix: report * fix: parse * chore: fix html reporters test * chore: don't store config in html reporter test * chore: update ui docs * feat: log * chore: fix tests * test: fix html reporter tests * docs add vitest fo UI reporter Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>
- Loading branch information
1 parent
881bd7a
commit b8f34eb
Showing
31 changed files
with
641 additions
and
151 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import type { BirpcReturn } from 'birpc' | ||
| import type { VitestClient } from '@vitest/ws-client' | ||
| import type { WebSocketHandlers } from 'vitest/src/api/types' | ||
| import { parse } from 'flatted' | ||
| import type { File, ModuleGraphData, ResolvedConfig } from 'vitest/src/types' | ||
| import { StateManager } from '../../../../vitest/src/node/state' | ||
|
|
||
| interface HTMLReportMetadata { | ||
| paths: string[] | ||
| files: File[] | ||
| config: ResolvedConfig | ||
| moduleGraph: Record<string, ModuleGraphData> | ||
| } | ||
|
|
||
| const noop: any = () => {} | ||
| const asyncNoop: any = () => Promise.resolve() | ||
|
|
||
| export function createStaticClient(): VitestClient { | ||
| const ctx = reactive({ | ||
| state: new StateManager(), | ||
| waitForConnection, | ||
| reconnect, | ||
| ws: new EventTarget(), | ||
| }) as VitestClient | ||
|
|
||
| ctx.state.filesMap = reactive(ctx.state.filesMap) | ||
| ctx.state.idMap = reactive(ctx.state.idMap) | ||
|
|
||
| let metadata!: HTMLReportMetadata | ||
|
|
||
| const rpc = { | ||
| getFiles: () => { | ||
| return metadata.files | ||
| }, | ||
| getPaths: async () => { | ||
| return metadata.paths | ||
| }, | ||
| getConfig: () => { | ||
| return metadata.config | ||
| }, | ||
| getModuleGraph: async (id) => { | ||
| return metadata.moduleGraph[id] | ||
| }, | ||
| getTransformResult: async (id) => { | ||
| return { | ||
| code: id, | ||
| source: '', | ||
| } | ||
| }, | ||
| readFile: async (id) => { | ||
| return Promise.resolve(id) | ||
| }, | ||
| onWatcherStart: asyncNoop, | ||
| onFinished: asyncNoop, | ||
| onCollected: asyncNoop, | ||
| onTaskUpdate: noop, | ||
| writeFile: asyncNoop, | ||
| rerun: asyncNoop, | ||
| updateSnapshot: asyncNoop, | ||
| } as WebSocketHandlers | ||
|
|
||
| ctx.rpc = rpc as any as BirpcReturn<WebSocketHandlers> | ||
|
|
||
| let openPromise: Promise<void> | ||
|
|
||
| function reconnect() { | ||
| registerMetadata() | ||
| } | ||
|
|
||
| async function registerMetadata() { | ||
| const res = await fetch(window.METADATA_PATH!) | ||
| metadata = parse(await res.text()) as HTMLReportMetadata | ||
| const event = new Event('open') | ||
| ctx.ws.dispatchEvent(event) | ||
| } | ||
|
|
||
| registerMetadata() | ||
|
|
||
| function waitForConnection() { | ||
| return openPromise | ||
| } | ||
|
|
||
| return ctx | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { existsSync, promises as fs } from 'node:fs' | ||
| import { fileURLToPath } from 'node:url' | ||
| import { basename, dirname, relative, resolve } from 'pathe' | ||
| import c from 'picocolors' | ||
| import fg from 'fast-glob' | ||
| import { stringify } from 'flatted' | ||
| // eslint-disable-next-line no-restricted-imports | ||
| import type { File, ModuleGraphData, Reporter, ResolvedConfig, Vitest } from 'vitest' | ||
| import { getModuleGraph } from '../../vitest/src/utils/graph' | ||
| import { getOutputFile } from '../../vitest/src/utils/config-helpers' | ||
|
|
||
| interface HTMLReportData { | ||
| paths: string[] | ||
| files: File[] | ||
| config: ResolvedConfig | ||
| moduleGraph: Record<string, ModuleGraphData> | ||
| } | ||
|
|
||
| const distDir = resolve(fileURLToPath(import.meta.url), '../../dist') | ||
|
|
||
| export default class HTMLReporter implements Reporter { | ||
| start = 0 | ||
| ctx!: Vitest | ||
| reportUIPath!: string | ||
|
|
||
| async onInit(ctx: Vitest) { | ||
| this.ctx = ctx | ||
| this.start = Date.now() | ||
| } | ||
|
|
||
| async onFinished() { | ||
| const result: HTMLReportData = { | ||
| paths: await this.ctx.state.getPaths(), | ||
| files: this.ctx.state.getFiles(), | ||
| config: this.ctx.config, | ||
| moduleGraph: {}, | ||
| } | ||
| await Promise.all( | ||
| result.files.map(async (file) => { | ||
| result.moduleGraph[file.filepath] = await getModuleGraph(this.ctx, file.filepath) | ||
| }), | ||
| ) | ||
| await this.writeReport(stringify(result)) | ||
| } | ||
|
|
||
| async writeReport(report: string) { | ||
| const htmlFile = getOutputFile(this.ctx.config, 'html') || 'html/index.html' | ||
| const htmlFileName = basename(htmlFile) | ||
| const htmlDir = resolve(this.ctx.config.root, dirname(htmlFile)) | ||
|
|
||
| const metaFile = resolve(htmlDir, 'html.meta.json') | ||
|
|
||
| if (!existsSync(htmlDir)) | ||
| await fs.mkdir(resolve(htmlDir, 'assets'), { recursive: true }) | ||
|
|
||
| await fs.writeFile(metaFile, report, 'utf-8') | ||
| const ui = resolve(distDir, 'client') | ||
| // copy ui | ||
| const files = fg.sync('**/*', { cwd: ui }) | ||
| await Promise.all(files.map(async (f) => { | ||
| if (f === 'index.html') { | ||
| const html = await fs.readFile(resolve(ui, f), 'utf-8') | ||
| const filePath = relative(htmlDir, metaFile) | ||
| await fs.writeFile( | ||
| resolve(htmlDir, htmlFileName), | ||
| html.replace('<!-- !LOAD_METADATA! -->', `<script>window.METADATA_PATH="${filePath}"</script>`), | ||
| ) | ||
| } | ||
| else { | ||
| await fs.copyFile(resolve(ui, f), resolve(htmlDir, f)) | ||
| } | ||
| })) | ||
|
|
||
| this.ctx.logger.log(`${c.bold(c.inverse(c.magenta(' HTML ')))} ${c.magenta('Report is generated')}`) | ||
| this.ctx.logger.log(`${c.dim(' You can run ')}${c.bold(`npx vite preview --base __vitest__ --outDir ${relative(this.ctx.config.root, htmlDir)}`)}${c.dim(' to see the test results.')}`) | ||
| } | ||
| } |
Oops, something went wrong.