test: setup E2E infrastructure with Playwright and Docker

Signed-off-by: Jan Zachmann <50990105+JanZachmann@users.noreply.github.com>

Author: JanZachmann

.gitignore

@@ -15,4 +15,6 @@ src/ui/src/core/pkg/
 
 # Research and documentation files (generated, not part of source)
 *.md
-!README.md
+!README.mdsrc/ui/playwright-report/
+src/ui/test-results/
+temp/

scripts/run-e2e-tests.sh

@@ -0,0 +1,102 @@
+#!/bin/bash
+set -e
+
+# Internal script to run E2E tests inside the container
+
+echo "🔧 Setting up test environment..."
+
+# 0. Ensure bun is installed (needed for UI)
+if ! command -v bun &> /dev/null; then
+    echo "⚠️ Bun not found, installing..."
+    curl -fsSL https://bun.sh/install | bash
+    export BUN_INSTALL="$HOME/.bun"
+    export PATH="$BUN_INSTALL/bin:$PATH"
+fi
+
+# 1. Ensure Centrifugo is available (using the tool script if needed)
+if ! command -v centrifugo &> /dev/null; then
+    echo "⚠️ Centrifugo not found in PATH, checking tools directory..."
+    if [ ! -f "tools/centrifugo" ]; then
+        ./tools/setup-centrifugo.sh
+    fi
+    export PATH=$PATH:$(pwd)/tools
+fi
+
+# 2. Start Centrifugo directly (Backend is mocked, but we need real WS)
+echo "🚀 Starting Centrifugo..."
+# Using the config from backend/config/centrifugo_config.json
+CENTRIFUGO_CONFIG="src/backend/config/centrifugo_config.json"
+
+# Generate self-signed certs for testing if missing
+mkdir -p temp/certs
+if [ ! -f "temp/certs/server.cert.pem" ]; then
+    openssl req -newkey rsa:2048 -nodes -keyout temp/certs/server.key.pem -x509 -days 365 -out temp/certs/server.cert.pem -subj "/CN=localhost" 2>/dev/null
+fi
+
+# Env vars for Centrifugo
+export CENTRIFUGO_HTTP_SERVER_TLS_CERT_PEM="temp/certs/server.cert.pem"
+export CENTRIFUGO_HTTP_SERVER_TLS_KEY_PEM="temp/certs/server.key.pem"
+export CENTRIFUGO_HTTP_SERVER_PORT="8000"
+export CENTRIFUGO_CLIENT_TOKEN_HMAC_SECRET_KEY="secret"
+export CENTRIFUGO_HTTP_API_KEY="api_key"
+export CENTRIFUGO_LOG_LEVEL="info"
+
+centrifugo -c "$CENTRIFUGO_CONFIG" > /tmp/centrifugo.log 2>&1 &
+CENTRIFUGO_PID=$!
+
+echo "⏳ Waiting for Centrifugo..."
+for i in {1..30}; do
+    if curl -k -s https://localhost:8000/health > /dev/null; then
+        echo "✅ Centrifugo is ready!"
+        break
+    fi
+    if [ $i -eq 30 ]; then
+        echo "❌ Centrifugo failed to start."
+        cat /tmp/centrifugo.log
+        kill $CENTRIFUGO_PID || true
+        exit 1
+    fi
+    sleep 1
+done
+
+# 3. Serve the Frontend
+echo "🌐 Starting Frontend Dev Server..."
+cd src/ui
+# Install dependencies if needed (container might not have node_modules)
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing UI dependencies..."
+    bun install
+fi
+
+# Start vite dev server in background
+bun run dev --port 5173 > /tmp/vite.log 2>&1 &
+FRONTEND_PID=$!
+
+# Wait for Frontend
+echo "⏳ Waiting for Frontend..."
+for i in {1..30}; do
+    if curl -s http://localhost:5173 > /dev/null; then
+        echo "✅ Frontend is ready!"
+        break
+    fi
+    if [ $i -eq 30 ]; then
+        echo "❌ Frontend failed to start."
+        cat /tmp/vite.log
+        kill $FRONTEND_PID || true
+        kill $CENTRIFUGO_PID || true
+        exit 1
+    fi
+    sleep 1
+done
+
+# 4. Run Playwright Tests
+echo "🧪 Running Playwright Tests..."
+# BASE_URL is set for playwright.config.ts
+export BASE_URL="http://localhost:5173"
+
+# Run tests
+npx playwright test
+
+TEST_EXIT_CODE=$?
+
+exit $TEST_EXIT_CODE

