test(TextArea): CSF 3 and visual tests

src/components/controls/TextArea/__stories__/TextArea.stories.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {useArgs} from '@storybook/preview-api';
+import type {Meta, StoryObj} from '@storybook/react';
 
-import {TextArea} from '../TextArea';
+import {Showcase} from '../../../../demo/Showcase';
+import {ShowcaseItem} from '../../../../demo/ShowcaseItem';
 import type {TextAreaProps} from '../TextArea';
+import {TextArea} from '../TextArea';
 
 import {TextAreaCustomShowcase, TextAreaShowcase} from './TextAreaShowcase';
 
@@ -32,21 +36,199 @@ export default {
             },
         },
     },
+    decorators: [
+        function useTextValue(Story, ctx) {
+            const [, setArgs] = useArgs<typeof ctx.args>();
+
+            const handleUpdate = (value: string) => {
+                ctx.args.onValueChange?.(value);
+
+                // Check if the component is controlled
+                if (ctx.args.value !== undefined) {
+                    setArgs({value});
+                }
+            };
+
+            return <Story args={{...ctx.args, onUpdate: handleUpdate}} />;
+        },
+    ],
 } as Meta;
 
-const fixConsoleErrors = {
-    onKeyDown: () => {},
-    onKeyUp: () => {},
-    onKeyPress: () => {},
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+    args: {
+        onChange: action('onChange'),
+        onBlur: action('onBlur'),
+        onFocus: action('onFocus'),
+        onKeyDown: action('onKeyDown'),
+        onKeyPress: action('onKeyPress'),
+        onKeyUp: action('onKeyUp'),
+        onUpdate: action('onUpdate'),
+        value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+        placeholder: 'Type text...',
+    },
+};
+
+export const AllShowcases: Story = {
+    render: (args) => <TextAreaShowcase {...args} />,
+};
+
+export const CustomShowcases: Story = {
+    render: (args) => <TextAreaCustomShowcase {...args} />,
+};
+
+const viewCases: Array<NonNullable<TextAreaProps['view']>> = ['normal', 'clear'];
+
+export const View: Story = {
+    render: (args) => (
+        <Showcase>
+            {viewCases.map((view, index) => (
+                <ShowcaseItem title={view} key={index}>
+                    <TextArea {...args} view={view} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+const sizeCases: Array<NonNullable<TextAreaProps['size']>> = ['s', 'm', 'l', 'xl'];
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            {sizeCases.map((size, index) => (
+                <ShowcaseItem title={size} key={index}>
+                    <TextArea {...args} size={size} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+const pinCases: Array<NonNullable<TextAreaProps['pin']>> = [
+    'round-round',
+    'brick-brick',
+    'clear-clear',
+    'round-brick',
+    'brick-round',
+    'round-clear',
+    'clear-round',
+    'brick-clear',
+    'clear-brick',
+];
+
+export const Pin: Story = {
+    render: (args) => (
+        <Showcase>
+            {pinCases.map((pin, index) => (
+                <ShowcaseItem title={pin} key={index}>
+                    <TextArea {...args} pin={pin} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+const validationStateCases: Array<NonNullable<TextAreaProps['validationState']>> = ['invalid'];
+
+export const ValidationState: Story = {
+    render: (args) => (
+        <Showcase>
+            {validationStateCases.map((validationState, index) => (
+                <ShowcaseItem title={validationState} key={index}>
+                    <TextArea {...args} validationState={validationState} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+const errorPlacementCases: Array<NonNullable<TextAreaProps['errorPlacement']>> = [
+    'outside',
+    'inside',
+];
+
+export const ErrorPlacement: Story = {
+    render: (args) => (
+        <Showcase>
+            {errorPlacementCases.map((errorPlacement, index) => (
+                <ShowcaseItem title={errorPlacement} key={index}>
+                    <TextArea {...args} errorPlacement={errorPlacement} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        errorMessage: 'Error message',
+        validationState: 'invalid',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
 };
 
-const DefaultTemplate: StoryFn<TextAreaProps> = (args) => (
-    <TextArea {...fixConsoleErrors} {...args} />
-);
-export const Default = DefaultTemplate.bind({});
+export const HasClear: Story = {
+    args: {
+        ...Default.args,
+        hasClear: true,
+    },
+};
 
-const ShowcaseTemplate: StoryFn = () => <TextAreaShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const WithNote: Story = {
+    args: {
+        ...Default.args,
+        note: "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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    },
+};
 
-const CustomThemeTemplate: StoryFn = () => <TextAreaCustomShowcase />;
-export const CustomTheme = CustomThemeTemplate.bind({});
+export const Rows: Story = {
+    args: {
+        ...Default.args,
+        value: "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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+        maxRows: 10,
+        minRows: 20,
+        rows: 15,
+    },
+};
+
+export const Custom: Story = {
+    render: (args) => (
+        <React.Fragment>
+            <style>
+                {`.g-root {
+                    --g-text-area-text-color: #000;
+                    --g-text-area-placeholder-color: #333;
+                    --g-text-area-background-color: #f08080;
+                    --g-text-area-border-radius: 40px;
+                    --g-text-area-border-width: 5px;
+                    --g-text-area-border-color: #fff;
+                    --g-text-area-border-color-hover: #777;
+                    --g-text-area-border-color-active: #000;
+                    --g-text-area-focus-outline-color: #333;
+                }`}
+            </style>
+            <TextArea {...args} />
+        </React.Fragment>
+    ),
+    args: {
+        ...Default.args,
+    },
+};

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

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {TextAreaStories} from './helpersPlaywright';
+
+test.describe('TextArea', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <AllShowcases>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.AllShowcases />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <CustomShowcases>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.CustomShowcases />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <View>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.View />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Size>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.Size />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Pin>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.Pin />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ValidationState>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.ValidationState />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ErrorPlacement>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.ErrorPlacement />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Disabled>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.Disabled />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <HasClear>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.HasClear />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <WithNote>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.WithNote />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Rows>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.Rows />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Custom>', async ({mount, expectScreenshot}) => {
+        await mount(<TextAreaStories.Custom />);
+
+        await expectScreenshot();
+    });
+});

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

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultTextAreaStories from '../__stories__/TextArea.stories';
+
+export const TextAreaStories = composeStories(DefaultTextAreaStories);