test(Toaster): add smoke visual tests

src/components/Toaster/__tests__/Toast.visual.test.tsx

@@ -1,9 +1,13 @@
 import type * as React from 'react';
 
-import {test} from '~playwright/core';
+import {smokeTest, test} from '~playwright/core';
 
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
 import type {Toast} from '../Toast/Toast';
+import type {ToastProps} from '../types';
 
+import {actionsCases, isClosableCases, themeCases, titleCases} from './cases';
+import {TestToast, TestToastWithIcon} from './helpers';
 import {ToastStories} from './helpersPlaywright';
 
 const wrapperOptions = {
@@ -84,4 +88,68 @@ test.describe('Toast', {tag: '@Toaster'}, () => {
 
         await expectScreenshot();
     });
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ToastProps>(
+            {
+                name: 'toast',
+                content: <div>toast content</div>,
+            },
+            {
+                title: titleCases,
+                theme: themeCases,
+                actions: actionsCases,
+                isClosable: isClosableCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestToast {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with custom icon', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<ToastProps>(
+            {
+                name: 'toast',
+                content: <div>toast content</div>,
+            },
+            {
+                title: titleCases,
+                theme: themeCases,
+                actions: actionsCases,
+                isClosable: isClosableCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestToastWithIcon {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
 });

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

@@ -0,0 +1,29 @@
+import {smokeTest, test} from '~playwright/core';
+
+import type {ToastProps} from '../types';
+
+import {ToasterQA} from './constants';
+import {TestToaster} from './helpers';
+
+test.describe('Toaster', {tag: '@Toaster'}, () => {
+    smokeTest('', async ({mount, page, expectScreenshot}) => {
+        await page.setViewportSize({width: 500, height: 500});
+
+        const toastProps: ToastProps = {
+            name: 'toast',
+            content: <div>toast content</div>,
+        };
+
+        const root = await mount(<TestToaster toastProps={toastProps} />);
+
+        await root.locator(`button[data-qa="${ToasterQA.trigger}"]`).click();
+
+        // wait show toast & end animations
+        await page.waitForTimeout(2000);
+
+        await expectScreenshot({
+            themes: ['light'],
+            component: page.locator('body'),
+        });
+    });
+});

src/components/Toaster/__tests__/cases.tsx

@@ -0,0 +1,37 @@
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
+import type {ToastProps} from '../types';
+
+export const titleCases: Cases<ToastProps['title']> = ['Title'];
+export const themeCases: Cases<ToastProps['theme']> = [
+    'normal',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'utility',
+];
+export const isClosableCases: Cases<ToastProps['isClosable']> = [true];
+export const actionsCases: CasesWithName<ToastProps['actions']> = [
+    [
+        'one action',
+        [
+            {
+                onClick: () => {},
+                label: 'one action',
+            },
+        ],
+    ],
+    [
+        'two actions',
+        [
+            {
+                onClick: () => {},
+                label: 'one action',
+            },
+            {
+                onClick: () => {},
+                label: 'two action',
+            },
+        ],
+    ],
+];

src/components/Toaster/__tests__/constants.ts

@@ -0,0 +1,3 @@
+export const ToasterQA = {
+    trigger: 'trigger',
+};

src/components/Toaster/__tests__/helpers.tsx

@@ -0,0 +1,56 @@
+import {TrashBin} from '@gravity-ui/icons';
+
+import {Icon} from '../../Icon';
+import {ToasterProvider} from '../Provider/ToasterProvider';
+import {Toast} from '../Toast/Toast';
+import {ToasterComponent} from '../ToasterComponent/ToasterComponent';
+import {useToaster} from '../hooks/useToaster';
+import type {ToastProps} from '../types';
+
+import {ToasterQA} from './constants';
+
+const TestToasterTrigger = (props: {toastProps: ToastProps}) => {
+    const toaster = useToaster();
+
+    const handleClick = () => {
+        toaster.add(props.toastProps);
+    };
+
+    return (
+        <button data-qa={ToasterQA.trigger} onClick={handleClick}>
+            trigger
+        </button>
+    );
+};
+
+export const TestToaster = (props: {toastProps: ToastProps}) => {
+    return (
+        <ToasterProvider>
+            <TestToasterTrigger toastProps={props.toastProps} />
+            <ToasterComponent hasPortal={false} />
+        </ToasterProvider>
+    );
+};
+
+export const TestToast = (props: ToastProps) => {
+    return (
+        <Toast
+            {...props}
+            removeCallback={() => {
+                // noop
+            }}
+        />
+    );
+};
+
+export const TestToastWithIcon = (props: ToastProps) => {
+    return (
+        <Toast
+            {...props}
+            removeCallback={() => {
+                // noop
+            }}
+            renderIcon={() => <Icon data={TrashBin} />}
+        />
+    );
+};