wip

package.json

@@ -76,8 +76,8 @@
         "playwright:install": "playwright install --with-deps",
         "playwright": "playwright test --config=playwright/playwright.config.ts",
         "playwright:update": "npm run playwright -- -u",
-        "playwright:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx  playwright install && npm run playwright'",
-        "playwright:docker:update": " docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx  playwright install && npm run playwright:update'"
+        "playwright:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx playwright install && npm run playwright'",
+        "playwright:docker:update": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx playwright install && npm run playwright:update'"
     },
     "dependencies": {
         "@bem-react/classname": "^1.6.0",

playwright/playwright.config.ts

@@ -64,7 +64,12 @@ const config: PlaywrightTestConfig = {
         },
         {
             name: 'webkit',
-            use: {...devices['Desktop Safari']},
+            use: {
+                ...devices['Desktop Safari'],
+                launchOptions: {
+                    args: ['--font-render-hinting=none'],
+                },
+            },
         },
     ],
 };

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

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {expect} from '@playwright/experimental-ct-react';
+
+import {Icon, Image, ImageFallback, Showcase, Text, TextInitials, WithBorder} from './stories';
+
+import {test} from '~playwright/core';
+
+test.describe('Avatar', () => {
+    test('render story: <Image>', async ({mount}) => {
+        const component = await mount(<Image />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render story: <ImageFallback>', async ({mount}) => {
+        const component = await mount(<ImageFallback />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render story: <Icon>', async ({mount}) => {
+        const component = await mount(<Icon />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render story: <Text>', async ({mount}) => {
+        const component = await mount(<Text />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render story: <TextInitials>', async ({mount}) => {
+        const component = await mount(<TextInitials />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render story: <WithBorder>', async ({mount}) => {
+        const component = await mount(<WithBorder />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render story: <Showcase>', async ({mount}) => {
+        const component = await mount(<Showcase />);
+
+        await expect(component).toHaveScreenshot();
+    });
+});

src/components/Avatar/__tests__/stories.ts

@@ -0,0 +1,13 @@
+import {composeStories} from '@storybook/react';
+
+import * as Stories from '../__stories__/Avatar.stories';
+
+export const {
+    Image,
+    ImageFallback,
+    Icon,
+    Text,
+    TextInitials,
+    WithBorder,
+    AvatarShowcase: Showcase,
+} = composeStories(Stories);