test(react): E2E tests for Portal and ErrorBoundary

eslint.config.ts

@@ -83,6 +83,7 @@ const config: Config[] = defineConfig([
       },
     },
     rules: {
+      'react/prop-types': 'off',
       'react/jsx-curly-brace-presence': 'error',
     },
   },

tests-e2e/package.json

@@ -16,8 +16,8 @@
     "@rspack/cli": "^1.4.11",
     "@rspack/core": "^1.4.11",
     "@types/node": "^24.2.1",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "css-loader": "^7.1.2",
     "prettier": "^3.6.2",
     "typescript": "^5.9.2"

tests-e2e/src/reset.css

@@ -45,3 +45,10 @@ input:not([type='checkbox']) {
   box-shadow: inset 0 0 0 2px #000;
   border-radius: 6px;
 }
+
+textarea {
+  font-size: 16px;
+  padding: 0 8px;
+  box-shadow: inset 0 0 0 2px #000;
+  border-radius: 6px;
+}

tests-e2e/stories/error-boundary/primary.m.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.broken {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.fallback {
+  background: rgb(255, 162, 162);
+  border-radius: 8px;
+  padding: 16px;
+}

tests-e2e/stories/error-boundary/primary.story.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { ErrorBoundary } from '@krutoo/utils/react';
+import styles from './primary.m.css';
+
+export const meta = {
+  category: 'React components/ErrorBoundary',
+  title: 'Primary example',
+};
+
+function BrokenUI({ broken }: { broken?: boolean }) {
+  if (broken) {
+    throw Error('Render error');
+  }
+
+  return <div className={styles.broken}>I am fine 👍</div>;
+}
+
+function Fallback() {
+  return <div className={styles.fallback}>Oops, something broke =(</div>;
+}
+
+export default function Example() {
+  const [broken, setBroken] = useState(false);
+
+  return (
+    <div className={styles.container}>
+      <button disabled={broken} onClick={() => setBroken(true)}>
+        Broke it!
+      </button>
+
+      <ErrorBoundary fallback={<Fallback />}>
+        <BrokenUI broken={broken} />
+      </ErrorBoundary>
+    </div>
+  );
+}

tests-e2e/tests/error-boundary.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+test('ErrorBoundary', async ({ page }) => {
+  await page.goto('/sandbox.html?path=/error-boundary/primary');
+
+  expect(await page.textContent('body')).toContain('I am fine 👍');
+
+  await page.getByRole('button', { name: 'Broke it!' }).click();
+
+  expect(await page.textContent('body')).not.toContain('I am fine 👍');
+  expect(await page.textContent('body')).toContain('Oops, something broke =(');
+});

tests-e2e/tests/portal.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+
+test('Portal', async ({ page }) => {
+  await page.goto('/sandbox.html?path=/portal/primary');
+
+  const button = page.getByRole('button', { name: 'Toggle' });
+
+  expect(await button.count()).toBe(1);
+  expect(await page.locator('body > *').count()).toBe(1);
+
+  await button.click();
+
+  expect(await page.locator('body > *').count()).toBe(2);
+  expect(await page.locator('body > *').last().textContent()).toContain('Hello from Portal!');
+
+  await button.click();
+  expect(await page.locator('body > *').count()).toBe(1);
+});

tests-e2e/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "rootDir": ".",
     "noEmit": true,
     "target": "ESNext",
     "module": "NodeNext",
@@ -13,18 +14,7 @@
     "noUnusedLocals": true,
     "noUncheckedIndexedAccess": true,
     "noImplicitOverride": true,
-    "allowImportingTsExtensions": true,
-    "paths": {
-      "@krutoo/utils": ["../src/mod.ts"],
-      "@krutoo/utils/di": ["../src/di/mod.ts"],
-      "@krutoo/utils/dom": ["../src/dom/mod.ts"],
-      "@krutoo/utils/math": ["../src/math/mod.ts"],
-      "@krutoo/utils/misc": ["../src/misc/mod.ts"],
-      "@krutoo/utils/react": ["../src/react/mod.ts"],
-      "@krutoo/utils/router": ["../src/router/mod.ts"],
-      "@krutoo/utils/rspack": ["../src/rspack/mod.ts"],
-      "@krutoo/utils/types": ["../src/types/mod.ts"]
-    }
+    "allowImportingTsExtensions": true
   },
   "exclude": ["node_modules"]
 }