test(Label): add smoke visual tests (#1810)

Co-authored-by: Georgy Malkov <[email protected]>

src/components/Label/Label.tsx

@@ -11,6 +11,8 @@ import {Icon} from '../Icon';
 import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
+import {LabelQa} from './constants';
+
 import './Label.scss';
 
 const b = block('label');
@@ -122,6 +124,7 @@ export const Label = React.forwardRef(function Label(
                         side: 'end',
                         type: 'button',
                     })}
+                    data-qa={LabelQa.copyButton}
                 >
                     <ClipboardIcon status={status || 'pending'} size={copyIconSize} />
                 </button>
@@ -137,6 +140,7 @@ export const Label = React.forwardRef(function Label(
                         side: 'end',
                         type: 'button',
                     })}
+                    data-qa={LabelQa.closeButton}
                 >
                     <Icon size={closeIconSize} data={Xmark} />
                 </button>
@@ -165,6 +169,7 @@ export const Label = React.forwardRef(function Label(
                         type="button"
                         onClick={onClick}
                         className={b('main-button')}
+                        data-qa={LabelQa.mainButton}
                     >
                         {content}
                     </button>

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

@@ -1,8 +1,15 @@
-import {test} from '~playwright/core';
+import {smokeTest, test} from '~playwright/core';
 
-import {LabelStories} from './helpersPlaywright';
+import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import type {LabelProps} from '../Label';
+import {Label} from '../Label';
 
-test.describe('Label', () => {
+import {disabledCases, sizeCases, themeCases} from './cases';
+import {LabelStories, TestLabelWithIcon} from './helpersPlaywright';
+
+const qa = 'label';
+
+test.describe('Label', {tag: '@Label'}, () => {
     test('render story: <Default>', async ({mount, expectScreenshot}) => {
         await mount(<LabelStories.Default />);
 
@@ -62,4 +69,117 @@ test.describe('Label', () => {
 
         await expectScreenshot();
     });
+
+    const defaultProps: LabelProps = {
+        children: 'Label',
+        qa,
+        type: 'default',
+    };
+
+    smokeTest('', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<LabelProps>(defaultProps, {
+            theme: themeCases,
+            size: sizeCases,
+            disabled: disabledCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Label {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+
+    smokeTest('with custom icon', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<LabelProps>(defaultProps, {
+            theme: themeCases,
+            size: sizeCases,
+            disabled: disabledCases,
+        });
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TestLabelWithIcon {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+
+    smokeTest('with copy', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<LabelProps>(
+            {
+                ...defaultProps,
+                type: 'copy',
+                copyText: 'Copy text',
+                onCopy: () => {},
+            },
+            {
+                theme: themeCases,
+                size: sizeCases,
+                disabled: disabledCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Label {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
+
+    smokeTest('with close', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<LabelProps>(
+            {
+                ...defaultProps,
+                type: 'close',
+                onCloseClick: () => {},
+            },
+            {
+                theme: themeCases,
+                size: sizeCases,
+                disabled: disabledCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <Label {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({});
+    });
 });

src/components/Label/__tests__/cases.tsx

@@ -0,0 +1,15 @@
+import type {Cases} from '../../../stories/tests-factory/models';
+import type {LabelProps} from '../Label';
+
+export const disabledCases: Cases<LabelProps['disabled']> = [true];
+export const themeCases: Cases<LabelProps['theme']> = [
+    'normal',
+    'info',
+    'danger',
+    'warning',
+    'success',
+    'utility',
+    'unknown',
+    'clear',
+];
+export const sizeCases: Cases<LabelProps['size']> = ['xs', 's', 'm'];

src/components/Label/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,13 @@
+import {Rocket} from '@gravity-ui/icons';
+import {composeStories} from '@storybook/react';
+
+import {Icon} from '../../Icon';
+import type {LabelProps} from '../Label';
+import {Label} from '../Label';
+import * as DefaultLabelStories from '../__stories__/Label.stories';
+
+export const LabelStories = composeStories(DefaultLabelStories);
+
+export const TestLabelWithIcon = (props: Partial<LabelProps>) => {
+    return <Label icon={<Icon data={Rocket} />} {...props} />;
+};

src/components/Label/constants.ts

@@ -0,0 +1,5 @@
+export const LabelQa = {
+    copyButton: 'copy-button',
+    closeButton: 'close-button',
+    mainButton: 'main-button',
+};