test(Sheet): add smoke visual tests (#1802)

playwright/core/mountFixture.tsx

@@ -10,6 +10,7 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
                     boxSizing: options?.width ? 'content-box' : undefined,
                     width: options?.width ? options.width : 'fit-content',
                     height: 'fit-content',
+                    ...options?.rootStyle,
                 }}
                 className="playwright-wrapper-test"
             >

playwright/core/types.ts

@@ -14,7 +14,10 @@ import type {
 interface ComponentFixtures {
     mount<HooksConfig>(
         component: React.JSX.Element,
-        options?: MountOptions<HooksConfig> & {width?: number | string},
+        options?: MountOptions<HooksConfig> & {
+            width?: number | string;
+            rootStyle?: React.CSSProperties;
+        },
     ): Promise<MountResult>;
 }
 

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

@@ -1,12 +1,15 @@
-import {expect} from '@playwright/test';
-
-import {test} from '~playwright/core';
+import {expect, smokeTest, test} from '~playwright/core';
 
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {SheetProps} from '../Sheet';
 import {DEFAULT_SHEET_QA} from '../__stories__/constants';
 
+import {hideTopBarCases, titleCases} from './cases';
+import {QASheet} from './constants';
+import {TestSheet} from './helpers';
 import {SheetStories} from './helpersPlaywright';
 
-test.describe('Sheet', () => {
+test.describe('Sheet', {tag: '@Sheet'}, () => {
     test('render story: <Default>', async ({page, mount, expectScreenshot}) => {
         await mount(<SheetStories.Default />);
 
@@ -21,4 +24,31 @@ test.describe('Sheet', () => {
             component: sheetLocator,
         });
     });
+
+    createSmokeScenarios<Partial<Omit<SheetProps, 'visible' | 'onClose'>>>(
+        {},
+        {
+            hideTopBar: hideTopBarCases,
+            title: titleCases,
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            await page.setViewportSize({width: 500, height: 500});
+
+            const root = await mount(<TestSheet {...props} />, {
+                rootStyle: {
+                    padding: 0,
+                    width: '100%',
+                    minHeight: '500px',
+                },
+            });
+
+            await root.locator('button').click();
+            await expect(page.locator(`[data-qa='${QASheet.content}']`)).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
 });

src/components/Sheet/__tests__/cases.tsx

@@ -0,0 +1,5 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {SheetProps} from '../Sheet';
+
+export const hideTopBarCases: Cases<SheetProps['hideTopBar']> = [true];
+export const titleCases: Cases<SheetProps['title']> = ['Title'];

src/components/Sheet/__tests__/constants.ts

@@ -0,0 +1,3 @@
+export const QASheet = {
+    content: 'content',
+};

src/components/Sheet/__tests__/helpers.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import type {SheetProps} from '../Sheet';
+import {Sheet} from '../Sheet';
+
+import {QASheet} from './constants';
+
+export const TestSheet = (props: Partial<Omit<SheetProps, 'visible' | 'onClose'>>) => {
+    const [visible, setVisible] = React.useState(false);
+
+    return (
+        <div>
+            <button onClick={() => setVisible(true)}>Show modal</button>
+            <Sheet
+                {...props}
+                visible={visible}
+                onClose={() => setVisible(false)}
+                qa={QASheet.content}
+            >
+                <div
+                    style={{
+                        minHeight: 100,
+                        border: '1px solid tomato',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    Sheet content
+                </div>
+            </Sheet>
+        </div>
+    );
+};