E2E test harness

Author: junzyx

.gitignore

@@ -27,6 +27,9 @@ out/
 build
 dist
 
+# Playwright
+**/playwright-report
+**/test-results
 
 # Debug
 npm-debug.log*

package.json

@@ -1,19 +1,24 @@
 {
   "name": "htmldocs",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "turbo run build --filter=./packages/* --filter=!htmldocs-starter",
     "dev": "turbo dev",
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "version": "changeset version && pnpm install --no-frozen-lockfile",
-    "publish": "pnpm run build && pnpm publish -r"
+    "publish": "pnpm run build && pnpm publish -r",
+    "test": "turbo test"
   },
   "devDependencies": {
     "@htmldocs/eslint-config": "workspace:*",
     "@htmldocs/typescript-config": "workspace:*",
     "prettier": "^3.2.5",
-    "turbo": "latest"
+    "turbo": "latest",
+    "vitest": "^1.3.1",
+    "@vitest/coverage-v8": "^1.3.1",
+    "happy-dom": "^13.3.8"
   },
   "packageManager": "pnpm@8.9.0",
   "publishConfig": {

packages/e2e-tests/.env.example

@@ -0,0 +1,13 @@
+# Base URL for the application
+TEST_BASE_URL=http://localhost:3000
+
+# Test user credentials (required)
+TEST_USER_EMAIL=test@example.com
+TEST_USER_PASSWORD=your-test-password
+
+# Optional test data
+TEST_TEAM_ID=your-test-team-id
+
+# Test timeouts (optional, defaults shown)
+TEST_AUTH_TIMEOUT_MS=300000      # 5 minutes
+TEST_POLLING_INTERVAL_MS=1000    # 1 second 

packages/e2e-tests/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "e2e-tests",
+  "version": "1.0.0",
+  "description": "End-to-end tests for HTML Docs",
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:debug": "playwright test --debug",
+    "install:browsers": "playwright install chromium",
+    "report": "playwright show-report"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@types/node-fetch": "^2.6.12",
+    "dotenv": "^16.4.7",
+    "expect": "^29.7.0",
+    "node-fetch": "^2.7.0"
+  }
+}

packages/e2e-tests/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+// Load environment variables from .env file
+dotenv.config({ path: path.join(__dirname, '.env') });
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 60000,
+  expect: {
+    timeout: 10000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: process.env.TEST_BASE_URL || 'http://localhost:3000',
+    trace: 'on-first-retry',
+    video: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+}); 

packages/e2e-tests/tests/cli-login.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect, type Page, type Browser } from '@playwright/test';
+import { waitForAuthCompletion, validateApiKey, login } from './helpers/auth';
+import path from 'path';
+import { promisify } from 'util';
+import { exec } from 'child_process';
+
+const execAsync = promisify(exec);
+
+test.describe('CLI Login Flow', () => {
+  const baseUrl = process.env.TEST_BASE_URL || 'http://localhost:3000';
+  let authPage: Page;
+
+  test.beforeAll(async ({ browser }: { browser: Browser }) => {
+    // Create a new context and page for authentication
+    const context = await browser.newContext();
+    authPage = await context.newPage();
+    await login(authPage);
+  });
+
+  test.afterAll(async () => {
+    await authPage.close();
+  });
+  
+  test('complete login flow with team selection', async () => {
+    // Find the CLI binary path relative to the test file
+    const cliPath = path.resolve(__dirname, '../../../packages/htmldocs/dist/cli/index.mjs');
+
+    // Execute the CLI login command with --headless to get the auth URL
+    const { stdout } = await execAsync(`node ${cliPath} login --headless`, {
+      env: {
+        ...process.env,
+        API_URL: baseUrl,
+      },
+    });
+
+    // Get the authorization URL from stdout
+    const authUrl = stdout.trim();
+    expect(authUrl).toContain(`${baseUrl}/authorize`);
+    expect(authUrl).toContain('callback=');
+    console.log('authUrl', authUrl);
+
+    // Navigate to the auth URL using the already authenticated page
+    await authPage.goto(authUrl);
+    
+    // Verify we're on the auth page
+    await expect(authPage).toHaveURL(/.*\/authorize/);
+
+    // Click the create token button
+    await authPage.getByRole('button', { name: /create new api token/i }).click();
+
+    // Wait for success message
+    await expect(authPage.getByText('Token Created Successfully')).toBeVisible();
+    await expect(authPage.getByText('You can safely close this window now.')).toBeVisible();
+
+    // Extract session ID from the URL
+    const url = new URL(authUrl);
+    const callback = url.searchParams.get('callback');
+    const decodedData = JSON.parse(Buffer.from(callback!, 'base64').toString());
+    const sessionId = decodedData.session_id;
+
+    // Wait for auth completion and verify
+    const authResult = await waitForAuthCompletion(sessionId);
+    expect(authResult.apiKey).toBeTruthy();
+    expect(authResult.teamId).toBeTruthy();
+    
+    // Validate API key format
+    const isValidApiKey = await validateApiKey(authResult.apiKey!);
+    expect(isValidApiKey).toBe(true);
+  });
+}); 

