test(NumberInput): add smoke visual tests (#2024)

src/components/lab/NumberInput/__tests__/NumberInput.visual.test.tsx

@@ -1,5 +1,25 @@
-import {test} from '~playwright/core';
+import {expect} from '@playwright/experimental-ct-react';
 
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios';
+import {CONTROL_ERROR_ICON_QA} from '../../../controls/utils';
+import {NumberInput} from '../NumberInput';
+import type {NumberInputProps} from '../NumberInput';
+
+import {
+    disabledCases,
+    endContentCases,
+    errorPlacementCases,
+    hasClearCases,
+    labelCases,
+    noteCases,
+    pinCases,
+    sizeCases,
+    startContentCases,
+    validationStateCases,
+    viewCases,
+} from './cases';
 import {NumberInputStories} from './stories';
 
 test.describe('NumberInput', () => {
@@ -8,4 +28,132 @@ test.describe('NumberInput', () => {
 
         await expectScreenshot();
     });
+
+    const defaultProps: NumberInputProps = {
+        placeholder: 'Placeholder',
+    };
+
+    const commonPropCases = {
+        pin: pinCases,
+        size: sizeCases,
+        view: viewCases,
+        note: noteCases,
+        validationState: validationStateCases,
+        startContent: startContentCases,
+        endContent: endContentCases,
+        disabled: disabledCases,
+        hasClear: hasClearCases,
+        label: labelCases,
+    } as const;
+
+    smokeTest('empty', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<NumberInputProps>(
+            {
+                ...defaultProps,
+            },
+            commonPropCases,
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <NumberInput {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with value', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<NumberInputProps>(
+            {
+                ...defaultProps,
+                value: 1234,
+            },
+            commonPropCases,
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <NumberInput {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with error', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                value: 1234,
+                validationState: 'invalid',
+                errorMessage: 'Test error message',
+            } as const,
+            {
+                errorPlacement: errorPlacementCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <NumberInput {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('inside error placement tooltip', async ({mount, page, expectScreenshot}) => {
+        const props: NumberInputProps = {
+            ...defaultProps,
+            value: 1234,
+            validationState: 'invalid',
+            errorMessage: 'Test error message',
+            errorPlacement: 'inside',
+        };
+
+        const root = await mount(
+            <div style={{width: 250}}>
+                <NumberInput {...props} />
+            </div>,
+            {
+                width: 500,
+            },
+        );
+
+        await root.getByTestId(CONTROL_ERROR_ICON_QA).hover();
+
+        await expect(page.locator('.g-popup')).toBeVisible();
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
 });

src/components/lab/NumberInput/__tests__/cases.tsx

@@ -0,0 +1,42 @@
+import type {Cases, CasesWithName} from '../../../../stories/tests-factory/models';
+import type {NumberInputProps} from '../NumberInput';
+
+/* eslint-disable react/jsx-key */
+
+export const disabledCases: Array<NumberInputProps['disabled']> = [true];
+
+export const hasClearCases: Array<NumberInputProps['hasClear']> = [true];
+
+export const pinCases: Cases<NumberInputProps['pin']> = [
+    'round-round',
+    'brick-brick',
+    'clear-clear',
+    'round-brick',
+    'brick-round',
+    'round-clear',
+    'clear-round',
+    'brick-clear',
+    'clear-brick',
+];
+
+export const validationStateCases: Cases<NumberInputProps['validationState']> = ['invalid'];
+
+export const sizeCases: Cases<NumberInputProps['size']> = ['s', 'm', 'l', 'xl'];
+
+export const viewCases: Cases<NumberInputProps['view']> = ['normal', 'clear'];
+
+export const errorPlacementCases: Cases<NumberInputProps['errorPlacement']> = ['outside', 'inside'];
+
+export const startContentCases: CasesWithName<NumberInputProps['startContent']> = [
+    ['', <div>start</div>],
+];
+
+export const endContentCases: CasesWithName<NumberInputProps['endContent']> = [
+    ['', <div>end</div>],
+];
+
+export const noteCases: CasesWithName<NumberInputProps['note']> = [['', <div>note</div>]];
+
+export const labelCases: CasesWithName<NumberInputProps['label']> = [['', 'label']];
+
+/* eslint-enable react/jsx-key */