scripts/test-e2e-in-container.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+set -e
+
+# Host script to run E2E tests inside the docker container
+
+IMAGE="omnectshareddevacr.azurecr.io/rust:bookworm"
+
+echo "🐳 Launching test container..."
+
+# Check if we need to build the frontend first
+if [ ! -d "src/ui/dist" ]; then
+    echo "📦 Building frontend..."
+    ./scripts/build-frontend.sh
+fi
+
+# Run the test script inside the container
+# We mount the current directory to /workspace
+docker run --rm \
+    -v $(pwd):/workspace \
+    -w /workspace \
+    --net=host \
+    $IMAGE \
+    /bin/bash -c "./scripts/run-e2e-tests.sh"

src/ui/bun.lock

@@ -26,6 +26,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.2.4",
+		"@playwright/test": "^1.57.0",
 		"@types/bun": "^1.2.23",
 		"@vitejs/plugin-vue": "^6.0.1",
 		"@vue/tsconfig": "^0.8.1",

src/ui/package.json

@@ -0,0 +1,42 @@
+
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* 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,
+  /* opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* 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: process.env.BASE_URL || 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run dev',
+  //   url: 'http://127.0.0.1:5173',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/ui/playwright.config.ts

@@ -0,0 +1,61 @@
+import { Page } from '@playwright/test';
+
+export async function mockConfig(page: Page) {
+  const config = {
+    KEYCLOAK_URL: 'http://localhost:8080',
+    REALM: 'omnect',
+    CLIENT_ID: 'omnect-ui',
+    CENTRIFUGO_URL: 'wss://localhost:8000/connection/websocket'
+  };
+
+  // Add as init script so it's available even before config.js loads
+  await page.addInitScript((cfg) => {
+    (window as any).__APP_CONFIG__ = cfg;
+  }, config);
+
+  // Still mock the file request to avoid 404s
+  await page.route('**/config.js', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/javascript',
+      body: `window.__APP_CONFIG__ = ${JSON.stringify(config)};`,
+    });
+  });
+}
+
+export async function mockLoginSuccess(page: Page) {
+  await page.route('**/token/login', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'text/plain',
+      body: 'mock_token_123',
+    });
+  });
+}
+
+export async function mockRequireSetPassword(page: Page) {
+  await page.route('**/require-set-password', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: 'false',
+    });
+  });
+}
+
+export async function mockNetworkConfig(page: Page) {
+  await page.route('**/api/v1/network/config', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        interfaces: [
+          {
+            name: 'eth0',
+            dhcp: true,
+          },
+        ],
+      }),
+    });
+  });
+}

src/ui/tests/fixtures/mock-api.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+import { mockLoginSuccess, mockRequireSetPassword, mockConfig } from './fixtures/mock-api';
+
+test('has title', async ({ page }) => {
+  await mockConfig(page);
+  await page.goto('/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/omnect/i);
+});
+
+test('login flow', async ({ page }) => {
+  // Listen for console logs
+  page.on('console', msg => console.log(`BROWSER LOG: ${msg.text()}`));
+  page.on('pageerror', err => console.log(`BROWSER ERROR: ${err}`));
+
+  await mockConfig(page);
+  await mockLoginSuccess(page);
+  await mockRequireSetPassword(page);
+  
+  await page.goto('/');
+  
+  // Wait for the form to appear (it's hidden while checking password set requirement)
+  // Using placeholder as Vuetify labels can be tricky with getByLabel
+  await expect(page.getByPlaceholder(/enter your password/i)).toBeVisible({ timeout: 10000 });
+  
+  // Check for the login button
+  await expect(page.getByRole('button', { name: /log in/i })).toBeVisible();
+});