import assert from "node:assert/strict";
import { test } from "node:test";

import { renderToStaticMarkup } from "react-dom/server";

import { TimeLine } from "./components/time-line";

test("línea temporal: conserva el orden aportado, fechas semánticas, autor y contenido", () => {
  const items = [
    {
      id: "latest",
      title: "Cambio reciente",
      dateTime: "2026-10-16T10:00:00.000Z",
      dateLabel: "16 oct 2026",
      meta: "Ana",
      content: <p>Estado actualizado</p>,
    },
    {
      id: "first",
      title: "Alta original",
      dateTime: "2026-10-10T10:00:00.000Z",
      dateLabel: "10 oct 2026",
    },
  ];
  const html = renderToStaticMarkup(
    <TimeLine emptyMessage="Sin eventos" items={items} label="Historial" />
  );

  assert.ok(html.includes('<ol aria-label="Historial"'));
  assert.equal((html.match(/<li\b/g) ?? []).length, 2);
  assert.ok(html.indexOf("Cambio reciente") < html.indexOf("Alta original"));
  assert.ok(html.includes('dateTime="2026-10-16T10:00:00.000Z"'));
  assert.ok(html.includes("16 oct 2026"));
  assert.ok(html.includes("Ana"));
  assert.ok(html.includes("Estado actualizado"));
  assert.equal(html.includes("Sin eventos"), false);
  assert.deepEqual(
    items.map((item) => item.id),
    ["latest", "first"]
  );
});

test("línea temporal vacía: muestra el mensaje del consumidor como estado", () => {
  const html = renderToStaticMarkup(
    <TimeLine emptyMessage="No events yet" items={[]} label="History" />
  );

  assert.ok(html.includes('role="status"'));
  assert.ok(html.includes("No events yet"));
  assert.equal(html.includes("<ol"), false);
});