32 lines
1.5 KiB
TypeScript
32 lines
1.5 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>');
|
||
|
|
});
|
||
|
|
});
|