import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { CHARACTERS } from "@/data/constants/character";
import {
  CharacterCatalogProvider,
  useCharacterCatalog,
} from "@/providers/character-catalog-provider";

describe("CharacterCatalogProvider", () => {
  it("provides the complete local character catalog", () => {
    const html = renderToStaticMarkup(
      <CharacterCatalogProvider>
        <CatalogProbe />
      </CharacterCatalogProvider>,
    );

    expect(html).toContain("elio,maya,nayeli");
  });

  it("accepts a serializable catalog snapshot", () => {
    const html = renderToStaticMarkup(
      <CharacterCatalogProvider characters={[CHARACTERS[1]]}>
        <CatalogProbe />
      </CharacterCatalogProvider>,
    );

    expect(html).toContain("maya");
    expect(html).not.toContain("elio");
  });
});

function CatalogProbe() {
  const catalog = useCharacterCatalog();
  return <span>{catalog.characters.map((character) => character.slug).join(",")}</span>;
}
