erikghandClaude Opus 5
5b400cb161
Diez primitivas que dan a la landing el "gráfico y movimiento" que pidió la dueña, todas con guarda de prefers-reduced-motion: - FondoPuntos / PatronPuntos — el patrón de puntos del manual - TarjetaSpotlight, TextoDesenfoque, ContadorNumero — realce y reveal - Carrusel — deslizable, con contador, autoplay pausable - Icono, SimboloTresLineas, IlustracionInflexion — línea, sin relleno - FondoFoto — duotono azul/dorado sobre foto useAutoStep en lib/motion.ts comparte la forma del autoplay del carrusel para indicadores de paso que no son carrusel. IlustracionInflexion documenta un detalle que muerde: motion.path aplica su propio andamiaje de dasharray aunque no reciba initial/animate, así que la rama de reduced motion renderiza <path> planos en vez de intentar neutralizar los animados. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { Icono, type IconoNombre } from '../Icono';
|
|
|
|
const NOMBRES: IconoNombre[] = [
|
|
'inmersion',
|
|
'desafiar',
|
|
'estrategia',
|
|
'escribeme',
|
|
'diagnostico',
|
|
'plan',
|
|
'comunicacion',
|
|
'digital',
|
|
'experiencias',
|
|
];
|
|
|
|
describe('<Icono />', () => {
|
|
it('is decorative: hidden from assistive tech', () => {
|
|
const { container } = render(<Icono nombre="inmersion" />);
|
|
expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true');
|
|
});
|
|
|
|
it.each(NOMBRES)('renders a non-empty svg for "%s"', (nombre) => {
|
|
const { container } = render(<Icono nombre={nombre} />);
|
|
const svg = container.querySelector('svg');
|
|
expect(svg?.children.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('takes its colour from currentColor via className, not a hardcoded fill', () => {
|
|
const { container } = render(<Icono nombre="plan" className="text-dorado" />);
|
|
expect(container.querySelector('svg')).toHaveAttribute('stroke', 'currentColor');
|
|
expect(container.querySelector('svg')).toHaveClass('text-dorado');
|
|
});
|
|
});
|