test(Slider): update screenshots

playwright/core/mountFixture.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
 
-import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
-import type {MountOptions} from '@playwright/experimental-ct-react';
-
 import type {MountFixture, PlaywrightFixture} from './types';
 
 export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {
-    const mount = async (
-        component: JSX.Element,
-        options?: MountOptions<JsonObject> | undefined,
-    ) => {
+    const mount: MountFixture = async (component, options) => {
+        const {wrapDivStyles, ...restOptions} = options || {};
+
         return await baseMount(
             <div
-                style={{padding: 20, width: 'fit-content', height: 'fit-content'}}
+                style={{padding: 20, width: 'fit-content', height: 'fit-content', ...wrapDivStyles}}
                 className="playwright-wrapper-test"
             >
                 {component}
             </div>,
-            options,
+            restOptions,
         );
     };
 

playwright/core/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
 import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {
@@ -13,7 +15,7 @@ import type {
 interface ComponentFixtures {
     mount<HooksConfig extends JsonObject>(
         component: JSX.Element,
-        options?: MountOptions<HooksConfig>,
+        options?: MountOptions<HooksConfig> & {wrapDivStyles?: React.CSSProperties},
     ): Promise<MountResult>;
 }
 

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

@@ -4,87 +4,93 @@ import {test} from '~playwright/core';
 
 import {SliderStories} from './helpersPlaywright';
 
+const mountOptions = {
+    wrapDivStyles: {
+        minWidth: 300,
+    },
+};
+
 test.describe('Slider', () => {
     test('render story: <Default>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.Default />);
+        await mount(<SliderStories.Default />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <DefaultRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.DefaultRange />);
+        await mount(<SliderStories.DefaultRange />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <Size>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.Size />);
+        await mount(<SliderStories.Size />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <SizeRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.SizeRange />);
+        await mount(<SliderStories.SizeRange />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <Disabled>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.Disabled />);
+        await mount(<SliderStories.Disabled />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <DisabledRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.DisabledRange />);
+        await mount(<SliderStories.DisabledRange />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <Error>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.Error />);
+        await mount(<SliderStories.Error />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <ErrorRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.ErrorRange />);
+        await mount(<SliderStories.ErrorRange />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <Tooltip>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.Tooltip />);
+        await mount(<SliderStories.Tooltip />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <TooltipRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.TooltipRange />);
+        await mount(<SliderStories.TooltipRange />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <MarksCount>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.MarksCount />);
+        await mount(<SliderStories.MarksCount />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <MarksCountRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.MarksCountRange />);
+        await mount(<SliderStories.MarksCountRange />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <AvailableValues>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.AvailableValues />);
+        await mount(<SliderStories.AvailableValues />, mountOptions);
 
         await expectScreenshot();
     });
 
     test('render story: <AvailableValuesRange>', async ({mount, expectScreenshot}) => {
-        await mount(<SliderStories.AvailableValuesRange />);
+        await mount(<SliderStories.AvailableValuesRange />, mountOptions);
 
         await expectScreenshot();
     });