Add more tests for data attributes

bvaughn · Feb 10, 2024 · a0726e3 · a0726e3
1 parent fb68d84
commit a0726e3
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 17 deletions.
diff --git a/packages/react-resizable-panels/src/Panel.test.tsx b/packages/react-resizable-panels/src/Panel.test.tsx
@@ -5,6 +5,7 @@ import { assert } from "./utils/assert";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import {
   mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
   verifyExpandedPanelGroupLayout,
 } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
@@ -675,6 +676,68 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel", "");
+      verifyAttribute(leftElement, "data-panel-id", "left-panel");
+      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(leftElement, "data-panel-collapsible", null);
+
+      verifyAttribute(rightElement, "data-panel", "");
+      verifyAttribute(rightElement, "data-panel-id", "right-panel");
+      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+      verifyAttribute(rightElement, "data-panel-collapsible", "true");
+    });
+
+    it("should update the data-panel-size attribute when the panel resizes", () => {
+      const leftPanelRef = createRef<ImperativePanelHandle>();
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" ref={leftPanelRef} />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+
+      act(() => {
+        leftPanelRef.current?.resize(30);
+      });
+
+      verifyAttribute(leftElement, "data-panel-size", "30.0");
+      verifyAttribute(rightElement, "data-panel-size", "70.0");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();

diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx
@@ -13,7 +13,10 @@ import {
 } from ".";
 import { assert } from "./utils/assert";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
-import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
+import {
+  mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
+} from "./utils/test-utils";
 import { createRef } from "./vendor/react";
 
 describe("PanelGroup", () => {
@@ -256,6 +259,23 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group"></PanelGroup>
+        );
+      });
+
+      const element = getPanelGroupElement("test-group", container);
+      assert(element);
+
+      verifyAttribute(element, "data-panel-group", "");
+      verifyAttribute(element, "data-panel-group-direction", "horizontal");
+      verifyAttribute(element, "data-panel-group-id", "test-group");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {

diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx
@@ -1,13 +1,14 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
+import type { PanelResizeHandleProps } from "react-resizable-panels";
 import { Panel, PanelGroup, PanelResizeHandle } from ".";
 import { assert } from "./utils/assert";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import {
   dispatchPointerEvent,
   mockBoundingClientRect,
+  verifyAttribute,
 } from "./utils/test-utils";
-import type { PanelResizeHandleProps } from "react-resizable-panels";
 
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
@@ -90,13 +91,11 @@ describe("PanelResizeHandle", () => {
       );
     });
 
-    const leftElement = container.querySelector(
-      '[data-panel-resize-handle-id="handle-left"]'
-    ) as HTMLElement;
+    const leftElement = getResizeHandleElement("handle-left", container);
+    const rightElement = getResizeHandleElement("handle-right", container);
 
-    const rightElement = container.querySelector(
-      '[data-panel-resize-handle-id="handle-right"]'
-    ) as HTMLElement;
+    assert(leftElement);
+    assert(rightElement);
 
     // JSDom doesn't properly handle bounding rects
     mockBoundingClientRect(leftElement, {
@@ -178,15 +177,6 @@ describe("PanelResizeHandle", () => {
   });
 
   describe("data attributes", () => {
-    function verifyAttribute(
-      element: HTMLElement,
-      attributeName: string,
-      expectedValue: string | null
-    ) {
-      const actualValue = element.getAttribute(attributeName);
-      expect(actualValue).toBe(expectedValue);
-    }
-
     it("should initialize with the correct props based attributes", () => {
       const { leftElement, rightElement } = setupMockedGroup();
 

diff --git a/packages/react-resizable-panels/src/utils/test-utils.ts b/packages/react-resizable-panels/src/utils/test-utils.ts
@@ -132,6 +132,15 @@ export function mockPanelGroupOffsetWidthAndHeight(
   };
 }
 
+export function verifyAttribute(
+  element: HTMLElement,
+  attributeName: string,
+  expectedValue: string | null
+) {
+  const actualValue = element.getAttribute(attributeName);
+  expect(actualValue).toBe(expectedValue);
+}
+
 export function verifyExpandedPanelGroupLayout(
   actualLayout: number[],
   expectedLayout: number[]