@window-splitter/state 0.3.2 → 0.4.1

package/src/machine.test.ts

@@ -20,6 +20,7 @@ import {
 import { Actor, createActor } from "xstate";
 import { spring } from "framer-motion";
 import Big from "big.js";
+import Cookies from "universal-cookie";
 
 function getTemplate(actor: Actor<typeof groupMachine>) {
   return buildTemplate(actor.getSnapshot().context);
@@ -177,7 +178,7 @@ describe("constraints", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
+      `"minmax(0px, 1fr) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
     );
 
     // Drag the resizer to the left
@@ -188,7 +189,7 @@ describe("constraints", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
+      `"minmax(0px, 1fr) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
     );
   });
 
@@ -235,7 +236,7 @@ describe("constraints", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.46610169491525423729 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.53389830508474576271 * (100% - 10px)), 100%))"`
+      `"minmax(0px, 1fr) 10px minmax(0px, min(calc(0.53389830508474576271 * (100% - 10px)), 100%))"`
     );
   });
 
@@ -268,7 +269,7 @@ describe("constraints", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.40816326530612244898 * (100% - 10px)), 40%)) 10px minmax(0px, min(calc(0.59183673469387755102 * (100% - 10px)), 100%))"`
+      `"minmax(0px, min(calc(0.40816326530612244898 * (100% - 10px)), 40%)) 10px minmax(0px, 1fr)"`
     );
   });
 
@@ -303,7 +304,7 @@ describe("constraints", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
+      `"minmax(0px, 1fr) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
     );
 
     // Drag the resizer to the up
@@ -318,7 +319,7 @@ describe("constraints", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
+      `"minmax(0px, 1fr) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
     );
   });
 
@@ -375,8 +376,8 @@ describe("constraints", () => {
 
     initializeSizes(actor, { width: 500, height: 200 });
     expect(spy).toHaveBeenCalledWith({
-      percentage: 0.5,
-      pixel: 250,
+      percentage: 0.49,
+      pixel: 245,
     });
 
     capturePixelValues(actor, () => {
@@ -581,7 +582,7 @@ describe("constraints", () => {
     initializeSizes(actor, { width: 500, height: 200 });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, min(calc(0.38775510204081632653 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.61224489795918367347 * (100% - 10px)), 100%))"`
+      `"minmax(0px, 1fr) 10px 300px"`
     );
 
     capturePixelValues(actor, () => {
@@ -747,9 +748,7 @@ describe("collapsible panel", () => {
       expect(getTemplate(actor)).toBe("490px 10px 0px");
     });
 
-    expect(getTemplate(actor)).toBe(
-      "minmax(0px, min(calc(1 * (100% - 10px)), 100%)) 10px 0px"
-    );
+    expect(getTemplate(actor)).toBe("minmax(0px, 1fr) 10px 0px");
 
     // Test dragging to expand the panel
     capturePixelValues(actor, () => {
@@ -1301,6 +1300,176 @@ describe("collapsible panel", () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
+
+  describe("constraints", () => {
+    test("on render", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 400, height: 200 });
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
+    });
+
+    test("on resize", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 510, height: 200 });
+
+      capturePixelValues(actor, () => {
+        dragHandle(actor, { id: "resizer-1", delta: 10 });
+      });
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, min(calc(0.6 * (100% - 10px)), 100%))"
+      );
+
+      initializeSizes(actor, { width: 400, height: 200 });
+
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
+    });
+
+    test("cannot expand panel via event", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 400, height: 200 });
+      actor.send({
+        type: "setSize",
+        size: { width: 400, height: 200 },
+        handleOverflow: true,
+      });
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
+
+      actor.send({
+        type: "expandPanel",
+        panelId: "panel-2",
+      });
+      await waitForIdle(actor);
+
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
+    });
+
+    test("cannot expand panel via drag", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 400, height: 200 });
+
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
+
+      // update the latest sizes to the new ones
+      initializeSizes(actor, { width: 400, height: 200 });
+
+      // Drag the resizer to the right
+      capturePixelValues(actor, () => {
+        expect(getTemplate(actor)).toBe("330px 10px 60px");
+        dragHandle(actor, { id: "resizer-1", delta: -400 });
+        expect(getTemplate(actor)).toBe("330px 10px 60px");
+      });
+    });
+  });
 });
 
 describe("conditional panel", () => {
@@ -1337,7 +1506,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 140px 10px 100px"`
+        `"245px 10px 135px 10px 100px"`
       );
     });
 
