@excom/include-content 0.1.0

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

@@ -0,0 +1,22 @@
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+describe("lazy view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("starts inactive with lazy-load and lazy-unload set", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "lazy"));
+    const include = root.querySelector("include-content")!;
+    expect(include.hasAttribute("lazy-load")).toBe(true);
+    expect(include.hasAttribute("lazy-unload")).toBe(true);
+    expect(include.hasAttribute("is-active")).toBe(false);
+  });
+});

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

@@ -0,0 +1,33 @@
+import "@excom/quark-sheet";
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { flush, mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+describe("persist-content view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("keeps typed value across deactivate", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "persist-content"));
+    const include = root.querySelector("include-content")!;
+    const input = include.querySelector("input")!;
+    input.value = "kept";
+    const checkbox = root.querySelector<HTMLInputElement>(
+      'input[name="is-active"]',
+    )!;
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+    await flush();
+    expect(include.hasAttribute("is-active")).toBe(false);
+    checkbox.checked = true;
+    checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+    await flush();
+    expect(include.querySelector("input")?.value).toBe("kept");
+  });
+});

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

@@ -0,0 +1,21 @@
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+describe("portal view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("portals content into the aside", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "portal"));
+    expect(root.querySelector("#ic-portal-mount")?.textContent).toMatch(
+      /Portaled/,
+    );
+  });
+});

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

@@ -0,0 +1,23 @@
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { flush, mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+describe("simple view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders the template when activated", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "simple"));
+    const include = root.querySelector("include-content")!;
+    expect(include.hasAttribute("is-active")).toBe(false);
+    include.setAttribute("is-active", "");
+    await flush();
+    expect(include.textContent).toMatch(/HTML inserted/);
+  });
+});

package/support/tests/template-include.view.test.ts

@@ -0,0 +1,35 @@
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+  spyFetch,
+  vi,
+  waitForEvent,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+describe("template-include view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("includes a local template and a remote URL", async () => {
+    spyFetch({
+      body: "<p>A remote view piece.</p>",
+      headers: new Headers({ "content-type": "text/html" }),
+    });
+    const { root } = await mountView(
+      readDemo(import.meta.url, "template-include"),
+    );
+    const [local, remote] = root.querySelectorAll("include-content");
+    expect(local.textContent).toMatch(/reusable view piece/);
+    if (!remote.hasAttribute("did-load")) {
+      await waitForEvent(remote, "include-content-did-render");
+    }
+    expect(remote.textContent).toMatch(/remote view piece/);
+  });
+});

package/support/tests/template-ref.view.test.ts

@@ -0,0 +1,21 @@
+import "../../index";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import { mountView, readDemo } from "@excom/quark/support/tests/view-helpers";
+
+describe("template-ref view", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders the shared template into the active host", async () => {
+    const { root } = await mountView(readDemo(import.meta.url, "template-ref"));
+    const hosts = root.querySelectorAll("include-content");
+    expect(hosts[0].textContent).toMatch(/Shared template/);
+    expect(hosts[0].hasAttribute("is-active")).toBe(true);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@excom/heft-rig/profiles/default/config/tsconfig.json",
+  "include": ["./*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
+}