first commit

packages/cloudflare/tests/db/playground-toolbar.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+
+import { renderPlaygroundToolbar } from "../../src/db/playground-toolbar.js";
+
+const BASE_CONFIG = {
+	createdAt: "2026-03-16T12:00:00.000Z",
+	ttl: 3600,
+	editMode: false,
+};
+
+describe("renderPlaygroundToolbar", () => {
+	it("renders HTML with data attributes", () => {
+		const html = renderPlaygroundToolbar(BASE_CONFIG);
+
+		expect(html).toContain('id="emdash-playground-toolbar"');
+		expect(html).toContain('data-created-at="2026-03-16T12:00:00.000Z"');
+		expect(html).toContain('data-ttl="3600"');
+	});
+
+	it("renders the playground badge", () => {
+		const html = renderPlaygroundToolbar(BASE_CONFIG);
+		expect(html).toContain("Playground");
+	});
+
+	it("renders the deploy CTA link", () => {
+		const html = renderPlaygroundToolbar(BASE_CONFIG);
+		expect(html).toContain("Deploy your own");
+		expect(html).toContain("docs.emdashcms.com/getting-started");
+	});
+
+	it("renders reset and dismiss buttons", () => {
+		const html = renderPlaygroundToolbar(BASE_CONFIG);
+		expect(html).toContain('id="ec-pg-reset"');
+		expect(html).toContain('id="ec-pg-dismiss"');
+		expect(html).toContain("/_playground/reset");
+	});
+
+	it("escapes HTML in data attributes", () => {
+		const html = renderPlaygroundToolbar({
+			...BASE_CONFIG,
+			createdAt: '"<script>alert(1)</script>',
+		});
+
+		expect(html).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+		expect(html).not.toContain('data-created-at="<script>');
+	});
+
+	it("includes countdown script", () => {
+		const html = renderPlaygroundToolbar(BASE_CONFIG);
+		expect(html).toContain("<script>");
+		expect(html).toContain("getRemaining");
+		expect(html).toContain("formatRemaining");
+	});
+
+	it("renders edit toggle unchecked when editMode is false", () => {
+		const html = renderPlaygroundToolbar({ ...BASE_CONFIG, editMode: false });
+		expect(html).toContain('id="ec-pg-edit-toggle"');
+		expect(html).toContain('data-edit-mode="false"');
+		expect(html).not.toContain('id="ec-pg-edit-toggle" checked');
+	});
+
+	it("renders edit toggle checked when editMode is true", () => {
+		const html = renderPlaygroundToolbar({ ...BASE_CONFIG, editMode: true });
+		expect(html).toContain('data-edit-mode="true"');
+		expect(html).toContain('id="ec-pg-edit-toggle" checked');
+	});
+
+	it("includes edit mode hover styles for data-emdash-ref elements", () => {
+		const html = renderPlaygroundToolbar(BASE_CONFIG);
+		expect(html).toContain("[data-emdash-ref]");
+		expect(html).toContain('data-edit-mode="true"');
+	});
+});