@window-splitter/web-component 1.0.1

package/src/WebComponentWindowSplitter.test.ts

@@ -0,0 +1,299 @@
+import "../.storybook/preview.css";
+
+import { test, expect, describe, vi, afterEach } from "vitest";
+import { getByText, waitFor, fireEvent } from "@testing-library/dom";
+import { createTestUtils, dragHandle } from "@window-splitter/interface/test";
+import * as Cookies from "tiny-cookie";
+
+import * as stories from "./WebComponentWindowSplitter.stories.js";
+import { Panel, PanelGroup, PanelResizer } from "./index.js";
+import { render as litRender, TemplateResult } from "lit";
+
+customElements.define("window-splitter", PanelGroup);
+customElements.define("window-panel", Panel);
+customElements.define("window-panel-resizer", PanelResizer);
+
+async function getHandle(selector: string) {
+  await waitFor(() => {
+    const handle = document.querySelector(selector) as PanelGroup;
+    if (!handle) {
+      throw new Error("Handle not found");
+    }
+    return true;
+  });
+
+  return document.querySelector(selector) as PanelGroup;
+}
+
+const containers = new Set<HTMLElement>();
+
+function cleanup(): void {
+  for (const container of containers) {
+    container.remove();
+  }
+  containers.clear();
+}
+
+function render(template: TemplateResult) {
+  const container = document.body.appendChild(document.createElement("div"));
+  litRender(template, container);
+  containers.add(container);
+}
+
+const { waitForMeasurement, expectTemplate, waitForCondition } =
+  createTestUtils({
+    waitFor,
+  });
+
+afterEach(cleanup);
+
+test("horizontal layout", async () => {
+  render(stories.Simple.render());
+
+  const handle = await getHandle("window-splitter");
+
+  await waitForMeasurement(handle!);
+
+  expect(getByText(document.body, "Panel 1")).toBeInTheDocument();
+  expect(getByText(document.body, "Panel 2")).toBeInTheDocument();
+
+  await expectTemplate(handle!, "244px 10px 244px");
+
+  // Should respect the min
+  await dragHandle({ delta: 300 });
+  await expectTemplate(handle!, "388px 10px 100px");
+});
+
+test("vertical layout", async () => {
+  render(stories.VerticalLayout.render());
+
+  const handle = await getHandle("window-splitter");
+
+  await waitForMeasurement(handle!);
+
+  expect(getByText(document.body, "top")).toBeInTheDocument();
+  expect(getByText(document.body, "middle")).toBeInTheDocument();
+  expect(getByText(document.body, "bottom")).toBeInTheDocument();
+
+  await expectTemplate(handle!, "96px 10px 108px 10px 96px");
+
+  // Should respect the min
+  await dragHandle({ delta: 100, orientation: "vertical" });
+  await expectTemplate(handle!, "172px 10px 64px 10px 64px");
+});
+
+test("Conditional Panels", async () => {
+  render(stories.ConditionalPanel.render());
+  const handle = await getHandle("window-splitter");
+
+  await waitForMeasurement(handle!);
+
+  await expectTemplate(handle!, "244px 10px 244px");
+
+  getByText(document.body, "Expand").click();
+  await expectTemplate(handle!, "244px 10px 134px 10px 100px");
+
+  getByText(document.body, "Close").click();
+  await expectTemplate(handle!, "244px 10px 244px");
+});
+
+test("Dynamic constraints", async () => {
+  render(stories.DynamicConstraints.render());
+
+  const handle = await getHandle("window-splitter");
+
+  await waitForMeasurement(handle!);
+  await expectTemplate(handle!, "100px 10px 178px 10px 700px");
+
+  getByText(document.body, "Toggle Custom").click();
+  await expectTemplate(handle!, "500px 10px 178px 10px 300px");
+
+  getByText(document.body, "Toggle Custom").click();
+  await expectTemplate(handle!, "400px 10px 178px 10px 400px");
+});
+
+describe("Autosave", () => {
+  test("localStorage", async () => {
+    localStorage.clear();
+
+    render(stories.Autosave.render());
+    const handle = await getHandle("window-splitter");
+
+    await waitForMeasurement(handle!);
+    await expectTemplate(handle!, "244px 10px 244px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle!, "342px 10px 146px");
+
+    await waitForCondition(() =>
+      Boolean(localStorage.getItem("autosave-example-web-component"))
+    );
+    const obj = JSON.parse(
+      localStorage.getItem("autosave-example-web-component") || "{}"
+    );
+    expect(obj.items).toMatchSnapshot();
+  });
+
+  test("callback", async () => {
+    localStorage.clear();
+
+    const spy = vi.fn();
+
+    render(stories.AutosaveCollapsible.render({ onCollapseChange: spy }));
+    const handle = await getHandle("window-splitter");
+
+    await waitForMeasurement(handle!);
+
+    await dragHandle({ delta: -200, handleId: "resizer-1" });
+    await expectTemplate(handle!, "100px 10px 388px");
+    expect(spy).toHaveBeenCalledWith(true);
+
+    cleanup();
+
+    const spy2 = vi.fn();
+    render(stories.AutosaveCollapsible.render({ onCollapseChange: spy2 }));
+
+    await expectTemplate(handle!, "100px 10px 388px");
+    await dragHandle({ delta: 200 });
+    expect(spy2).toHaveBeenCalledWith(false);
+  });
+
+  test("cookie", async () => {
+    // clear cookies
+    document.cookie = document.cookie.replace(
+      new RegExp(`autosave-cookie-web-component=.*`),
+      ""
+    );
+
+    render(stories.AutosaveCookie.render());
+    let handle = await getHandle("window-splitter");
+
+    await waitForMeasurement(handle!);
+    await expectTemplate(handle!, "244px 10px 244px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle!, "342px 10px 146px");
+
+    await waitForCondition(() => {
+      return document.cookie.includes("autosave-cookie-web-component");
+    });
+
+    expect(document.cookie).toMatchSnapshot();
+
+    const snapshot = Cookies.get("autosave-cookie-web-component");
+
+    render(stories.AutosaveCookie.render({ snapshot: snapshot || undefined }));
+    handle = await getHandle("window-splitter");
+
+    await expectTemplate(handle!, "342px 10px 146px");
+  });
+});
+
+test("Keyboard interactions with collapsed panels", async () => {
+  render(stories.Collapsible.render());
+
+  const handle = await getHandle("window-splitter");
+
+  await waitForMeasurement(handle!);
+  await expectTemplate(handle!, "209px 10px 209px 10px 60px");
+
+  const resizer2 = document.getElementById("resizer-2")!;
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle!, "209px 10px 169px 10px 100px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  await expectTemplate(handle!, "209px 10px 165px 10px 104px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft", shiftKey: true });
+  await expectTemplate(
+    handle!,
+    "209.03125px 10px 149.984375px 10px 118.984375px"
+  );
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle!, "209.03125px 10px 208.96875px 10px 60px");
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle!, "209.0625px 10px 149.96875px 10px 118.96875px");
+});
+
+describe("imperative panel API", async () => {
+  test("panel group", async () => {
+    render(stories.Collapsible.render());
+
+    const handle = await getHandle("window-splitter");
+
+    await waitForMeasurement(handle!);
+
+    expect(handle!.getPercentageSizes()).toMatchInlineSnapshot(`
+      [
+        0.5,
+        0.020080321285140562,
+        0.5,
+        0.020080321285140562,
+        0.12048192771084337,
+      ]
+    `);
+
+    expect(handle!.getPixelSizes()).toMatchInlineSnapshot(`
+      [
+        209,
+        10,
+        209,
+        10,
+        60,
+      ]
+    `);
+
+    await expectTemplate(handle!, "209px 10px 209px 10px 60px");
+  });
+
+  test("panel", async () => {
+    render(stories.Collapsible.render());
+
+    const handle = await getHandle("window-splitter");
+    const rightHandle = handle!.querySelector("#panel-3") as Panel;
+    const leftHandle = handle!.querySelector("#panel-1") as Panel;
+
+    await waitForMeasurement(handle!);
+
+    expect(rightHandle.isCollapsed()).toBe(true);
+    expect(rightHandle.isExpanded()).toBe(false);
+
+    rightHandle.expand();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle.isCollapsed()).toBe(false);
+    expect(rightHandle.isExpanded()).toBe(true);
+
+    rightHandle.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle.isCollapsed()).toBe(true);
+    expect(rightHandle.isExpanded()).toBe(false);
+
+    // Test the non controlled version
+
+    expect(leftHandle.isCollapsed()).toBe(false);
+    expect(leftHandle.isExpanded()).toBe(true);
+
+    leftHandle.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(leftHandle.isCollapsed()).toBe(true);
+    expect(leftHandle.isExpanded()).toBe(false);
+    expect(rightHandle.getPercentageSize()).toBe(
+      leftHandle.getPercentageSize()
+    );
+    expect(rightHandle.getPixelSize()).toBe(leftHandle.getPixelSize());
+
+    leftHandle.expand();
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+
+    expect(leftHandle.isCollapsed()).toBe(false);
+    expect(leftHandle.isExpanded()).toBe(true);
+  });
+});

