Add custom serializers for groups, panels, and separators

bvaughn · bvaughn · commit 6e9d4a60f1c3 · 2026-01-14T18:15:38.000-05:00
diff --git a/lib/state/MutableGroup.test.ts b/lib/state/MutableGroup.test.ts
@@ -147,22 +147,32 @@ describe("MutableGroup", () => {
         groupDimensions: { width: 100, height: 50 },
         panels: [{ id: "left", defaultSize: 35, minSize: 35 }, { id: "right" }]
       });
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 35,
-          "right": 65,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - default size 35px
+            - range 35px - 100%
+          Panel: right
+            - range 0% - 100%
+          Layout:
+            - left: 35
+            - right: 65
       `);
 
       group.updateDimensions({
         width: 50,
         height: 50
       });
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 70,
-          "right": 30,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - default size 35px
+            - range 35px - 100%
+          Panel: right
+            - range 0% - 100%
+          Layout:
+            - left: 70
+            - right: 30
       `);
     });
   });
@@ -173,11 +183,15 @@ describe("MutableGroup", () => {
         groupDimensions: { width: 100, height: 50 },
         panels: [{ id: "left" }, { id: "right" }]
       });
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 50,
-          "right": 50,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 0% - 100%
+          Panel: right
+            - range 0% - 100%
+          Layout:
+            - left: 50
+            - right: 50
       `);
 
       group.panels[0].updateConstraints({
@@ -187,12 +201,15 @@ describe("MutableGroup", () => {
         minSize: "65%"
       });
       group.flushPendingValidation();
-
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 65,
-          "right": 35,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 65% - 100%
+          Panel: right
+            - range 0% - 100%
+          Layout:
+            - left: 65
+            - right: 35
       `);
     });
   });
@@ -205,11 +222,15 @@ describe("MutableGroup", () => {
           { id: "right", minSize: "25%" }
         ]
       });
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 50,
-          "right": 50,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 25% - 100%
+          Panel: right
+            - range 25% - 100%
+          Layout:
+            - left: 50
+            - right: 50
       `);
 
       // Invalid (account to constraints)
@@ -220,11 +241,15 @@ describe("MutableGroup", () => {
           right: 75
         })
         .endTransaction();
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 25,
-          "right": 75,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 25% - 100%
+          Panel: right
+            - range 25% - 100%
+          Layout:
+            - left: 25
+            - right: 75
       `);
     });
 
@@ -240,11 +265,15 @@ describe("MutableGroup", () => {
           { id: "right", minSize: "25%" }
         ]
       });
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 25,
-          "right": 75,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 25% - 100%
+          Panel: right
+            - range 25% - 100%
+          Layout:
+            - left: 25
+            - right: 75
       `);
 
       // Invalid (account to constraints)
@@ -255,11 +284,15 @@ describe("MutableGroup", () => {
           right: 100
         })
         .endTransaction();
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 25,
-          "right": 75,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 25% - 100%
+          Panel: right
+            - range 25% - 100%
+          Layout:
+            - left: 25
+            - right: 75
       `);
     });
 
@@ -287,11 +320,15 @@ describe("MutableGroup", () => {
           })
           .endTransaction();
       }).toLogError("Invalid 2 panel layout keys: left, center, right");
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 25,
-          "right": 75,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 25% - 100%
+          Panel: right
+            - range 25% - 100%
+          Layout:
+            - left: 25
+            - right: 75
       `);
     });
 
@@ -318,11 +355,15 @@ describe("MutableGroup", () => {
           })
           .endTransaction();
       }).toLogError("Invalid 2 panel layout keys: top, bottom");
-      expect(group.layout).toMatchInlineSnapshot(`
-        {
-          "left": 25,
-          "right": 75,
-        }
+      expect(group).toMatchInlineSnapshot(`
+        Group: a
+          Panel: left
+            - range 25% - 100%
+          Panel: right
+            - range 25% - 100%
+          Layout:
+            - left: 25
+            - right: 75
       `);
     });
 
