import { describe, it, expect } from 'vitest';
import config from '../../tailwind.config';

// The scale is a contract, not a preference: the problem this redesign fixes is
// that five elements were tied for largest on the page, and because of that,
// none of them read as largest. Five roles: only one reaches above 4rem.
const escala = () => (config.theme?.extend?.fontSize ?? {}) as Record<string, [string, object]>;

describe('escala tipográfica', () => {
  it('define los cinco roles del documento', () => {
    expect(Object.keys(escala())).toEqual(
      expect.arrayContaining(['display', 'titulo', 'sumario', 'cuerpo', 'rotulo']),
    );
  });

  it('display es el único que llega a 7rem', () => {
    const conSieteRem = Object.entries(escala()).filter(([, v]) => v[0].includes('7rem'));
    expect(conSieteRem.map(([k]) => k)).toEqual(['display']);
  });

  it('el cuerpo se compone holgado y el display apretado', () => {
    const lh = (rol: string) => (escala()[rol][1] as { lineHeight: string }).lineHeight;
    expect(Number(lh('display'))).toBeLessThan(1);
    expect(Number(lh('cuerpo'))).toBeGreaterThan(1.6);
  });

  it('reserva una medida de 68 caracteres para el texto corrido', () => {
    const anchos = (config.theme?.extend?.maxWidth ?? {}) as Record<string, string>;
    expect(anchos.medida).toBe('68ch');
  });
});