Cesar Mendivil
adbec08f5e
- Redesign PreJoin component and CSS for improved template compatibility and deterministic rendering - Remove mock studio toggle and related runtime logic; update useStudioLauncher to always use real backend - Add README-MOCK.md to document mock studio deprecation - Add mock-studio.html for manual popup emulation - Update environment variable resolution in route.ts for backend API - Add visual regression test scripts (capture, compare, visual_test_prejoin) using Playwright, Puppeteer, pixelmatch, and pngjs - Update package.json scripts and devDependencies for visual testing - Simplify PreJoin.stories.tsx for robust Storybook usage
45 lines
2.0 KiB
JavaScript
45 lines
2.0 KiB
JavaScript
#!/usr/bin/env node
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
const { PNG } = require('pngjs');
|
|
let pixelmatch = require('pixelmatch');
|
|
if (pixelmatch && typeof pixelmatch !== 'function' && pixelmatch.default && typeof pixelmatch.default === 'function') pixelmatch = pixelmatch.default;
|
|
|
|
const names = ['video_preview','mic_status','controls','form'];
|
|
const out = [];
|
|
for (const n of names) {
|
|
const base = `/tmp/baseline_prejoin_region_${n}.png`;
|
|
const cur = `/tmp/prejoin_region_${n}.png`;
|
|
if (!fs.existsSync(base) && !fs.existsSync(cur)) {
|
|
out.push({ region: n, foundBaseline: false, foundCurrent: false });
|
|
continue;
|
|
}
|
|
if (!fs.existsSync(base)) {
|
|
out.push({ region: n, foundBaseline: false, foundCurrent: true, current: cur });
|
|
continue;
|
|
}
|
|
if (!fs.existsSync(cur)) {
|
|
out.push({ region: n, foundBaseline: true, foundCurrent: false, baseline: base });
|
|
continue;
|
|
}
|
|
try {
|
|
const A = PNG.sync.read(fs.readFileSync(base));
|
|
const B = PNG.sync.read(fs.readFileSync(cur));
|
|
if (A.width !== B.width || A.height !== B.height) {
|
|
out.push({ region: n, error: 'dim_mismatch', baseline: base, current: cur, baseSize: [A.width,A.height], curSize: [B.width,B.height] });
|
|
continue;
|
|
}
|
|
const diff = new PNG({ width: A.width, height: A.height });
|
|
const mismatched = pixelmatch(A.data, B.data, diff.data, A.width, A.height, { threshold: 0.1 });
|
|
const diffPath = `/tmp/prejoin_region_diff_${n}.png`;
|
|
fs.writeFileSync(diffPath, PNG.sync.write(diff));
|
|
out.push({ region: n, baseline: base, current: cur, diff: diffPath, mismatched, total: A.width*A.height, ratio: mismatched/(A.width*A.height) });
|
|
} catch (e) {
|
|
out.push({ region: n, error: String(e) });
|
|
}
|
|
}
|
|
const report = { generatedAt: new Date().toISOString(), report: out };
|
|
fs.writeFileSync('/tmp/prejoin_regions_compare_report.json', JSON.stringify(report, null, 2));
|
|
console.log('Wrote /tmp/prejoin_regions_compare_report.json');
|
|
console.log(JSON.stringify(report, null, 2));
|