import { test } from 'node:test'; import assert from 'node:assert/strict'; import { execFileSync } from 'node:child_process'; import fs from 'node:fs'; import os from 'node:os'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; const here = path.dirname(fileURLToPath(import.meta.url)); const skillRoot = path.resolve(here, '..'); const repoRoot = path.resolve(skillRoot, '..'); const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'archify-share-card-')); const CASES = { architecture: 'web-app.architecture.json', workflow: 'agent-tool-call.workflow.json', sequence: 'cache-miss-request.sequence.json', dataflow: 'product-analytics.dataflow.json', lifecycle: 'agent-run.lifecycle.json', }; function render(mode) { const output = path.join(tmp, `${mode}.html`); execFileSync(process.execPath, [ path.join(skillRoot, `renderers/${mode}/render-${mode}.mjs`), path.join(skillRoot, 'examples', CASES[mode]), output, ]); return fs.readFileSync(output, 'utf8'); } function svgBlock(html) { return html.match(//)?.[0] || ''; } test('all five renderers expose one explicit 1200x630 Share Card export', () => { for (const mode of Object.keys(CASES)) { const html = render(mode); assert.match(html, /data-format="share-card"/, mode); assert.match(html, /Share Card[\s\S]*?1200(?:×|×)630 PNG/, mode); assert.match(html, /var SHARE_CARD_WIDTH = 1200;/, mode); assert.match(html, /var SHARE_CARD_HEIGHT = 630;/, mode); assert.match(html, /function rasterizeShareCard\(options\)/, mode); assert.match(html, /format === 'share-card'/, mode); } }); test('Share Card uses contain-only canonical geometry with fixed safe areas', () => { const html = render('architecture'); assert.match(html, /var availableWidth = SHARE_CARD_WIDTH - SHARE_CARD_PADDING \* 2;/); assert.match(html, /var availableHeight = SHARE_CARD_HEIGHT - SHARE_CARD_HEADER - SHARE_CARD_PADDING;/); assert.match(html, /var fit = Math\.min\(availableWidth \/ data\.width, availableHeight \/ data\.height\);/); assert.match(html, /ctx\.drawImage\(img, drawX, drawY, drawWidth, drawHeight\);/); assert.match(html, /function canvas2dOrThrow\(canvas, label\)/); assert.match(html, /throw exportError\('viewer\.export\.error\.contextUnavailable'/); assert.match(html, /throw exportError\('viewer\.export\.error\.toBlobUnavailable'/); assert.match(html, /img\.onload = function \(\) \{\s*try \{/); assert.match(html, /function rasterizeShareCard\(options\)[\s\S]*?if \(!options\.variant\) return renderShareCard\(\);/); assert.match(html, /function renderShareCard\(options\)[\s\S]*?serializeSvg\(sourceScale, \{ routeSnapshot: routeSnapshot, reachSnapshot: reachSnapshot \}\)/); assert.match(html, /fitCanvasText\(ctx, title, [^)]+\)/); assert.match(html, /ARCHIFY ·/); assert.doesNotMatch(svgBlock(html), /share-card|Share Card|ARCHIFY ·/); }); test('Share Card is a canonical PNG with exact receipt dimensions and filename', () => { const html = render('workflow'); assert.match(html, /recordExportReceipt\('share-card', blob, true, \{ width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT \}\)/); assert.match(html, /base \+ '-share-card\.png'/); assert.match(html, /data-last-export-width/); assert.match(html, /data-last-export-height/); assert.match(html, /shareCard: rasterizeShareCard/); assert.match(html, /if \(format === 'share-card'\) return true;/); }); test('Copy Share Card reuses one canonical card blob and writes only PNG to the clipboard', () => { const html = render('architecture'); assert.match(html, /data-action="copy-share-card"/); assert.match(html, /Copy Share Card[\s\S]*?PNG to clipboard<\/small>/); assert.match(html, /function runCopyShareCard\(\)[\s\S]*?var blobPromise = rasterizeShareCard\(\);/); const copyBlock = html.match(/function runCopyShareCard\(\) \{[\s\S]*?\n \}/)?.[0] || ''; assert.equal((copyBlock.match(/rasterizeShareCard\(\)/g) || []).length, 1); assert.match(copyBlock, /writePngToClipboard\(blobPromise\)/); assert.match(html, /new ClipboardItem\(\{ 'image\/png': blobPromise \}\)/); assert.match(copyBlock, /recordExportReceipt\('share-card', blob, true, \{ width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT \}\)/); assert.match(copyBlock, /toast\(viewerText\('viewer\.export\.copiedShare'\)\)/); assert.match(html, /copyShareCard: runCopyShareCard/); }); test('Copy Share Card fails closed when image clipboard writing is unavailable', () => { const html = render('workflow'); assert.match(html, /it\.dataset\.action === 'copy-share-card'[\s\S]*?!canCopyImage\(\)/); assert.match(html, /function runCopyShareCard\(\)[\s\S]*?if \(!canCopyImage\(\)\)/); assert.match(html, /Clipboard image write not supported by this browser/); assert.match(html, /button\[data-action="copy-share-card"\]/); assert.match(html, /document\.documentElement\.removeAttribute\('data-last-export-format'\)/); assert.match(html, /data-last-export-error-format', 'share-card'/); }); test('ordinary Copy PNG keeps its existing full-diagram raster path', () => { const html = render('sequence'); assert.match(html, /function runCopy\(\)[\s\S]*?var blobPromise = rasterize\('png'\);/); assert.match(html, /runCopy\(\)[\s\S]*?writePngToClipboard\(blobPromise\)/); assert.doesNotMatch(svgBlock(html), /copy-share-card|Copy Share Card/); }); test('Share Card stays viewer-only and reuses export cleanup instead of source state', () => { const html = render('sequence'); assert.match(html, /html\[data-embed="true"\] \.toolbar/); assert.match(html, /@media print[\s\S]*?\.toolbar/); assert.match(html, /function rasterizeShareCard\(options\)[\s\S]*?if \(!options\.variant\) return renderShareCard\(\);/); assert.match(html, /function renderShareCard\(options\)[\s\S]*?serializeSvg\(sourceScale, \{ routeSnapshot: routeSnapshot, reachSnapshot: reachSnapshot \}\)/); assert.match(html, /if \(!data\.canonicalStateClean\) return Promise\.reject\(exportError\('viewer\.export\.error\.viewerState'\)\);/); assert.match(html, /canonicalStateClean/); assert.doesNotMatch(svgBlock(html), /data-last-export-|data-format="share-card"/); }); test('the skill and every README make the optional Share Card discoverable', () => { const viewer = fs.readFileSync(path.join(skillRoot, 'references', 'viewer-runtime.md'), 'utf8'); assert.match(viewer, /optional 1200(?:×|x)630 Share Card PNG/i); assert.match(viewer, /current theme and visual preset/i); assert.match(viewer, /never claim(?:s|ing)? validation/i); assert.match(viewer, /Copy Share Card/i); for (const readme of ['README.md', 'README_EN.md', 'README_ZH.md']) { const text = fs.readFileSync(path.join(repoRoot, readme), 'utf8'); assert.match(text, /Share Card/i, readme); assert.match(text, /1200(?:×|x)630/, readme); assert.match(text, /copy|复制/i, readme); } }); process.on('exit', () => fs.rmSync(tmp, { recursive: true, force: true }));