@gravity-ui/playwright-tools 1.1.2 → 1.1.3

package/component-tests/fixtures/mount/mount-fixture.d.ts

@@ -1,3 +1,16 @@
 import type { PlaywrightTestArgs, PlaywrightTestOptions, TestFixture } from '@playwright/test';
 import type { MountFn, MountTestArgs } from './types';
+/**
+ * Enhanced mount fixture that wraps components with styling and layout controls.
+ *
+ * This fixture intercepts the base mount function to:
+ * 1. Always wrap components in a div with TEST_WRAPPER_CLASS for screenshot targeting
+ * 2. Apply padding and fit-content sizing for better visual testing
+ * 3. Disable CSS transform animations that can cause flaky screenshots
+ * 4. Support custom width and rootStyle options
+ *
+ * The wrapper is inlined using string element types ('div', 'style') because
+ * Playwright blocks function components defined in test context. See mount-wrapper.ts
+ * for more details on this restriction.
+ */
 export declare const mountFixture: TestFixture<MountFn, PlaywrightTestArgs & PlaywrightTestOptions & MountTestArgs>;

package/component-tests/fixtures/mount/mount-fixture.js

@@ -1,18 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mountFixture = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("./constants");
+const mount_wrapper_1 = require("./mount-wrapper");
+/**
+ * Enhanced mount fixture that wraps components with styling and layout controls.
+ *
+ * This fixture intercepts the base mount function to:
+ * 1. Always wrap components in a div with TEST_WRAPPER_CLASS for screenshot targeting
+ * 2. Apply padding and fit-content sizing for better visual testing
+ * 3. Disable CSS transform animations that can cause flaky screenshots
+ * 4. Support custom width and rootStyle options
+ *
+ * The wrapper is inlined using string element types ('div', 'style') because
+ * Playwright blocks function components defined in test context. See mount-wrapper.ts
+ * for more details on this restriction.
+ */
 const mountFixture = async ({ mount: baseMount }, use) => {
     const mount = async (component, options) => {
-        return await baseMount((0, jsx_runtime_1.jsxs)("div", { style: {
-                padding: 20,
-                // When we set width we didn't expect that paddings for better screenshots would be included
-                boxSizing: options?.width ? 'content-box' : undefined,
-                width: options?.width ? options.width : 'fit-content',
-                height: 'fit-content',
-                ...options?.rootStyle,
-            }, className: constants_1.TEST_WRAPPER_CLASS, children: [(0, jsx_runtime_1.jsx)("style", { children: '.g-button, .g-button::after { transform: scale(1) !important; }' }), component] }), options);
+        const { width, rootStyle, ...baseMountOptions } = options || {};
+        const wrapper = (0, mount_wrapper_1.createComponentWrapper)(component, { width, rootStyle });
+        return await baseMount(wrapper, baseMountOptions);
     };
     await use(mount);
 };

package/component-tests/fixtures/mount/mount-wrapper.d.ts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+/**
+ * Playwright JSX object structure that mimics Playwright's jsx-runtime output.
+ * This is the internal structure Playwright expects when mounting components.
+ */
+type PlaywrightJsxObject<T extends keyof React.JSX.IntrinsicElements> = {
+    __pw_type: 'jsx';
+    type: T;
+    props: React.JSX.IntrinsicElements[T];
+    key: string | null;
+};
+/**
+ * Creates a wrapper around a component with styling and animation controls.
+ *
+ * This wrapper:
+ * 1. Wraps component in a div with TEST_WRAPPER_CLASS for screenshot targeting
+ * 2. Applies padding and fit-content sizing for better visual testing
+ * 3. Injects global styles to disable CSS transform animations
+ * 4. Supports custom width and rootStyle options
+ *
+ * The wrapper uses only string element types ('div', 'style') because
+ * Playwright blocks function components defined in test context.
+ * See createPlaywrightJsxObject documentation for details.
+ */
+export declare function createComponentWrapper(component: React.JSX.Element, options?: {
+    width?: number | string;
+    rootStyle?: React.CSSProperties;
+}): PlaywrightJsxObject<"div">;
+export {};

package/component-tests/fixtures/mount/mount-wrapper.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponentWrapper = createComponentWrapper;
+const constants_1 = require("./constants");
+/**
+ * Creates a Playwright JSX object representation.
+ *
+ * Playwright expects JSX components in a special format with __pw_type: 'jsx'.
+ * This mimics what Playwright's jsx-runtime creates when you write JSX in test files.
+ *
+ * IMPORTANT: The `type` parameter MUST be either:
+ * - A string (HTML element name like 'div', 'span', 'style')
+ * - An import reference resolved by Playwright's import registry
+ *
+ * Function references are explicitly blocked by Playwright's serializers.js:
+ * "if (value?.__pw_type === 'jsx' && typeof value.type === 'function')"
+ * This prevents components defined in test context from being mounted.
+ *
+ * That's why we use only string types (like 'div', 'style')
+ * instead of function component references.
+ *
+ * @template T - The HTML element type (e.g., 'div', 'span', 'style')
+ * @param type - HTML element name
+ * @param props - Props for the HTML element
+ * @returns A Playwright JSX object compatible with React.JSX.Element
+ */
+function createPlaywrightJsxObject(type, props) {
+    return {
+        __pw_type: 'jsx',
+        type,
+        props,
+        key: null, // Must be null (not undefined) to match React.JSX.Element type
+    };
+}
+/**
+ * Creates a wrapper around a component with styling and animation controls.
+ *
+ * This wrapper:
+ * 1. Wraps component in a div with TEST_WRAPPER_CLASS for screenshot targeting
+ * 2. Applies padding and fit-content sizing for better visual testing
+ * 3. Injects global styles to disable CSS transform animations
+ * 4. Supports custom width and rootStyle options
+ *
+ * The wrapper uses only string element types ('div', 'style') because
+ * Playwright blocks function components defined in test context.
+ * See createPlaywrightJsxObject documentation for details.
+ */
+function createComponentWrapper(component, options) {
+    const { width, rootStyle } = options || {};
+    const styleElement = createPlaywrightJsxObject('style', {
+        children: '.g-button, .g-button::after { transform: scale(1) !important; }',
+    });
+    const wrapper = createPlaywrightJsxObject('div', {
+        style: {
+            padding: 20,
+            // When width is set, padding should not affect total width
+            boxSizing: width ? 'content-box' : undefined,
+            width: width ? width : 'fit-content',
+            height: 'fit-content',
+            ...rootStyle,
+        },
+        className: constants_1.TEST_WRAPPER_CLASS,
+        children: [styleElement, component],
+    });
+    return wrapper;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/playwright-tools",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Tools for Playwright Test",
   "keywords": [
     "playwright",
@@ -100,9 +100,7 @@
   },
   "peerDependencies": {
     "@playwright/experimental-ct-react": "^1.22",
-    "@playwright/test": "^1.22",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@playwright/test": "^1.22"
   },
   "engines": {
     "node": ">=20"