chore: playwright test screenshots components and update React 18 (#266)

test: playwright test screenshots components

.github/workflows/playwright.yml

@@ -0,0 +1,41 @@
+name: Playwright Tests
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    name: Test component
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.45.3-jammy
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - 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: Save PR ID
+        if: always()
+        run: |
+          pr="${{ github.event.pull_request.number }}"
+          echo $pr > ./pr-id.txt
+        shell: bash
+      - name: Create PR Artifact
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: pr
+          path: ./pr-id.txt

.github/workflows/pr-playwright-report.yml

@@ -0,0 +1,38 @@
+name: PR Playwright Report
+
+on:
+  workflow_run:
+    workflows: ['Playwright Tests']
+    types:
+      - completed
+
+jobs:
+  comment:
+    name: Upload Playwright report to s3
+    if: github.event.workflow_run.event == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Artifacts
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          run_id: ${{ github.event.workflow_run.id }}
+      - name: Extract PR Number
+        id: pr
+        run: echo "::set-output name=id::$(<pr/pr-id.txt)"
+        shell: bash
+      - name: Upload
+        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/navigation/pulls/${{ steps.pr.outputs.id }}/ --endpoint-url=https://storage.yandexcloud.net --recursive
+        shell: bash
+      - name: Create Comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+          number: ${{ steps.pr.outputs.id }}
+          header: playwright test
+          message: '[Playwright Test Component](https://storage.yandexcloud.net/playwright-reports/navigation/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'

.gitignore

@@ -12,4 +12,10 @@ build
 # other files
 pnpm-lock.yaml
 
+#Playwright
+/playwright/playwright/.cache
+/playwright-report
+/test-results
 
+# other files
+pnpm-lock.yaml

jest.config.js

@@ -8,4 +8,5 @@ module.exports = {
     transformIgnorePatterns: ['node_modules/(?!(@gravity-ui)/)'],
     coverageDirectory: './coverage',
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/__stories__/**/*', '!**/*/*.stories.{ts,tsx}'],
+    modulePathIgnorePatterns: ['visual', 'helpersPlaywright'],
 };