74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
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("<script>alert(1)</script>");
|
|
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"');
|
|
});
|
|
});
|