import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { Markdown } from "@/components/markdown";
import { platzhalterErsetzen } from "@/lib/platzhalter-werte";

/**
 * Was von einem ersetzten Wert wirklich im HTML ankommt (#012).
 *
 * Das Akzeptanzkriterium lautet: „ein Wert mit `<script>` landet HTML-escaped in
 * der Anzeige“. Erfuellt wird es von React und nicht von eigenem Code — und
 * genau deshalb steht hier ein Test, der das **am gerenderten HTML** nachweist.
 * Eine eigene Maskierung waere doppelt und machte aus „Forschung & Entwicklung“
 * sichtbar „Forschung &amp;amp; Entwicklung“.
 */

describe("Ersetzter Wert im gerenderten HTML", () => {
  it("maskiert ein script-Element im Schritt-Titel", () => {
    const { text } = platzhalterErsetzen("Konto für {{mitarbeiter}} anlegen", {
      mitarbeiter: "<script>alert(1)</script>",
    });
    const html = renderToStaticMarkup(<h3>{text}</h3>);
    expect(html).not.toContain("<script>");
    expect(html).toContain("&lt;script&gt;");
  });

  it("zeigt ein Ampersand als Zeichen, nicht als Entität", () => {
    // Der alltaegliche Fall – „Forschung & Entwicklung“ ist ein Abteilungsname
    // und kein Angriff. Doppelt maskiert stuende hier „&amp;amp;“.
    const { text } = platzhalterErsetzen("{{abteilung}}", {
      abteilung: "Forschung & Entwicklung",
    });
    const html = renderToStaticMarkup(<p>{text}</p>);
    expect(html).toBe("<p>Forschung &amp; Entwicklung</p>");
  });

  it("lässt ein script-Element auch im Hilfetext nicht durch", () => {
    // Der Hilfetext geht durch Markdown, das ebenfalls maskiert und rohes HTML
    // fallen laesst (#010).
    const { text } = platzhalterErsetzen("Hinweis für {{mitarbeiter}}", {
      mitarbeiter: "<img src=x onerror=alert(1)>",
    });
    const html = renderToStaticMarkup(<Markdown text={text} />);
    expect(html).not.toContain("<img");
    expect(html).toContain("&lt;img");
  });

  it("zeigt einen unbekannten Platzhalter sichtbar an", () => {
    const { text } = platzhalterErsetzen("{{tipfehler}} prüfen", {});
    expect(renderToStaticMarkup(<span>{text}</span>)).toBe("<span>{{tipfehler}} prüfen</span>");
  });
});