ci: integrated visual tests via playwright

.eslintrc

@@ -19,5 +19,9 @@
             "varsIgnorePattern": "^_",
             "caughtErrors": "none"
         }]
-    }
+    },
+    "ignorePatterns": [
+        "**/__tests__/**/*",
+        "**/__stories__/**/*"
+    ]
 }

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

@@ -0,0 +1,43 @@
+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: Download Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_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/markdown-editor/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: visual tests report
+          message: '[Visual Tests Report](https://storage.yandexcloud.net/playwright-reports/markdown-editor/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'

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

@@ -0,0 +1,42 @@
+name: PR Visual Tests
+
+on:
+  pull_request:
+
+jobs:
+  visual_tests:
+    name: Visual Tests
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.49.0-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - 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

gulpfile.js

@@ -69,7 +69,12 @@ async function compileTS({module, destPath}) {
     ];
 
     return new Promise((resolve) => {
-        gulp.src(['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.test.{js,jsx,ts,tsx}'])
+        gulp.src([
+            'src/**/*.{js,jsx,ts,tsx}',
+            '!src/**/*.test.{js,jsx,ts,tsx}',
+            '!src/**/__tests__/**/*',
+            '!src/**/__stories__/**/*',
+        ])
             .pipe(sourcemaps.init())
             .pipe(
                 tsProject({

jest.config.js

@@ -6,7 +6,7 @@ const {compilerOptions} = require('./tsconfig.json');
 module.exports = {
     preset: 'ts-jest/presets/js-with-ts',
     testEnvironment: 'jsdom',
-    testPathIgnorePatterns: ['spec.js', 'spec.ts'],
+    testPathIgnorePatterns: ['spec.js', 'spec.ts', '__tests__', '__stories__'],
     setupFilesAfterEnv: ['<rootDir>tests/setup.ts'],
     moduleNameMapper: {
         ...pathsToModuleNameMapper(compilerOptions.paths, {prefix: '<rootDir>/'}),