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

playwright/core/types.ts

@@ -3,6 +3,7 @@ import type * as React from 'react';
 import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {
     Locator,
+    Page,
     PageScreenshotOptions,
     PlaywrightTestArgs,
     PlaywrightTestOptions,
@@ -39,6 +40,6 @@ export interface ExpectScreenshotFixture {
 
 export interface CaptureScreenshotParams extends PageScreenshotOptions {
     nameSuffix?: string;
-    component?: Locator;
+    component?: Locator | Page;
     themes?: Array<'light' | 'dark'>;
 }

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

@@ -0,0 +1,66 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {ActionTooltipProps} from '../ActionTooltip';
+import {ActionTooltip} from '../ActionTooltip';
+
+import {placementCases} from './cases';
+
+test.describe('ActionTooltip', {tag: '@ActionTooltip'}, () => {
+    const defaultProps: ActionTooltipProps = {
+        title: 'Title',
+        hotkey: 'mod+a',
+        description: 'Description',
+        children: <div>trigger</div>,
+    };
+
+    const smokeScenarios = createSmokeScenarios<ActionTooltipProps>(defaultProps, {
+        placement: placementCases,
+    });
+
+    smokeScenarios.forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const root = await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <div
+                        style={{
+                            width: '400px',
+                            height: '400px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <div>
+                            <ActionTooltip {...props}>
+                                <div
+                                    data-qa="trigger"
+                                    style={{
+                                        width: '200px',
+                                        height: '200px',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        border: '1px tomato dotted',
+                                    }}
+                                >
+                                    trigger block
+                                </div>
+                            </ActionTooltip>
+                        </div>
+                    </div>
+                </div>,
+            );
+
+            await root.getByTestId('trigger').hover();
+            await expect(page.locator("[role='tooltip']")).toBeVisible({timeout: 1000});
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/ActionTooltip/__tests__/cases.tsx

@@ -0,0 +1,20 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {ActionTooltipProps} from '../ActionTooltip';
+
+export const placementCases: Cases<ActionTooltipProps['placement']> = [
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'bottom',
+    'right',
+    'left',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'right-start',
+    'right-end',
+    'left-start',
+    'left-end',
+];

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 */

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

@@ -0,0 +1,28 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {Modal} from '../Modal';
+
+import {ModalQa} from './constants';
+
+test.describe('Modal', {tag: '@Modal'}, () => {
+    smokeTest('', async ({mount, page, expectScreenshot}) => {
+        await page.setViewportSize({width: 500, height: 500});
+
+        await mount(
+            <div>
+                <div>page content</div>
+                <Modal open qa={ModalQa.content}>
+                    <div style={{padding: 10}}>Modal content</div>
+                </Modal>
+            </div>,
+        );
+
+        await expect(page.getByTestId(ModalQa.content)).toBeVisible();
+
+        await expectScreenshot({
+            component: page,
+        });
+    });
+});

src/components/Modal/__tests__/constants.ts

@@ -0,0 +1,4 @@
+export const ModalQa = {
+    content: 'content',
+    trigger: 'trigger',
+};

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

@@ -0,0 +1,46 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {TooltipProps} from '../Tooltip';
+
+import {placementCases} from './cases';
+import {TooltipQA} from './constants';
+import {TestTooltip} from './helpers';
+
+test.describe('Tooltip', {tag: '@Tooltip'}, () => {
+    createSmokeScenarios<TooltipProps>(
+        {
+            children: <div>text</div>,
+        },
+        {
+            placement: placementCases,
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const root = await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <div
+                        style={{
+                            padding: '25px 100px',
+                        }}
+                    >
+                        <TestTooltip {...props} />
+                    </div>
+                </div>,
+            );
+
+            await root.getByTestId(TooltipQA.trigger).hover();
+
+            await expect(page.getByTestId(TooltipQA.tooltipContent)).toBeVisible({
+                timeout: 3000,
+            });
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/Tooltip/__tests__/cases.tsx

@@ -0,0 +1,20 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {TooltipProps} from '../Tooltip';
+
+export const placementCases: Cases<TooltipProps['placement']> = [
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'bottom',
+    'right',
+    'left',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'right-start',
+    'right-end',
+    'left-start',
+    'left-end',
+];

src/components/Tooltip/__tests__/constants.ts

@@ -0,0 +1,4 @@
+export const TooltipQA = {
+    trigger: 'trigger',
+    tooltipContent: 'tooltip-content',
+};