test: add OIDC E2E tests for Keycloak integration

- Playwright test infrastructure for OIDC flows
- Login/logout, account management, user sync tests
- Keycloak admin helper for test setup/teardown
- Docker Compose config for OIDC test environment

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: boehlke

client/tests/.gitignore

@@ -1,4 +1,9 @@
 node_modules/
 /test-results/
+/test-results-oidc/
 /playwright-report/
+/playwright-report-oidc/
 /playwright/.cache/
+
+# OIDC test state (generated by global setup)
+integration/.oidc-test-state.json

client/tests/Dockerfile.oidc-test

@@ -0,0 +1,16 @@
+FROM mcr.microsoft.com/playwright:v1.57.0-jammy
+
+WORKDIR /app
+
+# Install dependencies
+COPY ./package.json .
+COPY ./package-lock.json .
+ENV CI=1
+RUN npm ci
+
+# Copy test configuration and fixtures
+COPY ./playwright.oidc.config.ts .
+COPY ./integration ./integration
+
+# Default command runs OIDC tests
+CMD ["npx", "playwright", "test", "--config=playwright.oidc.config.ts"]

client/tests/Dockerfile.test

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.58.2-jammy
+FROM mcr.microsoft.com/playwright:v1.58.1-jammy
 
 WORKDIR /app
 COPY ./package.json .

client/tests/docker-compose.oidc-test.yml

@@ -0,0 +1,82 @@
+version: '3.8'
+
+#
+# Docker Compose configuration for OIDC E2E tests in CI.
+#
+# This extends the standard test configuration to include Keycloak checks.
+#
+# Usage:
+#   docker compose -f docker-compose.oidc-test.yml up --exit-code-from playwright
+#
+
+services:
+  playwright:
+    build:
+      context: .
+      dockerfile: Dockerfile.oidc-test
+    image: playwright-oidc
+    container_name: playwright-oidc
+    environment:
+      - CI=true
+      - BASE_URL=https://localhost:8000
+      - KEYCLOAK_URL=http://localhost:8080
+      - SKIP_OIDC_TESTS=false
+      - KEYCLOAK_AVAILABLE=true
+    volumes:
+      - ./integration:/app/integration
+      - ./fixtures:/app/fixtures
+      - ./playwright.oidc.config.ts:/app/playwright.oidc.config.ts
+      - ./playwright-report-oidc:/app/playwright-report-oidc
+      - ./test-results-oidc:/app/test-results-oidc
+    network_mode: host
+    depends_on:
+      keycloak-health:
+        condition: service_healthy
+      openslides-health:
+        condition: service_healthy
+
+  # Health check sidecar for Keycloak
+  keycloak-health:
+    image: curlimages/curl:latest
+    container_name: keycloak-health
+    entrypoint: ["/bin/sh", "-c"]
+    command:
+      - |
+        echo "Waiting for Keycloak..."
+        until curl -sf http://localhost:8080/auth/realms/openslides/.well-known/openid-configuration > /dev/null 2>&1; do
+          echo "Keycloak not ready, waiting..."
+          sleep 2
+        done
+        echo "Keycloak is ready!"
+        # Keep container running for health check
+        tail -f /dev/null
+    network_mode: host
+    healthcheck:
+      test: ["CMD", "curl", "-sf", "http://localhost:8080/auth/realms/openslides/.well-known/openid-configuration"]
+      interval: 5s
+      timeout: 10s
+      retries: 30
+      start_period: 10s
+
+  # Health check sidecar for OpenSlides
+  openslides-health:
+    image: curlimages/curl:latest
+    container_name: openslides-health
+    entrypoint: ["/bin/sh", "-c"]
+    command:
+      - |
+        echo "Waiting for OpenSlides..."
+        until curl -kf https://localhost:8000/system/auth/ > /dev/null 2>&1; do
+          echo "OpenSlides not ready, waiting..."
+          sleep 2
+        done
+        echo "OpenSlides is ready!"
+        # Keep container running for health check
+        tail -f /dev/null
+    network_mode: host
+    healthcheck:
+      test: ["CMD", "curl", "-kf", "https://localhost:8000/system/auth/"]
+      interval: 5s
+      timeout: 10s
+      retries: 30
+      start_period: 10s

client/tests/integration/fixtures/oidc-fixtures.ts

