feat(platzhalter): Aufloesung, Namensregeln und Shell-Maskierung (#26)

tests/platzhalter-anzeige.test.tsx

@@ -0,0 +1,51 @@
+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>");
+  });
+});