test(ActionTooltip): add smoke visual tests (#1768)

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',
+];