Update tests to increase coverage

Author: Atmos4

src/van-element.test.ts

@@ -0,0 +1,91 @@
+import van from "vanjs-core";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { define } from "../src/van-element";
+
+const { button, div } = van.tags;
+
+const mountFn = vi.fn();
+const unmountFn = vi.fn();
+const clickFn = vi.fn();
+
+define("internals-test", ({ attr, $this, children, mount }) => {
+  const attribute = attr("attribute", "default");
+
+  const count = van.state(0);
+
+  mount(() => {
+    mountFn();
+    return () => unmountFn();
+  });
+
+  const onClick = () => {
+    clickFn();
+    count.val++;
+    $this.dispatchEvent(new CustomEvent("count", { detail: count.val }));
+  };
+  return [
+    div("Attribute: ", attribute),
+    button({ onclick: () => onClick() }, "Count: ", count),
+    children,
+  ];
+});
+
+describe("check that a Van Element", async () => {
+  function getComponent() {
+    return document.body.querySelector("internals-test");
+  }
+
+  function queryInShadow<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): HTMLElementTagNameMap[K] | null | undefined {
+    return getComponent()?.shadowRoot?.querySelector(selector);
+  }
+
+  function mountComponent(name = "Peter", children = "") {
+    document.body.innerHTML = `<internals-test attribute="${name}">${children}</internals-test>`;
+  }
+
+  beforeEach(() => {
+    // Because VanJS uses setTimeout() to queue procedures in the event loop, we need to fake that otherwise the updates don't render.
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+  });
+
+  it("has VanJS behavior", async () => {
+    mountComponent();
+    queryInShadow("button")?.click();
+    expect(clickFn).toHaveBeenCalled();
+    vi.runAllTimers();
+    expect(queryInShadow("button")?.textContent).toContain("1");
+  });
+
+  it("has attribute reactivity", () => {
+    mountComponent("Jack");
+    expect(queryInShadow("div")?.textContent).toContain("Jack");
+    getComponent()!.setAttribute("attribute", "John");
+    vi.runAllTimers();
+    expect(queryInShadow("div")?.textContent).toContain("John");
+  });
+
+  it("mounts and unmounts properly", () => {
+    expect(mountFn).not.toHaveBeenCalled();
+    mountComponent();
+    expect(mountFn).toHaveBeenCalled();
+    getComponent()!.remove();
+    expect(unmountFn).toHaveBeenCalled();
+  });
+
+  it("propagates events out", () => {
+    const spyClick = vi.fn();
+    mountComponent();
+    getComponent()!.addEventListener("count", spyClick);
+    queryInShadow("button")?.click();
+    expect(spyClick).toHaveBeenCalled();
+  });
+
+  it("has a slot as children", () => {
+    mountComponent("Bob", "Hi mom");
+    const slotted = queryInShadow("slot")?.assignedNodes();
+    expect(slotted?.[0].textContent).toContain("Hi mom");
+  });
+});

tests/internals.test.ts

@@ -0,0 +1,29 @@
+import van from "vanjs-core";
+import { define } from "../src/van-element";
+import { describe, expect, it } from "vitest";
+
+const { div } = van.tags;
+
+define("light-dom", ({ children }) => div({ class: "light" }, children), false);
+define("shadow-dom", () => div({ class: "shadow" }, "World"));
+
+describe("Shadow DOM options", () => {
+  it("should expose light Van Element", () => {
+    document.body.innerHTML = `<light-dom></light-dom>`;
+    expect(document.querySelector(".light")).toBeTruthy();
+  });
+
+  it("should encapsulate shadow Van Element", () => {
+    document.body.innerHTML = `<shadow-dom></shadow-dom>`;
+    expect(
+      document.querySelector("shadow-dom")?.shadowRoot?.querySelector(".shadow")
+    ).toBeTruthy();
+    expect(document.querySelector(".shadow")).toBeFalsy();
+  });
+
+  it("should polyfill light children", () => {
+    const stringToTest = "Hello world";
+    document.body.innerHTML = `<light-dom>${stringToTest}</light-dom>`;
+    expect(document.querySelector(".light")?.textContent).toBe(stringToTest);
+  });
+});

tests/light-dom.test.ts

@@ -19,5 +19,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "types", "docs"]
+  "include": ["src", "types", "docs", "tests"]
 }