Merge pull request #4 from lingodotdev/feat/e2e

feat: add e2e tests

Author: AleksandrSl

cmp/.github/workflows/ci.yml

@@ -1,8 +1,10 @@
 name: CI
 
 on:
+  push:
+    branches: [main]
   pull_request:
-    branches: [main, dev]
+    branches: [main]
 
 jobs:
   lint:
@@ -42,3 +44,34 @@ jobs:
         run: pnpm build
       - name: Test
         run: pnpm test
+
+  playwright-e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5.0.1
+        # pnpm version is taken from package.json
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Use Node.js 20
+        uses: actions/setup-node@v6.0.0
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        working-directory: ./compiler
+        run: pnpm exec playwright install --with-deps
+      - name: Prepare tests
+        working-directory: ./compiler
+        run: pnpm run test:prepare
+      - name: Run tests
+        working-directory: ./compiler
+        run: pnpm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

cmp/compiler/.gitignore

@@ -0,0 +1,11 @@
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
+
+# Translation server logs
+translation-server.log

cmp/compiler/package.json

@@ -117,15 +117,14 @@
     "clean": "rm -rf build",
     "test": "vitest --run",
     "test:watch": "vitest -w",
-    "test:prepare": "tsx tests/helpers/prepare-fixtures.ts",
+    "test:prepare": "pnpm build && tsx tests/helpers/prepare-fixtures.ts",
     "test:e2e": "playwright test",
     "test:e2e:next": "playwright test --grep next",
     "test:e2e:vite": "playwright test --grep vite",
     "test:e2e:shared": "playwright test tests/e2e/shared",
     "test:e2e:dev": "playwright test --ui",
     "test:e2e:debug": "playwright test --debug",
-    "test:e2e:report": "playwright show-report",
-    "playwright:install": "playwright install chromium"
+    "test:e2e:report": "playwright show-report"
   },
   "keywords": [],
   "author": "",
@@ -140,7 +139,7 @@
     "@types/react": "^18.3.26",
     "@types/react-dom": "^19.2.3",
     "@types/ws": "^8.18.1",
-    "next": "^16.0.3",
+    "next": "^16.1.0",
     "tsdown": "^0.16.5",
     "tsx": "^4.19.2",
     "typescript": "^5.9.3",
@@ -172,8 +171,8 @@
   },
   "peerDependencies": {
     "next": "^15.0.0 || ^16.0.4",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": " ^19.0.0"
   },
   "peerDependenciesMeta": {
     "next": {

cmp/compiler/playwright.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Run tests sequentially with a single worker */
+  workers: 1,
+  /* Timeout for each test (includes beforeAll/afterAll hooks) */
+  timeout: 180000, // 3 minutes - accounts for packing compiler, installing deps, starting servers
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    /* Action timeout (individual page actions like click, fill, etc) */
+    actionTimeout: 30000, // 30 seconds for individual actions
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

cmp/compiler/src/react/shared/LingoProvider.tsx

@@ -468,9 +468,7 @@ function LingoProvider__Dev({
         pendingCount: pendingHashesRef.current.size,
         position: devWidget?.position || "bottom-left",
       } satisfies LingoDevState;
-      // Set WebSocket URL for widget to connect to translation server
       window.__LINGO_DEV_WS_URL__ = serverUrl;
-      // Trigger widget update
       window.__LINGO_DEV_UPDATE__?.();
     }
   }, [isLoading, locale, sourceLocale, devWidget]);

cmp/compiler/src/react/shared/LocaleSwitcher.tsx

@@ -87,6 +87,7 @@ export function LocaleSwitcher({
         ...style,
       }}
       aria-label="Select language"
