@excom/quark 0.1.0

package/support/tests/toggle-content.view.test.ts

@@ -0,0 +1,40 @@
+import "@excom/quark-sheet";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import {
+  expectComplexity,
+  flush,
+  measureComplexity,
+  mountView,
+  readDemo,
+} from "./view-helpers";
+
+describe("toggle-content view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("reflects details open and closed", async () => {
+    const { root, quark } = await mountView(
+      readDemo(import.meta.url, "toggle-content"),
+    );
+    const details = root.querySelector("details")!;
+    const status = root.querySelector("[bind-status]")!;
+    expect(status.textContent).toBe("Closed");
+    const meter = measureComplexity(quark!);
+    details.setAttribute("open", "");
+    await flush();
+    const budget = meter.take();
+    meter.stop();
+    expect(details.hasAttribute("open")).toBe(true);
+    expect(status.textContent).toBe("Open");
+    details.removeAttribute("open");
+    await flush();
+    expect(status.textContent).toBe("Closed");
+    expectComplexity(budget);
+  });
+});

package/support/tests/unset.view.test.ts

@@ -0,0 +1,42 @@
+import "@excom/quark-sheet";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import {
+  expectComplexity,
+  flush,
+  measureComplexity,
+  mountView,
+  readDemo,
+} from "./view-helpers";
+
+describe("unset view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("shadows $foo while open and falls back when closed", async () => {
+    const { root, quark } = await mountView(readDemo(import.meta.url, "unset"));
+    expect(root.querySelector("[bind-foo]")?.textContent).toBe(
+      "$foo resolves to 1",
+    );
+    const details = root.querySelector("details")!;
+    const meter = measureComplexity(quark!);
+    details.setAttribute("open", "");
+    await flush();
+    const budget = meter.take();
+    meter.stop();
+    expect(root.querySelector("[bind-foo]")?.textContent).toBe(
+      "$foo resolves to 2",
+    );
+    details.removeAttribute("open");
+    await flush();
+    expect(root.querySelector("[bind-foo]")?.textContent).toBe(
+      "$foo resolves to 1",
+    );
+    expectComplexity(budget);
+  });
+});

package/support/tests/view-helpers.ts

@@ -0,0 +1,81 @@
+import { Quark } from "../../index";
+import {
+  fixture,
+  waitForEvent,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import * as demoUtils from "../../../docs-site/public/demo-utils";
+import { flush } from "./helpers";
+
+export {
+  bypassSelectorCache,
+  expectComplexity,
+  flush,
+  measureComplexity,
+} from "./helpers";
+
+const originalLoader = Quark.moduleLoader;
+
+/** Resolve `@use "/demo-utils"` the way the docs-site live demos do. */
+export const installDemoModules = (extra?: Record<string, unknown>) => {
+  Quark.moduleLoader = async (url: string) => {
+    if (url.includes("demo-utils")) return { ...demoUtils, ...extra };
+    if (extra) {
+      for (const key of Object.keys(extra)) {
+        if (url.includes(key)) return extra;
+      }
+    }
+    return originalLoader(url);
+  };
+  return () => {
+    Quark.moduleLoader = originalLoader;
+  };
+};
+
+export const restoreDemoModules = () => {
+  Quark.moduleLoader = originalLoader;
+};
+
+export const readViewFile = (fromImportMetaUrl: string, relPath: string) =>
+  readFileSync(
+    resolve(dirname(fileURLToPath(fromImportMetaUrl)), relPath),
+    "utf8"
+  );
+
+export const readDemo = (fromImportMetaUrl: string, name: string) =>
+  readViewFile(fromImportMetaUrl, `../demos/${name}.html`);
+
+const stripAssets = (html: string) =>
+  html.replace(/<link[\s\S]*?>/g, "").replace(/\s+src-url="[^"]*"/g, "");
+
+/** Mount a demo / view. Inline `quarkSrc` when the sheet used `src-url`. */
+export const mountView = async (
+  html: string,
+  quarkSrc?: string
+): Promise<{
+  root: HTMLElement;
+  sheet: HTMLQuarkSheetElement | null;
+  quark: InstanceType<typeof Quark> | undefined;
+}> => {
+  const wrap = document.createElement("div");
+  wrap.innerHTML = stripAssets(html);
+  const kids = [...wrap.children] as HTMLElement[];
+  const root = (kids.length === 1 ? kids[0] : wrap) as HTMLElement;
+  const sheet = wrap.querySelector<HTMLQuarkSheetElement>("quark-sheet");
+  if (sheet && quarkSrc) sheet.textContent = quarkSrc;
+  document.body.append(wrap);
+  if (sheet && !sheet.quarkInstance) {
+    await waitForEvent(sheet, "quark-sheet-success");
+  }
+  await flush();
+  return { root, sheet, quark: sheet?.quarkInstance };
+};
+
+export const click = (el: Element | null) => {
+  if (!el) throw new Error("click: missing element");
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true })
+  );
+};