Add e2e test for reparentPopoutWidgets preview feature (#1133)

* Remove h2 from WidgetContentThrowError * Add e2e test for reparentPopoutWidgets * Bump iTwinUI version * rush change * Bump iTwinUI * Update snaps
iTwin · Feb 3, 2025 · 265f8ab · 265f8ab
1 parent f09ed6b
commit 265f8ab
Show file tree

Hide file tree

Showing 19 changed files with 116 additions and 33 deletions.
diff --git a/apps/test-app/package.json b/apps/test-app/package.json
@@ -97,7 +97,7 @@
     "@itwin/imodels-access-frontend": "^5.2.3",
     "@itwin/imodels-client-authoring": "^5.9.0",
     "@itwin/imodels-client-management": "^5.9.0",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "@itwin/itwinui-react-v2": "npm:@itwin/itwinui-react@^2.12.26",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/itwinui-layouts-react": "~0.4.1",

diff --git a/apps/test-app/src/frontend/appui/frontstages/TestPopoutFrontstage.tsx b/apps/test-app/src/frontend/appui/frontstages/TestPopoutFrontstage.tsx
@@ -6,7 +6,7 @@ import "./TestPopoutFrontstage.scss";
 import * as React from "react";
 import { Frontstage } from "@itwin/appui-react";
 import { createTestFrontstage } from "./createTestFrontstage";
-import { ProgressRadial } from "@itwin/itwinui-react";
+import { Button, Input, ProgressRadial } from "@itwin/itwinui-react";
 import { Logger } from "@itwin/core-bentley";
 import { loggerCategory } from "../../logger";
 import { WidgetContentThrowError } from "@itwin/appui-test-providers";
@@ -53,6 +53,14 @@ export const createTestPopoutFrontstage = () => {
               ),
             },
           ],
+          end: [
+            {
+              id: "state-widget",
+              label: "State widget",
+              canPopout: true,
+              content: <StateWidget />,
+            },
+          ],
         },
       },
     } satisfies Frontstage;
@@ -122,3 +130,15 @@ function LinkTest() {
   }, []);
   return <div ref={ref} id="link-test" style={{ background: "red" }} />;
 }
+
+function StateWidget() {
+  const [value, setValue] = React.useState(0);
+  return (
+    <>
+      <Input defaultValue="Default value" />
+      <Button onClick={() => setValue((prev) => prev + 1)}>
+        Increment: {value}
+      </Button>
+    </>
+  );
+}
diff --git a/apps/test-providers/package.json b/apps/test-providers/package.json
@@ -57,7 +57,7 @@
     "@itwin/core-react": "workspace:*",
     "@itwin/appui-react": "workspace:*",
     "@itwin/imodel-components-react": "workspace:*",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/webgl-compatibility": "^4.0.0",
     "classnames": "2.5.1",

diff --git a/apps/test-providers/src/ui/widgets/LayoutWidget.tsx b/apps/test-providers/src/ui/widgets/LayoutWidget.tsx
@@ -570,12 +570,7 @@ export function WidgetContentThrowError() {
   if (shouldThrow) {
     throw new Error("Simulated error was thrown.");
   }
-  return (
-    <>
-      <h2>Throw error button</h2>
-      <Button onClick={() => setShouldThrow(true)}>Throw Error</Button>
-    </>
-  );
+  return <Button onClick={() => setShouldThrow(true)}>Throw Error</Button>;
 }
 
 const widgetContentStyle: React.CSSProperties = {

diff --git a/common/changes/@itwin/appui-react/fix-reparent-popout_2025-01-21-12-38.json b/common/changes/@itwin/appui-react/fix-reparent-popout_2025-01-21-12-38.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}
diff --git a/common/changes/@itwin/components-react/fix-reparent-popout_2025-01-21-12-38.json b/common/changes/@itwin/components-react/fix-reparent-popout_2025-01-21-12-38.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/components-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/components-react"
+}
diff --git a/common/changes/@itwin/core-react/fix-reparent-popout_2025-01-21-12-38.json b/common/changes/@itwin/core-react/fix-reparent-popout_2025-01-21-12-38.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/core-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/core-react"
+}
diff --git a/common/changes/@itwin/imodel-components-react/fix-reparent-popout_2025-01-21-12-38.json b/common/changes/@itwin/imodel-components-react/fix-reparent-popout_2025-01-21-12-38.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-components-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/imodel-components-react"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/docs/storybook/package.json b/docs/storybook/package.json
@@ -31,7 +31,7 @@
     "@itwin/imodels-access-frontend": "^5.2.3",
     "@itwin/imodels-client-authoring": "^5.9.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2"