package/src/__snapshots__/WebComponentWindowSplitter.test.ts.snap

@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Autosave > cookie 1`] = `"autosave-cookie-web-component=%7B%22size%22%3A%7B%22x%22%3A0%2C%22y%22%3A0%2C%22width%22%3A498%2C%22height%22%3A198%2C%22top%22%3A0%2C%22right%22%3A498%2C%22bottom%22%3A198%2C%22left%22%3A0%7D%2C%22items%22%3A%5B%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.70081967213114754098%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%221%22%7D%2C%7B%22type%22%3A%22handle%22%2C%22id%22%3A%22resizer-1%22%2C%22size%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%2210%22%7D%7D%2C%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.29918032786885245902%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%222%22%7D%5D%2C%22orientation%22%3A%22horizontal%22%2C%22dragOvershoot%22%3A%220%22%2C%22groupId%22%3A%22autosave-cookie-web-component%22%2C%22autosaveStrategy%22%3A%22cookie%22%7D"`;
+
+exports[`Autosave > localStorage 1`] = `
+[
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "currentValue": {
+      "type": "percent",
+      "value": "0.70081967213114754098",
+    },
+    "id": "1",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onResize": {},
+    "type": "panel",
+  },
+  {
+    "id": "15",
+    "size": {
+      "type": "pixel",
+      "value": "10",
+    },
+    "type": "handle",
+  },
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "currentValue": {
+      "type": "percent",
+      "value": "0.29918032786885245902",
+    },
+    "id": "2",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onResize": {},
+    "type": "panel",
+  },
+]
+`;