chore(TestComponent): made a new kind of component testing

.github/workflows/ci.yml

@@ -40,3 +40,29 @@ jobs:
     - name: Unit Tests
       run: npm run test
 
+	test_component:
+		name: Test component
+		runs-on: ubuntu-latest
+		steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: npm
+    - name: Install Packages
+      run: npm ci
+    - name: Install Playwright browsers
+      run: npm run playwright:install
+    - name: Run Playwright tests
+      run: npm run test:component
+      env:
+        CI: 'true'
+    - name: Upload Playwright playwright report to GitHub Actions Artifacts
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: playwright-reports
+        path: playwright-report/index.html
+        retention-days: 1

.gitignore

@@ -10,3 +10,5 @@ node_modules
 /build
 /styles/**/*.css
 /coverage
+/test-component/playwright/.cache
+/playwright-report

package.json

@@ -72,7 +72,10 @@
         "lint:prettier:fix": "prettier --write '**/*.md'",
         "lint": "run-p lint:*",
         "typecheck": "tsc --noEmit",
-        "prepublishOnly": "npm run build"
+        "prepublishOnly": "npm run build",
+        "playwright:install": "playwright install --with-deps",
+        "test:component": "playwright test --config=test-component/playwright.config.ts",
+        "test:component:update": "npm run test:component -- -u"
     },
     "dependencies": {
         "@bem-react/classname": "^1.6.0",
@@ -103,6 +106,8 @@
         "@gravity-ui/prettier-config": "^1.0.1",
         "@gravity-ui/stylelint-config": "^2.0.0",
         "@gravity-ui/tsconfig": "^1.0.0",
+        "@playwright/experimental-ct-react": "^1.38.1",
+        "@playwright/test": "^1.38.1",
         "@storybook/addon-essentials": "^7.3.2",
         "@storybook/cli": "^7.3.2",
         "@storybook/preset-scss": "^1.0.3",
@@ -120,6 +125,7 @@
         "@types/react-transition-group": "^4.4.6",
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
+        "@vitejs/plugin-react": "^4.1.0",
         "chroma-js": "^2.4.2",
         "cross-env": "^7.0.3",
         "eslint": "^8.47.0",
@@ -162,4 +168,4 @@
             "prettier --write"
         ]
     }
-}
+}

