@window-splitter/state 0.3.1 → 0.4.0

package/src/machine.test.ts

@@ -372,7 +372,12 @@ describe("constraints", () => {
         ],
       },
     }).start();
+
     initializeSizes(actor, { width: 500, height: 200 });
+    expect(spy).toHaveBeenCalledWith({
+      percentage: 0.5,
+      pixel: 250,
+    });
 
     capturePixelValues(actor, () => {
       dragHandle(actor, { id: "resizer-1", delta: 100 });
@@ -464,7 +469,7 @@ describe("constraints", () => {
     }).start();
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, 90%) 10px 30%"`
+      `"minmax(0px, 90%) 10px minmax(30%, 1fr)"`
     );
     initializeSizes(actor, { width: 500, height: 200 });
 
@@ -474,6 +479,29 @@ describe("constraints", () => {
     });
   });
 
+  test("supports 1 panel being collapsed with another panel expanding to fill", () => {
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group",
+        initialItems: [
+          initializePanel({ id: "panel-1", default: "200px", min: "200px" }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({
+            id: "panel-2",
+            min: "200px",
+            collapsible: true,
+            collapsedSize: "60px",
+            defaultCollapsed: true,
+          }),
+        ],
+      },
+    }).start();
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(200px, 1fr) 10px 60px"`
+    );
+  });
+
   test("panel can have a min", () => {
     const actor = createActor(groupMachine, {
       input: { groupId: "group" },
@@ -727,7 +755,7 @@ describe("collapsible panel", () => {
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toBe("490px 10px 0px");
 
-      // Stays oollapsed in the buffer
+      // Stays collapsed in the buffer
       dragHandle(actor, { id: "resizer-1", delta: -30 });
       expect(getTemplate(actor)).toBe("490px 10px 0px");
 
@@ -1273,6 +1301,189 @@ 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 });
+      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"
+      );
+    });
+
+    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: 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%))"
+      );
+
+      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"
+      );
+    });
+
+    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, min(calc(1 * (100% - 70px)), 100%)) 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, min(calc(1 * (100% - 70px)), 100%)) 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 });
+      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"
+      );
+
+      // Drag the resizer to the right
+      capturePixelValues(actor, () => {
+        dragHandle(actor, { id: "resizer-1", delta: -400 });
+        expect(getTemplate(actor)).toBe("330px 10px 60px");
+      });
+    });
+  });
 });
 
 describe("conditional panel", () => {
@@ -1721,3 +1932,39 @@ describe("utils", async () => {
     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(
+      `"clamp(20px, 200px, 200px) 10px minmax(50px, min(calc(0.5 * (100% - 220px)), 100%)) 10px minmax(50px, min(calc(0.5 * (100% - 220px)), 100%))"`
+    );
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: -10 });
+    });
+
+    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%))"`
+    );
+  });
+});