@@ -1347,7 +1516,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1392,7 +1561,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 240px 10px 0px"`
+        `"245px 10px 235px 10px 0px"`
       );
     });
 
@@ -1402,7 +1571,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1445,7 +1614,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 115px 10px 125px"`
+        `"245px 10px 110px 10px 125px"`
       );
     });
 
@@ -1455,7 +1624,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1495,7 +1664,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 100px 10px 140px"`
+        `"245px 10px 100px 10px 135px"`
       );
     });
 
@@ -1505,7 +1674,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
 
     sendAll(actor, [
@@ -1514,7 +1683,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1742,10 +1911,146 @@ describe("utils", async () => {
 
     initializeSizes(actor, { width: 500, height: 200 });
 
-    const oldSnapshot = actor.getSnapshot();
-    const serialized = JSON.stringify(oldSnapshot);
-    const newSnapshot = prepareSnapshot(JSON.parse(serialized));
+    let oldSnapshot = actor.getSnapshot();
+    let serialized = JSON.stringify(oldSnapshot);
+    let newSnapshot = prepareSnapshot(JSON.parse(serialized));
 
     expect(newSnapshot).toMatchSnapshot();
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: 100 });
+    });
+
+    oldSnapshot = actor.getSnapshot();
+    serialized = JSON.stringify(oldSnapshot);
+    newSnapshot = prepareSnapshot(JSON.parse(serialized));
+
+    expect(newSnapshot).toMatchSnapshot();
+  });
+});
+
+describe("static at rest", () => {
+  test("a panel can be pixels when resting", async () => {
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group",
+        initialItems: [
+          initializePanel({
+            id: "panel-1",
+            min: "20px",
+            max: "200px",
+            isStaticAtRest: true,
+          }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({ id: "panel-2", min: "50px" }),
+          initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+          initializePanel({ id: "panel-3", min: "50px" }),
+        ],
+      },
+    }).start();
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(20px, 200px) 10px minmax(50px, 1fr) 10px minmax(50px, 1fr)"`
+    );
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: -10 });
+    });
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"clamp(20px, 190px, 200px) 10px minmax(50px, 1fr) 10px minmax(50px, min(calc(0.48275862068965517241 * (100% - 210px)), 100%))"`
+    );
+  });
+});
+
+describe("autosave", () => {
+  test("localStorage", async () => {
+    localStorage.removeItem("group");
+
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group",
+        autosaveStrategy: "localStorage",
+        initialItems: [
+          initializePanel({
+            id: "panel-1",
+            min: "20px",
+            max: "200px",
+            isStaticAtRest: true,
+          }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({ id: "panel-2", min: "50px" }),
+          initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+          initializePanel({ id: "panel-3", min: "50px" }),
+        ],
+      },
+    }).start();
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: -10 });
+    });
+
+    await waitForIdle(actor);
+
+    const snapshot = prepareSnapshot(
+      JSON.parse(localStorage.getItem("group")!)
+    );
+    const actor2 = createActor(groupMachine, {
+      // @ts-expect-error For tests
+      input: {},
+      snapshot,
+    }).start();
+
+    expect(buildTemplate(actor2.getSnapshot().context)).toMatchInlineSnapshot(
+      `"clamp(20px, 190px, 200px) 10px minmax(50px, 1fr) 10px minmax(50px, min(calc(0.48275862068965517241 * (100% - 210px)), 100%))"`
+    );
+  });
+
+  test("cookie", async () => {
+    localStorage.removeItem("group");
+
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group-2",
+        autosaveStrategy: "cookie",
+        initialItems: [
+          initializePanel({
+            id: "panel-1",
+            min: "20px",
+            max: "200px",
+            isStaticAtRest: true,
+          }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({ id: "panel-2", min: "50px" }),
+          initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+          initializePanel({ id: "panel-3", min: "50px" }),
+        ],
+      },
+    }).start();
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: -10 });
+    });
+
+    await waitForIdle(actor);
+
+    const ActualClass = (Cookies as any).default || Cookies;
+    const cookies = new ActualClass(null, { path: "/" });
+    const snapshot = prepareSnapshot(cookies.get("group-2")!);
+    const actor2 = createActor(groupMachine, {
+      // @ts-expect-error For tests
+      input: {},
+      snapshot,
+    }).start();
+
+    expect(buildTemplate(actor2.getSnapshot().context)).toMatchInlineSnapshot(
+      `"clamp(20px, 190px, 200px) 10px minmax(50px, 1fr) 10px minmax(50px, min(calc(0.48275862068965517241 * (100% - 210px)), 100%))"`
+    );
   });
 });