test: add visual tests infra

.github/workflows/playwright.yml

@@ -0,0 +1,49 @@
+name: Playwright Tests
+
+on:
+  # push:
+    # branches: [main, next]
+  pull_request:
+
+jobs:
+  test:
+    name: Test component
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run playwright
+      env:
+        CI: 'true'
+    - name: Upload Playwright playwright report to GitHub Actions Artifacts
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: playwright-report
+        path: playwright-report
+        retention-days: 1
+    - name: Upload Playwright report
+      if: always()
+      env:
+        AWS_ACCESS_KEY_ID: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
+        AWS_DEFAULT_REGION: ru-central1
+        AWS_EC2_METADATA_DISABLED: true
+      run: aws s3 cp ./playwright-report s3://playwright-reports/uikit/pulls/${{ github.event.pull_request.number }}/ --endpoint-url=https://storage.yandexcloud.net --recursive
+      shell: bash 
+    - name: Create Comment
+      if: always()
+      uses: marocchino/sticky-pull-request-comment@v2
+      with:
+        GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+        number: ${{ github.event.pull_request.number }}
+        header:  playwright test
+        message: '[Playwright Test Component](https://storage.yandexcloud.net/playwright-reports/uikit/pulls/${{ github.event.pull_request.number }}/index.html) is ready.'
+

.gitignore

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

jest.config.js

@@ -20,4 +20,5 @@ module.exports = {
         '\\.(css|less|scss|sass)$': 'jest-transform-css',
     },
     testMatch: ['**/*.test.[jt]s?(x)'],
+    testPathIgnorePatterns: ['.visual.'],
 };