test(UserLabel): add smoke visual tests (#1792)

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

@@ -0,0 +1,107 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {UserLabelProps} from '../types';
+
+import {
+    childrenCases,
+    onClickCases,
+    onCloseClickCases,
+    sizeCases,
+    typeCases,
+    viewCases,
+} from './cases';
+import {TestUserLabel, TestUserLabelWithEmail, TestUserLabelWithPerson} from './helpers';
+
+test.describe('UserLabel', {tag: '@UserLabel'}, () => {
+    smokeTest('user', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<Partial<UserLabelProps>>(
+            {},
+            {
+                size: sizeCases,
+                view: viewCases,
+                type: typeCases,
+                children: childrenCases,
+                onClick: onClickCases,
+                onCloseClick: onCloseClickCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestUserLabel {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('person', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<Partial<UserLabelProps>>(
+            {},
+            {
+                size: sizeCases,
+                view: viewCases,
+                children: childrenCases,
+                onClick: onClickCases,
+                onCloseClick: onCloseClickCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestUserLabelWithPerson {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('email', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<Partial<UserLabelProps>>(
+            {},
+            {
+                size: sizeCases,
+                view: viewCases,
+                children: childrenCases,
+                onClick: onClickCases,
+                onCloseClick: onCloseClickCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestUserLabelWithEmail {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/UserLabel/__tests__/cases.tsx

@@ -0,0 +1,21 @@
+import type {Cases, CasesWithName} from '../../../stories/tests-factory/models';
+import type {UserLabelProps} from '../types';
+
+export const sizeCases: Cases<UserLabelProps['size']> = ['xs', 's', 'm', 'l', 'xl'];
+
+export const viewCases: Cases<UserLabelProps['view']> = ['outlined', 'clear'];
+
+export const typeCases: Cases<UserLabelProps['type']> = ['person', 'email', 'empty'];
+
+export const childrenCases: CasesWithName<UserLabelProps['children']> = [
+    [
+        'long label',
+        'Charles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles DarwinCharles Darwin',
+    ],
+];
+
+export const onCloseClickCases: CasesWithName<UserLabelProps['onCloseClick']> = [
+    ['closable', () => {}],
+];
+
+export const onClickCases: CasesWithName<UserLabelProps['onClick']> = [['clickable', () => {}]];