Fixed e2e tests broken by ARIA selector changes

bvaughn · Nov 5, 2023 · 93e24e5 · 93e24e5
1 parent 5d66627
commit 93e24e5
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 37 deletions.
diff --git a/packages/react-resizable-panels/src/Panel.test.tsx b/packages/react-resizable-panels/src/Panel.test.tsx
@@ -1,10 +1,9 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import { createRef } from "./vendor/react";
-import { ImperativePanelHandle, Panel } from "./Panel";
-import { PanelGroup } from "./PanelGroup";
+import { ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from ".";
 import {
-  mockOffsetWidthAndHeight,
+  mockPanelGroupOffsetWidthAndHeight,
   verifyExpandedPanelGroupLayout,
 } from "./utils/test-utils";
 import { MixedSizes } from ".";
@@ -22,7 +21,7 @@ describe("PanelGroup", () => {
     // @ts-expect-error
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
-    uninstallMockOffsetWidthAndHeight = mockOffsetWidthAndHeight();
+    uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
 
     const container = document.createElement("div");
     document.body.appendChild(container);
@@ -82,6 +81,7 @@ describe("PanelGroup", () => {
                 defaultSizePercentage={50}
                 ref={leftPanelRef}
               />
+              <PanelResizeHandle />
               <Panel
                 collapsible
                 defaultSizePercentage={50}
@@ -155,7 +155,9 @@ describe("PanelGroup", () => {
           root.render(
             <PanelGroup direction="horizontal" onLayout={onLayout}>
               <Panel defaultSizePercentage={20} ref={leftPanelRef} />
+              <PanelResizeHandle />
               <Panel defaultSizePercentage={60} ref={middlePanelRef} />
+              <PanelResizeHandle />
               <Panel defaultSizePercentage={20} ref={rightPanelRef} />
             </PanelGroup>
           );
@@ -193,16 +195,22 @@ describe("PanelGroup", () => {
       jest.resetModules();
       jest.mock("#is-browser", () => ({ isBrowser: false }));
 
-      const { createRoot } = require("react-dom/client");
+      const { TextEncoder } = require("util");
+      global.TextEncoder = TextEncoder;
+
+      const { renderToStaticMarkup } = require("react-dom/server.browser");
       const { act } = require("react-dom/test-utils");
       const Panel = require("./Panel").Panel;
       const PanelGroup = require("./PanelGroup").PanelGroup;
+      const PanelResizeHandle =
+        require("./PanelResizeHandle").PanelResizeHandle;
 
       act(() => {
-        const root = createRoot(document.createElement("div"));
-        root.render(
+        // No warning expected if default sizes provided
+        renderToStaticMarkup(
           <PanelGroup direction="horizontal">
             <Panel defaultSizePercentage={100} />
+            <PanelResizeHandle />
             <Panel defaultSizePixels={1_000} />
           </PanelGroup>
         );
@@ -213,8 +221,7 @@ describe("PanelGroup", () => {
       );
 
       act(() => {
-        const root = createRoot(document.createElement("div"));
-        root.render(
+        renderToStaticMarkup(
           <PanelGroup direction="horizontal">
             <Panel id="one" />
           </PanelGroup>

diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx
@@ -1,9 +1,13 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
-import { MixedSizes } from "..";
-import { Panel } from "./Panel";
-import { ImperativePanelGroupHandle, PanelGroup } from "./PanelGroup";
-import { mockOffsetWidthAndHeight } from "./utils/test-utils";
+import {
+  ImperativePanelGroupHandle,
+  MixedSizes,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from ".";
+import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
 
 describe("PanelGroup", () => {
@@ -20,7 +24,7 @@ describe("PanelGroup", () => {
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
     // JSDom doesn't support element sizes
-    uninstallMockOffsetWidthAndHeight = mockOffsetWidthAndHeight();
+    uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
 
     const container = document.createElement("div");
     document.body.appendChild(container);
@@ -85,6 +89,7 @@ describe("PanelGroup", () => {
         root.render(
           <PanelGroup direction="horizontal" onLayout={onLayout} ref={ref}>
             <Panel defaultSizePercentage={50} id="a" />
+            <PanelResizeHandle />
             <Panel defaultSizePercentage={50} id="b" />
           </PanelGroup>
         );
@@ -139,12 +144,14 @@ describe("PanelGroup", () => {
         root.render(
           <PanelGroup direction="horizontal">
             <Panel defaultSizePercentage={50} id="a" />
+            <PanelResizeHandle />
             <Panel defaultSizePercentage={50} id="b" />
           </PanelGroup>
         );
       });
     });
 
+    // TODO Verify warning if missing resize handle
     // TODO Verify warning if invalid layout is set via imperative api
   });
 });
diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.ts b/packages/react-resizable-panels/src/PanelResizeHandle.ts
@@ -151,6 +151,10 @@ export function PanelResizeHandle({
   return createElement(Type, {
     children,
     className: classNameFromProps,
+
+    // CSS selectors
+    "data-resize-handle": "",
+
     "data-resize-handle-active": isDragging
       ? "pointer"
       : isFocused

diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts
@@ -46,22 +46,26 @@ export function useWindowSplitterPanelGroupBehavior({
       });
 
       const resizeHandleElement = resizeHandleElements[index];
-      resizeHandleElement.setAttribute(
-        "aria-controls",
-        panelDataArray[index].id
-      );
-      resizeHandleElement.setAttribute(
-        "aria-valuemax",
-        "" + Math.round(valueMax)
-      );
-      resizeHandleElement.setAttribute(
-        "aria-valuemin",
-        "" + Math.round(valueMin)
-      );
-      resizeHandleElement.setAttribute(
-        "aria-valuenow",
-        "" + Math.round(valueNow)
-      );
+      if (resizeHandleElement == null) {
+        console.warn(`Missing resize handle for PanelGroup "${groupId}"`);
+      } else {
+        resizeHandleElement.setAttribute(
+          "aria-controls",
+          panelDataArray[index].id
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuemax",
+          "" + Math.round(valueMax)
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuemin",
+          "" + Math.round(valueMin)
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuenow",
+          "" + Math.round(valueNow)
+        );
+      }
     }
 
     return () => {

diff --git a/packages/react-resizable-panels/src/utils/getPercentageSizeFromMixedSizes.test.ts b/packages/react-resizable-panels/src/utils/getPercentageSizeFromMixedSizes.test.ts
@@ -41,9 +41,7 @@ describe("getPercentageSizeFromMixedSizes", () => {
     ).toBe(25);
   });
 
-  it("should throw if neither pixel nor percentage sizes specified", () => {
-    expect(() => getPercentageSizeFromMixedSizes({}, 100_000)).toThrowError(
-      "Invalid size"
-    );
+  it("should return undefined if neither pixel nor percentage sizes specified", () => {
+    expect(getPercentageSizeFromMixedSizes({}, 100_000)).toBeUndefined();
   });
 });
diff --git a/packages/react-resizable-panels/src/utils/test-utils.ts b/packages/react-resizable-panels/src/utils/test-utils.ts
@@ -18,7 +18,7 @@ export function expectToBeCloseToArray(
   }
 }
 
-export function mockOffsetWidthAndHeight(
+export function mockPanelGroupOffsetWidthAndHeight(
   mockWidth = 1_000,
   mockHeight = 1_000
 ) {
@@ -34,12 +34,24 @@ export function mockOffsetWidthAndHeight(
 
   Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
     configurable: true,
-    value: mockHeight,
+    get: function () {
+      if (this.hasAttribute("data-resize-handle")) {
+        return 0;
+      } else if (this.hasAttribute("data-panel-group")) {
+        return mockHeight;
+      }
+    },
   });
 
   Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
     configurable: true,
-    value: mockWidth,
+    get: function () {
+      if (this.hasAttribute("data-resize-handle")) {
+        return 0;
+      } else if (this.hasAttribute("data-panel-group")) {
+        return mockWidth;
+      }
+    },
   });
 
   return function uninstallMocks() {