test(Dialog): add smoke visual tests

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

@@ -0,0 +1,114 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {Dialog} from '../Dialog';
+import type {DialogProps} from '../Dialog';
+import type {DialogBodyProps} from '../DialogBody/DialogBody';
+import type {DialogFooterProps} from '../DialogFooter/DialogFooter';
+import type {DialogHeaderProps} from '../DialogHeader/DialogHeader';
+
+import {
+    bodyContentCases,
+    bodyHasBorderCases,
+    footerLoadingCases,
+    footerPresetCases,
+    footerShowErrorCases,
+    footerTextButtonApplyCases,
+    footerTextButtonCancelCases,
+    headerCaptionCases,
+    headerInsertAfterCases,
+    headerInsertBeforeCases,
+    sizeCases,
+} from './cases';
+
+interface AllDialogProps {
+    size?: DialogProps['size'];
+
+    headerCaption?: DialogHeaderProps['caption'];
+    headerInsertBefore?: DialogHeaderProps['insertBefore'];
+    headerInsertAfter?: DialogHeaderProps['insertAfter'];
+
+    bodyHasBorder?: DialogBodyProps['hasBorders'];
+    bodyContent?: DialogBodyProps['children'];
+
+    footerShowError?: DialogFooterProps['showError'];
+    footerPreset?: DialogFooterProps['preset'];
+    footerLoading?: DialogFooterProps['loading'];
+    footerTextButtonCancel?: DialogFooterProps['textButtonCancel'];
+    footerTextButtonApply?: DialogFooterProps['textButtonApply'];
+}
+
+test.describe('Dialog', {tag: '@Dialog'}, () => {
+    createSmokeScenarios(
+        {
+            size: 's',
+
+            headerCaption: 'Dialog.Header',
+
+            bodyContent: 'Dialog.Body',
+
+            footerTextButtonApply: 'apply',
+            footerTextButtonCancel: 'cancel',
+        } as AllDialogProps,
+        {
+            size: sizeCases,
+
+            headerCaption: headerCaptionCases,
+            headerInsertBefore: headerInsertBeforeCases,
+            headerInsertAfter: headerInsertAfterCases,
+
+            bodyHasBorder: bodyHasBorderCases,
+            bodyContent: bodyContentCases,
+
+            footerShowError: footerShowErrorCases,
+            footerPreset: footerPresetCases,
+            footerLoading: footerLoadingCases,
+            footerTextButtonCancel: footerTextButtonCancelCases,
+            footerTextButtonApply: footerTextButtonApplyCases,
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({page, mount, expectScreenshot}) => {
+            await page.setViewportSize({width: 1000, height: 600});
+
+            const {
+                size,
+                headerCaption,
+                headerInsertBefore,
+                headerInsertAfter,
+                bodyHasBorder,
+                bodyContent,
+                footerLoading,
+                footerPreset,
+                footerShowError,
+                footerTextButtonCancel,
+                footerTextButtonApply,
+            } = props;
+
+            await mount(
+                <Dialog size={size} onClose={() => {}} open onEnterKeyDown={() => {}}>
+                    {(headerCaption || headerInsertBefore || headerInsertAfter) && (
+                        <Dialog.Header
+                            caption={headerCaption}
+                            insertAfter={headerInsertAfter}
+                            insertBefore={headerInsertBefore}
+                        />
+                    )}
+                    <Dialog.Body hasBorders={bodyHasBorder}>{bodyContent}</Dialog.Body>
+                    <Dialog.Footer
+                        loading={footerLoading}
+                        preset={footerPreset}
+                        showError={footerShowError}
+                        textButtonApply={footerTextButtonApply}
+                        textButtonCancel={footerTextButtonCancel}
+                        errorText="Error text"
+                    />
+                </Dialog>,
+            );
+
+            await expectScreenshot({
+                component: page,
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/Dialog/__tests__/cases.tsx

@@ -0,0 +1,54 @@
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
+import type {DialogProps} from '../Dialog';
+import type {DialogBodyProps} from '../DialogBody/DialogBody';
+import type {DialogFooterProps} from '../DialogFooter/DialogFooter';
+import type {DialogHeaderProps} from '../DialogHeader/DialogHeader';
+
+export const sizeCases: Cases<DialogProps['size']> = ['s', 'm', 'l'];
+
+/* eslint-disable react/jsx-key */
+
+export const headerCaptionCases: CasesWithName<DialogHeaderProps['caption']> = [
+    [
+        'long',
+        <div>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+            has been the industrys standard dummy text ever since the 1500s, when an unknown printer
+            took a galley of type and scrambled it to make a type specimen book.{' '}
+        </div>,
+    ],
+];
+export const headerInsertBeforeCases: CasesWithName<DialogHeaderProps['insertBefore']> = [
+    ['true', <div>insertBefore</div>],
+];
+export const headerInsertAfterCases: CasesWithName<DialogHeaderProps['insertAfter']> = [
+    ['true', <div>insertAfter</div>],
+];
+
+export const bodyHasBorderCases: Cases<DialogBodyProps['hasBorders']> = [true];
+export const bodyContentCases: CasesWithName<DialogBodyProps['children']> = [
+    [
+        'long',
+        <div>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+            has been the industrys standard dummy text ever since the 1500s, when an unknown printer
+            took a galley of type and scrambled it to make a type specimen book.{' '}
+        </div>,
+    ],
+];
+
+export const footerShowErrorCases: Cases<DialogFooterProps['showError']> = [true];
+export const footerPresetCases: Cases<DialogFooterProps['preset']> = [
+    'default',
+    'success',
+    'danger',
+];
+export const footerLoadingCases: Cases<DialogFooterProps['loading']> = [true];
+export const footerTextButtonCancelCases: Cases<DialogFooterProps['textButtonCancel']> = [
+    'Custom button cancel',
+];
+export const footerTextButtonApplyCases: Cases<DialogFooterProps['textButtonApply']> = [
+    'Custom button apply',
+];
+
+/* eslint-enabled react/jsx-key */