From 93e24e5ddd289b4e7671885a242503eacfea6994 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sun, 5 Nov 2023 17:04:49 -0500 Subject: [PATCH] Fixed e2e tests broken by ARIA selector changes --- .../react-resizable-panels/src/Panel.test.tsx | 25 ++++++++----- .../src/PanelGroup.test.tsx | 17 ++++++--- .../src/PanelResizeHandle.ts | 4 +++ .../useWindowSplitterPanelGroupBehavior.ts | 36 ++++++++++--------- .../getPercentageSizeFromMixedSizes.test.ts | 6 ++-- .../src/utils/test-utils.ts | 18 ++++++++-- 6 files changed, 69 insertions(+), 37 deletions(-) diff --git a/packages/react-resizable-panels/src/Panel.test.tsx b/packages/react-resizable-panels/src/Panel.test.tsx index 47079345b..1c8fd8433 100644 --- 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} /> + { root.render( + + ); @@ -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( + ); @@ -213,8 +221,7 @@ describe("PanelGroup", () => { ); act(() => { - const root = createRoot(document.createElement("div")); - root.render( + renderToStaticMarkup( diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx index 834ad27af..66bfd6081 100644 --- 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( + ); @@ -139,12 +144,14 @@ describe("PanelGroup", () => { root.render( + ); }); }); + // 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 index 8bc979e61..5fe9b5ee0 100644 --- 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 index 0fc7a4abd..43454686b 100644 --- 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 index 23b4892e1..541bf4bc6 100644 --- 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 index 69fe41ff1..a99fdaf95 100644 --- 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() {