Claude
6947113027
Product UI components are built once at design size from the Figma file and reused by the marketing mockups and, later, the app. Text contrast tokens now meet WCAG AA in both themes, with a test. Pricing stays hidden until decided. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014SdXCbrN5PtGExkpvMaMHx
34 lines
1.7 KiB
TypeScript
34 lines
1.7 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { Button } from '../../src/marketing/Button.tsx';
|
|
|
|
describe('Button', () => {
|
|
it('renders a link with its label and destination', () => {
|
|
render(<Button href="/signup">Get started</Button>);
|
|
expect(screen.getByRole('link', { name: 'Get started' })).toHaveAttribute('href', '/signup');
|
|
});
|
|
|
|
it('is the primary (inverse) pill by default', () => {
|
|
render(<Button href="/signup">Get started</Button>);
|
|
expect(screen.getByRole('link', { name: 'Get started' })).toHaveClass('btn', 'btn-primary', 'btn-md');
|
|
});
|
|
|
|
it('supports the ghost and secondary variants and the large size', () => {
|
|
const { rerender } = render(<Button href="/product" variant="ghost" size="lg">See how it works</Button>);
|
|
expect(screen.getByRole('link', { name: 'See how it works' })).toHaveClass('btn-ghost', 'btn-lg');
|
|
rerender(<Button href="/trust" variant="secondary">How approval works</Button>);
|
|
expect(screen.getByRole('link', { name: 'How approval works' })).toHaveClass('btn-secondary');
|
|
});
|
|
|
|
it('supports a light variant for use on the dark panel', () => {
|
|
render(<Button href="/signup" variant="light" size="lg">Get started</Button>);
|
|
expect(screen.getByRole('link', { name: 'Get started' })).toHaveClass('btn-light');
|
|
});
|
|
|
|
it('can end with an arrow that is not announced', () => {
|
|
render(<Button href="/how-it-works" variant="ghost" size="lg" trailingIcon="arrow-right">See how it works</Button>);
|
|
const link = screen.getByRole('link', { name: 'See how it works' });
|
|
expect(link.querySelector('.icon')).toHaveAttribute('aria-hidden', 'true');
|
|
});
|
|
});
|