gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make visual-parity diff script env-configurable

Browse Source 
ANGULAR_BASE / ANGULAR_PATH_PREFIX / REACT_BASE / MOCK_ANGULAR /
MOCK_REACT env vars let the script target the live test env
(https://flights.test.aeroflot.ru/ru-ru) without code changes.

Used to rerun the Visual Parity Report against the live Angular
backend instead of a local ng serve.
This commit is contained in:
Anton
2026-04-20 00:58:15 +03:00
parent 9cdc8fd75b
commit 6a3edeb0e7
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/parity/visual/screenshot-diff-multi.ts
+22 -9
View File
@@ -50,8 +50,17 @@ export interface MultiViewportReport {
// Config
// ---------------------------------------------------------------------------
const ANGULAR_BASE = "http://localhost:4200";
const REACT_BASE = "http://localhost:8080";
// Override either base via env vars to point at staging/live envs.
// `ANGULAR_PATH_PREFIX` is prepended to each route's `angular` path, used
// when the live env requires a locale segment (`/ru-ru`) that the local
// Angular dev server doesn't.
// `MOCK_ANGULAR=0` disables the API mock route handlers — required when
// pointing at a real backend (mocks blackhole real API requests).
const ANGULAR_BASE = process.env.ANGULAR_BASE ?? "http://localhost:4200";
const ANGULAR_PATH_PREFIX = process.env.ANGULAR_PATH_PREFIX ?? "";
const REACT_BASE = process.env.REACT_BASE ?? "http://localhost:8080";
const MOCK_ANGULAR = process.env.MOCK_ANGULAR !== "0";
const MOCK_REACT = process.env.MOCK_REACT !== "0";
const REPORT_DIR = resolve(import.meta.dirname, "../../../comparison-report/visual");
const SCREENSHOTS_DIR = join(REPORT_DIR, "screenshots");
const DIFFS_DIR = join(REPORT_DIR, "diffs");
@@ -240,9 +249,11 @@ async function main() {
const angularPage = await angularCtx.newPage();
const reactPage = await reactCtx.newPage();
// Mock API endpoints for both apps (WAF blocks real API in dev)
await mockAngularAPIs(angularPage);
await mockAngularAPIs(reactPage);
// Mock API endpoints for both apps (WAF blocks real API in dev).
// When pointing at a real env (live test/staging), opt out via
// MOCK_ANGULAR=0 / MOCK_REACT=0 so the page hits the real backend.
if (MOCK_ANGULAR) await mockAngularAPIs(angularPage);
if (MOCK_REACT) await mockAngularAPIs(reactPage);
// Override popular requests mock for React (React uses different field names)
await reactPage.route("**/Requests/*/getpopular", (route) => {
@@ -267,14 +278,16 @@ async function main() {
const fullPage = route.fullPage !== false;
const maskSelectors = route.maskSelectors ?? [];
const angularUrl = `${ANGULAR_BASE}${ANGULAR_PATH_PREFIX}${route.angular}`;
const reactUrl = `${REACT_BASE}${route.react}`;
console.log(`\n ${route.name}`);
console.log(` Angular: ${ANGULAR_BASE}${route.angular}`);
console.log(` React: ${REACT_BASE}${route.react}`);
console.log(` Angular: ${angularUrl}`);
console.log(` React: ${reactUrl}`);
try {
const [angularBuf, reactBuf] = await Promise.all([
captureScreenshot(angularPage, `${ANGULAR_BASE}${route.angular}`, waitMs, fullPage, maskSelectors),
captureScreenshot(reactPage, `${REACT_BASE}${route.react}`, waitMs, fullPage, maskSelectors),
captureScreenshot(angularPage, angularUrl, waitMs, fullPage, maskSelectors),
captureScreenshot(reactPage, reactUrl, waitMs, fullPage, maskSelectors),
]);
writeFileSync(angularPath, angularBuf);