diff --git a/....ts-snapshots/Editor-Primitive-enum-Default-default-visual-1-chromium-linux.png b/....ts-snapshots/Editor-Primitive-enum-Default-default-visual-1-chromium-linux.png
diff --git a/e2e-tests/tests/popout-widget.test.ts b/e2e-tests/tests/popout-widget.test.ts
@@ -284,3 +284,31 @@ for (const useDefaultPopoutUrl of [1, 0]) {
     await expectTabInPanelSection(tab, "left", 0);
   });
 }
+
+test("should persist widget state with `reparentPopoutWidgets` enabled", async ({
+  page,
+}) => {
+  await page.goto("./blank?frontstageId=test-popout&reparentPopoutWidgets=1");
+
+  const increment = page.getByRole("button", { name: "Increment: " });
+  await increment.click();
+  await increment.click();
+  await increment.click();
+  await expect(increment).toHaveText("Increment: 3");
+
+  const input = page.getByRole("textbox");
+  await input.fill("test");
+  await expect(input).toHaveValue("test");
+
+  const tab = tabLocator(page, "State widget");
+  const widget = widgetLocator({ tab });
+  const popoutPage = await popoutWidget(widget);
+
+  const popoutIncrement = popoutPage.getByRole("button", {
+    name: "Increment: 3",
+  });
+  await expect(popoutIncrement).toBeVisible();
+
+  const popoutInput = popoutPage.getByRole("textbox");
+  await expect(popoutInput).toHaveValue("test");
+});
diff --git a/...s/ui-settings-page.test.ts-snapshots/ui-settings-page-test-1-chromium-linux.png b/...s/ui-settings-page.test.ts-snapshots/ui-settings-page-test-1-chromium-linux.png
diff --git a/...ystem-selector.test.ts-snapshots/unit-system-selector-test-1-chromium-linux.png b/...ystem-selector.test.ts-snapshots/unit-system-selector-test-1-chromium-linux.png
diff --git a/...sts/statusbar/status-bar.test.ts-snapshots/status-bar-test-1-chromium-linux.png b/...sts/statusbar/status-bar.test.ts-snapshots/status-bar-test-1-chromium-linux.png
diff --git a/ui/appui-react/package.json b/ui/appui-react/package.json
@@ -82,7 +82,7 @@
     "@itwin/ecschema-metadata": "^4.0.0",
     "@itwin/eslint-plugin": "5.0.0-dev.2",
     "@itwin/imodel-components-react": "workspace:*",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "@itwin/webgl-compatibility": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",

diff --git a/ui/components-react/package.json b/ui/components-react/package.json
@@ -69,7 +69,7 @@
     "@itwin/core-i18n": "^4.0.0",
     "@itwin/core-react": "workspace:*",
     "@itwin/eslint-plugin": "5.0.0-dev.2",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

diff --git a/ui/core-react/package.json b/ui/core-react/package.json
@@ -69,7 +69,7 @@
     "@itwin/core-geometry": "^4.0.0",
     "@itwin/core-i18n": "^4.0.0",
     "@itwin/eslint-plugin": "5.0.0-dev.2",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

diff --git a/ui/imodel-components-react/package.json b/ui/imodel-components-react/package.json
@@ -77,7 +77,7 @@
     "@itwin/core-quantity": "^4.0.0",
     "@itwin/core-react": "workspace:*",
     "@itwin/eslint-plugin": "5.0.0-dev.2",
-    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/itwinui-react": "^3.16.6",
     "@itwin/webgl-compatibility": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",