mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Paul BakausandClaude Fable 5
dbe0c12b91
The polling-rework preflight wrote the variant scaffold into source during the poll lease, before the agent acted. On source-preview targets (React/Vue/Vite, everything but the svelte-component path) that write full-reloaded the framework; a browser caught mid-reload missed the agent's variant write and the SSE done, and sat stranded at 0/N. Restore the 3.5 single-atomic-edit semantics: the preflight still resolves the element location and computes the scaffold, but --defer-source-write leaves source untouched and hands the agent the wrapper text plus the picked source range. The agent splices variants into the wrapper and replaces the range in one write, so the framework reloads exactly once. The svelte-component path is untouched (it never writes route source). The missed-completion recovery stays as defense in depth. Also cache the resolved source file per target signature (locator + route): the ~7.6s tree search re-ran on every generate for the same element; a hit now points the helper straight at the file via --file, invalidated when the target changes or a resolution fails. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
923 lines
36 KiB
JavaScript
923 lines
36 KiB
JavaScript
/**
|
|
* Tests for the live-wrap CLI helper.
|
|
* Run with: node --test tests/live-wrap.test.mjs
|
|
*/
|
|
|
|
import { describe, it, beforeEach, afterEach } from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { mkdtempSync, writeFileSync, readFileSync, rmSync, mkdirSync } from 'node:fs';
|
|
import { join, resolve } from 'node:path';
|
|
import { tmpdir } from 'node:os';
|
|
import { execFileSync, execSync } from 'node:child_process';
|
|
|
|
import {
|
|
buildSearchQueries,
|
|
findElement,
|
|
findClosingLine,
|
|
detectCommentSyntax,
|
|
} from '../skill/scripts/live-wrap.mjs';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Unit tests: pure functions
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe('detectCommentSyntax', () => {
|
|
it('returns HTML comments for .html files', () => {
|
|
const result = detectCommentSyntax('index.html');
|
|
assert.equal(result.open, '<!--');
|
|
assert.equal(result.close, '-->');
|
|
});
|
|
|
|
it('returns JSX comments for .jsx files', () => {
|
|
const result = detectCommentSyntax('App.jsx');
|
|
assert.equal(result.open, '{/*');
|
|
assert.equal(result.close, '*/}');
|
|
});
|
|
|
|
it('returns JSX comments for .tsx files', () => {
|
|
const result = detectCommentSyntax('component.tsx');
|
|
assert.equal(result.open, '{/*');
|
|
assert.equal(result.close, '*/}');
|
|
});
|
|
|
|
it('returns HTML comments for .vue files', () => {
|
|
const result = detectCommentSyntax('App.vue');
|
|
assert.equal(result.open, '<!--');
|
|
assert.equal(result.close, '-->');
|
|
});
|
|
|
|
it('returns HTML comments for .svelte files', () => {
|
|
const result = detectCommentSyntax('Page.svelte');
|
|
assert.equal(result.open, '<!--');
|
|
assert.equal(result.close, '-->');
|
|
});
|
|
});
|
|
|
|
describe('buildSearchQueries', () => {
|
|
it('prioritizes ID over classes', () => {
|
|
const queries = buildSearchQueries('hero', 'hero-section,dark', 'section', null);
|
|
assert.equal(queries[0], 'id="hero"');
|
|
});
|
|
|
|
it('includes full class match for multi-class elements', () => {
|
|
const queries = buildSearchQueries(null, 'hero-section,dark-theme', 'div', null);
|
|
assert.ok(queries.some(q => q === 'class="hero-section dark-theme"'));
|
|
});
|
|
|
|
it('accepts browser className whitespace when building class queries', () => {
|
|
const queries = buildSearchQueries(null, 'hero-title _heroTitle_1lpqp_2', 'h1', null);
|
|
assert.ok(queries.includes('<h1 className="hero-title'));
|
|
assert.ok(queries.includes('hero-title'));
|
|
});
|
|
|
|
it('includes each single class fallback for multi-class elements', () => {
|
|
const queries = buildSearchQueries(null, 'btn,hero-combined-left', null, null);
|
|
assert.ok(queries.some(q => q === 'hero-combined-left'));
|
|
assert.ok(queries.some(q => q === 'btn'));
|
|
});
|
|
|
|
it('includes tag+class combo', () => {
|
|
const queries = buildSearchQueries(null, 'hero-section', 'section', null);
|
|
assert.ok(queries.some(q => q === '<section class="hero-section'));
|
|
});
|
|
|
|
it('includes raw fallback query', () => {
|
|
const queries = buildSearchQueries(null, null, null, 'Welcome to our app');
|
|
assert.deepEqual(queries, ['Welcome to our app']);
|
|
});
|
|
|
|
it('returns all query types when everything is provided', () => {
|
|
const queries = buildSearchQueries('main', 'container,wide', 'div', 'fallback');
|
|
assert.ok(queries.length >= 4);
|
|
assert.equal(queries[0], 'id="main"');
|
|
assert.ok(queries.includes('fallback'));
|
|
});
|
|
});
|
|
|
|
describe('findElement', () => {
|
|
it('finds an element by class name', () => {
|
|
const lines = [
|
|
'<html>',
|
|
'<body>',
|
|
' <div class="hero">',
|
|
' <h1>Hello</h1>',
|
|
' </div>',
|
|
'</body>',
|
|
'</html>',
|
|
];
|
|
const result = findElement(lines, 'hero');
|
|
assert.ok(result);
|
|
assert.equal(result.startLine, 2);
|
|
assert.equal(result.endLine, 4);
|
|
});
|
|
|
|
it('finds an element by ID', () => {
|
|
const lines = [
|
|
'<section id="features">',
|
|
' <p>Content</p>',
|
|
'</section>',
|
|
];
|
|
const result = findElement(lines, 'id="features"');
|
|
assert.ok(result);
|
|
assert.equal(result.startLine, 0);
|
|
assert.equal(result.endLine, 2);
|
|
});
|
|
|
|
it('returns null when element is not found', () => {
|
|
const lines = ['<div>hello</div>'];
|
|
const result = findElement(lines, 'nonexistent');
|
|
assert.equal(result, null);
|
|
});
|
|
|
|
it('skips comments containing the query', () => {
|
|
const lines = [
|
|
'<!-- hero section -->',
|
|
'<div class="hero">',
|
|
' <p>Content</p>',
|
|
'</div>',
|
|
];
|
|
const result = findElement(lines, 'hero');
|
|
assert.ok(result);
|
|
assert.equal(result.startLine, 1); // skips the comment on line 0
|
|
});
|
|
|
|
it('skips lines that contain data-impeccable-variant', () => {
|
|
const lines = [
|
|
'<div class="hero" data-impeccable-variant="original">Old</div>',
|
|
'<div class="hero">Real</div>',
|
|
];
|
|
const result = findElement(lines, 'hero');
|
|
assert.ok(result);
|
|
assert.equal(result.startLine, 1);
|
|
});
|
|
});
|
|
|
|
describe('findClosingLine', () => {
|
|
it('finds the closing tag on the same line', () => {
|
|
const lines = ['<p>Hello</p>'];
|
|
assert.equal(findClosingLine(lines, 0), 0);
|
|
});
|
|
|
|
it('finds the closing tag across multiple lines', () => {
|
|
const lines = [
|
|
'<div>',
|
|
' <p>Hello</p>',
|
|
'</div>',
|
|
];
|
|
assert.equal(findClosingLine(lines, 0), 2);
|
|
});
|
|
|
|
it('handles nested tags of the same type', () => {
|
|
const lines = [
|
|
'<div class="outer">',
|
|
' <div class="inner">',
|
|
' <p>Content</p>',
|
|
' </div>',
|
|
'</div>',
|
|
];
|
|
assert.equal(findClosingLine(lines, 0), 4);
|
|
});
|
|
|
|
it('handles deeply nested structures', () => {
|
|
const lines = [
|
|
'<section>',
|
|
' <div>',
|
|
' <div>',
|
|
' <span>text</span>',
|
|
' </div>',
|
|
' </div>',
|
|
'</section>',
|
|
];
|
|
assert.equal(findClosingLine(lines, 0), 6);
|
|
});
|
|
|
|
it('handles self-closing tags', () => {
|
|
const lines = [
|
|
'<div>',
|
|
' <img src="test.png" />',
|
|
' <br />',
|
|
'</div>',
|
|
];
|
|
assert.equal(findClosingLine(lines, 0), 3);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Integration tests: full wrap CLI on fixture files
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe('wrapCli integration', () => {
|
|
let tmp;
|
|
|
|
beforeEach(() => {
|
|
tmp = mkdtempSync(join(tmpdir(), 'impeccable-wrap-test-'));
|
|
clearManualEditsBuffer();
|
|
});
|
|
|
|
afterEach(() => {
|
|
rmSync(tmp, { recursive: true, force: true });
|
|
clearManualEditsBuffer();
|
|
});
|
|
|
|
it('wraps an HTML element by class name', () => {
|
|
const html = `<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<div class="hero-section">
|
|
<h1>Hello World</h1>
|
|
<p>Welcome to our site.</p>
|
|
</div>
|
|
</body>
|
|
</html>`;
|
|
writeFileSync(join(tmp, 'index.html'), html);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id test123 --count 3 --classes "hero-section" --file "${join(tmp, 'index.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
// The file path is relative to cwd, so it may be a relative path to the tmp dir
|
|
assert.ok(result.file.endsWith('index.html'));
|
|
assert.ok(result.insertLine > 0);
|
|
assert.equal(result.commentSyntax.open, '<!--');
|
|
|
|
// Verify the file was modified correctly
|
|
const modified = readFileSync(join(tmp, 'index.html'), 'utf-8');
|
|
assert.ok(modified.includes('data-impeccable-variants="test123"'));
|
|
assert.ok(modified.includes('data-impeccable-variant-count="3"'));
|
|
assert.ok(modified.includes('data-impeccable-variant="original"'));
|
|
assert.ok(modified.includes('display: contents'));
|
|
assert.ok(modified.includes('impeccable-variants-start test123'));
|
|
assert.ok(modified.includes('impeccable-variants-end test123'));
|
|
// Original should NOT be hidden (stays visible until variants arrive)
|
|
assert.ok(!modified.includes('data-impeccable-variant="original" style="display: none"'));
|
|
});
|
|
|
|
|
|
it('--defer-source-write leaves source untouched and returns the wrapper block', () => {
|
|
const html = `<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<div class="hero-section">
|
|
<h1>Hello World</h1>
|
|
<p>Welcome to our site.</p>
|
|
</div>
|
|
</body>
|
|
</html>`;
|
|
const file = join(tmp, 'index.html');
|
|
writeFileSync(file, html);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id defer1 --count 3 --classes "hero-section" --defer-source-write --file "${file}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
// Source is NOT written by the preflight (no reload storm).
|
|
assert.equal(readFileSync(file, 'utf-8'), html);
|
|
|
|
// Deferred contract fields present for the agent's atomic edit.
|
|
assert.equal(result.sourceWritten, false);
|
|
assert.ok(typeof result.wrapperBlock === 'string' && result.wrapperBlock.length > 0);
|
|
assert.ok(result.wrapperBlock.includes('data-impeccable-variants="defer1"'));
|
|
assert.ok(result.wrapperBlock.includes('Variants: insert below this line'));
|
|
assert.ok(result.wrapperBlock.includes('impeccable-variants-end defer1'));
|
|
assert.equal(typeof result.replaceStartLine, 'number');
|
|
assert.equal(typeof result.replaceEndLine, 'number');
|
|
|
|
// The replace range points at the picked <div class="hero-section"> block
|
|
// (1-indexed lines 4..7 of the source above).
|
|
const lines = html.split('\n');
|
|
assert.ok(lines[result.replaceStartLine - 1].includes('class="hero-section"'));
|
|
assert.ok(lines[result.replaceEndLine - 1].includes('</div>'));
|
|
});
|
|
|
|
it('wraps a JSX element and uses JSX comment syntax', () => {
|
|
const jsx = `export default function App() {
|
|
return (
|
|
<main>
|
|
<section className="hero">
|
|
<h1>Hello</h1>
|
|
</section>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'App.jsx'), jsx);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id jsx123 --count 2 --classes "hero" --file "${join(tmp, 'App.jsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
assert.equal(result.commentSyntax.open, '{/*');
|
|
assert.equal(result.commentSyntax.close, '*/}');
|
|
|
|
const modified = readFileSync(join(tmp, 'App.jsx'), 'utf-8');
|
|
assert.ok(modified.includes('{/* impeccable-variants-start jsx123'));
|
|
assert.ok(modified.includes('data-impeccable-variant-count="2"'));
|
|
});
|
|
|
|
it('finds element by ID when --element-id is used', () => {
|
|
const html = `<html><body>
|
|
<div id="pricing">
|
|
<h2>Pricing</h2>
|
|
<p>Plans start at $10/mo.</p>
|
|
</div>
|
|
</body></html>`;
|
|
writeFileSync(join(tmp, 'page.html'), html);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id id123 --count 2 --element-id "pricing" --file "${join(tmp, 'page.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
const modified = readFileSync(join(tmp, 'page.html'), 'utf-8');
|
|
assert.ok(modified.includes('data-impeccable-variants="id123"'));
|
|
// The original pricing div should be inside the wrapper
|
|
assert.ok(modified.includes('id="pricing"'));
|
|
});
|
|
|
|
it('exits with error when element is not found', () => {
|
|
writeFileSync(join(tmp, 'empty.html'), '<html><body><p>No match here</p></body></html>');
|
|
|
|
try {
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id err123 --count 2 --classes "nonexistent" --file "${join(tmp, 'empty.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8', stdio: 'pipe' }
|
|
);
|
|
assert.fail('Should have exited with error');
|
|
} catch (err) {
|
|
assert.ok(err.status !== 0, 'Should exit with non-zero status');
|
|
assert.ok(err.stderr.includes('error') || err.stderr.includes('Could not'), 'Should print error message');
|
|
}
|
|
});
|
|
|
|
it('preserves surrounding content when wrapping', () => {
|
|
const html = `<div class="before">Before</div>
|
|
<div class="target">
|
|
<span>Target content</span>
|
|
</div>
|
|
<div class="after">After</div>`;
|
|
writeFileSync(join(tmp, 'preserve.html'), html);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id pres123 --count 2 --classes "target" --file "${join(tmp, 'preserve.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'preserve.html'), 'utf-8');
|
|
assert.ok(modified.includes('class="before"'));
|
|
assert.ok(modified.includes('class="after"'));
|
|
assert.ok(modified.includes('data-impeccable-variants="pres123"'));
|
|
});
|
|
|
|
it('reports scoped CSS authoring as the default live style contract', () => {
|
|
const html = `<section class="hero-shell">
|
|
<h1>Plain title</h1>
|
|
</section>`;
|
|
writeFileSync(join(tmp, 'plain.html'), html);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id scopedCss --count 2 --classes "hero-shell" --tag "section" --file "${join(tmp, 'plain.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
assert.equal(result.styleMode, 'scoped');
|
|
assert.equal(result.cssAuthoring.mode, 'scoped');
|
|
assert.equal(result.cssAuthoring.strategy, 'scope-rule');
|
|
assert.equal(result.cssAuthoring.styleTag, '<style data-impeccable-css="SESSION_ID">');
|
|
assert.match(result.cssAuthoring.rulePattern, /@scope/);
|
|
assert.ok(
|
|
result.cssAuthoring.forbidden.some((item) => item.includes('is:inline')),
|
|
'scoped mode should explicitly reject file-specific style tag attributes',
|
|
);
|
|
});
|
|
|
|
it('reports Astro files need global prefixed live CSS instead of raw @scope', () => {
|
|
const astro = `---
|
|
const title = 'Astro title';
|
|
---
|
|
<section class="hero-shell">
|
|
<h1>{title}</h1>
|
|
</section>`;
|
|
writeFileSync(join(tmp, 'Hero.astro'), astro);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id astroCss --count 3 --classes "hero-shell" --tag "section" --file "${join(tmp, 'Hero.astro')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
assert.equal(
|
|
result.styleMode,
|
|
'astro-global-prefixed',
|
|
'event=live_wrap.astro_css_mode actor=agent operation=wrap_astro_file risk=astro_scopes_preview_css_away expected=styleMode astro-global-prefixed actual=' + result.styleMode + ' suggestion=inspect live-wrap output metadata for .astro files'
|
|
);
|
|
assert.deepEqual(result.cssSelectorPrefixExamples, [
|
|
'[data-impeccable-variant="1"]',
|
|
'[data-impeccable-variant="2"]',
|
|
'[data-impeccable-variant="3"]',
|
|
]);
|
|
assert.equal(result.cssAuthoring.mode, 'astro-global-prefixed');
|
|
assert.equal(result.cssAuthoring.strategy, 'global-prefixed');
|
|
assert.equal(result.cssAuthoring.styleTag, '<style is:inline data-impeccable-css="SESSION_ID">');
|
|
assert.match(result.cssAuthoring.rulePattern, /^\[data-impeccable-variant="N"\]/);
|
|
assert.ok(
|
|
result.cssAuthoring.forbidden.some((item) => item.includes('@scope')),
|
|
'Astro-prefixed mode should explicitly reject @scope',
|
|
);
|
|
assert.ok(
|
|
result.cssAuthoring.requirements.some((item) => item.includes('raw CSS')),
|
|
'Astro-prefixed mode should require raw CSS between style tags',
|
|
);
|
|
assert.ok(
|
|
result.cssAuthoring.forbidden.some((item) => item.includes('template literal')),
|
|
'Astro-prefixed mode should reject JSX template-literal style wrappers',
|
|
);
|
|
assert.ok(
|
|
result.cssAuthoring.forbidden.some((item) => item.includes('immediately after the style opening tag')),
|
|
'Astro-prefixed mode should reject Astro expression syntax after <style>',
|
|
);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Regression tests from real-world failures (EAC report, 2026-04)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// Integration tests share cwd=process.cwd() with the repo, so a leftover
|
|
// .impeccable/live/pending-manual-edits.json from local dev tripped the
|
|
// fail-loud check in live-wrap. Clear the buffer around each test.
|
|
function clearManualEditsBuffer() {
|
|
try {
|
|
const p = join(process.cwd(), '.impeccable/live/pending-manual-edits.json');
|
|
rmSync(p, { force: true });
|
|
} catch {}
|
|
}
|
|
|
|
describe('live-wrap — JSX / TSX correctness', () => {
|
|
let tmp;
|
|
beforeEach(() => { tmp = mkdtempSync(join(tmpdir(), 'impeccable-wrap-jsx-')); clearManualEditsBuffer(); });
|
|
afterEach(() => { rmSync(tmp, { recursive: true, force: true }); clearManualEditsBuffer(); });
|
|
|
|
it('wraps the correct <section> when a class collides with a multi-line tag elsewhere', () => {
|
|
// Decoy section: multi-line JSX with `organic-sand-surface` inside className
|
|
// but NOT the full `py-20 lg:py-24` combo.
|
|
// Target section: same class token on one line, together with py-20 lg:py-24.
|
|
//
|
|
// Bug: substring matcher lands on the decoy's className continuation line,
|
|
// mangling the decoy tag and missing the real target entirely.
|
|
const tsx = `export default function Page() {
|
|
return (
|
|
<main>
|
|
<section
|
|
className="organic-sand-surface public-arc-top-section relative z-10 pb-16 lg:pb-20"
|
|
id="marketplace-intro"
|
|
>
|
|
<h2>Intro</h2>
|
|
</section>
|
|
|
|
<section className="organic-sand-surface py-20 lg:py-24">
|
|
<h2>Target</h2>
|
|
</section>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'page.tsx'), tsx);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id wrapA --count 3 --classes "organic-sand-surface,py-20,lg:py-24" --tag "section" --file "${join(tmp, 'page.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'page.tsx'), 'utf-8');
|
|
|
|
// Wrapper landed somewhere.
|
|
assert.ok(modified.includes('impeccable-variants-start wrapA'), 'wrapper was created');
|
|
|
|
// Decoy section survives intact — all three of its lines still present in order.
|
|
const decoyIntact =
|
|
/<section\s*\n\s*className="organic-sand-surface public-arc-top-section/.test(modified) &&
|
|
/id="marketplace-intro"/.test(modified);
|
|
assert.ok(decoyIntact, 'decoy section opening tag was not mangled');
|
|
|
|
// Target section sits inside the original variant wrapper.
|
|
const originalMatch = modified.match(/data-impeccable-variant="original"[^>]*>([\s\S]*?)\s*<\/div>/);
|
|
assert.ok(originalMatch, 'original variant wrapper exists');
|
|
const inside = originalMatch[1];
|
|
assert.ok(inside.includes('py-20 lg:py-24'), 'target section (with py-20 lg:py-24) is inside original wrapper');
|
|
assert.ok(!inside.includes('public-arc-top-section'), 'decoy section is NOT inside original wrapper');
|
|
});
|
|
|
|
it('emits JSX-safe style attribute ({{ }}) in .tsx files', () => {
|
|
const tsx = `export default function App() {
|
|
return (
|
|
<main>
|
|
<section className="target">
|
|
<h1>Hi</h1>
|
|
</section>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'App.tsx'), tsx);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id jsxStyle --count 3 --classes "target" --tag "section" --file "${join(tmp, 'App.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'App.tsx'), 'utf-8');
|
|
|
|
// HTML-attribute style="..." is invalid JSX (parses then type-errors in strict setups).
|
|
assert.ok(
|
|
!/style\s*=\s*"display:\s*contents"/.test(modified),
|
|
'no HTML-style style attribute on outer wrapper'
|
|
);
|
|
// JSX-safe object syntax instead.
|
|
assert.ok(
|
|
/style=\{\{\s*display:\s*["']contents["']\s*\}\}/.test(modified),
|
|
'outer wrapper uses JSX style={{ display: "contents" }}'
|
|
);
|
|
});
|
|
|
|
it('finds elements via className= (React) when the exact class combo is unique there', () => {
|
|
// Both divs contain `target-marker`, but only one shares `shared-class` with it.
|
|
// A substring-only search would hit the decoy first; the full className match
|
|
// disambiguates — requires the query generator to emit className="..." too.
|
|
const tsx = `export default function Page() {
|
|
return (
|
|
<main>
|
|
<div className="extra-class target-marker">Decoy</div>
|
|
<div className="shared-class target-marker">Target</div>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'Page.tsx'), tsx);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id classNameA --count 3 --classes "shared-class,target-marker" --tag "div" --file "${join(tmp, 'Page.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'Page.tsx'), 'utf-8');
|
|
|
|
const originalMatch = modified.match(/data-impeccable-variant="original"[^>]*>([\s\S]*?)\s*<\/div>/);
|
|
assert.ok(originalMatch, 'original variant wrapper exists');
|
|
const inside = originalMatch[1];
|
|
assert.ok(inside.includes('shared-class target-marker'), 'correct target wrapped');
|
|
assert.ok(!inside.includes('extra-class'), 'decoy not wrapped');
|
|
});
|
|
|
|
it('falls back to source-visible classes when runtime CSS Modules hashes are present', () => {
|
|
const jsx = `import styles from './App.module.css';
|
|
|
|
export default function App() {
|
|
return (
|
|
<main>
|
|
<h1 className={\`hero-title \${styles.heroTitle}\`}>CSS Modules Fixture</h1>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'App.jsx'), jsx);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id cssModuleA --count 3 --classes "hero-title _heroTitle_1lpqp_2" --tag "h1" --text "CSS Modules Fixture" --file "${join(tmp, 'App.jsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'App.jsx'), 'utf-8');
|
|
const originalMatch = modified.match(/data-impeccable-variant="original"[^>]*>([\s\S]*?)\s*<\/div>/);
|
|
assert.ok(originalMatch, 'original variant wrapper exists');
|
|
assert.ok(originalMatch[1].includes('CSS Modules Fixture'), 'target content is wrapped');
|
|
});
|
|
|
|
it('keeps the JSX wrapper single-rooted by tucking marker comments INSIDE the outer <div>', () => {
|
|
// Replacing one JSX element with [comment, <div>, comment] yields three
|
|
// adjacent siblings, which Vite's oxc rejects with "Adjacent JSX
|
|
// elements must be wrapped in an enclosing tag." A Fragment `<></>`
|
|
// would solve adjacency but breaks `cloneElement`-using parents (Radix
|
|
// `asChild` etc.) with "Invalid prop supplied to React.Fragment". The
|
|
// wrap script's answer is to tuck the markers INSIDE the outer wrapper
|
|
// <div>, which IS the single JSX-slot child.
|
|
const tsx = `export default function App() {
|
|
return (
|
|
<main>
|
|
<section className="frag-target">
|
|
<h1>Hi</h1>
|
|
</section>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'App.tsx'), tsx);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id frag1 --count 3 --classes "frag-target" --tag "section" --file "${join(tmp, 'App.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'App.tsx'), 'utf-8');
|
|
// No JSX Fragment wrappers (those break asChild/cloneElement parents).
|
|
assert.ok(!modified.includes('<>'), 'no Fragment opener emitted');
|
|
assert.ok(!modified.includes('</>'), 'no Fragment closer emitted');
|
|
|
|
// The outer wrapper <div data-impeccable-variants="..."> appears BEFORE
|
|
// both marker comments — markers are tucked inside.
|
|
const wrapperIdx = modified.indexOf('data-impeccable-variants="frag1"');
|
|
const startMarkerIdx = modified.indexOf('impeccable-variants-start frag1');
|
|
const endMarkerIdx = modified.indexOf('impeccable-variants-end frag1');
|
|
assert.ok(wrapperIdx !== -1 && startMarkerIdx !== -1 && endMarkerIdx !== -1, 'all markers present');
|
|
assert.ok(wrapperIdx < startMarkerIdx, 'wrapper opens before start-marker comment');
|
|
assert.ok(endMarkerIdx > startMarkerIdx, 'end marker follows start marker');
|
|
});
|
|
|
|
it('HTML wrapper keeps marker comments OUTSIDE the wrapper <div> (existing layout)', () => {
|
|
const html = '<main>\n <section class="html-frag">Hi</section>\n</main>';
|
|
writeFileSync(join(tmp, 'page.html'), html);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id htmlFrag --count 3 --classes "html-frag" --tag "section" --file "${join(tmp, 'page.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'page.html'), 'utf-8');
|
|
const wrapperIdx = modified.indexOf('data-impeccable-variants="htmlFrag"');
|
|
const startMarkerIdx = modified.indexOf('impeccable-variants-start htmlFrag');
|
|
assert.ok(startMarkerIdx < wrapperIdx, 'HTML start marker precedes wrapper div');
|
|
});
|
|
|
|
it('disambiguates repeated JSX siblings via --text and lands on the correct branch', () => {
|
|
// Three <aside className="card"> elements with identical classes/tag —
|
|
// the user picked the SECOND one. Without --text, first-match wraps the
|
|
// first. With --text matching the picked element's textContent, wrap
|
|
// narrows to the right branch.
|
|
const tsx = `export default function Page() {
|
|
return (
|
|
<main>
|
|
<aside className="card">
|
|
<h2>Alpha card</h2>
|
|
<p>First in the list.</p>
|
|
</aside>
|
|
<aside className="card">
|
|
<h2>Beta card</h2>
|
|
<p>Second in the list.</p>
|
|
</aside>
|
|
<aside className="card">
|
|
<h2>Gamma card</h2>
|
|
<p>Third in the list.</p>
|
|
</aside>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'Page.tsx'), tsx);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id repeat1 --count 3 --classes "card" --tag "aside" --text "Beta card Second in the list." --file "${join(tmp, 'Page.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'Page.tsx'), 'utf-8');
|
|
const originalMatch = modified.match(/data-impeccable-variant="original"[\s\S]*?<\/div>/);
|
|
assert.ok(originalMatch, 'original wrapper present');
|
|
const inside = originalMatch[0];
|
|
assert.ok(inside.includes('Beta card'), 'wrapped the Beta card (the picked one)');
|
|
assert.ok(!inside.includes('Alpha card'), 'did not wrap Alpha');
|
|
assert.ok(!inside.includes('Gamma card'), 'did not wrap Gamma');
|
|
});
|
|
|
|
it('disambiguates when the picked element has multiple text-node children (textContent has no inter-element whitespace)', () => {
|
|
// Real-world regression caught while driving a live loop in the browser.
|
|
// textContent concatenates child text without inserting whitespace, so
|
|
// an <aside><h1>Hero Two</h1><p>Second card body copy.</p></aside> reads
|
|
// as "Hero TwoSecond card body copy." — but the source has whitespace
|
|
// between </h1> and <p>. A single-space normalization on both sides
|
|
// misses the join boundary; a no-whitespace normalization catches it.
|
|
const tsx = `export default function Page() {
|
|
return (
|
|
<main>
|
|
<aside className="card">
|
|
<h1 className="hero-title">Hero One</h1>
|
|
<p className="hero-hook">First card body copy.</p>
|
|
</aside>
|
|
<aside className="card">
|
|
<h1 className="hero-title">Hero Two</h1>
|
|
<p className="hero-hook">Second card body copy.</p>
|
|
</aside>
|
|
<aside className="card">
|
|
<h1 className="hero-title">Hero Three</h1>
|
|
<p className="hero-hook">Third card body copy.</p>
|
|
</aside>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'Page.tsx'), tsx);
|
|
|
|
// Note: --text is the textContent the BROWSER produced — no space between
|
|
// "Two" and "Second" because textContent has no inter-element whitespace.
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id concat1 --count 3 --classes "card" --tag "aside" --text "Hero TwoSecond card body copy." --file "${join(tmp, 'Page.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'Page.tsx'), 'utf-8');
|
|
const originalMatch = modified.match(/data-impeccable-variant="original"[\s\S]*?<\/div>/);
|
|
assert.ok(originalMatch, 'original wrapper present');
|
|
const inside = originalMatch[0];
|
|
assert.ok(inside.includes('Hero Two'), 'wrapped Hero Two (the picked card)');
|
|
assert.ok(!inside.includes('Hero One'), 'did not wrap Hero One');
|
|
assert.ok(!inside.includes('Hero Three'), 'did not wrap Hero Three');
|
|
});
|
|
|
|
it('short --text falls back to first-match instead of erroneously firing element_ambiguous', () => {
|
|
// Cursor Bugbot regression: filterByText returned `candidates.slice()`
|
|
// (all candidates) when the trimmed snippet was shorter than 8 chars.
|
|
// The caller treats `filtered.length > 1` as ambiguous — so a short
|
|
// textContent on a page with multiple matching siblings produced a
|
|
// spurious `element_ambiguous` error instead of just landing on the
|
|
// first match (the documented short-text fallback).
|
|
const tsx = `export default function Page() {
|
|
return (
|
|
<main>
|
|
<aside className="card"><h1 className="hero-title">Hi</h1></aside>
|
|
<aside className="card"><h1 className="hero-title">Hi</h1></aside>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'Short.tsx'), tsx);
|
|
|
|
// Picked element's textContent is 'Hi' — only 2 chars. With multiple
|
|
// matching siblings the prior bug fired element_ambiguous; the fix
|
|
// makes wrap silently land on the first match (existing behavior
|
|
// documented in filterByText's JSDoc).
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id short1 --count 3 --classes "card" --tag "aside" --text "Hi" --file "${join(tmp, 'Short.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'Short.tsx'), 'utf-8');
|
|
assert.ok(modified.includes('data-impeccable-variants="short1"'),
|
|
'short --text should still wrap (fallback to first-match), not fail with element_ambiguous');
|
|
});
|
|
|
|
it('returns endLine that includes the multi-line original content offset', () => {
|
|
// Cursor Bugbot regression: the `endLine` field was computed as
|
|
// `startLine + wrapperLines.length`, but `wrapperLines` is an array
|
|
// where one element (originalIndented) is a `\n`-joined multi-line
|
|
// string. For multi-line picked elements, the actual wrapper region
|
|
// in the file spans (wrapperLines.length + originalLines.length - 1)
|
|
// rows. Reporting too-small endLine misled agents writing variants
|
|
// about the wrapper boundary.
|
|
const html = `<main>
|
|
<section class="multiline-target">
|
|
<h1>Multi</h1>
|
|
<p>Line</p>
|
|
<span>Element</span>
|
|
</section>
|
|
</main>`;
|
|
writeFileSync(join(tmp, 'multi.html'), html);
|
|
|
|
const result = JSON.parse(execSync(
|
|
`node skill/scripts/live-wrap.mjs --id ml1 --count 3 --classes "multiline-target" --tag "section" --file "${join(tmp, 'multi.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
));
|
|
|
|
const modified = readFileSync(join(tmp, 'multi.html'), 'utf-8');
|
|
const lines = modified.split('\n');
|
|
// endLine is 1-indexed; lines[endLine - 1] should be the wrapper's last
|
|
// line (the impeccable-variants-end marker for HTML).
|
|
assert.match(lines[result.endLine - 1], /impeccable-variants-end ml1/,
|
|
`endLine ${result.endLine} should point at the variants-end marker line. Got: ${JSON.stringify(lines[result.endLine - 1])}`);
|
|
// And the line after the reported endLine should be `</main>` — proving
|
|
// the entire wrapper was accounted for (no rows missing).
|
|
assert.match(lines[result.endLine], /<\/main>/,
|
|
`line after endLine should be </main>; got: ${JSON.stringify(lines[result.endLine])}`);
|
|
});
|
|
|
|
it('falls back to first-match when --text is not literally present in source (e.g. {title})', () => {
|
|
// textContent the browser sends is the rendered text, but the source uses
|
|
// a JSX expression. No candidate's source body contains the literal
|
|
// textContent — wrap should keep the first-match behavior rather than
|
|
// refusing, because failing here would be more annoying than wrong.
|
|
const tsx = `export default function Cards({ items }) {
|
|
return (
|
|
<main>
|
|
{items.map(item => (
|
|
<aside key={item.id} className="card">
|
|
<h2>{item.title}</h2>
|
|
</aside>
|
|
))}
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'Cards.tsx'), tsx);
|
|
|
|
// Run with --text that won't show up in source verbatim.
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id dyn1 --count 3 --classes "card" --tag "aside" --text "Beta card body text" --file "${join(tmp, 'Cards.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'Cards.tsx'), 'utf-8');
|
|
assert.ok(modified.includes('data-impeccable-variants="dyn1"'), 'wrapped (first-match fallback)');
|
|
});
|
|
|
|
it('refuses multiple dynamic source branches when rendered text cannot identify one', () => {
|
|
const astro = `---
|
|
const results = [{ title: 'Result 01' }, { title: 'Result 02' }];
|
|
---
|
|
<main>
|
|
<article class="result-card"><h2>{results[0].title}</h2></article>
|
|
<article class="result-card"><h2>{results[1].title}</h2></article>
|
|
</main>`;
|
|
const file = join(tmp, 'Results.astro');
|
|
writeFileSync(file, astro);
|
|
|
|
let errPayload;
|
|
try {
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id dyn2 --count 3 --classes "result-card" --tag "article" --text "Result 02 rendered body" --file "${file}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8', stdio: 'pipe' },
|
|
);
|
|
assert.fail('Should have refused an unsafe first-match fallback');
|
|
} catch (err) {
|
|
errPayload = JSON.parse(err.stderr.toString().trim());
|
|
}
|
|
|
|
assert.equal(errPayload.error, 'element_ambiguous');
|
|
assert.equal(errPayload.reason, 'rendered_text_not_in_source');
|
|
assert.equal(errPayload.candidates.length, 2);
|
|
assert.doesNotMatch(readFileSync(file, 'utf-8'), /impeccable-variants-start/);
|
|
});
|
|
|
|
it('errors with element_ambiguous when --text matches multiple identical branches', () => {
|
|
// Two <aside className="card"> with truly identical body text. --text
|
|
// can't pick a winner — wrap should refuse rather than silently land.
|
|
const tsx = `export default function Page() {
|
|
return (
|
|
<main>
|
|
<aside className="card">
|
|
<h2>Same headline</h2>
|
|
<p>Identical body copy.</p>
|
|
</aside>
|
|
<aside className="card">
|
|
<h2>Same headline</h2>
|
|
<p>Identical body copy.</p>
|
|
</aside>
|
|
</main>
|
|
);
|
|
}`;
|
|
writeFileSync(join(tmp, 'Dup.tsx'), tsx);
|
|
|
|
let errPayload;
|
|
try {
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id dup1 --count 3 --classes "card" --tag "aside" --text "Same headline Identical body copy." --file "${join(tmp, 'Dup.tsx')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8', stdio: 'pipe' }
|
|
);
|
|
assert.fail('Should have exited with error');
|
|
} catch (err) {
|
|
assert.ok(err.status !== 0, 'non-zero exit');
|
|
errPayload = JSON.parse(err.stderr.toString().trim());
|
|
}
|
|
assert.equal(errPayload.error, 'element_ambiguous');
|
|
assert.equal(errPayload.fallback, 'agent-driven');
|
|
assert.ok(Array.isArray(errPayload.candidates) && errPayload.candidates.length === 2,
|
|
'two candidate locations reported');
|
|
});
|
|
|
|
it('respects --tag to reject matches inside the wrong element type', () => {
|
|
// Two elements, both containing the class. The <div> comes first in source
|
|
// order; a tag-agnostic search would wrap it. With --tag section, the
|
|
// <section> is the only valid target.
|
|
const html = `<main>
|
|
<div class="ambiguous-name">Decoy div</div>
|
|
<section class="ambiguous-name">Target section</section>
|
|
</main>`;
|
|
writeFileSync(join(tmp, 'index.html'), html);
|
|
|
|
execSync(
|
|
`node skill/scripts/live-wrap.mjs --id tagFilter --count 3 --classes "ambiguous-name" --tag "section" --file "${join(tmp, 'index.html')}"`,
|
|
{ cwd: process.cwd(), encoding: 'utf-8' }
|
|
);
|
|
|
|
const modified = readFileSync(join(tmp, 'index.html'), 'utf-8');
|
|
const originalMatch = modified.match(/data-impeccable-variant="original"[^>]*>([\s\S]*?)\s*<\/div>/);
|
|
assert.ok(originalMatch, 'original variant wrapper exists');
|
|
const inside = originalMatch[1];
|
|
assert.ok(inside.includes('<section'), 'section was wrapped');
|
|
assert.ok(inside.includes('Target section'), 'target content is inside wrapper');
|
|
assert.ok(!inside.includes('Decoy div'), 'div decoy was not wrapped');
|
|
});
|
|
});
|
|
|
|
describe('findClosingLine — edge cases', () => {
|
|
it('recognises an opener line where the tag sits at end-of-line (multi-line JSX)', () => {
|
|
const lines = [
|
|
'<section',
|
|
' className="hero"',
|
|
'>',
|
|
' <h1>Hi</h1>',
|
|
'</section>',
|
|
];
|
|
// findClosingLine should treat line 0 as a valid opener and span to line 4.
|
|
assert.equal(findClosingLine(lines, 0), 4);
|
|
});
|
|
});
|