test(playwright): added a wrapper mount fixture (#1150)

gulpfile.js

@@ -31,6 +31,7 @@ function compileTs(modules = false) {
         '!src/**/__tests__/**/*',
         '!src/**/__mocks__/**/*',
         '!src/**/*.test.{ts,tsx}',
+        '!src/**/__snapshots__/**/*',
     ])
         .pipe(
             replace(/import '.+\.scss';/g, (match) =>

playwright/README.md

@@ -9,10 +9,12 @@
    ```ts
    import React from 'react';
 
-   import {expect, test} from '@playwright/experimental-ct-react';
+   import {expect} from '@playwright/experimental-ct-react';
 
    import {MyTestedComponent} from '../MyTestedComponent';
 
+   import {test} from '~playwright/core';
+
    test('Name test', async ({mount}) => {
      //mounting a component
      const component = await mount(<MyTestedComponent props={props} />);
@@ -67,30 +69,6 @@ npm run playwright:docker:update
 1. [playwright-test-components](https://playwright.dev/docs/test-components)
 2. [playwright-docs](https://playwright.dev/docs/api/class-test)
 
-## Pay attention
-
-Screenshots are taken within the component boundaries and if it has overflowing content, do the following:
-
-```ts
-import React from 'react';
-
-import {expect, test} from '@playwright/experimental-ct-react';
-
-import {WrapperTest} from '../../../../playwright/helpers';
-
-import {Component} from '../Component';
-
-test('Test Component  ', async ({mount}) => {
-  const component = await mount(
-    <WrapperTest>
-      <Component />
-    </WrapperTest>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-```
-
 ## Test examples
 
 - [Button](../src/components/Button/__tests__/Button.visual.test)

playwright/core/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
+import {ComponentFixtures, MountOptions, test as base} from '@playwright/experimental-ct-react';
+
+type MountFixtures = {
+    mount: ComponentFixtures['mount'];
+};
+
+export const test = base.extend<MountFixtures>({
+    mount: async ({mount: baseMount}, use) => {
+        const mount = async (
+            component: JSX.Element,
+            options?: MountOptions<JsonObject> | undefined,
+        ) => {
+            return await baseMount(
+                <div style={{padding: 20, width: 'fit-content', height: 'fit-content'}}>
+                    {component}
+                </div>,
+                options,
+            );
+        };
+
+        await use(mount);
+    },
+});

src/components/Button/__tests__/Button.visual.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
 import {Gear} from '@gravity-ui/icons';
-import {expect, test} from '@playwright/experimental-ct-react';
+import {expect} from '@playwright/experimental-ct-react';
 
 import {Button} from '../Button';
 import {ButtonViewShowcase} from '../__stories__/ButtonViewShowcase';
 
 import {ButtonIcon, ButtonWitchIcon} from './helpers';
 
+import {test} from '~playwright/core';
+
 test.describe('Button', () => {
     test('render buttom by default', async ({mount}) => {
         const component = await mount(<Button>Button</Button>);

tsconfig.json

@@ -8,11 +8,16 @@
         "baseUrl": ".",
         "resolveJsonModule": true,
         "importHelpers": true,
-        "importsNotUsedAsValues": "error"
+        "importsNotUsedAsValues": "error",
+        "paths": {
+            "~playwright/*": [
+                "playwright/*"
+            ]
+        }
     },
     "include": [
         "src/**/*.ts",
         "src/**/*.tsx",
         "test-utils/setup-tests-after.ts"
     ]
-}
+}