packages/e2e-tests/tests/fixtures.ts

@@ -0,0 +1,18 @@
+import { test as base, type Page } from '@playwright/test';
+import { login } from './helpers/auth';
+
+// Declare the types of your fixtures
+type AuthFixtures = {
+  authedPage: Page;
+};
+
+// Extend the base test with authenticated page
+export const test = base.extend<AuthFixtures>({
+  authedPage: async ({ page }, use: (page: Page) => Promise<void>) => {
+    // Login before running the test
+    await login(page);
+    
+    // Use the authenticated page in the test
+    await use(page);
+  },
+}); 

packages/e2e-tests/tests/helpers/auth.ts

@@ -0,0 +1,58 @@
+import { expect, type Page } from '@playwright/test';
+import fetch from 'node-fetch';
+
+export interface AuthSession {
+  sessionId: string;
+  apiKey?: string;
+  teamId?: string;
+}
+
+export async function login(page: Page): Promise<void> {
+  const email = process.env.TEST_USER_EMAIL;
+  const password = process.env.TEST_USER_PASSWORD;
+
+  if (!email || !password) {
+    throw new Error('TEST_USER_EMAIL and TEST_USER_PASSWORD must be set in .env');
+  }
+
+  // Navigate to login page
+  await page.goto('/auth/login');
+
+  // Fill in login form
+  await page.getByLabel(/email/i).fill(email);
+  await page.getByLabel(/password/i).fill(password);
+  await page.getByRole('button', { name: /sign in/i }).click();
+
+  // Wait for navigation and verify we're logged in
+  await page.waitForURL(/.*\/document/);
+}
+
+export const waitForAuthCompletion = async (sessionId: string, maxAttempts = 30): Promise<AuthSession> => {
+  const baseUrl = process.env.TEST_BASE_URL || 'http://localhost:3000';
+  let attempts = 0;
+
+  while (attempts < maxAttempts) {
+    const response = await fetch(`${baseUrl}/api/auth/check-status?session_id=${sessionId}`);
+    const data = await response.json();
+
+    if (data.status === 'completed' && data.team_id && data.api_key) {
+      return {
+        sessionId,
+        apiKey: data.api_key,
+        teamId: data.team_id,
+      };
+    } else if (data.status === 'error') {
+      throw new Error(`Authentication failed: ${data.message}`);
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    attempts++;
+  }
+
+  throw new Error('Authentication timed out');
+};
+
+export const validateApiKey = async (apiKey: string): Promise<boolean> => {
+  // Add validation logic here based on your API requirements
+  return apiKey.startsWith('tk_') && apiKey.length > 20;
+}; 

packages/htmldocs/package.json

@@ -45,7 +45,9 @@
     "dev": "next dev",
     "start": "next start",
     "lint": "next lint",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@babel/core": "^7.24.6",