@window-splitter/state 0.4.0 → 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, () => {
@@ -1332,15 +1331,8 @@ describe("collapsible panel", () => {
         "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, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
-      );
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
     });
 
     test("on resize", async () => {
@@ -1371,20 +1363,20 @@ describe("collapsible panel", () => {
       expect(getTemplate(actor)).toBe(
         "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
       );
-      initializeSizes(actor, { width: 500, height: 200 });
-      expect(getTemplate(actor)).toBe(
-        "minmax(200px, min(calc(0.40816326530612244898 * (100% - 10px)), 100%)) 10px minmax(300px, min(calc(0.61224489795918367347 * (100% - 10px)), 100%))"
-      );
+      initializeSizes(actor, { width: 510, height: 200 });
 
-      actor.send({
-        type: "setSize",
-        size: { width: 400, height: 200 },
-        handleOverflow: true,
+      capturePixelValues(actor, () => {
+        dragHandle(actor, { id: "resizer-1", delta: 10 });
       });
-      // There wasn't enough space to render the panel so the last one is collapsed
+
       expect(getTemplate(actor)).toBe(
-        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
+        "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 () => {
@@ -1422,9 +1414,7 @@ describe("collapsible panel", () => {
         handleOverflow: true,
       });
       // There wasn't enough space to render the panel so the last one is collapsed
-      expect(getTemplate(actor)).toBe(
-        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
-      );
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
 
       actor.send({
         type: "expandPanel",
@@ -1433,9 +1423,7 @@ describe("collapsible panel", () => {
       await waitForIdle(actor);
 
       // There wasn't enough space to render the panel so the last one is collapsed
-      expect(getTemplate(actor)).toBe(
-        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
-      );
+      expect(getTemplate(actor)).toBe("minmax(200px, 1fr) 10px 60px");
     });
 
     test("cannot expand panel via drag", async () => {
@@ -1467,18 +1455,16 @@ describe("collapsible panel", () => {
         "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, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
-      );
+      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");
       });
@@ -1520,7 +1506,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 140px 10px 100px"`
+        `"245px 10px 135px 10px 100px"`
       );
     });
 
@@ -1530,7 +1516,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1575,7 +1561,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 240px 10px 0px"`
+        `"245px 10px 235px 10px 0px"`
       );
     });
 
@@ -1585,7 +1571,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1628,7 +1614,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 115px 10px 125px"`
+        `"245px 10px 110px 10px 125px"`
       );
     });
 
@@ -1638,7 +1624,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1678,7 +1664,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"240px 10px 100px 10px 140px"`
+        `"245px 10px 100px 10px 135px"`
       );
     });
 
@@ -1688,7 +1674,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
 
     sendAll(actor, [
@@ -1697,7 +1683,7 @@ describe("conditional panel", () => {
     ]);
 
     capturePixelValues(actor, () => {
-      expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
 
@@ -1925,9 +1911,19 @@ 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();
   });
@@ -1956,7 +1952,7 @@ describe("static at rest", () => {
     initializeSizes(actor, { width: 500, height: 200 });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"clamp(20px, 200px, 200px) 10px minmax(50px, min(calc(0.5 * (100% - 220px)), 100%)) 10px minmax(50px, min(calc(0.5 * (100% - 220px)), 100%))"`
+      `"minmax(20px, 200px) 10px minmax(50px, 1fr) 10px minmax(50px, 1fr)"`
     );
 
     capturePixelValues(actor, () => {
@@ -1964,7 +1960,97 @@ describe("static at rest", () => {
     });
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"clamp(20px, 190px, 200px) 10px minmax(50px, min(calc(0.51724137931034482759 * (100% - 210px)), 100%)) 10px minmax(50px, min(calc(0.48275862068965517241 * (100% - 210px)), 100%))"`
+      `"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%))"`
     );
   });
 });