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

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

@@ -0,0 +1,256 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {ActionsPanel} from '../ActionsPanel';
+import type {ActionsPanelProps} from '../types';
+
+import {TestActionsPanelWithNote} from './helpersPlaywright';
+
+test.describe('ActionsPanel', {tag: '@ActionsPanel'}, () => {
+    const noop = () => {
+        // nothing
+    };
+
+    const actionsWithNoteAndGroups: ActionsPanelProps['actions'] = [
+        {
+            id: 'action_1',
+            button: {
+                props: {
+                    children: 'Action 1',
+                    onClick: noop,
+                    view: 'normal-contrast',
+                },
+            },
+            dropdown: {
+                item: {
+                    action: noop,
+                    text: 'Action 1',
+                },
+                group: '1',
+            },
+        },
+        {
+            id: 'action_2',
+            button: {
+                props: {
+                    children: 'Action 2',
+                    onClick: noop,
+                },
+            },
+            dropdown: {
+                item: {
+                    action: noop,
+                    text: 'Action 2',
+                },
+                group: '1',
+            },
+        },
+        {
+            id: 'action_3',
+            button: {
+                props: {
+                    children: 'Action 3',
+                    onClick: noop,
+                },
+            },
+            dropdown: {
+                item: {
+                    action: noop,
+                    text: 'Action 3',
+                },
+                group: '2',
+            },
+        },
+        {
+            id: 'action_4',
+            button: {
+                props: {
+                    children: 'Action 4',
+                    onClick: noop,
+                },
+            },
+            dropdown: {
+                item: {
+                    action: noop,
+                    text: 'Action 4',
+                },
+                group: '2',
+            },
+        },
+    ];
+
+    const collapsedActionsWithNoteAndGroups = actionsWithNoteAndGroups.map((item) => {
+        return {
+            ...item,
+            collapsed: true,
+        };
+    });
+
+    const defaultProps: ActionsPanelProps = {
+        actions: actionsWithNoteAndGroups,
+    };
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ActionsPanelProps>(defaultProps, {
+            maxRowActions: [2],
+            onClose: [['closable', noop]],
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div
+                            style={{
+                                width: 600,
+                            }}
+                        >
+                            <div>
+                                <ActionsPanel {...props} />
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with note', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ActionsPanelProps>(defaultProps, {
+            maxRowActions: [2],
+            onClose: [['closable', noop]],
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div
+                            style={{
+                                width: 600,
+                            }}
+                        >
+                            <div>
+                                <TestActionsPanelWithNote {...props} />
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('group', async ({mount, page, expectScreenshot}) => {
+        const root = await mount(
+            <div
+                style={{
+                    width: 600,
+                    minHeight: 500,
+                }}
+            >
+                <TestActionsPanelWithNote actions={collapsedActionsWithNoteAndGroups} />
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+
+        await root.getByRole('button').click();
+        await expect(page.locator('[role="menu"]')).toBeVisible({
+            timeout: 3000,
+        });
+
+        await expectScreenshot({
+            themes: ['light'],
+            nameSuffix: 'opened',
+        });
+    });
+
+    smokeTest('with submenu', async ({mount, page, expectScreenshot}) => {
+        const actionsSubmenu: ActionsPanelProps['actions'] = [
+            {
+                id: 'button-with-sub-menu',
+                button: {
+                    props: {
+                        children: 'Sub-menu',
+                        view: 'outlined-contrast',
+                        onClick: noop,
+                        qa: 'sub-menu-trigger',
+                    },
+                },
+                dropdown: {
+                    item: {
+                        text: 'Sub-menu',
+                        items: [
+                            {
+                                action: noop,
+                                text: 'Edit',
+                            },
+                            {
+                                action: noop,
+                                text: 'Delete',
+                                theme: 'danger',
+                            },
+                        ],
+                    },
+                },
+            },
+            {
+                id: 'nested-menu',
+                collapsed: true,
+                button: {
+                    props: {
+                        children: 'Nested',
+                        onClick: noop,
+                        qa: 'nested-menu-trigger',
+                    },
+                },
+                dropdown: {
+                    item: {
+                        action: noop,
+                        text: 'Action 3',
+                    },
+                    group: '2',
+                },
+            },
+        ];
+
+        const root = await mount(
+            <div
+                style={{
+                    width: 600,
+                    minHeight: 500,
+                }}
+            >
+                <TestActionsPanelWithNote actions={actionsSubmenu} />
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+
+        await root.getByTestId('sub-menu-trigger').click();
+        await expect(page.locator('[role="menu"]')).toBeVisible({
+            timeout: 3000,
+        });
+
+        await expectScreenshot({
+            themes: ['light'],
+            nameSuffix: 'opened submenu',
+        });
+    });
+});

src/components/ActionsPanel/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,6 @@
+import {ActionsPanel} from '../ActionsPanel';
+import type {ActionsPanelProps} from '../types';
+
+export const TestActionsPanelWithNote = (props: ActionsPanelProps) => {
+    return <ActionsPanel renderNote={() => 'note'} {...props} />;
+};

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

@@ -0,0 +1,69 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {DefinitionListProps} from '../types';
+
+import {DefinitionListStories} from './stories';
+
+test.describe('DefinitionList', {tag: '@DefinitionList'}, () => {
+    test('render story <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<DefinitionListStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    createSmokeScenarios<Omit<DefinitionListProps, 'children'>>(
+        {},
+        {
+            direction: ['vertical', 'horizontal'],
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, expectScreenshot}) => {
+            await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <DefinitionListStories.Default {...props} />
+                </div>,
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+
+    createSmokeScenarios<Omit<DefinitionListProps, 'children'>>(
+        {
+            responsive: true,
+        },
+        {
+            nameMaxWidth: [100],
+            contentMaxWidth: [100],
+        },
+        {
+            scenarioName: 'responsive',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const size = page.viewportSize();
+            if (size) {
+                await page.setViewportSize({
+                    width: 1000,
+                    height: size.height,
+                });
+            }
+
+            await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <DefinitionListStories.Default {...props} />
+                </div>,
+                {width: 'auto'},
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/DefinitionList/__tests__/stories.ts

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as CSFStories from '../__stories__/DefinitionList.stories';
+
+export const DefinitionListStories = composeStories(CSFStories);

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

@@ -0,0 +1,52 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {HelpMarkProps} from '../HelpMark';
+import {HelpMark} from '../HelpMark';
+
+import {placementCases} from './cases';
+import {HelpMarkStories} from './stories';
+
+test.describe('HelpMark', {tag: '@HelpMark'}, () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<HelpMarkStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    createSmokeScenarios<HelpMarkProps>(
+        {},
+        {
+            placement: placementCases,
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const root = await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <div style={{padding: 100}}>
+                        <HelpMark
+                            qa="popover"
+                            buttonProps={{
+                                // @ts-expect-error Object literal may only specify known properties, and ''data-qa'' does not exist in type 'ButtonHTMLAttributes<HTMLButtonElement>'
+                                'data-qa': 'trigger',
+                            }}
+                            {...props}
+                        >
+                            Test content
+                        </HelpMark>
+                    </div>
+                </div>,
+            );
+
+            await root.getByTestId('trigger').hover();
+            await expect(page.getByTestId('popover-tooltip')).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});