shadowdao
8029126ab7
Migrates Menu, ColumnLayout, Countdown, Gallery, Tabs, InputField, and
TextareaField from Math.random()/content-hash scope ids to the threaded
Craft node id (via scopeId()), keeping every emitted element id,
aria-controls/aria-labelledby/for, and inline <script> function
name/getElementById() call consistently scoped per component.
Resolves the two Important id-collision review findings:
- Tabs: tabId was djb2(anchorId||labels) -- two default Tabs instances
produced identical aria-controls/aria-labelledby ids, so one instance's
arrow-key script clobbered the other's tab/panel wiring.
- InputField/TextareaField: fieldId was `field-${name}` -- two fields
sharing a (often default) name produced duplicate <label for>/<input
id> pairs, breaking the for/id association for one of them.
Also eliminates the remaining Math.random() scope ids in Menu (hover CSS
class scope) and ColumnLayout (nth-child width CSS class scope), so no
export component is non-deterministic anymore.
All fall back to a stable content hash (never Math.random) for legacy
2-arg toHtml() call sites without a node id.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
62 lines
2.8 KiB
TypeScript
62 lines
2.8 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { ColumnLayout } from './ColumnLayout';
|
|
|
|
const toHtml = (ColumnLayout as any).toHtml;
|
|
|
|
describe('ColumnLayout.toHtml width export from split', () => {
|
|
test('non-default split (70-30) exports per-column width CSS matching each column', () => {
|
|
const { html } = toHtml({ columns: 2, split: '70-30', gap: '16px' }, '<div>A</div><div>B</div>');
|
|
// First column gets 70%, second gets 30% (same mapping as getWidths()).
|
|
expect(html).toMatch(/nth-child\(1\)[^}]*calc\(70% - 16px\)/);
|
|
expect(html).toMatch(/nth-child\(2\)[^}]*calc\(30% - 16px\)/);
|
|
});
|
|
|
|
test('default 50-50 split still exports equal widths', () => {
|
|
const { html } = toHtml({ columns: 2, split: '50-50', gap: '16px' }, '<div>A</div><div>B</div>');
|
|
expect(html).toMatch(/nth-child\(1\)[^}]*calc\(50% - 16px\)/);
|
|
expect(html).toMatch(/nth-child\(2\)[^}]*calc\(50% - 16px\)/);
|
|
});
|
|
|
|
test('3-column 33-33-33 split exports three width rules', () => {
|
|
const { html } = toHtml({ columns: 3, split: '33-33-33', gap: '16px' }, '<div>A</div><div>B</div><div>C</div>');
|
|
expect(html).toMatch(/nth-child\(1\)[^}]*calc\(33\.333% - 16px\)/);
|
|
expect(html).toMatch(/nth-child\(2\)[^}]*calc\(33\.333% - 16px\)/);
|
|
expect(html).toMatch(/nth-child\(3\)[^}]*calc\(33\.333% - 16px\)/);
|
|
});
|
|
|
|
test('childrenHtml is preserved in the output', () => {
|
|
const { html } = toHtml({ columns: 2, split: '70-30', gap: '16px' }, '<div>A</div><div>B</div>');
|
|
expect(html).toContain('<div>A</div><div>B</div>');
|
|
});
|
|
});
|
|
|
|
describe('ColumnLayout.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
|
|
const props = { columns: 2, split: '50-50', gap: '16px' };
|
|
|
|
test('same node id -> identical output across calls (deterministic)', () => {
|
|
const { html: html1 } = toHtml(props, '', 'node-col1');
|
|
const { html: html2 } = toHtml(props, '', 'node-col1');
|
|
expect(html1).toBe(html2);
|
|
});
|
|
|
|
test('different node ids -> different, non-colliding scope classes (identical columns/split/gap, no collision)', () => {
|
|
const { html: html1 } = toHtml(props, '', 'node-col1');
|
|
const { html: html2 } = toHtml(props, '', 'node-col2');
|
|
const cls1 = html1.match(/class="([^"]+)"/)![1];
|
|
const cls2 = html2.match(/class="([^"]+)"/)![1];
|
|
expect(cls1).not.toBe(cls2);
|
|
});
|
|
|
|
test('the <style> nth-child rule and the div class= use the SAME scope', () => {
|
|
const { html } = toHtml(props, '', 'node-col1');
|
|
const cls = html.match(/class="([^"]+)"/)![1];
|
|
expect(html).toContain(`.${cls} > :nth-child(1)`);
|
|
});
|
|
|
|
test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
|
|
const { html: html1 } = toHtml(props, '<div>A</div><div>B</div>');
|
|
const { html: html2 } = toHtml(props, '<div>A</div><div>B</div>');
|
|
expect(html1).toBe(html2);
|
|
});
|
|
});
|