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>
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { render, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { TarjetaSpotlight } from '../TarjetaSpotlight';
|
|
|
|
describe('<TarjetaSpotlight />', () => {
|
|
it('renders its children', () => {
|
|
const { getByText } = render(
|
|
<TarjetaSpotlight>
|
|
<p>Contenido de la tarjeta</p>
|
|
</TarjetaSpotlight>,
|
|
);
|
|
expect(getByText('Contenido de la tarjeta')).toBeInTheDocument();
|
|
});
|
|
|
|
it('disables the glow for reduced-motion users via a motion-reduce guard', () => {
|
|
const { container } = render(<TarjetaSpotlight>hola</TarjetaSpotlight>);
|
|
expect(container.firstElementChild?.className).toContain('motion-reduce:before:hidden');
|
|
});
|
|
|
|
it('tracks the cursor position as CSS custom properties on mouse move', () => {
|
|
const { container } = render(<TarjetaSpotlight>hola</TarjetaSpotlight>);
|
|
const card = container.firstElementChild as HTMLDivElement;
|
|
fireEvent.mouseMove(card, { clientX: 40, clientY: 20 });
|
|
expect(card.style.getPropertyValue('--spot-x')).toMatch(/px$/);
|
|
expect(card.style.getPropertyValue('--spot-y')).toMatch(/px$/);
|
|
});
|
|
|
|
it('accepts a custom spotlight colour', () => {
|
|
const { container } = render(
|
|
<TarjetaSpotlight spotlightColor="rgba(0,0,0,0.5)">hola</TarjetaSpotlight>,
|
|
);
|
|
const card = container.firstElementChild as HTMLDivElement;
|
|
expect(card.style.getPropertyValue('--spot-color')).toBe('rgba(0,0,0,0.5)');
|
|
});
|
|
});
|