import { describe, test, expect } from 'vitest'; import { Heading } from './Heading'; const toHtml = (Heading as any).toHtml; describe('Heading.toHtml level allowlist (adversarial re-review, same class as C1)', () => { test('a malicious level value clamps to h2 -- no injected , no broken-out tag', () => { const { html } = toHtml({ text: 'x', level: 'h2>')).toBe(true); }); test('a numeric out-of-range level (99) clamps to h2', () => { const { html } = toHtml({ text: 'x', level: 99 as any }, ''); expect(html.startsWith('')).toBe(true); }); test('a non-heading string level clamps to h2', () => { const { html } = toHtml({ text: 'x', level: 'script' as any }, ''); expect(html.startsWith(' { const { html } = toHtml({ text: 'x', level: 'h4' }, ''); expect(html).toContain(''); }); test('all valid levels h1-h6 still work', () => { for (const level of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) { const { html } = toHtml({ text: 'x', level }, ''); expect(html.startsWith(`<${level}`)).toBe(true); expect(html.endsWith(``)).toBe(true); } }); }); describe('Heading.toHtml text escaping (attacker-controlled `text` prop)', () => { test('a tag-breakout attempt in text is neutralized (no injected element)', () => { const { html } = toHtml({ text: '', level: 'h2' }, ''); expect(html).not.toContain(' { const { html } = toHtml({ text: 'Fish & Chips', level: 'h2' }, ''); expect(html).toContain('Fish & Chips'); }); test('a normal text value still renders unchanged', () => { const { html } = toHtml({ text: 'Hello world', level: 'h2' }, ''); expect(html).toBe('

Hello world

'); }); }); describe('Heading.toHtml typography depth (line-height/letter-spacing/transform/style/decoration)', () => { test('line-height, letter-spacing, text-transform all flow into the style attribute', () => { const { html } = toHtml({ text: 'x', level: 'h2', style: { lineHeight: '1.25', letterSpacing: '0.05em', textTransform: 'uppercase' }, }, ''); expect(html).toContain('line-height:1.25'); expect(html).toContain('letter-spacing:0.05em'); expect(html).toContain('text-transform:uppercase'); }); test('italic + underline toggles emit font-style and text-decoration', () => { const { html } = toHtml({ text: 'x', level: 'h2', style: { fontStyle: 'italic', textDecoration: 'underline' }, }, ''); expect(html).toContain('font-style:italic'); expect(html).toContain('text-decoration:underline'); }); test('a custom font-size (not one of the presets) still flows through', () => { const { html } = toHtml({ text: 'x', level: 'h2', style: { fontSize: '42px' } }, ''); expect(html).toContain('font-size:42px'); }); }); describe('Heading.craft.props exposes the box-model + animation/visibility rollout', () => { test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => { const props = (Heading as any).craft.props; expect(props.animation).toBe(''); expect(props.animationDelay).toBe('0'); expect(props.hideOnDesktop).toBe(false); expect(props.hideOnTablet).toBe(false); expect(props.hideOnMobile).toBe(false); }); test('style carries blank/default box-model + typography-depth keys', () => { const style = (Heading as any).craft.props.style; expect(style).toHaveProperty('marginTop'); expect(style).toHaveProperty('paddingTop'); expect(style).toHaveProperty('lineHeight'); expect(style).toHaveProperty('letterSpacing'); expect(style).toHaveProperty('textTransform'); expect(style.border).toBe('none'); expect(style.boxShadow).toBe('none'); expect(style.opacity).toBe('1'); }); });