@vizejs/vite-plugin-musea 0.0.1-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -0
- package/dist/cli.d.ts +1 -0
- package/dist/cli.js +222 -0
- package/dist/cli.js.map +1 -0
- package/dist/index.d.ts +95 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1512 -0
- package/dist/index.js.map +1 -0
- package/dist/vrt-BfuTRv-J.d.ts +217 -0
- package/dist/vrt-BfuTRv-J.d.ts.map +1 -0
- package/dist/vrt-DRwtnkE5.js +773 -0
- package/dist/vrt-DRwtnkE5.js.map +1 -0
- package/dist/vrt.d.ts +2 -0
- package/dist/vrt.js +3 -0
- package/package.json +76 -0
|
@@ -0,0 +1,773 @@
|
|
|
1
|
+
import fs from "node:fs";
|
|
2
|
+
import path from "node:path";
|
|
3
|
+
import { PNG } from "pngjs";
|
|
4
|
+
|
|
5
|
+
//#region src/vrt.ts
|
|
6
|
+
/**
|
|
7
|
+
* VRT runner using Playwright.
|
|
8
|
+
*/
|
|
9
|
+
var MuseaVrtRunner = class {
|
|
10
|
+
options;
|
|
11
|
+
browser = null;
|
|
12
|
+
startTime = 0;
|
|
13
|
+
constructor(options = {}) {
|
|
14
|
+
this.options = {
|
|
15
|
+
snapshotDir: options.snapshotDir ?? ".vize/snapshots",
|
|
16
|
+
threshold: options.threshold ?? .1,
|
|
17
|
+
viewports: options.viewports ?? [{
|
|
18
|
+
width: 1280,
|
|
19
|
+
height: 720,
|
|
20
|
+
name: "desktop"
|
|
21
|
+
}, {
|
|
22
|
+
width: 375,
|
|
23
|
+
height: 667,
|
|
24
|
+
name: "mobile"
|
|
25
|
+
}]
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Initialize Playwright browser.
|
|
30
|
+
*/
|
|
31
|
+
async init() {
|
|
32
|
+
const { chromium } = await import("playwright");
|
|
33
|
+
this.browser = await chromium.launch({ headless: true });
|
|
34
|
+
this.startTime = Date.now();
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Close browser and cleanup.
|
|
38
|
+
*/
|
|
39
|
+
async close() {
|
|
40
|
+
if (this.browser) {
|
|
41
|
+
await this.browser.close();
|
|
42
|
+
this.browser = null;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Run VRT tests for all Art files.
|
|
47
|
+
*/
|
|
48
|
+
async runAllTests(artFiles, baseUrl) {
|
|
49
|
+
if (!this.browser) throw new Error("VRT runner not initialized. Call init() first.");
|
|
50
|
+
const results = [];
|
|
51
|
+
for (const art of artFiles) for (const variant of art.variants) {
|
|
52
|
+
if (variant.skipVrt) continue;
|
|
53
|
+
for (const viewport of this.options.viewports) {
|
|
54
|
+
const result = await this.captureAndCompare(art, variant.name, viewport, baseUrl);
|
|
55
|
+
results.push(result);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return results;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Capture screenshot and compare with baseline.
|
|
62
|
+
*/
|
|
63
|
+
async captureAndCompare(art, variantName, viewport, baseUrl) {
|
|
64
|
+
if (!this.browser) throw new Error("VRT runner not initialized. Call init() first.");
|
|
65
|
+
const snapshotDir = this.options.snapshotDir;
|
|
66
|
+
const artBaseName = path.basename(art.path, ".art.vue");
|
|
67
|
+
const viewportName = viewport.name || `${viewport.width}x${viewport.height}`;
|
|
68
|
+
const snapshotName = `${artBaseName}--${variantName}--${viewportName}.png`;
|
|
69
|
+
const snapshotPath = path.join(snapshotDir, snapshotName);
|
|
70
|
+
const currentPath = path.join(snapshotDir, "current", snapshotName);
|
|
71
|
+
const diffPath = path.join(snapshotDir, "diff", snapshotName);
|
|
72
|
+
await fs.promises.mkdir(path.dirname(snapshotPath), { recursive: true });
|
|
73
|
+
await fs.promises.mkdir(path.join(snapshotDir, "current"), { recursive: true });
|
|
74
|
+
await fs.promises.mkdir(path.join(snapshotDir, "diff"), { recursive: true });
|
|
75
|
+
let context = null;
|
|
76
|
+
let page = null;
|
|
77
|
+
try {
|
|
78
|
+
context = await this.browser.newContext({
|
|
79
|
+
viewport: {
|
|
80
|
+
width: viewport.width,
|
|
81
|
+
height: viewport.height
|
|
82
|
+
},
|
|
83
|
+
deviceScaleFactor: viewport.deviceScaleFactor ?? 1
|
|
84
|
+
});
|
|
85
|
+
page = await context.newPage();
|
|
86
|
+
const variantUrl = this.buildVariantUrl(baseUrl, art.path, variantName);
|
|
87
|
+
await page.goto(variantUrl, { waitUntil: "networkidle" });
|
|
88
|
+
await page.waitForSelector(".musea-variant", { timeout: 1e4 });
|
|
89
|
+
await page.waitForTimeout(100);
|
|
90
|
+
await page.screenshot({
|
|
91
|
+
path: currentPath,
|
|
92
|
+
fullPage: false
|
|
93
|
+
});
|
|
94
|
+
const hasBaseline = await fileExists(snapshotPath);
|
|
95
|
+
if (!hasBaseline) {
|
|
96
|
+
await fs.promises.copyFile(currentPath, snapshotPath);
|
|
97
|
+
return {
|
|
98
|
+
artPath: art.path,
|
|
99
|
+
variantName,
|
|
100
|
+
viewport,
|
|
101
|
+
passed: true,
|
|
102
|
+
snapshotPath,
|
|
103
|
+
currentPath,
|
|
104
|
+
isNew: true
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
const comparison = await this.compareImages(snapshotPath, currentPath, diffPath);
|
|
108
|
+
const passed = comparison.diffPercentage <= this.options.threshold;
|
|
109
|
+
return {
|
|
110
|
+
artPath: art.path,
|
|
111
|
+
variantName,
|
|
112
|
+
viewport,
|
|
113
|
+
passed,
|
|
114
|
+
snapshotPath,
|
|
115
|
+
currentPath,
|
|
116
|
+
diffPath: passed ? void 0 : diffPath,
|
|
117
|
+
diffPercentage: comparison.diffPercentage,
|
|
118
|
+
diffPixels: comparison.diffPixels,
|
|
119
|
+
totalPixels: comparison.totalPixels
|
|
120
|
+
};
|
|
121
|
+
} catch (error) {
|
|
122
|
+
return {
|
|
123
|
+
artPath: art.path,
|
|
124
|
+
variantName,
|
|
125
|
+
viewport,
|
|
126
|
+
passed: false,
|
|
127
|
+
snapshotPath,
|
|
128
|
+
error: error instanceof Error ? error.message : String(error)
|
|
129
|
+
};
|
|
130
|
+
} finally {
|
|
131
|
+
if (page) await page.close();
|
|
132
|
+
if (context) await context.close();
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Update baseline snapshots with current screenshots.
|
|
137
|
+
*/
|
|
138
|
+
async updateBaselines(results) {
|
|
139
|
+
let updated = 0;
|
|
140
|
+
const snapshotDir = this.options.snapshotDir;
|
|
141
|
+
const currentDir = path.join(snapshotDir, "current");
|
|
142
|
+
for (const result of results) {
|
|
143
|
+
const currentPath = path.join(currentDir, path.basename(result.snapshotPath));
|
|
144
|
+
if (await fileExists(currentPath)) {
|
|
145
|
+
await fs.promises.copyFile(currentPath, result.snapshotPath);
|
|
146
|
+
updated++;
|
|
147
|
+
console.log(`[vrt] Updated: ${path.basename(result.snapshotPath)}`);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
return updated;
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* Get VRT summary statistics.
|
|
154
|
+
*/
|
|
155
|
+
getSummary(results) {
|
|
156
|
+
return {
|
|
157
|
+
total: results.length,
|
|
158
|
+
passed: results.filter((r) => r.passed && !r.isNew).length,
|
|
159
|
+
failed: results.filter((r) => !r.passed && !r.error).length,
|
|
160
|
+
new: results.filter((r) => r.isNew).length,
|
|
161
|
+
skipped: results.filter((r) => r.error).length,
|
|
162
|
+
duration: Date.now() - this.startTime
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* Build URL for variant preview.
|
|
167
|
+
*/
|
|
168
|
+
buildVariantUrl(baseUrl, artPath, variantName) {
|
|
169
|
+
const encodedPath = encodeURIComponent(artPath);
|
|
170
|
+
const encodedVariant = encodeURIComponent(variantName);
|
|
171
|
+
return `${baseUrl}/__musea__/preview?art=${encodedPath}&variant=${encodedVariant}`;
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Compare two PNG images and generate a diff image.
|
|
175
|
+
* Returns pixel difference statistics.
|
|
176
|
+
*/
|
|
177
|
+
async compareImages(baselinePath, currentPath, diffPath) {
|
|
178
|
+
const baseline = await readPng(baselinePath);
|
|
179
|
+
const current = await readPng(currentPath);
|
|
180
|
+
if (baseline.width !== current.width || baseline.height !== current.height) {
|
|
181
|
+
const width$1 = Math.max(baseline.width, current.width);
|
|
182
|
+
const height$1 = Math.max(baseline.height, current.height);
|
|
183
|
+
const diff$1 = new PNG({
|
|
184
|
+
width: width$1,
|
|
185
|
+
height: height$1
|
|
186
|
+
});
|
|
187
|
+
for (let i = 0; i < diff$1.data.length; i += 4) {
|
|
188
|
+
diff$1.data[i] = 255;
|
|
189
|
+
diff$1.data[i + 1] = 0;
|
|
190
|
+
diff$1.data[i + 2] = 0;
|
|
191
|
+
diff$1.data[i + 3] = 255;
|
|
192
|
+
}
|
|
193
|
+
await writePng(diff$1, diffPath);
|
|
194
|
+
return {
|
|
195
|
+
diffPixels: width$1 * height$1,
|
|
196
|
+
totalPixels: width$1 * height$1,
|
|
197
|
+
diffPercentage: 100
|
|
198
|
+
};
|
|
199
|
+
}
|
|
200
|
+
const width = baseline.width;
|
|
201
|
+
const height = baseline.height;
|
|
202
|
+
const totalPixels = width * height;
|
|
203
|
+
const diff = new PNG({
|
|
204
|
+
width,
|
|
205
|
+
height
|
|
206
|
+
});
|
|
207
|
+
let diffPixels = 0;
|
|
208
|
+
const threshold = .1;
|
|
209
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
210
|
+
const idx = (y * width + x) * 4;
|
|
211
|
+
const r1 = baseline.data[idx];
|
|
212
|
+
const g1 = baseline.data[idx + 1];
|
|
213
|
+
const b1 = baseline.data[idx + 2];
|
|
214
|
+
const a1 = baseline.data[idx + 3];
|
|
215
|
+
const r2 = current.data[idx];
|
|
216
|
+
const g2 = current.data[idx + 1];
|
|
217
|
+
const b2 = current.data[idx + 2];
|
|
218
|
+
const a2 = current.data[idx + 3];
|
|
219
|
+
const delta = colorDelta(r1, g1, b1, a1, r2, g2, b2, a2);
|
|
220
|
+
if (delta > threshold * 255 * 255) {
|
|
221
|
+
diffPixels++;
|
|
222
|
+
diff.data[idx] = 255;
|
|
223
|
+
diff.data[idx + 1] = 0;
|
|
224
|
+
diff.data[idx + 2] = 0;
|
|
225
|
+
diff.data[idx + 3] = 255;
|
|
226
|
+
} else {
|
|
227
|
+
const gray = Math.round((r2 + g2 + b2) / 3);
|
|
228
|
+
diff.data[idx] = gray;
|
|
229
|
+
diff.data[idx + 1] = gray;
|
|
230
|
+
diff.data[idx + 2] = gray;
|
|
231
|
+
diff.data[idx + 3] = 128;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
if (diffPixels > 0) await writePng(diff, diffPath);
|
|
235
|
+
const diffPercentage = diffPixels / totalPixels * 100;
|
|
236
|
+
return {
|
|
237
|
+
diffPixels,
|
|
238
|
+
totalPixels,
|
|
239
|
+
diffPercentage
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
/**
|
|
244
|
+
* Generate VRT report in HTML format.
|
|
245
|
+
* Uses Musea design language for consistency.
|
|
246
|
+
*/
|
|
247
|
+
function generateVrtReport(results, summary) {
|
|
248
|
+
const formatDuration = (ms) => {
|
|
249
|
+
if (ms < 1e3) return `${ms}ms`;
|
|
250
|
+
const seconds = Math.floor(ms / 1e3);
|
|
251
|
+
const minutes = Math.floor(seconds / 60);
|
|
252
|
+
if (minutes === 0) return `${seconds}s`;
|
|
253
|
+
return `${minutes}m ${seconds % 60}s`;
|
|
254
|
+
};
|
|
255
|
+
const timestamp = new Date().toLocaleString("ja-JP", {
|
|
256
|
+
year: "numeric",
|
|
257
|
+
month: "2-digit",
|
|
258
|
+
day: "2-digit",
|
|
259
|
+
hour: "2-digit",
|
|
260
|
+
minute: "2-digit"
|
|
261
|
+
});
|
|
262
|
+
const html = `<!DOCTYPE html>
|
|
263
|
+
<html lang="en">
|
|
264
|
+
<head>
|
|
265
|
+
<meta charset="UTF-8">
|
|
266
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
267
|
+
<title>VRT Report - Musea</title>
|
|
268
|
+
<style>
|
|
269
|
+
:root {
|
|
270
|
+
--musea-bg-primary: #0d0d0d;
|
|
271
|
+
--musea-bg-secondary: #1a1815;
|
|
272
|
+
--musea-bg-tertiary: #252220;
|
|
273
|
+
--musea-accent: #a34828;
|
|
274
|
+
--musea-accent-hover: #c45a32;
|
|
275
|
+
--musea-text: #e6e9f0;
|
|
276
|
+
--musea-text-muted: #7b8494;
|
|
277
|
+
--musea-border: #3a3530;
|
|
278
|
+
--musea-success: #4ade80;
|
|
279
|
+
--musea-error: #f87171;
|
|
280
|
+
--musea-info: #60a5fa;
|
|
281
|
+
--musea-warning: #fbbf24;
|
|
282
|
+
}
|
|
283
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
284
|
+
body {
|
|
285
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
286
|
+
background: var(--musea-bg-primary);
|
|
287
|
+
color: var(--musea-text);
|
|
288
|
+
min-height: 100vh;
|
|
289
|
+
line-height: 1.5;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Header */
|
|
293
|
+
.header {
|
|
294
|
+
background: var(--musea-bg-secondary);
|
|
295
|
+
border-bottom: 1px solid var(--musea-border);
|
|
296
|
+
padding: 1rem 2rem;
|
|
297
|
+
display: flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
justify-content: space-between;
|
|
300
|
+
position: sticky;
|
|
301
|
+
top: 0;
|
|
302
|
+
z-index: 100;
|
|
303
|
+
}
|
|
304
|
+
.header-left {
|
|
305
|
+
display: flex;
|
|
306
|
+
align-items: center;
|
|
307
|
+
gap: 1rem;
|
|
308
|
+
}
|
|
309
|
+
.logo {
|
|
310
|
+
font-size: 1.25rem;
|
|
311
|
+
font-weight: 700;
|
|
312
|
+
color: var(--musea-accent);
|
|
313
|
+
}
|
|
314
|
+
.header-title {
|
|
315
|
+
color: var(--musea-text-muted);
|
|
316
|
+
font-size: 0.875rem;
|
|
317
|
+
}
|
|
318
|
+
.header-meta {
|
|
319
|
+
display: flex;
|
|
320
|
+
align-items: center;
|
|
321
|
+
gap: 1.5rem;
|
|
322
|
+
font-size: 0.8125rem;
|
|
323
|
+
color: var(--musea-text-muted);
|
|
324
|
+
}
|
|
325
|
+
.header-meta span {
|
|
326
|
+
display: flex;
|
|
327
|
+
align-items: center;
|
|
328
|
+
gap: 0.375rem;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/* Main content */
|
|
332
|
+
.main {
|
|
333
|
+
max-width: 1400px;
|
|
334
|
+
margin: 0 auto;
|
|
335
|
+
padding: 2rem;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
/* Summary cards */
|
|
339
|
+
.summary {
|
|
340
|
+
display: grid;
|
|
341
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
342
|
+
gap: 1rem;
|
|
343
|
+
margin-bottom: 2rem;
|
|
344
|
+
}
|
|
345
|
+
.stat {
|
|
346
|
+
background: var(--musea-bg-secondary);
|
|
347
|
+
border: 1px solid var(--musea-border);
|
|
348
|
+
border-radius: 8px;
|
|
349
|
+
padding: 1.25rem;
|
|
350
|
+
position: relative;
|
|
351
|
+
overflow: hidden;
|
|
352
|
+
}
|
|
353
|
+
.stat::before {
|
|
354
|
+
content: '';
|
|
355
|
+
position: absolute;
|
|
356
|
+
left: 0;
|
|
357
|
+
top: 0;
|
|
358
|
+
bottom: 0;
|
|
359
|
+
width: 3px;
|
|
360
|
+
}
|
|
361
|
+
.stat.passed::before { background: var(--musea-success); }
|
|
362
|
+
.stat.failed::before { background: var(--musea-error); }
|
|
363
|
+
.stat.new::before { background: var(--musea-info); }
|
|
364
|
+
.stat.skipped::before { background: var(--musea-warning); }
|
|
365
|
+
.stat-value {
|
|
366
|
+
font-size: 2rem;
|
|
367
|
+
font-weight: 700;
|
|
368
|
+
font-variant-numeric: tabular-nums;
|
|
369
|
+
line-height: 1;
|
|
370
|
+
margin-bottom: 0.25rem;
|
|
371
|
+
}
|
|
372
|
+
.stat.passed .stat-value { color: var(--musea-success); }
|
|
373
|
+
.stat.failed .stat-value { color: var(--musea-error); }
|
|
374
|
+
.stat.new .stat-value { color: var(--musea-info); }
|
|
375
|
+
.stat.skipped .stat-value { color: var(--musea-warning); }
|
|
376
|
+
.stat-label {
|
|
377
|
+
color: var(--musea-text-muted);
|
|
378
|
+
font-size: 0.75rem;
|
|
379
|
+
text-transform: uppercase;
|
|
380
|
+
letter-spacing: 0.08em;
|
|
381
|
+
font-weight: 500;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* Filters */
|
|
385
|
+
.filters {
|
|
386
|
+
display: flex;
|
|
387
|
+
gap: 0.5rem;
|
|
388
|
+
margin-bottom: 1.5rem;
|
|
389
|
+
flex-wrap: wrap;
|
|
390
|
+
}
|
|
391
|
+
.filter-btn {
|
|
392
|
+
background: var(--musea-bg-secondary);
|
|
393
|
+
border: 1px solid var(--musea-border);
|
|
394
|
+
color: var(--musea-text);
|
|
395
|
+
padding: 0.5rem 1rem;
|
|
396
|
+
border-radius: 6px;
|
|
397
|
+
cursor: pointer;
|
|
398
|
+
font-size: 0.8125rem;
|
|
399
|
+
font-weight: 500;
|
|
400
|
+
transition: all 0.15s ease;
|
|
401
|
+
}
|
|
402
|
+
.filter-btn:hover {
|
|
403
|
+
background: var(--musea-bg-tertiary);
|
|
404
|
+
border-color: var(--musea-text-muted);
|
|
405
|
+
}
|
|
406
|
+
.filter-btn.active {
|
|
407
|
+
background: var(--musea-accent);
|
|
408
|
+
border-color: var(--musea-accent);
|
|
409
|
+
color: #fff;
|
|
410
|
+
}
|
|
411
|
+
.filter-btn .count {
|
|
412
|
+
opacity: 0.7;
|
|
413
|
+
margin-left: 0.25rem;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* Results */
|
|
417
|
+
.results {
|
|
418
|
+
display: flex;
|
|
419
|
+
flex-direction: column;
|
|
420
|
+
gap: 0.75rem;
|
|
421
|
+
}
|
|
422
|
+
.result {
|
|
423
|
+
background: var(--musea-bg-secondary);
|
|
424
|
+
border: 1px solid var(--musea-border);
|
|
425
|
+
border-radius: 8px;
|
|
426
|
+
overflow: hidden;
|
|
427
|
+
transition: border-color 0.15s ease;
|
|
428
|
+
}
|
|
429
|
+
.result:hover {
|
|
430
|
+
border-color: var(--musea-text-muted);
|
|
431
|
+
}
|
|
432
|
+
.result-header {
|
|
433
|
+
padding: 1rem 1.25rem;
|
|
434
|
+
display: flex;
|
|
435
|
+
justify-content: space-between;
|
|
436
|
+
align-items: center;
|
|
437
|
+
cursor: pointer;
|
|
438
|
+
border-left: 3px solid transparent;
|
|
439
|
+
background: var(--musea-bg-tertiary);
|
|
440
|
+
}
|
|
441
|
+
.result.passed .result-header { border-left-color: var(--musea-success); }
|
|
442
|
+
.result.failed .result-header { border-left-color: var(--musea-error); }
|
|
443
|
+
.result.new .result-header { border-left-color: var(--musea-info); }
|
|
444
|
+
.result.error .result-header { border-left-color: var(--musea-warning); }
|
|
445
|
+
|
|
446
|
+
.result-info {
|
|
447
|
+
display: flex;
|
|
448
|
+
align-items: center;
|
|
449
|
+
gap: 1rem;
|
|
450
|
+
}
|
|
451
|
+
.result-name {
|
|
452
|
+
font-weight: 600;
|
|
453
|
+
font-size: 0.9375rem;
|
|
454
|
+
}
|
|
455
|
+
.result-meta {
|
|
456
|
+
color: var(--musea-text-muted);
|
|
457
|
+
font-size: 0.8125rem;
|
|
458
|
+
padding: 0.125rem 0.5rem;
|
|
459
|
+
background: var(--musea-bg-secondary);
|
|
460
|
+
border-radius: 4px;
|
|
461
|
+
}
|
|
462
|
+
.result-badge {
|
|
463
|
+
padding: 0.25rem 0.625rem;
|
|
464
|
+
border-radius: 4px;
|
|
465
|
+
font-size: 0.6875rem;
|
|
466
|
+
font-weight: 600;
|
|
467
|
+
text-transform: uppercase;
|
|
468
|
+
letter-spacing: 0.04em;
|
|
469
|
+
}
|
|
470
|
+
.result.passed .result-badge { background: rgba(74, 222, 128, 0.15); color: var(--musea-success); }
|
|
471
|
+
.result.failed .result-badge { background: rgba(248, 113, 113, 0.15); color: var(--musea-error); }
|
|
472
|
+
.result.new .result-badge { background: rgba(96, 165, 250, 0.15); color: var(--musea-info); }
|
|
473
|
+
.result.error .result-badge { background: rgba(251, 191, 36, 0.15); color: var(--musea-warning); }
|
|
474
|
+
|
|
475
|
+
.result-body {
|
|
476
|
+
border-top: 1px solid var(--musea-border);
|
|
477
|
+
}
|
|
478
|
+
.result-details {
|
|
479
|
+
padding: 0.875rem 1.25rem;
|
|
480
|
+
font-size: 0.8125rem;
|
|
481
|
+
color: var(--musea-text-muted);
|
|
482
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
483
|
+
background: var(--musea-bg-primary);
|
|
484
|
+
}
|
|
485
|
+
.result-details.error {
|
|
486
|
+
color: var(--musea-error);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
/* Image comparison */
|
|
490
|
+
.result-images {
|
|
491
|
+
display: grid;
|
|
492
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
493
|
+
gap: 1rem;
|
|
494
|
+
padding: 1.25rem;
|
|
495
|
+
background: var(--musea-bg-primary);
|
|
496
|
+
}
|
|
497
|
+
.image-container {
|
|
498
|
+
background: var(--musea-bg-secondary);
|
|
499
|
+
border: 1px solid var(--musea-border);
|
|
500
|
+
border-radius: 6px;
|
|
501
|
+
overflow: hidden;
|
|
502
|
+
}
|
|
503
|
+
.image-label {
|
|
504
|
+
padding: 0.625rem 0.875rem;
|
|
505
|
+
font-size: 0.6875rem;
|
|
506
|
+
font-weight: 600;
|
|
507
|
+
color: var(--musea-text-muted);
|
|
508
|
+
text-transform: uppercase;
|
|
509
|
+
letter-spacing: 0.08em;
|
|
510
|
+
background: var(--musea-bg-tertiary);
|
|
511
|
+
border-bottom: 1px solid var(--musea-border);
|
|
512
|
+
}
|
|
513
|
+
.image-wrapper {
|
|
514
|
+
padding: 0.5rem;
|
|
515
|
+
background: repeating-conic-gradient(
|
|
516
|
+
var(--musea-bg-tertiary) 0% 25%,
|
|
517
|
+
var(--musea-bg-secondary) 0% 50%
|
|
518
|
+
) 50% / 16px 16px;
|
|
519
|
+
}
|
|
520
|
+
.image-container img {
|
|
521
|
+
width: 100%;
|
|
522
|
+
height: auto;
|
|
523
|
+
display: block;
|
|
524
|
+
border-radius: 2px;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
/* Empty state */
|
|
528
|
+
.empty-state {
|
|
529
|
+
text-align: center;
|
|
530
|
+
padding: 4rem 2rem;
|
|
531
|
+
color: var(--musea-text-muted);
|
|
532
|
+
}
|
|
533
|
+
.empty-state-icon {
|
|
534
|
+
font-size: 3rem;
|
|
535
|
+
margin-bottom: 1rem;
|
|
536
|
+
opacity: 0.5;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
/* Success state */
|
|
540
|
+
.all-passed {
|
|
541
|
+
background: rgba(74, 222, 128, 0.1);
|
|
542
|
+
border: 1px solid rgba(74, 222, 128, 0.2);
|
|
543
|
+
border-radius: 8px;
|
|
544
|
+
padding: 1.5rem;
|
|
545
|
+
text-align: center;
|
|
546
|
+
margin-bottom: 1.5rem;
|
|
547
|
+
}
|
|
548
|
+
.all-passed-icon {
|
|
549
|
+
font-size: 2.5rem;
|
|
550
|
+
margin-bottom: 0.5rem;
|
|
551
|
+
}
|
|
552
|
+
.all-passed-text {
|
|
553
|
+
color: var(--musea-success);
|
|
554
|
+
font-weight: 600;
|
|
555
|
+
}
|
|
556
|
+
</style>
|
|
557
|
+
</head>
|
|
558
|
+
<body>
|
|
559
|
+
<header class="header">
|
|
560
|
+
<div class="header-left">
|
|
561
|
+
<div class="logo">Musea</div>
|
|
562
|
+
<span class="header-title">Visual Regression Report</span>
|
|
563
|
+
</div>
|
|
564
|
+
<div class="header-meta">
|
|
565
|
+
<span>
|
|
566
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
567
|
+
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
|
568
|
+
</svg>
|
|
569
|
+
${formatDuration(summary.duration)}
|
|
570
|
+
</span>
|
|
571
|
+
<span>
|
|
572
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
573
|
+
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
|
574
|
+
</svg>
|
|
575
|
+
${timestamp}
|
|
576
|
+
</span>
|
|
577
|
+
</div>
|
|
578
|
+
</header>
|
|
579
|
+
|
|
580
|
+
<main class="main">
|
|
581
|
+
<div class="summary">
|
|
582
|
+
<div class="stat passed">
|
|
583
|
+
<div class="stat-value">${summary.passed}</div>
|
|
584
|
+
<div class="stat-label">Passed</div>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="stat failed">
|
|
587
|
+
<div class="stat-value">${summary.failed}</div>
|
|
588
|
+
<div class="stat-label">Failed</div>
|
|
589
|
+
</div>
|
|
590
|
+
<div class="stat new">
|
|
591
|
+
<div class="stat-value">${summary.new}</div>
|
|
592
|
+
<div class="stat-label">New</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="stat skipped">
|
|
595
|
+
<div class="stat-value">${summary.skipped}</div>
|
|
596
|
+
<div class="stat-label">Skipped</div>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
${summary.failed === 0 && summary.skipped === 0 && summary.total > 0 ? `<div class="all-passed">
|
|
601
|
+
<div class="all-passed-icon">✓</div>
|
|
602
|
+
<div class="all-passed-text">All ${summary.total} visual tests passed</div>
|
|
603
|
+
</div>` : ""}
|
|
604
|
+
|
|
605
|
+
<div class="filters">
|
|
606
|
+
<button class="filter-btn active" data-filter="all">All<span class="count">(${summary.total})</span></button>
|
|
607
|
+
<button class="filter-btn" data-filter="failed">Failed<span class="count">(${summary.failed})</span></button>
|
|
608
|
+
<button class="filter-btn" data-filter="passed">Passed<span class="count">(${summary.passed})</span></button>
|
|
609
|
+
<button class="filter-btn" data-filter="new">New<span class="count">(${summary.new})</span></button>
|
|
610
|
+
</div>
|
|
611
|
+
|
|
612
|
+
<div class="results">
|
|
613
|
+
${results.length === 0 ? `<div class="empty-state">
|
|
614
|
+
<div class="empty-state-icon">📷</div>
|
|
615
|
+
<p>No visual tests found</p>
|
|
616
|
+
</div>` : results.map((r) => {
|
|
617
|
+
const status = r.error ? "error" : r.isNew ? "new" : r.passed ? "passed" : "failed";
|
|
618
|
+
const badge = r.error ? "Error" : r.isNew ? "New" : r.passed ? "Passed" : "Failed";
|
|
619
|
+
const artName = path.basename(r.artPath, ".art.vue");
|
|
620
|
+
const viewportName = r.viewport.name || `${r.viewport.width}×${r.viewport.height}`;
|
|
621
|
+
let details = "";
|
|
622
|
+
if (r.error) details = `<div class="result-details error">${escapeHtml(r.error)}</div>`;
|
|
623
|
+
else if (r.diffPercentage !== void 0) {
|
|
624
|
+
const diffFormatted = r.diffPercentage.toFixed(3);
|
|
625
|
+
const pixelsFormatted = r.diffPixels?.toLocaleString() ?? "0";
|
|
626
|
+
const totalFormatted = r.totalPixels?.toLocaleString() ?? "0";
|
|
627
|
+
details = `<div class="result-details">diff: ${diffFormatted}% (${pixelsFormatted} / ${totalFormatted} pixels)</div>`;
|
|
628
|
+
}
|
|
629
|
+
let images = "";
|
|
630
|
+
if (!r.error && !r.passed && r.diffPath) images = `<div class="result-images">
|
|
631
|
+
${r.snapshotPath ? `<div class="image-container">
|
|
632
|
+
<div class="image-label">Baseline</div>
|
|
633
|
+
<div class="image-wrapper">
|
|
634
|
+
<img src="file://${r.snapshotPath}" alt="Baseline" loading="lazy" />
|
|
635
|
+
</div>
|
|
636
|
+
</div>` : ""}
|
|
637
|
+
${r.currentPath ? `<div class="image-container">
|
|
638
|
+
<div class="image-label">Current</div>
|
|
639
|
+
<div class="image-wrapper">
|
|
640
|
+
<img src="file://${r.currentPath}" alt="Current" loading="lazy" />
|
|
641
|
+
</div>
|
|
642
|
+
</div>` : ""}
|
|
643
|
+
${r.diffPath ? `<div class="image-container">
|
|
644
|
+
<div class="image-label">Diff</div>
|
|
645
|
+
<div class="image-wrapper">
|
|
646
|
+
<img src="file://${r.diffPath}" alt="Diff" loading="lazy" />
|
|
647
|
+
</div>
|
|
648
|
+
</div>` : ""}
|
|
649
|
+
</div>`;
|
|
650
|
+
const hasBody = details || images;
|
|
651
|
+
return `<div class="result ${status}" data-status="${status}">
|
|
652
|
+
<div class="result-header">
|
|
653
|
+
<div class="result-info">
|
|
654
|
+
<div class="result-name">${escapeHtml(artName)} / ${escapeHtml(r.variantName)}</div>
|
|
655
|
+
<div class="result-meta">${escapeHtml(viewportName)}</div>
|
|
656
|
+
</div>
|
|
657
|
+
<span class="result-badge">${badge}</span>
|
|
658
|
+
</div>
|
|
659
|
+
${hasBody ? `<div class="result-body">${details}${images}</div>` : ""}
|
|
660
|
+
</div>`;
|
|
661
|
+
}).join("")}
|
|
662
|
+
</div>
|
|
663
|
+
</main>
|
|
664
|
+
|
|
665
|
+
<script>
|
|
666
|
+
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
667
|
+
btn.addEventListener('click', () => {
|
|
668
|
+
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
669
|
+
btn.classList.add('active');
|
|
670
|
+
const filter = btn.dataset.filter;
|
|
671
|
+
document.querySelectorAll('.result').forEach(result => {
|
|
672
|
+
if (filter === 'all' || result.dataset.status === filter) {
|
|
673
|
+
result.style.display = 'block';
|
|
674
|
+
} else {
|
|
675
|
+
result.style.display = 'none';
|
|
676
|
+
}
|
|
677
|
+
});
|
|
678
|
+
});
|
|
679
|
+
});
|
|
680
|
+
</script>
|
|
681
|
+
</body>
|
|
682
|
+
</html>`;
|
|
683
|
+
return html;
|
|
684
|
+
}
|
|
685
|
+
/**
|
|
686
|
+
* Generate VRT JSON report for CI integration.
|
|
687
|
+
*/
|
|
688
|
+
function generateVrtJsonReport(results, summary) {
|
|
689
|
+
return JSON.stringify({
|
|
690
|
+
timestamp: new Date().toISOString(),
|
|
691
|
+
summary,
|
|
692
|
+
results: results.map((r) => ({
|
|
693
|
+
art: path.basename(r.artPath, ".art.vue"),
|
|
694
|
+
variant: r.variantName,
|
|
695
|
+
viewport: r.viewport.name || `${r.viewport.width}x${r.viewport.height}`,
|
|
696
|
+
status: r.error ? "error" : r.isNew ? "new" : r.passed ? "passed" : "failed",
|
|
697
|
+
diffPercentage: r.diffPercentage,
|
|
698
|
+
error: r.error
|
|
699
|
+
}))
|
|
700
|
+
}, null, 2);
|
|
701
|
+
}
|
|
702
|
+
/**
|
|
703
|
+
* Read PNG file and return PNG object.
|
|
704
|
+
*/
|
|
705
|
+
async function readPng(filepath) {
|
|
706
|
+
return new Promise((resolve, reject) => {
|
|
707
|
+
fs.createReadStream(filepath).pipe(new PNG()).on("parsed", function() {
|
|
708
|
+
resolve(this);
|
|
709
|
+
}).on("error", reject);
|
|
710
|
+
});
|
|
711
|
+
}
|
|
712
|
+
/**
|
|
713
|
+
* Write PNG object to file.
|
|
714
|
+
*/
|
|
715
|
+
async function writePng(png, filepath) {
|
|
716
|
+
return new Promise((resolve, reject) => {
|
|
717
|
+
png.pack().pipe(fs.createWriteStream(filepath)).on("finish", resolve).on("error", reject);
|
|
718
|
+
});
|
|
719
|
+
}
|
|
720
|
+
/**
|
|
721
|
+
* Calculate color delta using YIQ color space.
|
|
722
|
+
* This is more perceptually accurate than simple RGB difference.
|
|
723
|
+
*/
|
|
724
|
+
function colorDelta(r1, g1, b1, a1, r2, g2, b2, a2) {
|
|
725
|
+
if (a1 !== 255) {
|
|
726
|
+
r1 = blend(r1, 255, a1 / 255);
|
|
727
|
+
g1 = blend(g1, 255, a1 / 255);
|
|
728
|
+
b1 = blend(b1, 255, a1 / 255);
|
|
729
|
+
}
|
|
730
|
+
if (a2 !== 255) {
|
|
731
|
+
r2 = blend(r2, 255, a2 / 255);
|
|
732
|
+
g2 = blend(g2, 255, a2 / 255);
|
|
733
|
+
b2 = blend(b2, 255, a2 / 255);
|
|
734
|
+
}
|
|
735
|
+
const y1 = r1 * .29889531 + g1 * .58662247 + b1 * .11448223;
|
|
736
|
+
const i1 = r1 * .59597799 - g1 * .2741761 - b1 * .32180189;
|
|
737
|
+
const q1 = r1 * .21147017 - g1 * .52261711 + b1 * .31114694;
|
|
738
|
+
const y2 = r2 * .29889531 + g2 * .58662247 + b2 * .11448223;
|
|
739
|
+
const i2 = r2 * .59597799 - g2 * .2741761 - b2 * .32180189;
|
|
740
|
+
const q2 = r2 * .21147017 - g2 * .52261711 + b2 * .31114694;
|
|
741
|
+
const dy = y1 - y2;
|
|
742
|
+
const di = i1 - i2;
|
|
743
|
+
const dq = q1 - q2;
|
|
744
|
+
return dy * dy * .5053 + di * di * .299 + dq * dq * .1957;
|
|
745
|
+
}
|
|
746
|
+
/**
|
|
747
|
+
* Blend foreground with background using alpha.
|
|
748
|
+
*/
|
|
749
|
+
function blend(fg, bg, alpha) {
|
|
750
|
+
return bg + (fg - bg) * alpha;
|
|
751
|
+
}
|
|
752
|
+
/**
|
|
753
|
+
* Check if file exists.
|
|
754
|
+
*/
|
|
755
|
+
async function fileExists(filepath) {
|
|
756
|
+
try {
|
|
757
|
+
await fs.promises.access(filepath);
|
|
758
|
+
return true;
|
|
759
|
+
} catch {
|
|
760
|
+
return false;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
/**
|
|
764
|
+
* Escape HTML special characters.
|
|
765
|
+
*/
|
|
766
|
+
function escapeHtml(str) {
|
|
767
|
+
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
768
|
+
}
|
|
769
|
+
var vrt_default = MuseaVrtRunner;
|
|
770
|
+
|
|
771
|
+
//#endregion
|
|
772
|
+
export { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport, vrt_default };
|
|
773
|
+
//# sourceMappingURL=vrt-DRwtnkE5.js.map
|