test: visual tests (#216)

Author: niktverd

.eslintignore

@@ -3,3 +3,5 @@ node_modules
 /build
 /storybook-static
 /server
+
+/playwright/playwright/.cache/

.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/blog-constructor/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/blog-constructor/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'

.gitignore

@@ -15,3 +15,8 @@ node_modules
 .env
 
 /styles/*css
+
+/test-results/
+/playwright-report*
+/blob-report/
+.cache*

.prettierignore

@@ -15,3 +15,5 @@ package.json
 # docs
 CHANGELOG.md
 CONTRIBUTING.md
+
+/playwright/playwright/.cache/

.storybook/preview.tsx

@@ -13,6 +13,9 @@ import {withMobile} from './decorators/withMobile';
 import {DocsDecorator} from './decorators/DocsDecorator/DocsDecorator';
 import {MobileProvider, ThemeProvider} from '@gravity-ui/uikit';
 
+import {routerData} from '../src/demo/mocks';
+import {BlogConstructorProvider} from '../src/constructor/BlogConstructorProvider';
+
 const withContextProvider: Decorator = (Story, context) => (
     <React.StrictMode>
         <ThemeProvider theme={context.globals.theme}>
@@ -23,8 +26,19 @@ const withContextProvider: Decorator = (Story, context) => (
     </React.StrictMode>
 );
 
+const withBlogConstructorProvider: Decorator = (Story, context) => {
+    return (
+        <BlogConstructorProvider
+            router={routerData}
+            isMobile={context.globals.platform === 'mobile'}
+        >
+            <Story {...context} />
+        </BlogConstructorProvider>
+    );
+};
+
 const preview: Preview = {
-    decorators: [withTheme, withLang, withMobile, withContextProvider],
+    decorators: [withTheme, withLang, withMobile, withContextProvider, withBlogConstructorProvider],
     parameters: {
         docs: {
             theme: themes.light,

jest.config.js

@@ -22,4 +22,11 @@ module.exports = {
         '\\.(css|less|scss|sass)$': 'jest-transform-css',
     },
     testMatch: ['**/*.test.[jt]s?(x)'],
+    testPathIgnorePatterns: [
+        '<rootDir>/node_modules',
+        '<rootDir>/build',
+        '<rootDir>/server',
+        '<rootDir>/.storybook',
+        '.visual.',
+    ],
 };