test(Slider): CSF 3 & visual testing

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/__stories__/Slider.stories.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
+import {action} from '@storybook/addon-actions';
+import {useArgs} from '@storybook/preview-api';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Slider} from '../Slider';
-
-import {SliderShowcase} from './SliderShowcase';
+import type {SliderProps, SliderValue} from '../types';
 
 type Story = StoryObj<typeof Slider>;
 
@@ -14,6 +17,21 @@ export default {
     args: {
         'aria-label': 'Example slider field',
     },
+    decorators: [
+        function useTextValue(Story, ctx) {
+            const [, setArgs] = useArgs<typeof ctx.args>();
+
+            const handleUpdate = (value: SliderValue) => {
+                if (ctx.args.value !== undefined) {
+                    setArgs({
+                        value,
+                    });
+                }
+            };
+
+            return <Story args={{...ctx.args, onUpdate: handleUpdate}} />;
+        },
+    ],
     parameters: {
         a11y: {
             element: '#storybook-root',
@@ -29,10 +47,135 @@ export default {
     },
 } as Meta<typeof Slider>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        value: 20,
+        min: 0,
+        max: 100,
+        step: 1,
+        onFocus: action('onFocus'),
+        onBlur: action('onBlur'),
+        onUpdate: action('onUpdate'),
+        onUpdateComplete: action('onUpdateComplete'),
+    },
+};
 
-export const Showcase: Story = {
-    render: (args) => {
-        return <SliderShowcase {...args} />;
+export const DefaultRange: Story = {
+    args: {
+        ...Default.args,
+        value: [20, 80],
+    },
+    name: 'Default (for range value)',
+};
+
+const sizeCases: Array<NonNullable<SliderProps['size']>> = ['s', 'm', 'l', 'xl'];
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase isVertical>
+            {sizeCases.map((size, index) => (
+                <ShowcaseItem title={size} key={index}>
+                    <Slider {...args} size={size} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const SizeRange: Story = {
+    render: (args) => (
+        <Showcase isVertical>
+            {sizeCases.map((size, index) => (
+                <ShowcaseItem title={size} key={index}>
+                    <Slider {...args} size={size} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...DefaultRange.args,
+    },
+    name: 'Size (for range value)',
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+};
+
+export const DisabledRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        disabled: true,
+    },
+    name: 'Disabled (for range value)',
+};
+
+export const Error: Story = {
+    args: {
+        ...Default.args,
+        errorMessage: 'Error message',
+        validationState: 'invalid',
+    },
+};
+
+export const ErrorRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        errorMessage: 'Error message',
+        validationState: 'invalid',
+    },
+    name: 'Error (for range value)',
+};
+
+export const Tooltip: Story = {
+    args: {
+        ...Default.args,
+        hasTooltip: true,
+    },
+};
+
+export const TooltipRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        hasTooltip: true,
+    },
+    name: 'Tooltip (for range value)',
+};
+
+export const MarksCount: Story = {
+    args: {
+        ...Default.args,
+        marksCount: 11,
+    },
+    name: 'Marks count',
+};
+
+export const MarksCountRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        marksCount: 11,
+    },
+    name: 'Marks count (for range value)',
+};
+
+export const AvailableValues: Story = {
+    args: {
+        ...Default.args,
+        availableValues: [10, 20, 50, 55, 65, 80],
+    },
+    name: 'Available values',
+};
+
+export const AvailableValuesRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        availableValues: [10, 20, 50, 55, 65, 80],
     },
+    name: 'Available values (for range value)',
 };