chore: kanban template

e2e/tests/support/hooks.ts

@@ -0,0 +1,126 @@
+import {
+  Before,
+  After,
+  BeforeAll,
+  AfterAll,
+  setDefaultTimeout,
+} from '@cucumber/cucumber'
+import { spawn, type ChildProcess } from 'child_process'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import type { AppWorld } from './world.js'
+import { config } from './types.js'
+
+setDefaultTimeout(config.responseTimeout)
+
+let backendProcess: ChildProcess | undefined
+let frontendProcess: ChildProcess | undefined
+
+async function waitForUrl(url: string, label: string, timeoutMs = 60_000) {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    try {
+      const res = await fetch(url)
+      if (res.status < 500) return
+    } catch {
+      // not ready yet
+    }
+    await new Promise((r) => setTimeout(r, 500))
+  }
+  throw new Error(`[e2e] ${label} did not become ready at ${url} within ${timeoutMs}ms`)
+}
+
+BeforeAll(async function () {
+  if (!config.manageServers) {
+    // Caller is expected to start backend + frontend (e.g. via pm2, docker,
+    // or a separate `yarn dev` terminal) before running tests.
+    return
+  }
+
+  const __dirname = dirname(fileURLToPath(import.meta.url))
+  const repoRoot = resolve(__dirname, '../../..')
+
+  // Project-specific: override these commands by setting E2E_BACKEND_CMD /
+  // E2E_FRONTEND_CMD env vars. The defaults assume `yarn dev` at the repo
+  // root spawns the frontend, and the project provides a `dev:backend`
+  // script for the API.
+  const backendCmd = process.env.E2E_BACKEND_CMD ?? 'yarn dev:backend'
+  const frontendCmd = process.env.E2E_FRONTEND_CMD ?? 'yarn dev'
+
+  backendProcess = spawn(backendCmd, {
+    cwd: repoRoot,
+    env: { ...process.env, NODE_ENV: 'test' },
+    stdio: 'pipe',
+    shell: true,
+    detached: true,
+  })
+  backendProcess.stderr?.on('data', (d: Buffer) =>
+    process.stderr.write(`[backend] ${d}`),
+  )
+  backendProcess.stdout?.on('data', (d: Buffer) =>
+    process.stdout.write(`[backend] ${d}`),
+  )
+
+  frontendProcess = spawn(frontendCmd, {
+    cwd: repoRoot,
+    env: { ...process.env, NODE_ENV: 'test' },
+    stdio: 'pipe',
+    shell: true,
+    detached: true,
+  })
+  frontendProcess.stderr?.on('data', (d: Buffer) =>
+    process.stderr.write(`[frontend] ${d}`),
+  )
+  frontendProcess.stdout?.on('data', (d: Buffer) =>
+    process.stdout.write(`[frontend] ${d}`),
+  )
+
+  await Promise.all([
+    waitForUrl(config.apiUrl, 'backend'),
+    waitForUrl(config.appUrl, 'frontend'),
+  ])
+})
+
+AfterAll(async function () {
+  for (const p of [backendProcess, frontendProcess]) {
+    if (!p?.pid) continue
+    try {
+      // Detached + pgid kill takes the whole tree (vite/wrangler spawn children).
+      process.kill(-p.pid, 'SIGTERM')
+    } catch {
+      try {
+        p.kill('SIGTERM')
+      } catch {
+        // ignore
+      }
+    }
+  }
+})
+
+Before(async function (this: AppWorld) {
+  await this.openBrowser()
+  if (config.resetUrl) {
+    const body = config.resetRpcName
+      ? JSON.stringify({ rpcName: config.resetRpcName, data: {} })
+      : undefined
+    await fetch(config.resetUrl, {
+      method: 'POST',
+      headers: body ? { 'content-type': 'application/json' } : undefined,
+      body,
+    })
+      .then((res) => {
+        if (!res.ok) {
+          process.stderr.write(
+            `[e2e] WARN: reset hook ${config.resetUrl} returned ${res.status}\n`,
+          )
+        }
+      })
+      .catch(() => {
+        process.stderr.write(`[e2e] WARN: reset hook ${config.resetUrl} unreachable\n`)
+      })
+  }
+})
+
+After(async function (this: AppWorld) {
+  await this.closeBrowser()
+})

e2e/tests/support/types.ts

