test(TextInput): add smoke visual tests

src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx

@@ -0,0 +1,152 @@
+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 '../../utils';
+import type {TextInputProps} from '../TextInput';
+import {TextInput} from '../TextInput';
+
+import {
+    disabledCases,
+    endContentCases,
+    errorPlacementCases,
+    hasClearCases,
+    labelCases,
+    noteCases,
+    pinCases,
+    sizeCases,
+    startContentCases,
+    validationStateCases,
+    viewCases,
+} from './cases';
+
+test.describe('TextInput', {tag: '@TextInput'}, () => {
+    const defaultProps: TextInputProps = {
+        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<TextInputProps>(
+            {
+                ...defaultProps,
+            },
+            commonPropCases,
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TextInput {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with value', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios<TextInputProps>(
+            {
+                ...defaultProps,
+                value: 'Text',
+            },
+            commonPropCases,
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TextInput {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with error', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                value: 'Text',
+                validationState: 'invalid',
+                errorMessage: 'Test error message',
+            } as const,
+            {
+                errorPlacement: errorPlacementCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TextInput {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('inside error placement tooltip', async ({mount, page, expectScreenshot}) => {
+        const props: TextInputProps = {
+            ...defaultProps,
+            value: 'Text',
+            validationState: 'invalid',
+            errorMessage: 'Test error message',
+            errorPlacement: 'inside',
+        };
+
+        const root = await mount(
+            <div style={{width: 250}}>
+                <TextInput {...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/controls/TextInput/__tests__/cases.tsx

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