import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Antetitulo } from '../Antetitulo';

describe('<Antetitulo />', () => {
  it('renders its copy', () => {
    render(<Antetitulo>el contexto</Antetitulo>);
    expect(screen.getByText('el contexto')).toBeInTheDocument();
  });

  it('sobre fondo oscuro usa el dorado del manual', () => {
    // Sobre azul profundo, #C4942E da 6,07:1: es donde el dorado de la marca
    // trabaja mejor y ahí se queda intacto.
    render(<Antetitulo sobre="oscuro">las herramientas</Antetitulo>);
    expect(screen.getByText('las herramientas').className.split(/\s+/)).toContain('text-dorado');
  });

  it('sobre fondo claro baja al dorado legible', () => {
    // El mismo #C4942E cae a 2,76:1 sobre blanco y a 2,46:1 sobre gris-claro.
    // A 12px y en negrita eso no se lee: el antetítulo pasa a `dorado-texto`.
    render(<Antetitulo sobre="claro">lo que realmente sientes</Antetitulo>);
    const classes = screen.getByText('lo que realmente sientes').className.split(/\s+/);
    expect(classes).toContain('text-dorado-texto');
    expect(classes).not.toContain('text-dorado');
  });

  it('asume fondo claro cuando no se le dice nada', () => {
    // El caso por defecto tiene que ser el seguro: olvidarse del prop no puede
    // producir un antetítulo ilegible.
    render(<Antetitulo>cómo empezar</Antetitulo>);
    expect(screen.getByText('cómo empezar').className.split(/\s+/)).toContain('text-dorado-texto');
  });

  it('puede ser el encabezado de su sección', () => {
    // En el recorrido el antetítulo es el único <h2> que tiene la sección.
    render(<Antetitulo as="h2">¿Te reconoces?</Antetitulo>);
    expect(screen.getByRole('heading', { name: '¿Te reconoces?', level: 2 })).toBeInTheDocument();
  });

  it('lee su tamaño del token rotulo en vez de recomponerlo a mano', () => {
    // `rotulo` already declares 0.75rem with 0.3em of tracking. Repeating it
    // in the className left the token unused and the two definitions free
    // to drift apart.
    render(<Antetitulo>el contexto</Antetitulo>);
    const classes = screen.getByText('el contexto').className.split(/\s+/);
    expect(classes).toContain('text-rotulo');
    expect(classes).not.toContain('text-xs');
    expect(classes).not.toContain('tracking-[0.3em]');
  });

  it('usa un peso que la tipografía tiene', () => {
    // Open Sans tops out at 800 and layout.tsx loads up to 800: `font-black`
    // (900) fell back to 800 anyway. The eyebrow goes at 600, the weight the
    // scale reserves for labels.
    render(<Antetitulo>el contexto</Antetitulo>);
    const classes = screen.getByText('el contexto').className.split(/\s+/);
    expect(classes).toContain('font-semibold');
    expect(classes).not.toContain('font-black');
  });
});