@@ -0,0 +1,28 @@
+// Project-level e2e configuration. Override via env vars per environment.
+//
+// Defaults match the kanban-board-template's default ports:
+//   apps/kanban → tanstack-start (ssr) on 7104
+//   backend   → wrangler/cfw worker on 4003 (or whatever the project wires)
+
+export const config = {
+  /** URL of the running frontend (vite dev server or built preview). */
+  appUrl: process.env.APP_URL ?? 'http://localhost:7104',
+  /** URL of the running backend (Pikku API / CFW worker). */
+  apiUrl: process.env.API_URL ?? 'http://localhost:4003',
+  /** Per-step Playwright timeout (ms). */
+  responseTimeout: Number(process.env.E2E_TIMEOUT ?? 30_000),
+  /** Whether the harness should spawn the dev servers itself. */
+  manageServers: process.env.E2E_MANAGE_SERVERS === '1',
+  /**
+   * Reset hook URL — POST here to reset the DB to seed state between scenarios.
+   * Project must implement this as a sessionless RPC gated behind a test-only
+   * flag (e.g. NODE_ENV !== 'production'). Leave undefined to skip reset.
+   */
+  resetUrl: process.env.E2E_RESET_URL,
+  /**
+   * RPC name to invoke at resetUrl. When set, the reset hook posts
+   * `{rpcName, data: {}}` as the body — matching pikku's public /rpc/:name
+   * envelope. Leave unset for non-pikku reset endpoints.
+   */
+  resetRpcName: process.env.E2E_RESET_RPC_NAME,
+} as const

e2e/tests/support/world.ts

@@ -0,0 +1,84 @@
+import { World, setWorldConstructor } from '@cucumber/cucumber'
+import {
+  chromium,
+  type Browser,
+  type BrowserContext,
+  type Page,
+} from '@playwright/test'
+import { config } from './types.js'
+
+/**
+ * AppWorld — generic Playwright world for portal-style apps.
+ *
+ * Exposes the primitives every feature needs:
+ *   - openBrowser / closeBrowser     — lifecycle
+ *   - gotoApp(path)                  — navigate within the frontend
+ *   - login(email, password)         — fill + submit /login, wait for redirect
+ *   - logout()                       — visit /logout
+ *   - expectText(text)               — assert visible text
+ *
+ * Project-specific helpers (e.g. createBooking, assignRoom) belong in
+ * step files, not here. Keep this generic.
+ */
+export class AppWorld extends World {
+  browser!: Browser
+  context!: BrowserContext
+  page!: Page
+
+  async openBrowser() {
+    const headed = process.env.HEADED === '1' || process.env.HEADED === 'true'
+    this.browser = await chromium.launch({
+      headless: !headed,
+      slowMo: headed ? 150 : 0,
+    })
+    this.context = await this.browser.newContext(
+      process.env.E2E_LOCALE ? { locale: process.env.E2E_LOCALE } : undefined,
+    )
+    this.page = await this.context.newPage()
+    this.page.setDefaultTimeout(config.responseTimeout)
+  }
+
+  async closeBrowser() {
+    await this.context?.close()
+    await this.browser?.close()
+  }
+
+  async gotoApp(path: string) {
+    const url = path.startsWith('http')
+      ? path
+      : `${config.appUrl}${path.startsWith('/') ? path : `/${path}`}`
+    await this.page.goto(url)
+  }
+
+  /**
+   * Fills the login form on /login and waits for navigation away from it.
+   * Assumes the login form has inputs named/typed `email` and a password
+   * input. Override per-project if the form differs.
+   */
+  async login(email: string, password: string) {
+    await this.gotoApp('/login')
+    await this.page.locator('input[type="email"]').fill(email)
+    await this.page.locator('input[type="password"]').fill(password)
+    await this.page.getByRole('button', { name: /(sign in|login|anmelden)/i }).click()
+    await this.page.waitForURL((url) => !url.pathname.startsWith('/login'), {
+      timeout: config.responseTimeout,
+    })
+  }
+
+  async logout() {
+    await this.gotoApp('/logout')
+  }
+
+  async expectText(text: string) {
+    await this.page.getByText(text, { exact: false }).first().waitFor({
+      state: 'visible',
+      timeout: config.responseTimeout,
+    })
+  }
+
+  async getPageText(): Promise<string> {
+    return this.page.innerText('body')
+  }
+}
+
+setWorldConstructor(AppWorld)