test(Menu): add smoke visual tests (#1811)

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

@@ -0,0 +1,120 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {MenuItemProps, MenuProps} from '../Menu';
+import type {MenuGroupProps} from '../MenuGroup';
+
+import {activeCases, disabledCases, selectedCases, sizeCases, themeCases} from './cases';
+import type {
+    TestMenuGroupProps,
+    TestMenuItemProps,
+    TestMenuItemWithIconsProps,
+    TestMenuProps,
+} from './helpers';
+import {TestMenu, TestMenuGroup, TestMenuItem, TestMenuItemWithIcons} from './helpers';
+
+test.describe('Menu', {tag: '@Menu'}, () => {
+    const defaultMenuProps: MenuProps = {};
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestMenuProps>(defaultMenuProps, {
+            size: sizeCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestMenu {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+
+    const defaultMenuGroupProps: MenuGroupProps = {
+        label: 'Group title',
+    };
+
+    smokeTest('menu group', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestMenuGroupProps>(defaultMenuGroupProps, {});
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestMenuGroup {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+
+    const menuItemQa = 'menu-item';
+
+    const defaultMenuItemProps: MenuItemProps = {
+        qa: menuItemQa,
+        children: 'Menu item content',
+    };
+
+    smokeTest('menu item', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestMenuItemProps>(defaultMenuItemProps, {
+            disabled: disabledCases,
+            active: activeCases,
+            selected: selectedCases,
+            theme: themeCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestMenuItem {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+
+    smokeTest('menu item with icons', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TestMenuItemWithIconsProps>(
+            defaultMenuItemProps,
+            {
+                disabled: disabledCases,
+                active: activeCases,
+                selected: selectedCases,
+                theme: themeCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestMenuItemWithIcons {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+});

src/components/Menu/__tests__/cases.tsx

@@ -0,0 +1,9 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {MenuItemProps, MenuProps} from '../Menu';
+
+export const sizeCases: Cases<MenuProps['size']> = ['s', 'm', 'l', 'xl'];
+
+export const disabledCases: Cases<MenuItemProps['disabled']> = [true];
+export const activeCases: Cases<MenuItemProps['active']> = [true];
+export const selectedCases: Cases<MenuItemProps['selected']> = [true];
+export const themeCases: Cases<MenuItemProps['theme']> = ['normal', 'danger'];

src/components/Menu/__tests__/helpers.tsx

@@ -0,0 +1,63 @@
+import {CircleExclamationFill, Gear} from '@gravity-ui/icons';
+
+import {Icon} from '../../Icon';
+import {Menu} from '../Menu';
+import type {MenuGroupProps, MenuItemProps, MenuProps} from '../Menu';
+
+export type TestMenuProps = Partial<MenuProps>;
+
+export const TestMenu = (props: TestMenuProps) => {
+    return (
+        <Menu {...props}>
+            <Menu.Item onClick={() => {}}>First</Menu.Item>
+            <Menu.Item onClick={() => {}} disabled>
+                Second (unavailable)
+            </Menu.Item>
+        </Menu>
+    );
+};
+
+export type TestMenuGroupProps = Partial<MenuGroupProps>;
+
+export const TestMenuGroup = (props: TestMenuGroupProps) => {
+    return (
+        <Menu>
+            <Menu.Item onClick={() => {}}>Test item before group</Menu.Item>
+            <Menu.Group {...props}>
+                <Menu.Item onClick={() => {}}>First</Menu.Item>
+                <Menu.Item onClick={() => {}} disabled>
+                    Second (unavailable)
+                </Menu.Item>
+            </Menu.Group>
+            <Menu.Item onClick={() => {}}>Test item after group</Menu.Item>
+        </Menu>
+    );
+};
+
+export type TestMenuItemProps = Partial<MenuItemProps>;
+
+export const TestMenuItem = (props: TestMenuItemProps) => {
+    return (
+        <Menu>
+            <Menu.Item onClick={() => {}}>...</Menu.Item>
+            <Menu.Item {...props} />
+            <Menu.Item onClick={() => {}}>...</Menu.Item>
+        </Menu>
+    );
+};
+
+export type TestMenuItemWithIconsProps = Partial<MenuItemProps>;
+
+export const TestMenuItemWithIcons = (props: TestMenuItemWithIconsProps) => {
+    return (
+        <Menu>
+            <Menu.Item onClick={() => {}}>...</Menu.Item>
+            <Menu.Item
+                iconStart={<Icon data={Gear} size={16} />}
+                iconEnd={<Icon data={CircleExclamationFill} size={16} />}
+                {...props}
+            />
+            <Menu.Item onClick={() => {}}>...</Menu.Item>
+        </Menu>
+    );
+};