test(Card,Alert): CSF 3 and visual tests (#1597)

src/components/Alert/__stories__/Alert.stories.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import {Gear} from '@gravity-ui/icons';
+import {action} from '@storybook/addon-actions';
+import type {Meta, StoryObj} from '@storybook/react';
 
-import {Button} from '../../Button';
-import {Col, Row} from '../../layout';
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
+import {Icon as IconComponent} from '../../Icon';
 import {Alert} from '../Alert';
 import type {AlertProps} from '../types';
 
@@ -12,133 +15,149 @@ export default {
     component: Alert,
 } as Meta;
 
-const title = 'Where will you go, hero?';
-const message = 'Choose wisely: the end of the fairy tale depends on your decision';
-const right = 'To the right (lose the horse)';
-const center = 'Straight (find a wife)';
-const left = 'To the left (CC 235.2)';
+type Story = StoryObj<typeof Alert>;
 
-const stories: AlertProps[] = [
-    {
-        title,
-        message,
-        theme: 'danger',
-        view: 'filled',
-        onClose: () => alert('Close button pressed'),
-        actions: <Alert.Action>{right}</Alert.Action>,
-    },
-    {
-        title: <div dangerouslySetInnerHTML={{__html: '<b>Some html title</b>'}} />,
-        message,
-        corners: 'square',
-        theme: 'danger',
-        view: 'outlined',
-        onClose: () => alert('Close button pressed'),
-    },
-    {
-        title,
-        message,
-        view: 'outlined',
-        onClose: () => alert('Close button pressed'),
-        actions: [{text: left}, {text: center}, {text: left}],
-    },
-    {
-        message,
-        theme: 'info',
-        view: 'filled',
-        actions: (
-            <Alert.Actions>
-                <Alert.Action>{center}</Alert.Action>
-            </Alert.Actions>
-        ),
-    },
-    {
-        title,
-        message,
-        theme: 'info',
-        view: 'outlined',
-    },
-    {
-        title,
-        message,
-        theme: 'success',
-        view: 'outlined',
-        actions: (
-            <Alert.Actions>
-                <Button view="action">{right}</Button>
-                <Button view="outlined">{center}</Button>
-                <Button view="flat">{left}</Button>
-            </Alert.Actions>
-        ),
+export const Default: Story = {
+    args: {
+        onClose: action('onClose'),
+        title: 'Where will you go, hero?',
+        message: 'Choose wisely: the end of the fairy tale depends on your decision',
     },
-    {
-        title,
-        message,
-        theme: 'success',
-        view: 'filled',
+};
 
-        actions: [{text: right, handler: console.log}],
+const themeCases: Array<NonNullable<AlertProps['theme']>> = [
+    'normal',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'utility',
+];
+
+export const Theme: Story = {
+    render: (args) => (
+        <Showcase>
+            {themeCases.map((theme, index) => (
+                <ShowcaseItem title={theme} key={index}>
+                    <Alert {...args} theme={theme} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
     },
-    {
-        title,
-        message,
-        theme: 'warning',
-        view: 'filled',
-        layout: 'horizontal',
-        corners: 'square',
-        onClose: () => {},
-        actions: (
-            <Alert.Actions>
-                <Alert.Action view="outlined">{left}</Alert.Action>
-            </Alert.Actions>
-        ),
+};
+
+export const CustomIcon: Story = {
+    args: {
+        ...Default.args,
+        icon: <IconComponent size={16} data={Gear} />,
     },
-    {
-        title,
-        message,
-        theme: 'warning',
-        view: 'outlined',
-        layout: 'horizontal',
-        actions: <Alert.Action>{right}</Alert.Action>,
+};
+
+const cornersCases: Array<NonNullable<AlertProps['corners']>> = ['rounded', 'square'];
+
+export const Corners: Story = {
+    render: (args) => (
+        <Showcase>
+            {cornersCases.map((corners, index) => (
+                <ShowcaseItem title={corners} key={index}>
+                    <Alert {...args} corners={corners} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
     },
-    {
-        message,
-        theme: 'utility',
-        view: 'outlined',
+};
+
+const viewCases: Array<NonNullable<AlertProps['view']>> = ['filled', 'outlined'];
+
+export const View: Story = {
+    render: (args) => (
+        <Showcase>
+            {viewCases.map((view, index) => (
+                <ShowcaseItem title={view} key={index}>
+                    <Alert {...args} view={view} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
     },
-    {
-        title,
-        message,
-        theme: 'utility',
-        view: 'filled',
+};
+
+const layoutCases: Array<NonNullable<AlertProps['layout']>> = ['vertical', 'horizontal'];
+
+export const Layout: Story = {
+    render: (args) => (
+        <Showcase>
+            {layoutCases.map((layout, index) => (
+                <ShowcaseItem title={layout} key={index}>
+                    <Alert {...args} layout={layout} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        actions: [{text: 'First action'}, {text: 'Second action'}],
     },
+};
+
+const rightActionText = 'To the right (lose the horse)';
+const centerActionText = 'Straight (find a wife)';
+const leftActionText = 'To the left (CC 235.2)';
+
+const actionCases: Array<{
+    caseTitle: string;
+    propValue: AlertProps['actions'];
+}> = [
     {
-        title,
-        message,
-        icon: null,
-        theme: 'utility',
-        view: 'filled',
+        caseTitle: 'Full width action',
+        propValue: <Alert.Action>{rightActionText}</Alert.Action>,
     },
     {
-        message,
-        theme: 'normal',
-        view: 'outlined',
+        caseTitle: 'One action',
+        propValue: [{text: rightActionText, handler: action('actionHandler')}],
     },
     {
-        title,
-        message,
-        theme: 'normal',
-        view: 'filled',
+        caseTitle: 'Tree actions via array',
+        propValue: [{text: leftActionText}, {text: centerActionText}, {text: rightActionText}],
     },
 ];
 
-const DefaultTemplate: StoryFn<AlertProps> = () => (
-    <Row space="3">
-        {stories.map((props, i) => (
-            <Col s="12" l="6" xxl="4" key={i}>
-                <Alert {...props} />
-            </Col>
-        ))}
-    </Row>
-);
-export const Examples = DefaultTemplate.bind({});
+export const Actions: Story = {
+    render: (args) => (
+        <Showcase>
+            {actionCases.map(({caseTitle, propValue}, index) => (
+                <ShowcaseItem title={caseTitle} key={index}>
+                    <Alert {...args} actions={propValue} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+const alignCases: Array<NonNullable<AlertProps['align']>> = ['center', 'baseline'];
+
+export const Align: Story = {
+    render: (args) => (
+        <Showcase>
+            {alignCases.map((align, index) => (
+                <ShowcaseItem title={align} key={index}>
+                    <Alert {...args} align={align} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {AlertStories} from './helpersPlaywright';
+
+test.describe('Alert', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Theme>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Theme />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <CustomIcon>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.CustomIcon />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Corners>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Corners />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <View>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.View />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Layout>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Layout />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Actions>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Actions />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Align>', async ({mount, expectScreenshot}) => {
+        await mount(<AlertStories.Align />);
+
+        await expectScreenshot();
+    });
+});

src/components/Alert/__tests__/helpersPlaywright.tsx

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

src/components/Card/__stories__/Card.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Showcase} from '../../../demo/Showcase';
@@ -121,7 +122,7 @@ export const ActionType: Story = {
     args: {
         ...Default.args,
         type: 'action',
-        onClick: () => alert('Click!'),
+        onClick: () => action('onClick'),
     },
     name: 'Action Type',
 };
@@ -141,7 +142,27 @@ export const SelectionType: Story = {
     args: {
         ...Default.args,
         type: 'selection',
-        onClick: () => alert('Click!'),
+        onClick: () => action('onClick'),
     },
     name: 'Selection Type',
 };
+
+export const Custom: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: (args) => (
+        <React.Fragment>
+            <style>
+                {`.g-root {
+                    --g-card-background-color: #f08080;
+                    --g-card-border-width: 5px;
+                    --g-card-border-color: #fff;
+                    --g-card-border-radius: 40px 20px;
+                    --g-card-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
+                }`}
+            </style>
+            <Card {...args}>Custom styles</Card>
+        </React.Fragment>
+    ),
+};