feat: add scripts for testing in docker container

.dockerignore

@@ -0,0 +1 @@
+**/node_modules

.github/workflows/ci.yml

@@ -28,28 +28,5 @@ jobs:
         run: npm run lint
       - name: Build Files
         run: npm run build
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-      - name: Tests
-        run: npm run test
-      - 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
       - name: Typecheck
         run: npm run typecheck

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

@@ -2,7 +2,7 @@ name: PR Visual Tests Report
 
 on:
   workflow_run:
-    workflows: ['CI']
+    workflows: ['PR Visual Tests']
     types:
       - completed
 

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

@@ -0,0 +1,49 @@
+name: PR Visual Tests
+
+on:
+  pull_request:
+    branches: [master]
+
+jobs:
+  visual_tests:
+    name: Visual Tests
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.2-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install Packages
+        run: npm ci
+      - name: Install Demo Packages
+        run: cd demo && npm i
+      - name: Build Files
+        run: npm run build
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Visual Tests
+        env:
+          HOME: /root
+        run: npm run test
+      - 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

README.md

@@ -96,36 +96,37 @@ If you want to change it, you should add `.env` file in repository's root direct
 BASE_URL= # for example:'http://localhost:6006'
 ```
 
-### Running tests
+### Running tests on MacOS and Linux
 
 All tests:
 
 ```bash
-npm run test
+npm run playwright:docker npm run test
 ```
 
 Single test:
 
 ```bash
-npm run test test_name.spec.ts
+npm run playwright:docker npm run test test_name.spec.ts
 ```
 
 Several sets of test files from different folders:
 
 ```bash
-npm run test __tests__/folder1 __tests__/folder2
-```
-
-Last failed tests:
-
-```bash
-npx playwright test --last-failed
+npm run playwright:docker npm run test __tests__/folder1 __tests__/folder2
 ```
 
 These commands run storybook server before tests.
 
 If storybook server is already running, playwright will use it for tests and won't run another server.
 
+### Running tests on Windows
+
+```bash
+# add ':windows'
+npm run playwright:docker:windows npm run test
+```
+
 ### Test reports
 
 To see test reports run:
@@ -155,7 +156,7 @@ After running tests playwright will create folder for snapshots (if it didn't ex
 If reference screenshot is incorrect you can update it:
 
 ```bash
-npm run test --update-snapshots
+npm run playwright:docker npm run test --update-snapshots
 ```
 
 ## License

package.json

@@ -51,15 +51,17 @@
     "deps:install": "npm ci",
     "deps:truncate": "npm prune --production",
     "typecheck": "tsc -p . --noEmit",
-    "test": "exit 0",
+    "test": "npx playwright test --config playwright/playwright.config.ts",
+    "playwright:docker": "sh ./playwright/playwright-docker.sh",
+    "playwright:docker:windows": "sh ./playwright/playwright-docker-windows.sh",
     "dev": "run-s build _dev:watch",
     "_dev:watch": "run-p _build:watch _storybook:watch",
     "build:clean": "rm -rf build",
-    "build:compile": "./esbuild/build.js",
+    "build:compile": "node esbuild/build.js",
     "_build:declarations:esm": "tsc --emitDeclarationOnly -p tsconfig.esm.json",
     "_build:declarations:cjs": "tsc --emitDeclarationOnly -p tsconfig.cjs.json",
     "build": "run-s build:clean build:compile _build:declarations:*",
-    "_build:watch": "./esbuild/build.js --watch",
+    "_build:watch": "node esbuild/build.js --watch",
     "_storybook:watch": "cd demo && npm run storybook",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
     "postinstall": "cd demo && npm i || true",

playwright/Dockerfile

@@ -0,0 +1,11 @@
+FROM mcr.microsoft.com/playwright:v1.48.2-jammy
+WORKDIR /usr/src/app
+RUN cd ..
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN cd demo && \
+    npm i && \
+    cd .. && \
+    npx playwright install && \
+    npm run build

playwright/playwright-docker-windows.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+set -e
+
+source ./playwright/variables.sh
+
+HOST_COMPONENTS_DIR="/src/components"
+HOST_REPORT_DIR="/playwright-report"
+
+if [ -z "$1" ]; then
+  echo "Usage: $0 <command>"
+  exit 1
+fi
+
+COMMAND=$@
+
+docker build -t $IMAGE_NAME -f ./playwright/Dockerfile . &&  
+docker run --rm -v /${PWD}$HOST_COMPONENTS_DIR:$CONTAINER_COMPONENTS_DIR -v /${PWD}$HOST_REPORT_DIR:$CONTAINER_REPORT_DIR $IMAGE_NAME $COMMAND

playwright/playwright-docker.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+set -e
+
+source ./playwright/variables.sh
+
+HOST_COMPONENTS_DIR="./src/components"
+HOST_REPORT_DIR="./playwright-report"
+
+if [ -z "$1" ]; then
+  echo "Usage: $0 <command>"
+  exit 1
+fi
+
+COMMAND=$@
+
+docker build -t $IMAGE_NAME -f ./playwright/Dockerfile . &&  
+docker run --rm -v $HOST_COMPONENTS_DIR:$CONTAINER_COMPONENTS_DIR -v $HOST_REPORT_DIR:$CONTAINER_REPORT_DIR $IMAGE_NAME $COMMAND

playwright.config.ts → playwright/playwright.config.ts

@@ -1,18 +1,26 @@
+import {resolve} from 'path';
 import {defineConfig, devices} from '@playwright/test';
 
-import {BASE_URL} from './src/components/constants';
+import {BASE_URL} from '../src/components/constants';
+
+function pathFromRoot(p: string) {
+    // replace for Windows users
+    return resolve(__dirname, '../', p).replace(/\\/g, '/');
+}
 
 export default defineConfig({
+    testDir: pathFromRoot('src/components'),
     updateSnapshots: 'missing',
-    snapshotPathTemplate: '{testFilePath}/../../__screenshots__/{arg}-{projectName}{ext}',
+    snapshotPathTemplate:
+        '{testDir}/{testFilePath}/../../__screenshots__/{arg}-{projectName}-{platform}{ext}',
     fullyParallel: false,
     forbidOnly: true,
     retries: 2,
     workers: 1,
     reporter: 'html',
     webServer: {
         reuseExistingServer: true,
-        command: 'npm run _storybook:watch',
+        command: 'BROWSER=true npm run dev',
         url: BASE_URL,
         timeout: 120 * 1000,
     },

playwright/variables.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+IMAGE_NAME="playwright-docker"
+CONTAINER_COMPONENTS_DIR="/usr/src/app/src/components"
+CONTAINER_REPORT_DIR="/usr/src/app/playwright-report"

tsconfig.json

@@ -21,6 +21,6 @@
     "demo/**/*.tsx",
     "demo/.storybook/**/*.ts",
     "demo/.storybook/**/*.tsx",
-    "playwright.config.ts"
+    "playwright/playwright.config.ts"
   ]
 }