test(HelpMark): add visual test (#2025)

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

@@ -0,0 +1,52 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {HelpMarkProps} from '../HelpMark';
+import {HelpMark} from '../HelpMark';
+
+import {placementCases} from './cases';
+import {HelpMarkStories} from './stories';
+
+test.describe('HelpMark', {tag: '@HelpMark'}, () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<HelpMarkStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    createSmokeScenarios<HelpMarkProps>(
+        {},
+        {
+            placement: placementCases,
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const root = await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <div style={{padding: 100}}>
+                        <HelpMark
+                            qa="popover"
+                            buttonProps={{
+                                // @ts-expect-error Object literal may only specify known properties, and ''data-qa'' does not exist in type 'ButtonHTMLAttributes<HTMLButtonElement>'
+                                'data-qa': 'trigger',
+                            }}
+                            {...props}
+                        >
+                            Test content
+                        </HelpMark>
+                    </div>
+                </div>,
+            );
+
+            await root.getByTestId('trigger').hover();
+            await expect(page.getByTestId('popover-tooltip')).toBeVisible();
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/HelpMark/__tests__/cases.ts

@@ -0,0 +1,20 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {HelpMarkProps} from '../HelpMark';
+
+export const placementCases: Cases<HelpMarkProps['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/HelpMark/__tests__/stories.ts

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as CSFStories from '../__stories__/HelpMark.stories';
+
+export const HelpMarkStories = composeStories(CSFStories);