src/components/ArrowToggle/__component__/ArrowToggle.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {expect, test} from '@playwright/experimental-ct-react';
+
+import {ArrowToggle} from '../ArrowToggle';
+
+test.describe('ArrowToggle', () => {
+    test('render ArrowToggle by default', async ({mount}) => {
+        const component = await mount(<ArrowToggle />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render ArrowToggle by direction top ', async ({mount}) => {
+        const component = await mount(<ArrowToggle direction="top" />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render ArrowToggle by direction left ', async ({mount}) => {
+        const component = await mount(<ArrowToggle direction="left" />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render ArrowToggle by direction bottom ', async ({mount}) => {
+        const component = await mount(<ArrowToggle direction="bottom" />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render ArrowToggle by direction right ', async ({mount}) => {
+        const component = await mount(<ArrowToggle direction="right" />);
+
+        await expect(component).toHaveScreenshot();
+    });
+});

src/components/Button/__component__/Button.spec.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import {Gear} from '@gravity-ui/icons';
+import {expect, test} from '@playwright/experimental-ct-react';
+
+import {Button} from '../Button';
+
+import {ButtonIcon, ButtonWitchIcon} from './ButtonHelpers';
+
+test.describe('Button', () => {
+    test('render buttom by default', async ({mount}) => {
+        const component = await mount(<Button>Button</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('should render icon', async ({mount}) => {
+        const component = await mount(
+            <Button>
+                <Gear width={20} height={20} />
+                Left
+            </Button>,
+        );
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('should render icon in Button.Icon', async ({mount}) => {
+        const component = await mount(<ButtonIcon />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('selected when selected=true prop is given', async ({mount}) => {
+        const component = await mount(<Button selected>Button</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('loading when loading=true prop is given', async ({mount}) => {
+        const component = await mount(<Button loading>Button</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('should render <a /> tag', async ({mount}) => {
+        const href = 'https://yandex.ru';
+        const target = '_blank';
+
+        const component = await mount(
+            <Button href={href} target={target}>
+                Button
+            </Button>,
+        );
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render with given submit type', async ({mount}) => {
+        const component = await mount(<Button type="submit">Button</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('render with given reset type', async ({mount}) => {
+        const component = await mount(<Button type="reset">Button</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('show given content', async ({mount}) => {
+        const content = 'Some content';
+
+        const component = await mount(<Button>{content}</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('show given children', async ({mount}) => {
+        const childrenText = 'Children content';
+
+        const component = await mount(
+            <Button>
+                <span>{childrenText}</span>
+            </Button>,
+        );
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('add style', async ({mount}) => {
+        const style = {color: 'red'};
+
+        const component = await mount(<Button style={style}>Button</Button>);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('should render Icon component', async ({mount}) => {
+        const component = await mount(<ButtonWitchIcon />);
+
+        await expect(component).toHaveScreenshot();
+    });
+});

src/components/Button/__component__/ButtonHelpers.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {Gear} from '@gravity-ui/icons';
+
+import {Icon} from '../../Icon';
+import {Button} from '../Button';
+
+export const ButtonWitchIcon = () => {
+    return (
+        <Button>
+            <Icon data={Gear} />
+            Left
+        </Button>
+    );
+};
+
+export const ButtonIcon = () => {
+    return (
+        <Button>
+            <Button.Icon>
+                <Gear width={20} height={20} />
+            </Button.Icon>
+            Left
+        </Button>
+    );
+};

src/components/Card/__component__/Card.spec.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+import {expect, test} from '@playwright/experimental-ct-react';
+
+import {WrapperCard} from './WrapperCard';
+
+test.describe('Card test component', () => {
+    test('render card by default', async ({mount}) => {
+        const component = await mount(<WrapperCard />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test.describe('render with different themes', () => {
+        test('danger', async ({mount}) => {
+            const component = await mount(<WrapperCard theme="danger" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('info', async ({mount}) => {
+            const component = await mount(<WrapperCard theme="info" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('normal', async ({mount}) => {
+            const component = await mount(<WrapperCard theme="normal" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('success', async ({mount}) => {
+            const component = await mount(<WrapperCard theme="success" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('positive', async ({mount}) => {
+            const component = await mount(<WrapperCard theme="positive" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('warning', async ({mount}) => {
+            const component = await mount(<WrapperCard theme="warning" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+    });
+
+    test.describe('render with different size', () => {
+        test('m', async ({mount}) => {
+            const component = await mount(<WrapperCard size="m" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('l', async ({mount}) => {
+            const component = await mount(<WrapperCard size="l" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+    });
+
+    test.describe('render with different view', () => {
+        test('outlined', async ({mount}) => {
+            const component = await mount(<WrapperCard view="outlined" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('clear', async ({mount}) => {
+            const component = await mount(<WrapperCard view="clear" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('filled', async ({mount}) => {
+            const component = await mount(<WrapperCard view="filled" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+
+        test('raised', async ({mount}) => {
+            const component = await mount(<WrapperCard view="raised" />);
+
+            await expect(component).toHaveScreenshot();
+        });
+    });
+
+    test('selected when selected=true prop is given', async ({mount}) => {
+        const component = await mount(<WrapperCard selected={true} />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('not selected when selected=false prop is given', async ({mount}) => {
+        const component = await mount(<WrapperCard selected={false} />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('disabled when disabled=true prop is given', async ({mount}) => {
+        const component = await mount(<WrapperCard disabled={true} />);
+
+        await expect(component).toHaveScreenshot();
+    });
+
+    test('not disabled when disabled=false prop is given', async ({mount}) => {
+        const component = await mount(<WrapperCard disabled={false} />);
+
+        await expect(component).toHaveScreenshot();
+    });
+});

src/components/Card/__component__/WrapperCard.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {Card, CardProps} from '../Card';
+
+const qaId = 'card-component';
+const cardText = 'Some text';
+
+export const WrapperCard = (props: Omit<CardProps, 'children'>) => {
+    return (
+        <div style={{padding: 20}}>
+            <Card {...props} qa={qaId}>
+                {cardText}
+            </Card>
+        </div>
+    );
+};