feat: add scripts for testing in docker container

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",
+    "test:docker": "sh ./playwright/playwright-docker.sh",
+    "test: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,15 @@
+FROM mcr.microsoft.com/playwright:v1.48.2-jammy
+WORKDIR /usr/src/app
+RUN cd ..
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN rm -r node_modules && \
+    npm ci && \
+    cd demo && \
+    rm -r node_modules && \
+    npm ci && \
+    cd .. && \
+    npx playwright install && \
+    npm run build
+CMD ["npm", "run", "test"]

playwright/playwright-docker-windows.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+set -e
+
+source ./playwright/variables.sh
+
+HOST_COMPONENTS_DIR="/src/components"
+
+docker build --no-cache -t $IMAGE_NAME -f ./playwright/Dockerfile . &&  
+docker run --rm -v /${PWD}$HOST_COMPONENTS_DIR:$CONTAINER_COMPONENTS_DIR $IMAGE_NAME

playwright/playwright-docker.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+set -e
+
+source ./playwright/variables.sh
+
+HOST_COMPONENTS_DIR="./src/components"
+
+docker build --no-cache -t $IMAGE_NAME -f ./playwright/Dockerfile . &&  
+docker run --rm -v $HOST_COMPONENTS_DIR:$CONTAINER_COMPONENTS_DIR $IMAGE_NAME

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,4 @@
+#!/bin/bash
+
+IMAGE_NAME="playwright-docker"
+CONTAINER_COMPONENTS_DIR="/usr/src/app/src/components"

tsconfig.json

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