@12ui/design 0.2.42 → 0.2.44

package/prototype-kit/tests/shell-stitching-runtime.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { chromium } from '@playwright/test';
+import { checkRuntime } from '../lib/runtime-check.mjs';
+import { startStaticServer } from '../lib/static-server.mjs';
+import { buildPrototype } from './lib/run-process.mjs';
+
+const expectFailure = process.argv.includes('--expect-failure');
+const unexpectedArgs = process.argv.slice(2).filter((arg) => arg !== '--expect-failure');
+if (unexpectedArgs.length > 0) throw new Error(`usage: shell-stitching-runtime.mjs [--expect-failure]`);
+
+const testsDir = path.dirname(new URL(import.meta.url).pathname);
+const kitDir = path.resolve(testsDir, '..');
+const fixtureDir = path.join(testsDir, 'fixtures', 'shell-stitching-runtime');
+const scratch = fs.mkdtempSync(path.join(os.tmpdir(), 'proto-shell-stitching-'));
+const runWorkDir = path.join(scratch, 'build');
+let browser = null;
+let server = null;
+
+const regionAt = (audit, file, width) => audit.pages
+  .find((page) => page.file === file)?.viewports
+  .find((viewport) => viewport.width === width)?.shellState?.regions
+  .find((region) => region.region === 'header') || null;
+const bandHeight = (inventory, pageId, key) => inventory.pages
+  .find((page) => page.pageId === pageId)?.bands
+  .find((band) => band.key === key)?.height;
+const decisionFor = (manifest, unitId) => manifest.units
+  .find((unit) => unit.id === unitId)?.shellDecisions
+  .find((decision) => decision.region === 'header') || null;
+
+try {
+  const built = buildPrototype({
+    kitDir,
+    run: { runDir: fixtureDir },
+    runWorkDir,
+  });
+  assert.equal(built.ok, true, `fixture pipeline must build: ${built.failedStage || 'unknown stage'} ${built.stages?.[built.failedStage]?.error || ''}`);
+
+  const inventory = JSON.parse(fs.readFileSync(built.inventoryFile, 'utf8'));
+  const manifest = JSON.parse(fs.readFileSync(path.join(built.protoDir, 'proto-manifest.json'), 'utf8'));
+  assert.equal(manifest.canonicalShellPage?.pageId, 'p0-donor', 'fixture contract: the approved donor is the one canonical shell page');
+  assert.deepEqual(decisionFor(manifest, 'id-collision'), { region: 'header', commit: true, reason: 'compatible' }, 'fixture contract: differing compatible bands request one atomic transplant');
+  assert.deepEqual(decisionFor(manifest, 'canvas-control'), { region: 'header', commit: false, reason: 'compatible' }, 'must stay silent: the already canonical control does not request a write');
+  assert.deepEqual([
+    bandHeight(inventory, 'p0-donor', 'mobile-390'),
+    bandHeight(inventory, 'p2-canvas-control', 'mobile-390'),
+  ], [900, 1400], 'fixture contract: the portrait control has a substantially taller canvas');
+
+  server = await startStaticServer(runWorkDir);
+  browser = await chromium.launch();
+  const audit = await checkRuntime({
+    browser,
+    baseUrl: server.baseUrl,
+    relativeProtoPath: 'proto',
+    protoDir: built.protoDir,
+  });
+
+  assert.equal(audit.pageErrors, 0, 'fixture pages must load without page errors');
+  assert.equal(audit.consoleErrors, 0, 'fixture pages must not emit console errors');
+  assert.equal(audit.duplicateIds, 0, 'shell replacement must not leave duplicate ids');
+
+  const donor390 = regionAt(audit, 'donor.html', 390);
+  const collision390 = regionAt(audit, 'id-collision.html', 390);
+  const control390 = regionAt(audit, 'canvas-control.html', 390);
+  const donor1536 = regionAt(audit, 'donor.html', 1536);
+  const collision1536 = regionAt(audit, 'id-collision.html', 1536);
+  assert.ok(donor390 && collision390 && control390 && donor1536 && collision1536, 'fixture contract: all audited header regions are present');
+  assert.deepEqual(donor390.actualGeometry, [0, 0, 390, 72], 'fixture contract: donor mobile shell geometry is fixed');
+  assert.deepEqual(collision390.actualGeometry, donor390.actualGeometry, 'outer shell geometry alone cannot conceal descendant displacement');
+  assert.equal(donor390.consistencyStatus, 'canonical', 'fixture contract: the donor makes the canonical shell claim');
+  assert.equal(collision390.consistencyStatus, 'canonical', 'fixture contract: the committed recipient makes the canonical shell claim');
+  assert.equal(control390.consistencyStatus, 'silent', 'must stay silent: canvas/content-only variation makes no canonical-write claim');
+  assert.equal(control390.actualSignature, donor390.actualSignature, 'must stay silent: canvas height and page content are outside the shell signature');
+  assert.equal(collision1536.actualSignature, donor1536.actualSignature, 'must stay silent: distinct native identities render the same canonical header');
+
+  const groups = audit.shellConsistencyFailures.map((failure) => failure.group);
+  if (expectFailure) {
+    assert.deepEqual(groups, ['390:mobile-390:header'], 'pre-fix evidence must isolate one canonical collision to the mobile header');
+    assert.notEqual(collision390.actualSignature, donor390.actualSignature, 'must fire before the fix: recipient offsets alter transplanted donor descendants');
+    const failure = audit.shellConsistencyFailures[0];
+    assert.equal(failure.reason, 'prototype-shell-signature-mismatch', 'pre-fix evidence is the rendered canonical-shell mismatch');
+    assert.deepEqual(failure.pages, [
+      { file: 'donor.html', signature: donor390.actualSignature, geometry: donor390.actualGeometry },
+      { file: 'id-collision.html', signature: collision390.actualSignature, geometry: collision390.actualGeometry },
+    ], 'pre-fix group carries the exact runtime signatures for only the donor and committed recipient');
+  } else {
+    assert.equal(collision390.actualSignature, donor390.actualSignature, 'must pass after the fix: transplanted donor render matches its canonical source at 390');
+    assert.deepEqual(audit.shellConsistencyFailures, [], 'post-fix runtime audit has no canonical shell consistency failures');
+  }
+
+  process.stdout.write(JSON.stringify({
+    expectation: expectFailure ? 'pre-fix-failure' : 'post-fix-pass',
+    groups,
+    mobile: {
+      donor: donor390.actualSignature,
+      collision: collision390.actualSignature,
+      control: control390.actualSignature,
+      geometry: donor390.actualGeometry,
+    },
+    native: {
+      donor: donor1536.actualSignature,
+      collision: collision1536.actualSignature,
+    },
+    canvasHeights: {
+      donor: bandHeight(inventory, 'p0-donor', 'mobile-390'),
+      control: bandHeight(inventory, 'p2-canvas-control', 'mobile-390'),
+    },
+  }, null, 2) + '\n');
+} finally {
+  if (browser) await browser.close();
+  if (server) await server.close();
+  fs.rmSync(scratch, { recursive: true, force: true });
+}