test(DefinitionList): add smoke visual tests (#2028)

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

@@ -0,0 +1,69 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {DefinitionListProps} from '../types';
+
+import {DefinitionListStories} from './stories';
+
+test.describe('DefinitionList', {tag: '@DefinitionList'}, () => {
+    test('render story <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<DefinitionListStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    createSmokeScenarios<Omit<DefinitionListProps, 'children'>>(
+        {},
+        {
+            direction: ['vertical', 'horizontal'],
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, expectScreenshot}) => {
+            await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <DefinitionListStories.Default {...props} />
+                </div>,
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+
+    createSmokeScenarios<Omit<DefinitionListProps, 'children'>>(
+        {
+            responsive: true,
+        },
+        {
+            nameMaxWidth: [100],
+            contentMaxWidth: [100],
+        },
+        {
+            scenarioName: 'responsive',
+        },
+    ).forEach(([title, props]) => {
+        smokeTest(title, async ({mount, page, expectScreenshot}) => {
+            const size = page.viewportSize();
+            if (size) {
+                await page.setViewportSize({
+                    width: 1000,
+                    height: size.height,
+                });
+            }
+
+            await mount(
+                <div>
+                    <h4>{title}</h4>
+                    <DefinitionListStories.Default {...props} />
+                </div>,
+                {width: 'auto'},
+            );
+
+            await expectScreenshot({
+                themes: ['light'],
+            });
+        });
+    });
+});

src/components/DefinitionList/__tests__/stories.ts

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