test(TextArea): add smoke visual tests (#1779)

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

@@ -0,0 +1,117 @@
+import {smokeTest, test} from '~playwright/core';
+
+import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios';
+import type {TextAreaProps} from '../TextArea';
+import {TextArea} from '../TextArea';
+
+import {
+    disabledCases,
+    hasClearCases,
+    maxRowsCases,
+    minRowsCases,
+    noteCases,
+    pinCases,
+    rowsCases,
+    sizeCases,
+    testValue,
+    validationStateCases,
+    valueCases,
+    viewCases,
+} from './cases';
+
+test.describe('TextArea', {tag: '@TextArea'}, () => {
+    const defaultProps: TextAreaProps = {
+        placeholder: 'Placeholder',
+    };
+
+    const commonPropCases = {
+        pin: pinCases,
+        size: sizeCases,
+        view: viewCases,
+        rows: rowsCases,
+        minRows: minRowsCases,
+        maxRows: maxRowsCases,
+        note: noteCases,
+        hasClear: hasClearCases,
+        disabled: disabledCases,
+        validationState: validationStateCases,
+    } as const;
+
+    smokeTest('empty', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(defaultProps, commonPropCases);
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TextArea {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with value', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                value: testValue,
+            },
+            commonPropCases,
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TextArea {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+
+    smokeTest('with error', async ({mount, expectScreenshot}) => {
+        const smokeScenarios = createSmokeScenarios(
+            {
+                ...defaultProps,
+                validationState: 'invalid',
+                errorMessage: 'Test error message',
+            } as const,
+            {
+                value: valueCases,
+            },
+        );
+
+        await mount(
+            <div>
+                {smokeScenarios.map(([title, props]) => (
+                    <div key={title}>
+                        <h4>{title}</h4>
+                        <div>
+                            <TextArea {...props} />
+                        </div>
+                    </div>
+                ))}
+            </div>,
+        );
+
+        await expectScreenshot({
+            themes: ['light'],
+        });
+    });
+});

src/components/controls/TextArea/__tests__/cases.tsx

@@ -0,0 +1,40 @@
+import type {Cases, CasesWithName} from '../../../../stories/tests-factory/models';
+import type {TextAreaProps} from '../TextArea';
+
+/* eslint-disable react/jsx-key */
+
+export const testValue =
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
+export const valueCases: Array<TextAreaProps['value']> = [testValue];
+
+export const disabledCases: Array<TextAreaProps['disabled']> = [true];
+
+export const hasClearCases: Array<TextAreaProps['hasClear']> = [true];
+
+export const validationStateCases: Array<TextAreaProps['validationState']> = ['invalid'];
+
+export const pinCases: Cases<TextAreaProps['pin']> = [
+    'round-round',
+    'brick-brick',
+    'clear-clear',
+    'round-brick',
+    'brick-round',
+    'round-clear',
+    'clear-round',
+    'brick-clear',
+    'clear-brick',
+];
+
+export const sizeCases: Cases<TextAreaProps['size']> = ['s', 'm', 'l', 'xl'];
+
+export const viewCases: Cases<TextAreaProps['view']> = ['normal', 'clear'];
+
+export const noteCases: CasesWithName<TextAreaProps['note']> = [['', <div>note</div>]];
+
+export const minRowsCases: Cases<TextAreaProps['minRows']> = [1, 3];
+
+export const maxRowsCases: Cases<TextAreaProps['maxRows']> = [1, 3];
+
+export const rowsCases: Cases<TextAreaProps['rows']> = [1, 3];
+
+/* eslint-enable react/jsx-key */