Skip to content

Commit 8758cf8

Browse files
pavelfeldmanpavelfeldman
authored
chore: migrate html reporter to vite (#13116)
1 parent d59c2b9 commit 8758cf8

33 files changed

+246
-273
lines changed

‎package-lock.json

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/html-reporter/.gitignore

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1-
out/
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/html-reporter/bundle.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* Copyright (c) Microsoft Corporation.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import fs, { existsSync } from 'fs';
18+
import path from 'path';
19+
20+
/**
21+
* @returns {import('vite').Plugin}
22+
*/
23+
export function bundle() {
24+
let config;
25+
return {
26+
name: 'playwright-bundle',
27+
config(c) {
28+
config = c;
29+
},
30+
transformIndexHtml: {
31+
transform(html, ctx) {
32+
if (!ctx || !ctx.bundle)
33+
return html;
34+
for (const [, value] of Object.entries(ctx.bundle)) {
35+
if (value.code)
36+
html = html.replace(/<script type="module".*<\/script>/, () => `<script type="module">${value.code}</script>`);
37+
else
38+
html = html.replace(/<link rel="stylesheet"[^>]*>/, () => `<style type='text/css'>${value.source}</style>`);
39+
}
40+
return html;
41+
},
42+
},
43+
closeBundle: () => {
44+
if (existsSync(path.join(config.build.outDir, 'index.html'))) {
45+
const targetDir = path.join(__dirname, '..', 'playwright-core', 'lib', 'webpack', 'htmlReport');
46+
fs.mkdirSync(targetDir, { recursive: true });
47+
fs.copyFileSync(
48+
path.join(config.build.outDir, 'index.html'),
49+
path.join(targetDir, 'index.html'));
50+
}
51+
},
52+
}
53+
}

‎packages/html-reporter/bundleJsPlugin.js

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎packages/html-reporter/src/index.html renamed to ‎packages/html-reporter/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<title>Playwright Test Report</title>
2424
</head>
2525
<body>
26-
<div id=root></div>
26+
<div id='root'></div>
27+
<script type='module' src='/src/index.tsx'></script>
2728
</body>
2829
</html>

‎packages/html-reporter/package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
{
2-
"name": "html-reporter",
3-
"private": true
2+
"name": "html-reporter",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build && tsc",
8+
"preview": "vite preview"
9+
}
410
}

‎packages/html-reporter/playwright.config.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@
1515
*/
1616

1717
import { PlaywrightTestConfig, devices } from '@playwright/test';
18-
import path from 'path';
19-
import url from 'url';
2018

2119
const config: PlaywrightTestConfig = {
2220
testDir: 'src',
@@ -27,8 +25,14 @@ const config: PlaywrightTestConfig = {
2725
] : [
2826
['html', { open: 'on-failure' }]
2927
],
28+
webServer: {
29+
url: 'http://localhost:3101/tests.html',
30+
command: 'npm run dev',
31+
cwd: __dirname,
32+
reuseExistingServer: !process.env.CI,
33+
},
3034
use: {
31-
baseURL: url.pathToFileURL(path.join(__dirname, 'out', 'index.html')).toString(),
35+
baseURL: 'http://localhost:3101/tests.html',
3236
trace: 'on-first-retry',
3337
},
3438
projects: [

‎packages/html-reporter/src/filter.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
limitations under the License.
1515
*/
1616

17-
import type { TestCaseSummary } from '@playwright/test/src/reporters/html';
17+
import type { TestCaseSummary } from '@playwright-test/reporters/html';
1818

1919
export class Filter {
2020
project: string[] = [];

‎packages/html-reporter/src/headerView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
limitations under the License.
1515
*/
1616

17-
import type { Stats } from '@playwright/test/src/reporters/html';
17+
import type { Stats } from '@playwright-test/reporters/html';
1818
import * as React from 'react';
1919
import './colors.css';
2020
import './common.css';

‎packages/html-reporter/src/index.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,17 @@
1414
* limitations under the License.
1515
*/
1616

17-
import type { HTMLReport, TestAttachment } from '@playwright/test/src/reporters/html';
17+
import type { HTMLReport, TestAttachment } from '@playwright-test/reporters/html';
1818
import type zip from '@zip.js/zip.js';
19+
// @ts-ignore
20+
import zipImport from '@zip.js/zip.js/dist/zip-no-worker-inflate.min.js';
1921
import * as React from 'react';
2022
import * as ReactDOM from 'react-dom';
2123
import './colors.css';
2224
import { LoadedReport } from './loadedReport';
2325
import { ReportView } from './reportView';
26+
// @ts-ignore
27+
const zipjs = zipImport as typeof zip;
2428

2529
export type Metadata = Partial<{
2630
'generatedAt': number;
@@ -75,8 +79,6 @@ const extractMetadata = (attachments: TestAttachment[]): Metadata | undefined =>
7579
return out;
7680
};
7781

78-
const zipjs = (self as any).zip;
79-
8082
const ReportLoader: React.FC = () => {
8183
const [report, setReport] = React.useState<LoadedReport | undefined>();
8284
React.useEffect(() => {
@@ -97,7 +99,7 @@ class ZipReport implements LoadedReport {
9799
private _json!: HTMLReport & { metadata?: Metadata };
98100

99101
async load() {
100-
const zipReader = new zipjs.ZipReader(new zipjs.Data64URIReader(window.playwrightReportBase64), { useWebWorkers: false }) as zip.ZipReader;
102+
const zipReader = new zipjs.ZipReader(new zipjs.Data64URIReader((window as any).playwrightReportBase64), { useWebWorkers: false }) as zip.ZipReader;
101103
for (const entry of await zipReader.getEntries())
102104
this._entries.set(entry.filename, entry);
103105
this._json = await this.entry('report.json') as HTMLReport;

0 commit comments

Comments
 (0)