Merge branch 'adminV2' into fix-refresh-button-also-for-user

.github/workflows/on-push.yml

@@ -94,7 +94,7 @@ jobs:
         run: yarn install --frozen-lockfile --immutable
 
       - name: Run Playwright tests
-        run: yarn test:visual
+        run: npx playwright test -c playwright.config.ts
 
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

README.md

@@ -30,6 +30,8 @@ yarn dev
 ```
 
 ## Documentation
+- [Running visual tests](playwright/README.md)
+
 <details>
 <summary><strong><code>Release Deployment</code></strong></summary>
 <br/>

package.json

@@ -12,8 +12,8 @@
     "build": "tsc && vite build",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0",
     "test:unit": "vitest --config ./vitest.config.unit.ts",
-    "test:visual": "playwright test -c playwright.config.ts",
-    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual": "docker compose -f ./playwright/docker-compose.yaml up playwright-tests --build",
+    "test:visual:update": "docker compose -f ./playwright/docker-compose.yaml up playwright-update-tests --build",
     "coverage": "vitest run --coverage",
     "preview": "vite preview",
     "prettier:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,json,css}'",

playwright.config.ts

@@ -14,13 +14,13 @@ import { GitHubActionOptions } from '@estruyf/github-actions-reporter';
  */
 export default defineConfig({
   testDir: './src/__tests__',
-  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshoots__/{testName}/{arg}{ext}',
+  snapshotPathTemplate: '{testDir}/visual/__screenshoots__/{testName}/{platform}/{arg}-{projectName}{ext}',
   expect: {
     // Maximum time expect() should wait for the condition to be met.
     timeout: 5000,
 
     toHaveScreenshot: {
-      maxDiffPixelRatio: 0.02,
+      maxDiffPixelRatio: 0.01,
     },
   },
   /* Run tests in files in parallel */

playwright/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:22-bookworm-slim
+
+RUN npx -y [email protected] install --with-deps
+
+WORKDIR /app
+
+COPY package.json ./
+COPY yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+

playwright/README.md

@@ -0,0 +1,36 @@
+# Running Playwright Tests
+
+> **Note:** We run visual tests inside docker container because we need to have screenshots from linux
+
+## Introduction
+
+This guide explains how to run visual tests in Playwright using npm scripts. The scripts we will cover are:
+
+- `test:visual`: runs visual tests.
+- `test:visual:update`: updates existing snapshots.
+
+## Setting Up the Environment
+
+Ensure you have docker
+
+## Docker files
+
+```
+/app
+├── /playwright
+│   ├── Dockerfile
+│   └── docker-compose.yml
+└── ...
+```
+
+## Run tests
+
+```
+yarn tests:visual
+```
+
+## Update image snapshots
+
+```
+yarn tests:visual:update
+```

playwright/docker-compose.yaml

@@ -0,0 +1,20 @@
+services:
+  playwright-tests:
+    build:
+      context: ./..
+      dockerfile: playwright/Dockerfile
+    volumes:
+      - ../src/__tests__/visual/__screenshoots__:/app/src/__tests__/visual/__screenshoots__
+      - ../playwright-report:/app/playwright-report
+      - ../test-results:/app/test-results
+    command: npx playwright test --reporter=html
+    environment:
+      CI: false
+
+  playwright-update-tests:
+    build:
+      context: ./..
+      dockerfile: playwright/Dockerfile
+    volumes:
+      - ../src/__tests__/visual/__screenshoots__:/app/src/__tests__/visual/__screenshoots__
+    command: npx playwright test --update-snapshots

src/__tests__/visual/xpubs/xpubs-page.visual.test.ts

@@ -50,6 +50,8 @@ test.describe('xpubs page', () => {
       await route.fulfill({ json });
     });
 
+    await page.waitForLoadState('domcontentloaded');
+
     await expect(page).toHaveScreenshot();
   });
 });