chore: setup playwright (#236)

Author: ddgrishkin

.github/workflows/pr-visual-tests-report.yml

@@ -0,0 +1,49 @@
+name: PR Visual Tests Report
+
+on:
+  workflow_run:
+    workflows: ['PR Visual Tests']
+    types:
+      - completed
+
+jobs:
+  comment:
+    name: Create GitHub Comment
+    if: github.event.workflow_run.event == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Generate token
+        id: generate-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ secrets.GRAVITY_UI_APP_ID }}
+          private-key: ${{ secrets.GRAVITY_UI_APP_PRIVATE_KEY }}
+      - name: Download Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ steps.generate-token.outputs.token }}
+          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: Install AWS CLI
+        uses: unfor19/install-aws-cli-action@v1
+        with:
+          version: 2.22.35
+          arch: amd64
+      - name: Upload to S3
+        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/date-components/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: ${{ steps.generate-token.outputs.token }}
+          number: ${{ steps.pr.outputs.id }}
+          header: visual tests report
+          message: '[Visual Tests Report](https://storage.yandexcloud.net/playwright-reports/date-components/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'

.github/workflows/pr-visual-tests.yml

@@ -0,0 +1,60 @@
+name: PR Visual Tests
+
+on:
+  pull_request:
+
+jobs:
+  visual-tests-prepare:
+    name: Detect Playwright Version
+    runs-on: ubuntu-latest
+    outputs:
+      playwright-version: ${{ steps.detect-playwright-version.outputs.version }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js from .nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+      - name: Install Packages
+        run: npm ci
+      - name: Detect Playwright version
+        id: detect-playwright-version
+        run: |
+          VERSION=$(./scripts/playwright-version.sh)
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Detected Playwright version: $VERSION"
+
+  visual-tests:
+    name: Visual Tests
+    runs-on: ubuntu-latest
+    needs: visual-tests-prepare
+    container:
+      image: mcr.microsoft.com/playwright:v${{ needs.visual-tests-prepare.outputs.playwright-version }}-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Packages
+        run: npm ci
+      - name: Run Visual Tests
+        run: npm run playwright
+        env:
+          CI: 'true'
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        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@v4
+        with:
+          name: pr
+          path: ./pr-id.txt

.gitignore

@@ -9,3 +9,13 @@ node_modules
 dist
 storybook-static
 .cache
+
+# Playwright
+playwright-report
+playwright-report-docker
+playwright/.cache-docker
+playwright/.cache/
+test-results
+
+# System files
+.DS_Store

jest.config.js

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