erikghandClaude Opus 5
a9758a92f9
El wordmark deja de depender del glifo tipográfico ≡ y pasa a un trazado SVG propio (SimboloTresLineas), que es lo que permite cumplir la instrucción de la dueña: que se lea como E, no como tres líneas sueltas. Incluye las tres versiones del logotipo (principal, negativa, secundaria) y alinea los tokens de color con el Manual de Identidad Visual v1.0. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { CTA } from '../CTA';
|
|
|
|
describe('<CTA />', () => {
|
|
it('renders the label with arrow', () => {
|
|
render(<CTA href="#contacto" label="Define tu siguiente movimiento" />);
|
|
expect(screen.getByRole('link', { name: /define tu siguiente movimiento/i })).toBeInTheDocument();
|
|
});
|
|
it('uses the href', () => {
|
|
render(<CTA href="#contacto" label="x" />);
|
|
expect(screen.getByRole('link').getAttribute('href')).toBe('#contacto');
|
|
});
|
|
it('renders the ghost variant outlined, so it reads as secondary', () => {
|
|
render(<CTA href="#mecanismo" label="Ver cómo trabajo" variant="ghost" />);
|
|
const classes = screen.getByRole('link').className.split(/\s+/);
|
|
expect(classes).toContain('border-azul-profundo');
|
|
expect(classes).not.toContain('bg-azul-profundo'); // sólo se rellena en hover
|
|
expect(classes).toContain('hover:bg-azul-profundo');
|
|
});
|
|
it('keeps every variant the same height', () => {
|
|
const { container } = render(
|
|
<>
|
|
<CTA href="#a" label="a" variant="light" />
|
|
<CTA href="#b" label="b" variant="ghost" />
|
|
</>,
|
|
);
|
|
const [light, ghost] = Array.from(container.querySelectorAll('a'));
|
|
expect(light.className).toContain('border-2');
|
|
expect(ghost.className).toContain('border-2');
|
|
});
|
|
});
|