import { describe, test, expect } from 'vitest'; import { CallToAction } from './CallToAction'; const toHtml = (CallToAction as any).toHtml; describe('CallToAction.toHtml basic export', () => { test('renders heading, description, and CTA buttons', () => { const { html } = toHtml({ heading: 'Hi', description: 'Sub', ctas: [{ text: 'Go', href: '#', variant: 'primary' }] }, ''); expect(html).toContain('Hi'); expect(html).toContain('Sub'); expect(html).toContain('Go'); }); test('box-model style props (margin/padding/border/boxShadow/opacity) flow through to the section style=""', () => { const { html } = toHtml({ heading: 'Hi', description: 'Sub', style: { marginBottom: '12px', paddingRight: '6px', border: '2px dashed #333', boxShadow: '0 4px 8px rgba(0,0,0,0.12)', opacity: '0.75' }, }, ''); expect(html).toContain('margin-bottom:12px'); expect(html).toContain('padding-right:6px'); expect(html).toContain('border:2px dashed #333'); expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)'); expect(html).toContain('opacity:0.75'); }); }); describe('CallToAction.craft.props includes the box-model/animation/visibility rollout props', () => { test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => { const props = (CallToAction as any).craft.props; expect(props).toHaveProperty('animation', ''); expect(props).toHaveProperty('animationDelay', ''); expect(props).toHaveProperty('hideOnDesktop', false); expect(props).toHaveProperty('hideOnTablet', false); expect(props).toHaveProperty('hideOnMobile', false); }); }); describe('CallToAction.toHtml design tokens (#44)', () => { test('default export references var(--wsb-*) and no longer carries the old hard-coded hex', () => { const { html } = toHtml({ ...(CallToAction as any).craft.props }, ''); const lower = html.toLowerCase(); for (const t of ["bg", "text", "primary", "secondary"]) expect(html, `token ${t}`).toContain(`var(--wsb-${t})`); for (const hex of ["#18181b", "#2563eb", "#7c3aed"]) expect(lower, `old ${hex}`).not.toContain(hex); }); });