fix: added react and react-dom to peer deps (#35)

* fix: added react and react-dom to peer deps

* fix: moved component-tests related code to storybook folder

* fix: renamed storybook folder to component-tests

* fix: Fixed some linter errors

Author: SwinX

README.md

@@ -14,6 +14,7 @@ import { matchScreenshot } from 'playwright-tools/actions';
 
 - [actions](./actions/README.md) — Browser actions.
 - [auth/storage](./auth/storage/README.md) — Authentication functions for saving and restoring browser storage snapshots.
+- [component-tests](./component-tests/README.md) — Utilities and fixtures for Playwright Component Testing.
 - [fixtures](./fixtures/README.md) — Fixtures for passing values into tests.
 - [har](./har/README.md) — Functions for working with HAR request dumps.
 - [config](./config/README.md) — Base configuration.

actions/expect-request/matchers/compare/DiffPrinter.ts

@@ -46,34 +46,40 @@ export class DiffPrinter {
             (acc, logItem) => {
                 const { context, type } = logItem;
                 const path = this.makePathFromContext(context);
+                const existingAnnotations = acc[path] ?? [];
 
-                if (!acc[path]) {
-                    acc[path] = [];
-                }
+                let newAnnotation: PathAnnotation | undefined;
 
                 if (type === DiffType.ValueMismatch) {
                     if (logItem.expected === undefined && logItem.received !== undefined) {
-                        acc[path].push({ type: PathAnnotationType.ObjectExtraProperty });
+                        newAnnotation = { type: PathAnnotationType.ObjectExtraProperty };
                     } else {
-                        acc[path].push({
+                        newAnnotation = {
                             type: PathAnnotationType.ValueMismatch,
                             expected: logItem.expected,
                             received: logItem.received,
-                        });
+                        };
                     }
                 } else if (type === DiffType.ObjectMissingProperty) {
-                    acc[path].push({
+                    newAnnotation = {
                         type: PathAnnotationType.ObjectMissingProperty,
                         expected: logItem.expected,
-                    });
+                    };
                 } else if (type === DiffType.ArrayMissingValue) {
-                    acc[path].push({
+                    newAnnotation = {
                         type: PathAnnotationType.ArrayMissingValue,
                         expected: logItem.expected,
-                    });
+                    };
+                }
+
+                if (!newAnnotation) {
+                    return acc;
                 }
 
-                return acc;
+                return {
+                    ...acc,
+                    [path]: [...existingAnnotations, newAnnotation],
+                };
             },
             {},
         );

component-tests/README.md

@@ -0,0 +1,147 @@
+# Component Testing Utilities
+
+This module provides utilities and fixtures for Playwright Component Testing.
+
+## Utils
+
+### createSmokeScenarios
+
+A utility for generating test scenarios from component props variations. It creates a set of test cases based on a base props object and variations for each prop.
+
+```ts
+import { createSmokeScenarios } from 'playwright-tools/component-tests';
+
+const scenarios = createSmokeScenarios(
+    // Base props
+    {
+        theme: 'light',
+        size: 'medium',
+        disabled: false,
+    },
+    // Prop variations
+    {
+        theme: ['dark'],
+        size: ['small', 'large'],
+        disabled: [true],
+    },
+);
+
+// Returns array of [scenarioName, props] tuples:
+// [
+//   ['[default]', { theme: 'light', size: 'medium', disabled: false }],
+//   ['[theme: dark]', { theme: 'dark', size: 'medium', disabled: false }],
+//   ['[size: small]', { theme: 'light', size: 'small', disabled: false }],
+//   ['[size: large]', { theme: 'light', size: 'large', disabled: false }],
+//   ['[disabled: true]', { theme: 'light', size: 'medium', disabled: true }],
+// ]
+```
+
+#### Named Cases
+
+For complex values or custom names, use named cases:
+
+```ts
+const scenarios = createSmokeScenarios(
+    { config: { mode: 'default' } },
+    {
+        config: [
+            ['advanced-mode', { mode: 'advanced', features: ['a', 'b'] }],
+            ['minimal-mode', { mode: 'minimal' }],
+        ],
+    },
+);
+```
+
+#### Custom Scenario Name Prefix
+
+```ts
+const scenarios = createSmokeScenarios(
+    { theme: 'light' },
+    { theme: ['dark'] },
+    { scenarioName: 'Button' },
+);
+
+// Returns:
+// [
+//   [' Button [default]', { theme: 'light' }],
+//   [' Button [theme: dark]', { theme: 'dark' }],
+// ]
+```
+
+## Fixtures
+
+### mount
+
+Enhanced mount fixture for Playwright Component Testing that wraps React components with a styled container for better test consistency and visual testing.
+
+Extend `test` in Playwright:
+
+```ts
+import { mountFixture, type MountFn, TEST_WRAPPER_CLASS } from 'playwright-tools/component-tests';
+
+export type TestExtraFixtures = {
+    mount: MountFn;
+};
+
+export const test = baseTest.extend<TestExtraFixtures, WorkerExtraFixtures>({
+    mount: mountFixture,
+});
+```
+
+Usage in test:
+
+```ts
+import { MyButton } from './MyButton';
+
+test('renders button correctly', async ({ mount }) => {
+    const component = await mount(
+        <MyButton label="Click me" />,
+        {
+            width: 300,
+            rootStyle: { 
+                backgroundColor: '#f0f0f0',
+            },
+        }
+    );
+
+    await expect(component).toBeVisible();
+});
+```
+
+#### Features
+
+The mount fixture enhances the base Playwright mount function with:
+
+1. **Wrapper Container**: Wraps components in a styled div with 20px padding for better screenshots
+2. **Flexible Sizing**: Uses `fit-content` by default, or accepts custom width
+3. **Button Stability**: Prevents button scale animations during clicks to ensure consistent positioning
+4. **Identifiable Class**: Adds `TEST_WRAPPER_CLASS` (`playwright-wrapper-test`) to the wrapper for easy targeting
+
+#### Mount Options
+
+Extends standard Playwright mount options with:
+
+```ts
+type MountFn = <HooksConfig>(
+    component: React.JSX.Element,
+    options?: MountOptions<HooksConfig> & {
+        /**
+         * Width of the wrapper container
+         * When set, uses content-box sizing so padding doesn't affect the specified width
+         * @example 300 or '300px'
+         */
+        width?: number | string;
+        
+        /**
+         * Additional CSS styles to apply to the wrapper container
+         * Merged with default styles (padding: 20, width: 'fit-content', height: 'fit-content')
+         */
+        rootStyle?: React.CSSProperties;
+    },
+) => Promise<MountResult>;
+```
+
+#### Exported Constants
+
+- `TEST_WRAPPER_CLASS` - The CSS class name applied to the wrapper div (`'playwright-wrapper-test'`)
+

component-tests/fixtures/index.ts

@@ -0,0 +1,2 @@
+export type { MountFn, MountTestArgs } from './mount';
+export { mountFixture, TEST_WRAPPER_CLASS } from './mount';

fixtures/mount/constants.ts …ponent-tests/fixtures/mount/constants.tsfixtures/mount/constants.ts renamed to component-tests/fixtures/mount/constants.ts fixtures/mount/constants.ts renamed to component-tests/fixtures/mount/constants.ts

@@ -0,0 +1,7 @@
+// Utils
+export type { Cases, CasesWithName, Scenario, ScenarioName } from './utils';
+export { createSmokeScenarios } from './utils';
+
+// Fixtures
+export type { MountFn, MountTestArgs } from './fixtures';
+export { mountFixture, TEST_WRAPPER_CLASS } from './fixtures';