Merge branch 'main' into add-smoke-tests/Modal

playwright/core/mountFixture.tsx

@@ -10,6 +10,7 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
                     boxSizing: options?.width ? 'content-box' : undefined,
                     width: options?.width ? options.width : 'fit-content',
                     height: 'fit-content',
+                    ...options?.rootStyle,
                 }}
                 className="playwright-wrapper-test"
             >

playwright/core/types.ts

@@ -15,7 +15,10 @@ import type {
 interface ComponentFixtures {
     mount<HooksConfig>(
         component: React.JSX.Element,
-        options?: MountOptions<HooksConfig> & {width?: number | string},
+        options?: MountOptions<HooksConfig> & {
+            width?: number | string;
+            rootStyle?: React.CSSProperties;
+        },
     ): Promise<MountResult>;
 }
 

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

@@ -0,0 +1,66 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {ActionTooltipProps} from '../ActionTooltip';
+import {ActionTooltip} from '../ActionTooltip';
+
+import {placementCases} from './cases';
+
+test.describe('ActionTooltip', {tag: '@ActionTooltip'}, () => {
+    const defaultProps: ActionTooltipProps = {
+        title: 'Title',
+        hotkey: 'mod+a',
+        description: 'Description',
+        children: <div>trigger</div>,
+    };
+
+    const smokeScenarios = createSmokeScenarios<ActionTooltipProps>(defaultProps, {
+        placement: placementCases,
+    });
+
+    smokeScenarios.forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const root = await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <div
+                        style={{
+                            width: '400px',
+                            height: '400px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <div>
+                            <ActionTooltip {...props}>
+                                <div
+                                    data-qa="trigger"
+                                    style={{
+                                        width: '200px',
+                                        height: '200px',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        border: '1px tomato dotted',
+                                    }}
+                                >
+                                    trigger block
+                                </div>
+                            </ActionTooltip>
+                        </div>
+                    </div>
+                </div>,
+            );
+
+            await root.getByTestId('trigger').hover();
+            await expect(page.locator("[role='tooltip']")).toBeVisible({timeout: 1000});
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/ActionTooltip/__tests__/cases.tsx

@@ -0,0 +1,20 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {ActionTooltipProps} from '../ActionTooltip';
+
+export const placementCases: Cases<ActionTooltipProps['placement']> = [
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'bottom',
+    'right',
+    'left',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'right-start',
+    'right-end',
+    'left-start',
+    'left-end',
+];

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

@@ -1,12 +1,15 @@
-import {expect} from '@playwright/test';
-
-import {test} from '~playwright/core';
+import {expect, smokeTest, test} from '~playwright/core';
 
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {SheetProps} from '../Sheet';
 import {DEFAULT_SHEET_QA} from '../__stories__/constants';
 
+import {hideTopBarCases, titleCases} from './cases';
+import {QASheet} from './constants';
+import {TestSheet} from './helpers';
 import {SheetStories} from './helpersPlaywright';
 
-test.describe('Sheet', () => {
+test.describe('Sheet', {tag: '@Sheet'}, () => {
     test('render story: <Default>', async ({page, mount, expectScreenshot}) => {
         await mount(<SheetStories.Default />);
 
@@ -21,4 +24,31 @@ test.describe('Sheet', () => {
             component: sheetLocator,
         });
     });
+
+    createSmokeScenarios<Partial<Omit<SheetProps, 'visible' | 'onClose'>>>(
+        {},
+        {
+            hideTopBar: hideTopBarCases,
+            title: titleCases,
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            await page.setViewportSize({width: 500, height: 500});
+
+            const root = await mount(<TestSheet {...props} />, {
+                rootStyle: {
+                    padding: 0,
+                    width: '100%',
+                    minHeight: '500px',
+                },
+            });
+
+            await root.locator('button').click();
+            await expect(page.locator(`[data-qa='${QASheet.content}']`)).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
 });

src/components/Sheet/__tests__/cases.tsx

@@ -0,0 +1,5 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {SheetProps} from '../Sheet';
+
+export const hideTopBarCases: Cases<SheetProps['hideTopBar']> = [true];
+export const titleCases: Cases<SheetProps['title']> = ['Title'];

src/components/Sheet/__tests__/constants.ts

@@ -0,0 +1,3 @@
+export const QASheet = {
+    content: 'content',
+};

src/components/Sheet/__tests__/helpers.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import type {SheetProps} from '../Sheet';
+import {Sheet} from '../Sheet';
+
+import {QASheet} from './constants';
+
+export const TestSheet = (props: Partial<Omit<SheetProps, 'visible' | 'onClose'>>) => {
+    const [visible, setVisible] = React.useState(false);
+
+    return (
+        <div>
+            <button onClick={() => setVisible(true)}>Show modal</button>
+            <Sheet
+                {...props}
+                visible={visible}
+                onClose={() => setVisible(false)}
+                qa={QASheet.content}
+            >
+                <div
+                    style={{
+                        minHeight: 100,
+                        border: '1px solid tomato',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    Sheet content
+                </div>
+            </Sheet>
+        </div>
+    );
+};

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

@@ -0,0 +1,161 @@
+import type * as React from 'react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {Slider} from '../Slider';
+import type {SliderProps} from '../types';
+
+import {
+    availableValuesCases,
+    disabledCases,
+    hasTooltipCases,
+    marksCountCases,
+    sizeCases,
+    stepCases,
+    validationStateCases,
+} from './cases';
+
+test.describe('Slider', {tag: '@Slider'}, () => {
+    const defaultWrapStyle: React.CSSProperties = {
+        width: 300,
+        height: 50,
+        paddingBottom: 20,
+    };
+
+    const defaultProps: SliderProps = {
+        value: 40,
+        min: 0,
+        max: 100,
+        onUpdate: () => {},
+    };
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(defaultProps, {
+            size: sizeCases,
+            disabled: disabledCases,
+            validationState: validationStateCases,
+            hasTooltip: hasTooltipCases,
+            marksCount: marksCountCases,
+            step: stepCases,
+            availableValues: availableValuesCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={defaultWrapStyle}>
+                            <Slider {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with error', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<SliderProps>(
+            {
+                ...defaultProps,
+                validationState: 'invalid',
+                errorMessage: 'Error message',
+            },
+            {
+                hasTooltip: hasTooltipCases,
+                marksCount: marksCountCases,
+                step: stepCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={defaultWrapStyle}>
+                            <Slider {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    const defaultRangeProps: SliderProps = {
+        value: [20, 40],
+        min: 0,
+        max: 100,
+        onUpdate: () => {},
+    };
+
+    smokeTest('range value', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<SliderProps>(defaultRangeProps, {
+            size: sizeCases,
+            disabled: disabledCases,
+            validationState: validationStateCases,
+            hasTooltip: hasTooltipCases,
+            marksCount: marksCountCases,
+            step: stepCases,
+            availableValues: availableValuesCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={defaultWrapStyle}>
+                            <Slider {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('range value with error', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<SliderProps>(
+            {
+                ...defaultRangeProps,
+                validationState: 'invalid',
+                errorMessage: 'Error message',
+            },
+            {
+                hasTooltip: hasTooltipCases,
+                marksCount: marksCountCases,
+                step: stepCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div style={defaultWrapStyle}>
+                            <Slider {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/Slider/__tests__/cases.tsx

@@ -0,0 +1,12 @@
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
+import type {SliderProps} from '../types';
+
+export const sizeCases: Cases<SliderProps['size']> = ['s', 'm', 'l', 'xl'];
+export const disabledCases: Cases<SliderProps['disabled']> = [true];
+export const validationStateCases: Cases<SliderProps['validationState']> = ['invalid'];
+export const hasTooltipCases: Cases<SliderProps['hasTooltip']> = [true];
+export const marksCountCases: Cases<SliderProps['marksCount']> = [4];
+export const stepCases: Cases<SliderProps['step']> = [5];
+export const availableValuesCases: CasesWithName<SliderProps['availableValues']> = [
+    ['10-20-50-55-65-80', [10, 20, 50, 55, 65, 80]],
+];