test(Avatar): add smoke visual tests

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

@@ -1,10 +1,23 @@
 import {expect} from '@playwright/experimental-ct-react';
 
-import {test} from '~playwright/core';
-
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {Avatar} from '../Avatar';
+import type {AvatarProps} from '../types/main';
+
+import {
+    backgroundColorCases,
+    borderColorCases,
+    sizeCases,
+    themeCases,
+    titleCases,
+    viewCases,
+} from './cases';
+import {TestAvatarWithIcon, TestAvatarWithImage} from './helpersPlaywright';
 import {AvatarStories} from './stories';
 
-test.describe('Avatar', () => {
+test.describe('Avatar', {tag: '@Avatar'}, () => {
     test('render story: <Image>', async ({mount}) => {
         const component = await mount(<AvatarStories.Image />);
 
@@ -48,4 +61,106 @@ test.describe('Avatar', () => {
 
         await expect(component).toHaveScreenshot();
     });
+
+    const defaultProps: AvatarProps = {};
+
+    const commonCases = {
+        size: sizeCases,
+        theme: themeCases,
+        view: viewCases,
+        backgroundColor: backgroundColorCases,
+        borderColor: borderColorCases,
+        title: titleCases,
+    } as const;
+
+    smokeTest('with image', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            defaultProps,
+            {
+                ...commonCases,
+            },
+            {
+                scenarioName: 'image specific',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestAvatarWithImage {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with icon', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            defaultProps,
+            {
+                ...commonCases,
+            },
+            {
+                scenarioName: 'icon specific',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestAvatarWithIcon {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with text', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                text: 'Text',
+                color: 'black',
+            },
+            {
+                ...commonCases,
+            },
+            {
+                scenarioName: 'text specific',
+            },
+        );
+
+        await mount(
+            <div style={{width: 400}}>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Avatar {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
 });

src/components/Avatar/__tests__/cases.tsx

@@ -0,0 +1,9 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {AvatarProps} from '../types/main';
+
+export const sizeCases: Cases<AvatarProps['size']> = ['xs', 's', 'm', 'l', 'xl'];
+export const themeCases: Cases<AvatarProps['theme']> = ['normal', 'brand'];
+export const viewCases: Cases<AvatarProps['view']> = ['filled', 'outlined'];
+export const backgroundColorCases: Cases<AvatarProps['backgroundColor']> = ['darkblue'];
+export const borderColorCases: Cases<AvatarProps['borderColor']> = ['tomato'];
+export const titleCases: Cases<AvatarProps['title']> = ['Title'];