test(Bradcrumbs): add smoke visual tests (#1819)

src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.visual.test.tsx

@@ -0,0 +1,108 @@
+import {expect, smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios';
+import type {BreadcrumbsProps} from '../Breadcrumbs';
+
+import {disabledCases, popupPlacementCases} from './cases';
+import {
+    TestBreadcrumbsWithCustomIcons,
+    TestBreadcrumbsWithCustomSeparator,
+    TestBreadcrumbsWithLinkItems,
+    TestBreadcrumbsWithTextItems,
+} from './helpersPlaywright';
+
+test.describe('Breadcrumbs', {tag: '@Breadcrumbs'}, () => {
+    const defaultProps: Omit<BreadcrumbsProps, 'children'> = {};
+
+    createSmokeScenarios(
+        defaultProps,
+        {
+            popupPlacement: popupPlacementCases,
+        },
+        {
+            scenarioName: 'with text items',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const root = await mount(
+                <div style={{width: '200px', padding: '100px'}}>
+                    <TestBreadcrumbsWithTextItems {...props} />
+                </div>,
+            );
+
+            await root.locator('button').click();
+
+            await expect(page.locator(`ul[role="menu"]`)).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+
+    createSmokeScenarios(
+        defaultProps,
+        {
+            disabled: disabledCases,
+        },
+        {
+            scenarioName: 'with link items',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, expectScreenshot}) => {
+            await mount(
+                <div style={{width: '200px'}}>
+                    <TestBreadcrumbsWithLinkItems {...props} />
+                </div>,
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+
+    createSmokeScenarios(
+        defaultProps,
+        {
+            disabled: disabledCases,
+        },
+        {
+            scenarioName: 'with custom icons',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, expectScreenshot}) => {
+            await mount(
+                <div style={{width: '400px'}}>
+                    <TestBreadcrumbsWithCustomIcons {...props} />
+                </div>,
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+
+    createSmokeScenarios(
+        defaultProps,
+        {
+            disabled: disabledCases,
+        },
+        {
+            scenarioName: 'with custom separator',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, expectScreenshot}) => {
+            await mount(
+                <div style={{width: '400px'}}>
+                    <TestBreadcrumbsWithCustomSeparator {...props} />
+                </div>,
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/lab/Breadcrumbs/__tests__/cases.ts

@@ -0,0 +1,22 @@
+import type {Cases} from '../../../../stories/tests-factory/models';
+import type {BreadcrumbsProps} from '../Breadcrumbs';
+
+export const disabledCases: Cases<BreadcrumbsProps['disabled']> = [true];
+
+export const popupPlacementCases: Cases<BreadcrumbsProps['popupPlacement']> = [
+    'top',
+    'right',
+    'left',
+    'bottom',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'right-start',
+    'right-end',
+    'left-start',
+    'left-end',
+    'auto',
+    'auto-start',
+    'auto-end',
+];

src/components/lab/Breadcrumbs/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,76 @@
+import {ChevronRight, Flame, House, Rocket} from '@gravity-ui/icons';
+
+import {Box} from '../../../layout/Box/Box';
+import {Flex} from '../../../layout/Flex/Flex';
+import type {BreadcrumbsProps} from '../Breadcrumbs';
+import {Breadcrumbs} from '../Breadcrumbs';
+
+export const TestBreadcrumbsWithTextItems = (props: Omit<BreadcrumbsProps, 'children'>) => {
+    return (
+        <Breadcrumbs {...props}>
+            <Breadcrumbs.Item>Region</Breadcrumbs.Item>
+            <Breadcrumbs.Item>Country</Breadcrumbs.Item>
+            <Breadcrumbs.Item>City</Breadcrumbs.Item>
+            <Breadcrumbs.Item>District</Breadcrumbs.Item>
+            <Breadcrumbs.Item>Street</Breadcrumbs.Item>
+        </Breadcrumbs>
+    );
+};
+
+export const TestBreadcrumbsWithLinkItems = (props: Omit<BreadcrumbsProps, 'children'>) => {
+    return (
+        <Breadcrumbs {...props}>
+            <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="/components">Components</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="/components/uikit/breadcrumbs">Breadcrumbs</Breadcrumbs.Item>
+        </Breadcrumbs>
+    );
+};
+
+export const TestBreadcrumbsCollapsed = (props: Omit<BreadcrumbsProps, 'children'>) => {
+    return (
+        <Box overflow="hidden" width={200}>
+            <Breadcrumbs showRoot {...props}>
+                <Breadcrumbs.Item key="home">Home</Breadcrumbs.Item>
+                <Breadcrumbs.Item key="trendy">Trendy</Breadcrumbs.Item>
+                <Breadcrumbs.Item key="2020 assets">March 2020 Assets</Breadcrumbs.Item>
+                <Breadcrumbs.Item key="winter">Winter</Breadcrumbs.Item>
+                <Breadcrumbs.Item key="holiday">Holiday</Breadcrumbs.Item>
+            </Breadcrumbs>
+        </Box>
+    );
+};
+
+export const TestBreadcrumbsWithCustomSeparator = (props: Omit<BreadcrumbsProps, 'children'>) => {
+    return (
+        <Breadcrumbs separator={<ChevronRight />} {...props}>
+            <Breadcrumbs.Item>Region</Breadcrumbs.Item>
+            <Breadcrumbs.Item>Country</Breadcrumbs.Item>
+            <Breadcrumbs.Item>City</Breadcrumbs.Item>
+            <Breadcrumbs.Item>District</Breadcrumbs.Item>
+            <Breadcrumbs.Item>Street</Breadcrumbs.Item>
+        </Breadcrumbs>
+    );
+};
+
+export const TestBreadcrumbsWithCustomIcons = (props: Omit<BreadcrumbsProps, 'children'>) => {
+    return (
+        <Breadcrumbs {...props}>
+            <Breadcrumbs.Item>
+                <Flex alignItems="center" gap={1}>
+                    <House /> uikit
+                </Flex>
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item>
+                <Flex alignItems="center" gap={1}>
+                    <Flame /> components
+                </Flex>
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item>
+                <Flex alignItems="center" gap={1}>
+                    <Rocket style={{minWidth: 16}} /> Breadcrumbs
+                </Flex>
+            </Breadcrumbs.Item>
+        </Breadcrumbs>
+    );
+};