+      data-testid="lingo-locale-switcher"
     >
       {locales.map((loc) => (
         <option key={loc.code} value={loc.code}>

cmp/compiler/tests/.gitignore

@@ -0,0 +1,6 @@
+# Playwright artifacts
+playwright-report/
+test-results/
+
+# Prepared fixtures (with node_modules)
+fixtures/

cmp/compiler/tests/QUICK_START.md

@@ -0,0 +1,140 @@
+# E2E Tests - Quick Start
+
+## First Time Setup (5 minutes)
+
+```bash
+# 1. Install dependencies
+pnpm install
+
+# 2. Install Playwright browsers
+pnpm playwright:install
+
+# 3. Prepare test fixtures (takes 2-3 minutes)
+pnpm test:prepare
+```
+
+## Running Tests
+
+```bash
+# Run all tests
+pnpm test:e2e
+
+# Run in interactive UI mode (recommended for development)
+pnpm test:e2e:dev
+
+# Run only shared tests
+pnpm test:e2e:shared
+
+# Debug a specific test
+pnpm test:e2e:debug
+```
+
+## How It Works
+
+### Fast Test Execution Strategy
+
+Instead of installing dependencies on every test run, we use a two-stage approach:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Stage 1: Preparation (ONE TIME - run pnpm test:prepare)    │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  demo/next16/  ──────┐                                     │
+│                      ├──> tests/fixtures/next/             │
+│  + pnpm install  ────┘     (with node_modules)             │
+│                                                             │
+│  demo/vite/    ──────┐                                     │
+│                      ├──> tests/fixtures/vite/             │
+│  + pnpm install  ────┘     (with node_modules)             │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────┐
+│ Stage 2: Test Execution (FAST - every test run)            │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  tests/fixtures/next/  ──> /tmp/lingo-test-next-xyz/       │
+│  (copy with node_modules)  (isolated test environment)     │
+│                                                             │
+│  ✅ No dependency installation needed                       │
+│  ✅ Each test gets clean copy                               │
+│  ✅ Fast execution (~seconds per test)                      │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Why This Approach?
+
+**Without preparation:**
+
+- ❌ Install deps on every test: ~2-3 min per test
+- ❌ Total test time: ~10-15 minutes for 5 tests
+
+**With preparation:**
+
+- ✅ Prepare once: ~2-3 minutes (one time)
+- ✅ Each test: ~10-30 seconds
+- ✅ Total test time: ~2-5 minutes for 5 tests
+
+**10x faster test execution!**
+
+## When to Re-run `pnpm test:prepare`
+
+- When demo app `package.json` changes
+- When you update demo app dependencies
+- After pulling major changes to demo apps
+- If fixtures get corrupted
+
+## Directory Structure
+
+```
+tests/
+├── fixtures/           # ← Prepared fixtures (gitignored)
+│   ├── next/          # ← Next.js with node_modules
+│   └── vite/          # ← Vite with node_modules
+├── e2e/
+│   └── shared/
+│       └── development.test.ts
+└── helpers/
+    ├── prepare-fixtures.ts   # ← Prepares fixtures
+    └── setup-fixture.ts      # ← Copies fixtures to temp dir
+```
+
+## Example Test Flow
+
+```typescript
+import { setupFixture } from "../../helpers/setup-fixture";
+
+test("my test", async ({ page }) => {
+  // 1. Copy prepared fixture to temp dir (fast - already has node_modules)
+  const fixture = await setupFixture({ framework: "next" });
+
+  // 2. Start dev server (dependencies already installed)
+  const devServer = await fixture.startDev();
+
+  try {
+    // 3. Run your test
+    await page.goto(`http://localhost:${devServer.port}`);
+    // ... test assertions ...
+  } finally {
+    // 4. Cleanup
+    devServer.stop();
+    await fixture.clean();
+  }
+});
+```
+
+## CI/CD Integration
+
+In CI, run both stages:
+
+```yaml
+- name: Prepare fixtures
+  run: pnpm test:prepare
+
+- name: Run E2E tests
+  run: pnpm test:e2e
+```
+
+You could also cache the `tests/fixtures/` directory to speed up CI runs.