Kjell Tore Guttormsen
916d30f63e
The v4.2/v4.3 bespoke playground SPA (~388 KB), the /trekrevise command, Handover 8 (annotation → revision), the supporting lib/ modules (anchor-parser, annotation-digest, markdown-write, revision-guard), the Playwright e2e suite, and the @playwright/test / @axe-core/playwright devDeps are removed. A browser walkthrough found the playground borderline unusable, and it duplicated the official /playground plugin's document-critique / diff-review templates. In their place: scripts/render-artifact.mjs — a small, zero-dependency renderer that turns a brief/plan/review .md into a self-contained, design-system-styled, zero-network .html (frontmatter folded into a <details> block). /trekbrief, /trekplan, and /trekreview call it on their last step and print the file:// link; to annotate, run /playground (document-critique) on the .md and paste the generated prompt back. Resolves the v4.3.1-deferred findings as moot (their target files are deleted). npm test green: 509 tests, 507 pass, 0 fail, 2 skipped. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
122 lines
4.8 KiB
JavaScript
122 lines
4.8 KiB
JavaScript
// tests/scripts/render-artifact.test.mjs
|
|
// Covers scripts/render-artifact.mjs — the v5.0.0 self-contained HTML
|
|
// renderer that /trekbrief, /trekplan, /trekreview call at the end of their
|
|
// run to produce a browser-readable view of the just-written artifact.
|
|
|
|
import { test } from 'node:test';
|
|
import { strict as assert } from 'node:assert';
|
|
import { mkdtempSync, writeFileSync, readFileSync, rmSync, existsSync } from 'node:fs';
|
|
import { tmpdir } from 'node:os';
|
|
import { join } from 'node:path';
|
|
import { buildHtml, renderMarkdown, render, parseArgs } from '../../scripts/render-artifact.mjs';
|
|
|
|
const SAMPLE = `---
|
|
type: trekplan
|
|
plan_version: "1.7"
|
|
task: "Render-artifact smoke test"
|
|
slug: render-smoke
|
|
---
|
|
|
|
# Render-artifact smoke test
|
|
|
|
A paragraph with **bold**, \`inline code\`, and a [link](https://example.com).
|
|
|
|
## Steps
|
|
|
|
- top item
|
|
- nested item
|
|
- second top item
|
|
|
|
1. ordered one
|
|
2. ordered two
|
|
|
|
\`\`\`js
|
|
const x = 1;
|
|
\`\`\`
|
|
|
|
> a blockquote line
|
|
|
|
| Col A | Col B |
|
|
|-------|-------|
|
|
| 1 | 2 |
|
|
`;
|
|
|
|
test('buildHtml produces a complete self-contained HTML document', () => {
|
|
const html = buildHtml('plan.md', SAMPLE);
|
|
assert.ok(html.startsWith('<!DOCTYPE html>'), 'must start with doctype');
|
|
assert.ok(html.includes('</html>'), 'must close html');
|
|
assert.ok(html.includes('<style>'), 'must inline a stylesheet');
|
|
// Zero external network references.
|
|
assert.ok(!/<link[^>]+href=/i.test(html), 'no external <link> stylesheets');
|
|
assert.ok(!/<script[^>]+src=/i.test(html), 'no external <script src>');
|
|
assert.ok(!/https?:\/\/(?!example\.com)/.test(html.replace(/<style>[\s\S]*?<\/style>/, '')), 'no unexpected http(s) URLs outside example link');
|
|
});
|
|
|
|
test('buildHtml folds frontmatter into a <details> block', () => {
|
|
const html = buildHtml('plan.md', SAMPLE);
|
|
assert.ok(html.includes('<details class="frontmatter">'), 'frontmatter wrapped in <details>');
|
|
assert.ok(html.includes('plan_version'), 'frontmatter content preserved');
|
|
// Frontmatter must NOT leak into the rendered body as a literal "---" rule.
|
|
const bodyOnly = html.split('</details>')[1] || '';
|
|
assert.ok(!bodyOnly.startsWith('\n<hr>'), 'frontmatter fence should not become an <hr>');
|
|
});
|
|
|
|
test('buildHtml derives the <title> from frontmatter task', () => {
|
|
const html = buildHtml('plan.md', SAMPLE);
|
|
assert.match(html, /<title>Render-artifact smoke test<\/title>/);
|
|
});
|
|
|
|
test('renderMarkdown renders headings, code fences, lists, tables, blockquotes', () => {
|
|
const out = renderMarkdown(SAMPLE.split('---\n').slice(2).join('---\n'));
|
|
assert.match(out, /<h1>Render-artifact smoke test<\/h1>/);
|
|
assert.match(out, /<h2>Steps<\/h2>/);
|
|
assert.match(out, /<pre><code class="language-js">/);
|
|
assert.ok(out.includes('const x = 1;'), 'code fence body preserved');
|
|
assert.match(out, /<ul><li>top item<ul><li>nested item<\/li><\/ul><\/li>/);
|
|
assert.match(out, /<ol><li>ordered one<\/li><li>ordered two<\/li><\/ol>/);
|
|
assert.match(out, /<blockquote>a blockquote line<\/blockquote>/);
|
|
assert.match(out, /<table>[\s\S]*<th>Col A<\/th>[\s\S]*<td>1<\/td>[\s\S]*<\/table>/);
|
|
assert.match(out, /<strong>bold<\/strong>/);
|
|
assert.match(out, /<code>inline code<\/code>/);
|
|
assert.match(out, /<a href="https:\/\/example\.com">link<\/a>/);
|
|
});
|
|
|
|
test('renderMarkdown escapes HTML in body and code', () => {
|
|
const out = renderMarkdown('A <tag> & "quote".\n\n```\n<script>alert(1)</script>\n```\n');
|
|
assert.ok(!out.includes('<tag>'), 'raw tag escaped');
|
|
assert.ok(out.includes('<tag>'), 'tag rendered as entity');
|
|
assert.ok(out.includes('<script>alert(1)</script>'), 'code-fence content escaped');
|
|
});
|
|
|
|
test('render() is deterministic — two runs byte-identical', () => {
|
|
const dir = mkdtempSync(join(tmpdir(), 'render-artifact-'));
|
|
try {
|
|
const md = join(dir, 'plan.md');
|
|
writeFileSync(md, SAMPLE);
|
|
const out1 = render(md, join(dir, 'a.html'));
|
|
const out2 = render(md, join(dir, 'b.html'));
|
|
assert.ok(existsSync(out1) && existsSync(out2));
|
|
assert.equal(readFileSync(out1, 'utf-8'), readFileSync(out2, 'utf-8'));
|
|
} finally {
|
|
rmSync(dir, { recursive: true, force: true });
|
|
}
|
|
});
|
|
|
|
test('render() defaults output to <input-basename>.html', () => {
|
|
const dir = mkdtempSync(join(tmpdir(), 'render-artifact-'));
|
|
try {
|
|
const md = join(dir, 'review.md');
|
|
writeFileSync(md, '# Review\n\nok\n');
|
|
const out = render(md);
|
|
assert.equal(out, join(dir, 'review.html'));
|
|
assert.ok(existsSync(out));
|
|
} finally {
|
|
rmSync(dir, { recursive: true, force: true });
|
|
}
|
|
});
|
|
|
|
test('parseArgs handles --out and positional input', () => {
|
|
assert.deepEqual(parseArgs(['x.md']), { input: 'x.md', out: null, help: false });
|
|
assert.deepEqual(parseArgs(['x.md', '--out', 'y.html']), { input: 'x.md', out: 'y.html', help: false });
|
|
assert.equal(parseArgs(['--help']).help, true);
|
|
});
|