@@ -0,0 +1,215 @@
+import { test as base, expect, Page, BrowserContext } from '@playwright/test';
+
+import { KeycloakLoginPage } from '../helpers/oidc-auth';
+import { getKeycloakAdminClient } from '../helpers/keycloak-admin';
+import { loadTestState } from '../helpers/test-state';
+
+/**
+ * OIDC Test Fixtures
+ *
+ * Provides reusable fixtures for OIDC E2E tests with:
+ * - Dynamic realm support (from global setup)
+ * - Browser context isolation
+ * - Automatic session cleanup
+ */
+
+export interface OIDCTestConfig {
+    keycloakBaseUrl: string;
+    keycloakRealm: string;
+    openslidesBaseUrl: string;
+    testUsers: {
+        admin: { username: string; password: string; userId: number };
+        testuser: { username: string; password: string; userId: number };
+    };
+}
+
+function getOIDCConfig(): OIDCTestConfig {
+    // Get realm from test state (set by global setup) or fallback to env/default
+    const state = loadTestState();
+    const realm = state?.realmName || process.env.KEYCLOAK_REALM || 'openslides';
+
+    return {
+        keycloakBaseUrl: process.env.KEYCLOAK_URL || 'http://localhost:8180',
+        keycloakRealm: realm,
+        openslidesBaseUrl: process.env.BASE_URL || 'https://localhost:8000',
+        testUsers: {
+            admin: { username: 'admin', password: 'admin', userId: 1 },
+            testuser: { username: 'testuser', password: 'testpassword', userId: 2 }
+        }
+    };
+}
+
+export interface OIDCFixtures {
+    oidcConfig: OIDCTestConfig;
+    oidcEnabledContext: BrowserContext;
+    isolatedContext: BrowserContext;
+    isolatedPage: Page;
+    keycloakPage: KeycloakLoginPage;
+    cleanupSession: () => Promise<void>;
+}
+
+/**
+ * OIDC is now configured via environment variables, not organization settings.
+ * These functions are no-ops kept for test compatibility.
+ * OIDC is enabled when the Traefik OIDC middleware is configured.
+ */
+async function enableOIDC(_context: BrowserContext): Promise<void> {
+    // OIDC is enabled via Traefik middleware configuration, not organization settings.
+    // This is a no-op for test compatibility.
+}
+
+async function disableOIDC(_context: BrowserContext): Promise<void> {
+    // OIDC is enabled via Traefik middleware configuration, not organization settings.
+    // This is a no-op for test compatibility.
+}
+
+/**
+ * Extended test object with OIDC fixtures.
+ */
+export const test = base.extend<OIDCFixtures>({
+    oidcConfig: async ({}, use) => {
+        await use(getOIDCConfig());
+    },
+
+    /**
+     * Isolated browser context with clean state.
+     * Cookies are cleared before and after use.
+     */
+    isolatedContext: async ({ browser }, use) => {
+        const context = await browser.newContext({
+            storageState: undefined, // Fresh state
+            serviceWorkers: 'block' // Prevent SW interference
+        });
+
+        // Clear any cookies that might exist
+        await context.clearCookies();
+
+        await use(context);
+
+        // Cleanup after test
+        await context.clearCookies();
+        await context.close();
+    },
+
+    /**
+     * Page with isolated context and cleared storage.
+     */
+    isolatedPage: async ({ isolatedContext }, use) => {
+        const page = await isolatedContext.newPage();
+
+        // Clear local/session storage on navigation
+        await page.addInitScript(() => {
+            localStorage.clear();
+            sessionStorage.clear();
+        });
+
+        await use(page);
+
+        await page.close();
+    },
+
+    /**
+     * Keycloak login page helper.
+     */
+    keycloakPage: async ({ page, oidcConfig }, use) => {
+        const keycloakPage = new KeycloakLoginPage(page, {
+            keycloakBaseUrl: oidcConfig.keycloakBaseUrl,
+            realm: oidcConfig.keycloakRealm,
+            clientId: 'openslides-client'
+        });
+        await use(keycloakPage);
+    },
+
+    /**
+     * Session cleanup helper that clears Keycloak sessions for test users.
+     */
+    cleanupSession: async ({ oidcConfig }, use) => {
+        const cleanup = async () => {
+            try {
+                const admin = getKeycloakAdminClient();
+                await admin.authenticate();
+
+                // Clear sessions for test users
+                for (const userKey of ['admin', 'testuser'] as const) {
+                    const user = oidcConfig.testUsers[userKey];
+                    await admin.clearUserSessionsByUsername(oidcConfig.keycloakRealm, user.username);
+                }
+            } catch (error) {
+                console.warn('[OIDC Fixture] Session cleanup warning:', error);
+            }
+        };
+
+        await use(cleanup);
+
+        // Auto-cleanup after test
+        await cleanup();
+    }
+});
+
+export { expect };
+
+/**
+ * Helper to wait for OIDC redirect to complete.
+ */
+export async function waitForOIDCRedirect(page: Page, options?: { timeout?: number }): Promise<void> {
+    const timeout = options?.timeout || 30000;
+
+    // Wait until we're no longer on the Keycloak login page
+    await expect(page).not.toHaveURL(/login-actions/, { timeout });
+
+    // Wait until we're no longer on OpenSlides login page
+    await expect(page).not.toHaveURL(/\/login$/, { timeout });
+}
+
+/**
+ * Helper to initiate OIDC login flow with robust button detection.
+ */
+export async function initiateOIDCFlow(page: Page): Promise<void> {
+    await page.goto('/login');
+    await page.waitForLoadState('networkidle');
+
+    // Wait for Angular app to be ready
+    await page.waitForSelector('os-login-mask', {
+        state: 'visible',
+        timeout: 15000
+    });
+
+    // Prioritized selector strategy (most specific to least)
+    const ssoSelectors = [
+        '[data-testid="sso-login-button"]', // Preferred: explicit test ID
+        '[data-cy="sso-login"]', // Alternative test attribute
+        'button:has-text("SSO")', // Text-based fallback
+        'button:has-text("OIDC")', // Alternative text
+        'button:has-text("Single Sign")' // Full text variant
+    ];
+
+    for (const selector of ssoSelectors) {
+        const button = page.locator(selector);
+        const isVisible = await button.isVisible({ timeout: 2000 }).catch(() => false);
+
+        if (isVisible) {
+            console.log(`[OIDC Fixture] Found SSO button with selector: ${selector}`);
+            await button.click();
+            return;
+        }
+    }
+
+    // Last resort: find button containing SSO-related text via regex
+    const genericButton = page
+        .locator('button')
+        .filter({
+            hasText: /sso|oidc|single.?sign/i
+        })
+        .first();
+
+    if (await genericButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+        console.log('[OIDC Fixture] Found SSO button via regex filter');
+        await genericButton.click();
+        return;
+    }
+
+    throw new Error(
+        'No SSO login button found. Ensure OIDC is enabled and the button has ' +
+            'data-testid="sso-login-button" attribute.'
+    );
+}