diff --git a/lib/state/test-utils/serializeMutableGroup.ts b/lib/state/test-utils/serializeMutableGroup.ts
@@ -0,0 +1,22 @@
+import type { MutableGroup } from "../MutableGroup";
+import { serializeMutablePanel } from "./serializeMutablePanel";
+import { serializeMutableSeparator } from "./serializeMutableSeparator";
+
+export function serializeMutableGroup(
+  group: MutableGroup,
+  indentation: string
+) {
+  const strings = [`Group: ${group.id}`];
+  group.panels.forEach((panel) => {
+    strings.push(serializeMutablePanel(panel, indentation + "  "));
+  });
+  group.separators.forEach((separator) => {
+    strings.push(serializeMutableSeparator(separator, indentation + "  "));
+  });
+  strings.push("  Layout:");
+  Object.keys(group.layout).forEach((key) => {
+    strings.push(`    - ${key}: ${group.layout[key]}`);
+  });
+
+  return strings.map((line) => `${indentation}${line}`).join("\n");
+}
diff --git a/lib/state/test-utils/serializeMutablePanel.ts b/lib/state/test-utils/serializeMutablePanel.ts
@@ -0,0 +1,21 @@
+import type { MutablePanel } from "../MutablePanel";
+
+export function serializeMutablePanel(
+  panel: MutablePanel,
+  indentation: string
+) {
+  const strings = [`Panel: ${panel.id}`];
+  if (panel.collapsible) {
+    strings.push(
+      `  - collapsible to ${panel.collapsedSize}${panel.collapsedUnit}`
+    );
+  }
+  if (panel.defaultSize !== undefined) {
+    strings.push(`  - default size ${panel.defaultSize}${panel.defaultUnit}`);
+  }
+  strings.push(
+    `  - range ${panel.minSize}${panel.minUnit} - ${panel.maxSize}${panel.maxUnit}`
+  );
+
+  return strings.map((line) => `${indentation}${line}`).join("\n");
+}
diff --git a/lib/state/test-utils/serializeMutableSeparator.ts b/lib/state/test-utils/serializeMutableSeparator.ts
@@ -0,0 +1,10 @@
+import type { MutableSeparator } from "../MutableSeparator";
+
+export function serializeMutableSeparator(
+  separator: MutableSeparator,
+  indentation: string
+) {
+  const strings = [`Separator: ${separator.id}`];
+
+  return strings.map((line) => `${indentation}${line}`).join("\n");
+}
diff --git a/vitest.setup.ts b/vitest.setup.ts
@@ -3,6 +3,12 @@ import { cleanup } from "@testing-library/react";
 import { afterAll, afterEach, beforeAll, beforeEach, expect, vi } from "vitest";
 import failOnConsole from "vitest-fail-on-console";
 import { resetMockGroupIdCounter } from "./lib/global/test/mockGroup";
+import { MutableGroup } from "./lib/state/MutableGroup";
+import { MutablePanel } from "./lib/state/MutablePanel";
+import { MutableSeparator } from "./lib/state/MutableSeparator";
+import { serializeMutableGroup } from "./lib/state/test-utils/serializeMutableGroup";
+import { serializeMutablePanel } from "./lib/state/test-utils/serializeMutablePanel";
+import { serializeMutableSeparator } from "./lib/state/test-utils/serializeMutableSeparator";
 import { EventEmitter } from "./lib/utils/EventEmitter";
 import { mockBoundingClientRect } from "./lib/utils/test/mockBoundingClientRect";
 import { mockResizeObserver } from "./lib/utils/test/mockResizeObserver";
@@ -38,6 +44,33 @@ expect.addSnapshotSerializer({
   }
 });
 
+expect.addSnapshotSerializer({
+  serialize(value, _, indentation) {
+    return serializeMutableGroup(value as MutableGroup, indentation);
+  },
+  test(value) {
+    return value instanceof MutableGroup;
+  }
+});
+
+expect.addSnapshotSerializer({
+  serialize(value, _, indentation) {
+    return serializeMutablePanel(value as MutablePanel, indentation);
+  },
+  test(value) {
+    return value instanceof MutablePanel;
+  }
+});
+
+expect.addSnapshotSerializer({
+  serialize(value, _, indentation) {
+    return serializeMutableSeparator(value as MutableSeparator, indentation);
+  },
+  test(value) {
+    return value instanceof MutableSeparator;
+  }
+});
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GenericEventEmitter = EventEmitter<any>;
 
