refactor: extract billing HTML templates into billing-templates.ts (TDD)

- Extract renderSuccessPage() and renderAlreadyProvisionedPage() from billing.ts - Share common styles via SHARED_STYLES constant - 11 TDD tests: content rendering, XSS escaping, structure validation - billing.ts: 369 → 334 lines (-35 lines, inline HTML removed) - 647 tests passing (59 files), 0 tsc errors
2026-03-10 17:03:44 +01:00 · 2026-03-10 17:03:44 +01:00 · b491052f69
commit b491052f69
parent 25cb5e2e94
3 changed files with 108 additions and 38 deletions
--- a/src/tests/billing-templates.test.ts
+++ b/src/tests/billing-templates.test.ts
@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { renderSuccessPage, renderAlreadyProvisionedPage } from "../utils/billing-templates.js";
+
+describe("billing-templates", () => {
+  describe("renderSuccessPage", () => {
+    it("includes the API key in the output", () => {
+      const html = renderSuccessPage("df_pro_abc123");
+      expect(html).toContain("df_pro_abc123");
+    });
+
+    it("escapes HTML in the API key", () => {
+      const html = renderSuccessPage('<script>alert("xss")</script>');
+      expect(html).not.toContain("<script>");
+      expect(html).toContain("&lt;script&gt;");
+    });
+
+    it("includes Welcome to Pro heading", () => {
+      const html = renderSuccessPage("df_pro_test");
+      expect(html).toContain("Welcome to Pro");
+    });
+
+    it("includes copy button with data-copy attribute", () => {
+      const html = renderSuccessPage("df_pro_key123");
+      expect(html).toContain('data-copy="df_pro_key123"');
+    });
+
+    it("includes copy-helper.js script", () => {
+      const html = renderSuccessPage("df_pro_test");
+      expect(html).toContain("copy-helper.js");
+    });
+
+    it("includes docs link", () => {
+      const html = renderSuccessPage("df_pro_test");
+      expect(html).toContain("/docs");
+    });
+
+    it("starts with DOCTYPE", () => {
+      const html = renderSuccessPage("df_pro_test");
+      expect(html.trimStart()).toMatch(/^<!DOCTYPE html>/i);
+    });
+  });
+
+  describe("renderAlreadyProvisionedPage", () => {
+    it("indicates key already provisioned", () => {
+      const html = renderAlreadyProvisionedPage();
+      expect(html).toContain("Already Provisioned");
+    });
+
+    it("mentions key recovery", () => {
+      const html = renderAlreadyProvisionedPage();
+      expect(html).toContain("recovery");
+    });
+
+    it("includes docs link", () => {
+      const html = renderAlreadyProvisionedPage();
+      expect(html).toContain("/docs");
+    });
+
+    it("starts with DOCTYPE", () => {
+      const html = renderAlreadyProvisionedPage();
+      expect(html.trimStart()).toMatch(/^<!DOCTYPE html>/i);
+    });
+  });
+});