test(Toaster): basic cases (#1893)

package.json

@@ -140,7 +140,7 @@
         "@babel/preset-typescript": "^7.23.3",
         "@commitlint/cli": "^18.6.0",
         "@commitlint/config-conventional": "^18.6.0",
-        "@faker-js/faker": "^8.4.0",
+        "@faker-js/faker": "^9.0.3",
         "@gravity-ui/eslint-config": "^3.1.1",
         "@gravity-ui/prettier-config": "^1.1.0",
         "@gravity-ui/stylelint-config": "^4.0.1",

playwright/core/mountFixture.tsx

@@ -6,7 +6,13 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
     const mount: MountFixture = async (component, options) => {
         return await baseMount(
             <div
-                style={{padding: 20, width: 'fit-content', height: 'fit-content'}}
+                style={{
+                    padding: 20,
+                    // When we set width we didn't expect that paddings for better screenshots would be included
+                    boxSizing: options?.width ? 'content-box' : undefined,
+                    width: options?.width ? options.width : 'fit-content',
+                    height: 'fit-content',
+                }}
                 className="playwright-wrapper-test"
             >
                 {component}

playwright/core/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {
     Locator,
@@ -11,8 +13,8 @@ import type {
 
 interface ComponentFixtures {
     mount<HooksConfig>(
-        component: JSX.Element,
-        options?: MountOptions<HooksConfig>,
+        component: React.JSX.Element,
+        options?: MountOptions<HooksConfig> & {width?: number},
     ): Promise<MountResult>;
 }
 

playwright/playwright/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 
-import {ToasterComponent, ToasterProvider} from '../../src/components/Toaster';
+import {ToasterProvider} from '../../src/components/Toaster';
 import {MobileProvider} from '../../src/components/mobile/MobileProvider';
 import {ThemeProvider} from '../../src/components/theme/ThemeProvider';
 
@@ -14,7 +14,6 @@ beforeMount(async ({App}) => {
             <MobileProvider>
                 <ToasterProvider>
                     <App />
-                    <ToasterComponent />
                 </ToasterProvider>
             </MobileProvider>
         </ThemeProvider>

src/components/Toaster/__stories__/Toaster.stories.tsx

@@ -127,7 +127,7 @@ export const ToastPlayground: Story = {
         renderIcon: disabledControl,
         removeCallback: disabledControl,
     },
-    render: (args) => {
+    render: (args, context) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const toaster = useToaster();
 
@@ -143,6 +143,11 @@ export const ToastPlayground: Story = {
             return () => toaster.remove(toastId);
         }, [args, toaster]);
 
-        return <ToasterComponent mobile={args.mobile} />;
+        return (
+            <ToasterComponent
+                mobile={args.mobile}
+                hasPortal={context.globals.screenshotTests !== true}
+            />
+        );
     },
 };

src/components/Toaster/__tests__/Toast.visual.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import type {Toast} from '../Toast/Toast';
+
+import {ToastStories} from './helpersPlaywright';
+
+const wrapperOptions = {
+    width: 312,
+};
+
+function getToastActions(contrastButton = true): React.ComponentProps<typeof Toast>['actions'] {
+    return [
+        {onClick() {}, label: 'Action', view: contrastButton ? 'normal-contrast' : 'normal'},
+        {onClick() {}, label: 'Something More', view: 'outlined'},
+    ];
+}
+
+const simpleToastProps: React.ComponentProps<typeof Toast> = {
+    actions: getToastActions(),
+    removeCallback: () => {},
+    name: 'simple-toast',
+    isClosable: true,
+    title: 'Do some actions',
+    content: 'We address you some concerns regarding your last actions in UI',
+};
+
+test.describe('Toast', {tag: '@Toaster'}, () => {
+    test('render story: <ToastPlayground> (normal)', async ({mount, expectScreenshot}) => {
+        await mount(
+            <ToastStories.ToastPlayground
+                {...simpleToastProps}
+                actions={getToastActions(false)}
+                theme="normal"
+            />,
+            wrapperOptions,
+        );
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ToastPlayground> (info)', async ({mount, expectScreenshot}) => {
+        await mount(
+            <ToastStories.ToastPlayground {...simpleToastProps} theme="info" />,
+            wrapperOptions,
+        );
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ToastPlayground> (success)', async ({mount, expectScreenshot}) => {
+        await mount(
+            <ToastStories.ToastPlayground {...simpleToastProps} theme="success" />,
+            wrapperOptions,
+        );
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ToastPlayground> (warning)', async ({mount, expectScreenshot}) => {
+        await mount(
+            <ToastStories.ToastPlayground {...simpleToastProps} theme="warning" />,
+            wrapperOptions,
+        );
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ToastPlayground> (danger)', async ({mount, expectScreenshot}) => {
+        await mount(
+            <ToastStories.ToastPlayground {...simpleToastProps} theme="danger" />,
+            wrapperOptions,
+        );
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ToastPlayground> (utility)', async ({mount, expectScreenshot}) => {
+        await mount(
+            <ToastStories.ToastPlayground {...simpleToastProps} theme="utility" />,
+            wrapperOptions,
+        );
+
+        await expectScreenshot();
+    });
+});

src/components/Toaster/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,9 @@
+import {composeStories} from '@storybook/react';
+
+import * as ToastStoriesImport from '../__stories__/Toaster.stories';
+
+export const ToastStories = composeStories(ToastStoriesImport, {
+    globals: {
+        screenshotTests: true,
+    },
+});

src/components/UserLabel/__stories__/UserLabel.stories.tsx

@@ -13,8 +13,9 @@ export default meta;
 type Story = StoryObj<typeof UserLabel>;
 
 const person = 'Charles Darwin';
-const email = faker.internet.email(...person.split(' '));
-const personImg = faker.internet.avatar();
+const [firstName, lastName] = person.split(' ');
+const email = faker.internet.email({firstName, lastName});
+const personImg = faker.image.avatar();
 
 export const Default: Story = {
     args: {