@etus/bhono-app 0.1.1

package/templates/base/tests/e2e/auth-flows.unauth.spec.ts

@@ -0,0 +1,117 @@
+import { test, expect } from './fixtures'
+
+/**
+ * Auth Flow Tests (Unauthenticated)
+ *
+ * These tests verify authentication flows without requiring an authenticated session.
+ * Tests are run with the 'chromium-unauth' project (no storageState).
+ *
+ * @tags @auth
+ */
+
+test.describe('Auth Flows @auth', () => {
+  test.describe('Login Page', () => {
+    test('should display login options', async ({ page }) => {
+      await page.goto('/login')
+
+      // Should see welcome message
+      await expect(page.getByText('Welcome back')).toBeVisible()
+
+      // Should have Google OAuth button
+      const googleButton = page.getByRole('button', { name: /continue with google/i })
+      await expect(googleButton).toBeVisible()
+      await expect(googleButton).toBeEnabled()
+    })
+
+    test('Google OAuth button should redirect to OAuth provider', async ({ page }) => {
+      await page.goto('/login')
+
+      // Get the Google OAuth button
+      const googleButton = page.getByRole('button', { name: /continue with google/i })
+      await expect(googleButton).toBeVisible()
+
+      // Click and wait for navigation to OAuth provider
+      // We expect either:
+      // 1. Redirect to Google's OAuth page (accounts.google.com)
+      // 2. Redirect to our OAuth endpoint (/auth/login) which then redirects to Google
+      const [response] = await Promise.all([
+        page.waitForResponse(
+          (resp) =>
+            resp.url().includes('accounts.google.com') ||
+            resp.url().includes('/auth/login') ||
+            resp.url().includes('/auth/google'),
+          { timeout: 10000 }
+        ).catch(() => null),
+        googleButton.click(),
+      ])
+
+      // Should have navigated away from login page
+      // Either to Google OAuth or to our auth endpoint
+      await expect
+        .poll(
+          async () => {
+            const url = page.url()
+            return (
+              url.includes('accounts.google.com') ||
+              url.includes('/auth/login') ||
+              url.includes('/auth/google') ||
+              // If OAuth is configured differently, we at least shouldn't be on login anymore
+              !url.includes('/login')
+            )
+          },
+          {
+            timeout: 10000,
+            message: 'Expected to navigate away from login page to OAuth provider',
+          }
+        )
+        .toBeTruthy()
+    })
+  })
+
+  test.describe('Protected Route Redirects', () => {
+    const protectedRoutes = [
+      { path: '/dashboard', name: 'Dashboard' },
+      { path: '/settings', name: 'Settings' },
+      { path: '/team', name: 'Team' },
+    ]
+
+    for (const route of protectedRoutes) {
+      test(`unauthenticated user should be redirected from ${route.name}`, async ({ page }) => {
+        // Try to access protected route without auth
+        await page.goto(route.path)
+
+        // Should be redirected to login page
+        await expect(page).toHaveURL(/login/, { timeout: 10000 })
+
+        // Login page should be visible
+        await expect(page.getByText('Welcome back')).toBeVisible()
+      })
+    }
+  })
+
+  test.describe('Auth Endpoints', () => {
+    test('/auth/me should return 401 for unauthenticated requests', async ({ request, baseURL }) => {
+      const response = await request.get(`${baseURL}/auth/me`, {
+        failOnStatusCode: false,
+      })
+
+      // Should return 401 Unauthorized
+      expect(response.status()).toBe(401)
+    })
+
+    test('/auth/logout should handle unauthenticated logout gracefully', async ({
+      page,
+      request,
+      baseURL,
+    }) => {
+      // Logout endpoint should not crash for unauthenticated users
+      const response = await request.post(`${baseURL}/auth/logout`, {
+        failOnStatusCode: false,
+      })
+
+      // Should either redirect or return success (implementation dependent)
+      // Accept 200, 302 (redirect), or 401
+      expect([200, 302, 401]).toContain(response.status())
+    })
+  })
+})

package/templates/base/tests/e2e/auth-logout.unauth.spec.ts

@@ -0,0 +1,103 @@
+import { test, expect, isAuthenticated, waitForNavigation } from './fixtures'
+
+/**
+ * Logout Flow Tests
+ *
+ * These tests verify logout functionality. They are in a separate file (.unauth.spec.ts)
+ * to run in the chromium-unauth project, preventing session invalidation from
+ * affecting other parallel tests.
+ *
+ * @tags @auth @logout
+ */
+
+test.describe('Logout Flow @auth @logout', () => {
+  // Run serially - logout tests invalidate session
+  test.describe.configure({ mode: 'serial' })
+
+  test('logout should clear session and redirect to login', async ({ page }) => {
+    // First authenticate via test-login
+    const loginResponse = await page.request.post('/auth/test-login', {
+      data: {
+        email: 'logout-test@example.com',
+        name: 'Logout Test User',
+      },
+      failOnStatusCode: false,
+    })
+
+    test.skip(!loginResponse.ok(), 'Test login endpoint not available')
+
+    // Navigate to dashboard first
+    await page.goto('/dashboard')
+    await expect(page).not.toHaveURL(/login/)
+
+    // Find and click logout button/link
+    const logoutButton = page.getByRole('button', { name: /logout|sign out|log out/i })
+    const logoutLink = page.getByRole('link', { name: /logout|sign out|log out/i })
+
+    let logoutElement = null
+
+    if (await logoutButton.isVisible({ timeout: 3000 }).catch(() => false)) {
+      logoutElement = logoutButton
+    } else if (await logoutLink.isVisible({ timeout: 3000 }).catch(() => false)) {
+      logoutElement = logoutLink
+    }
+
+    if (!logoutElement) {
+      // Try opening user menu first
+      const userMenu = page.getByRole('button', { name: /account|profile|user|menu/i })
+      if (await userMenu.isVisible({ timeout: 2000 }).catch(() => false)) {
+        await userMenu.click()
+
+        // Look for logout in dropdown
+        const dropdownLogout = page.getByRole('menuitem', { name: /logout|sign out/i })
+        if (await dropdownLogout.isVisible({ timeout: 2000 }).catch(() => false)) {
+          logoutElement = dropdownLogout
+        }
+      }
+    }
+
+    // Skip if no logout element found
+    test.skip(!logoutElement, 'Logout button/link not found in UI')
+
+    // Click logout
+    await logoutElement!.click()
+
+    // Should be redirected to login page
+    await expect(page).toHaveURL(/login/, { timeout: 10000 })
+
+    // Verify session is cleared by trying to access protected route
+    await page.goto('/dashboard')
+    await expect(page).toHaveURL(/login/)
+  })
+
+  test('logout via API should clear session', async ({ page, request, baseURL }) => {
+    // First authenticate via test-login
+    const loginResponse = await page.request.post('/auth/test-login', {
+      data: {
+        email: 'api-logout-test@example.com',
+        name: 'API Logout Test User',
+      },
+      failOnStatusCode: false,
+    })
+
+    test.skip(!loginResponse.ok(), 'Test login endpoint not available')
+
+    // Verify authenticated
+    const authResponse = await request.get(`${baseURL}/auth/me`)
+    test.skip(!authResponse.ok(), 'Not authenticated - cannot test logout')
+
+    // Call logout endpoint
+    const logoutResponse = await request.post(`${baseURL}/auth/logout`)
+
+    // Should succeed (200) or redirect (302)
+    expect([200, 302]).toContain(logoutResponse.status())
+
+    // Verify session is cleared
+    const checkResponse = await request.get(`${baseURL}/auth/me`, {
+      failOnStatusCode: false,
+    })
+
+    // Should now return 401
+    expect(checkResponse.status()).toBe(401)
+  })
+})

package/templates/base/tests/e2e/auth.setup.ts

@@ -0,0 +1,115 @@
+import { test as setup, expect } from '@playwright/test'
+import * as fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const authFile = path.join(__dirname, '.auth/user.json')
+const accountFile = path.join(__dirname, '.auth/account.json')
+
+// Production URL pattern - skip test-login for these
+const PRODUCTION_URLS = [
+  '{{projectName}}.a3s.workers.dev',
+  'workers.dev',
+]
+
+function isProductionUrl(baseUrl: string): boolean {
+  return PRODUCTION_URLS.some(pattern => baseUrl.includes(pattern))
+}
+
+setup('authenticate', async ({ page, context, baseURL }) => {
+  // Check if we're running against production
+  if (baseURL && isProductionUrl(baseURL)) {
+    console.log(`Running against production: ${baseURL}`)
+
+    // Check if pre-captured OAuth session exists
+    if (fs.existsSync(authFile)) {
+      const authState = JSON.parse(fs.readFileSync(authFile, 'utf-8'))
+
+      // Verify session has cookies (not empty)
+      if (authState.cookies?.length > 0) {
+        console.log(`Using pre-captured OAuth session with ${authState.cookies.length} cookies`)
+
+        // Add cookies to context
+        await context.addCookies(authState.cookies)
+
+        // Navigate to set cookies in browser context
+        await page.goto('/')
+        await page.waitForLoadState('domcontentloaded')
+
+        // Verify auth works using context.request (shares cookies with browser)
+        const meResponse = await context.request.get(`${baseURL}/auth/me`)
+        const meStatus = meResponse.status()
+        const meBodyText = await meResponse.text()
+        console.log(`Auth verification: status=${meStatus}, body=${meBodyText.substring(0, 200)}`)
+
+        if (meResponse.ok()) {
+          const userData = JSON.parse(meBodyText)
+          console.log(`Authenticated as: ${userData.email || 'unknown'}`)
+
+          // Save accountId if available
+          if (userData.accounts?.[0]?.id) {
+            fs.writeFileSync(accountFile, JSON.stringify({ accountId: userData.accounts[0].id }, null, 2))
+          }
+
+          // Verify dashboard access
+          await page.goto('/dashboard')
+          await expect(page).not.toHaveURL(/login/)
+
+          // Re-save auth state (in case cookies were refreshed)
+          await context.storageState({ path: authFile })
+          return
+        } else {
+          console.log('Pre-captured session expired or invalid')
+          console.log('Run: pnpm test:e2e:prod:auth to capture a new session')
+        }
+      }
+    }
+
+    // No valid pre-captured session for production
+    console.log('No valid OAuth session found for production')
+    console.log('Run: pnpm test:e2e:prod:auth to capture a session first')
+    console.log('Tests requiring authentication will be skipped')
+    // DO NOT overwrite auth file in production - preserve any existing captured session
+    return
+  }
+
+  // Development/local: use test-login endpoint
+  await page.goto('/')
+
+  const response = await page.request.post('/auth/test-login', {
+    data: {
+      email: 'e2e-test@example.com',
+      name: 'E2E Test User',
+    },
+    failOnStatusCode: false,
+  })
+
+  if (!response.ok()) {
+    const body = await response.text()
+    console.log('Test login failed:', response.status(), body)
+    console.log('Creating empty auth state - tests will run as unauthenticated')
+    await context.storageState({ path: authFile })
+    return
+  }
+
+  // Parse the response to get the accountId
+  const loginData = await response.json()
+  const accountId = loginData.accountId
+
+  // Save accountId to file for API tests
+  if (accountId) {
+    fs.writeFileSync(accountFile, JSON.stringify({ accountId }, null, 2))
+  }
+
+  // Verify authentication works
+  const meResponse = await page.request.get('/auth/me')
+  expect(meResponse.ok()).toBeTruthy()
+
+  // Navigate to dashboard to verify auth works in UI
+  await page.goto('/dashboard')
+  await expect(page).not.toHaveURL(/login/)
+
+  // Save authenticated state
+  await context.storageState({ path: authFile })
+})

package/templates/base/tests/e2e/auth.spec.ts

@@ -0,0 +1,146 @@
+import { test, expect, isAuthenticated, waitForNavigation } from './fixtures'
+
+/**
+ * Authenticated User Tests
+ *
+ * These tests require authentication via auth.setup.ts which creates session state.
+ * Since we can't actually authenticate with Google OAuth in E2E tests without credentials,
+ * tests will check for session availability and skip if not authenticated.
+ *
+ * Run with authenticated project: npx playwright test --project=chromium
+ *
+ * @tags @auth
+ */
+
+test.describe('Authenticated User @auth', () => {
+  test.beforeEach(async ({ page }) => {
+    // Check if we have a valid session
+    const authenticated = await isAuthenticated(page)
+    test.skip(!authenticated, 'No valid session available. Run auth.setup.ts with valid credentials.')
+  })
+
+  test.describe('Navigation', () => {
+    test('should access dashboard when authenticated', async ({ page }) => {
+      await page.goto('/dashboard')
+
+      // Should not be redirected to login
+      await expect(page).not.toHaveURL(/login/)
+
+      // Should see dashboard content
+      await expect(page.locator('body')).toBeVisible()
+
+      // Check for common dashboard elements
+      const dashboardIndicators = [
+        page.getByRole('heading', { name: /dashboard/i }),
+        page.getByText(/welcome/i),
+        page.getByRole('navigation'),
+      ]
+
+      // At least one indicator should be visible
+      const results = await Promise.all(
+        dashboardIndicators.map(async (locator) => {
+          try {
+            await expect(locator).toBeVisible({ timeout: 2000 })
+            return true
+          } catch {
+            return false
+          }
+        })
+      )
+
+      expect(results.some((r) => r)).toBeTruthy()
+    })
+
+    test('should access settings when authenticated', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Should not be redirected to login
+      await expect(page).not.toHaveURL(/login/)
+
+      // Should see settings page content
+      await expect(page.locator('body')).toBeVisible()
+    })
+
+    test('should access team page when authenticated', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should not be redirected to login
+      await expect(page).not.toHaveURL(/login/)
+
+      // Should see team page content
+      await expect(page.locator('body')).toBeVisible()
+    })
+
+    test('should navigate between protected routes', async ({ page }) => {
+      // Start at dashboard
+      await page.goto('/dashboard')
+      await expect(page).not.toHaveURL(/login/)
+
+      // Navigate to settings
+      const settingsLink = page.getByRole('link', { name: /settings/i })
+      if (await settingsLink.isVisible()) {
+        await settingsLink.click()
+        await waitForNavigation(page, '/settings')
+        await expect(page).toHaveURL(/settings/)
+      }
+
+      // Navigate to team (if link exists)
+      const teamLink = page.getByRole('link', { name: /team/i })
+      if (await teamLink.isVisible()) {
+        await teamLink.click()
+        await waitForNavigation(page, '/team')
+        await expect(page).toHaveURL(/team/)
+      }
+    })
+  })
+
+  test.describe('User Session', () => {
+    test('/auth/me should return current user info', async ({ page, request, baseURL }) => {
+      // First verify we're authenticated
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No valid session available')
+
+      const response = await request.get(`${baseURL}/auth/me`)
+
+      expect(response.ok()).toBeTruthy()
+
+      const body = await response.json()
+
+      // Should have user data
+      expect(body).toHaveProperty('user')
+      expect(body.user).toHaveProperty('email')
+      expect(body.user).toHaveProperty('name')
+    })
+
+    test('should display user info in UI', async ({ page }) => {
+      await page.goto('/dashboard')
+
+      // Look for user avatar, name, or email indicator
+      const userIndicators = [
+        page.getByRole('button', { name: /account|profile|user/i }),
+        page.getByText(/e2e-test@example.com/i),
+        page.getByRole('img', { name: /avatar|profile/i }),
+      ]
+
+      // At least one user indicator should be visible
+      const results = await Promise.all(
+        userIndicators.map(async (locator) => {
+          try {
+            await expect(locator).toBeVisible({ timeout: 3000 })
+            return true
+          } catch {
+            return false
+          }
+        })
+      )
+
+      // This test is informational - may pass or fail depending on UI implementation
+      if (!results.some((r) => r)) {
+        console.log('Note: No user indicator found in UI. This may be expected based on UI design.')
+      }
+    })
+  })
+
+  // NOTE: Logout tests moved to auth-logout.unauth.spec.ts
+  // They run in chromium-unauth project to avoid invalidating shared session state
+})

package/templates/base/tests/e2e/compatibility/cross-browser.spec.ts

@@ -0,0 +1,152 @@
+import { test, expect, isAuthenticated, closeAllDialogs } from '../fixtures'
+
+/**
+ * Cross-Browser Compatibility Tests
+ *
+ * These tests verify core functionality works consistently
+ * across different browsers (Chromium, Firefox, WebKit).
+ *
+ * Run across browsers: npx playwright test e2e/compatibility --project=chromium --project=firefox
+ *
+ * @tags @compatibility @cross-browser
+ */
+
+test.describe('Cross-Browser Compatibility @compatibility @cross-browser', () => {
+  test.describe('Public Pages', () => {
+    test('login page renders correctly', async ({ page }) => {
+      await page.goto('/login')
+
+      // Core elements should be visible
+      await expect(page.getByText('Welcome back')).toBeVisible()
+      await expect(page.getByRole('button', { name: /continue with google/i })).toBeVisible()
+
+      // Verify page structure
+      await expect(page.locator('body')).toBeVisible()
+    })
+
+    test('404 page renders correctly', async ({ page, browserName }) => {
+      await page.goto('/non-existent-page')
+
+      // 404 content should be visible
+      await expect(page.getByText('404').first()).toBeVisible()
+    })
+
+    test('page navigation works correctly', async ({ page }) => {
+      // Navigate to login
+      await page.goto('/login')
+      await expect(page.getByText('Welcome back')).toBeVisible()
+
+      // Navigate to 404
+      await page.goto('/unknown')
+      await expect(page.getByText('404').first()).toBeVisible()
+
+      // Navigate back to login
+      await page.goto('/login')
+      await expect(page.getByText('Welcome back')).toBeVisible()
+    })
+  })
+
+  test.describe('Authenticated Pages', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test.afterEach(async ({ page }) => {
+      await closeAllDialogs(page)
+    })
+
+    test('dashboard renders correctly', async ({ page, browserName }) => {
+      await page.goto('/dashboard')
+
+      // Navigation should be visible
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Main content area should be visible
+      await expect(page.getByRole('main')).toBeVisible()
+    })
+
+    test('team page renders correctly', async ({ page }) => {
+      await page.goto('/team')
+
+      // Team heading should be visible
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Invite button should be visible and functional
+      const inviteButton = page.locator('button').filter({ hasText: 'Invite Member' }).first()
+      await expect(inviteButton).toBeVisible()
+      await expect(inviteButton).toBeEnabled()
+    })
+
+    test('form interactions work correctly', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.locator('button').filter({ hasText: 'Invite Member' }).first().click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      // Form input should work
+      const emailInput = page.getByLabel(/email address/i)
+      await emailInput.fill('test@example.com')
+      await expect(emailInput).toHaveValue('test@example.com')
+
+      // Clear input
+      await emailInput.clear()
+      await expect(emailInput).toHaveValue('')
+
+      // Close dialog
+      await page.getByRole('button', { name: /cancel/i }).click()
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+    })
+
+    test('dropdown and select interactions work correctly', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.locator('button').filter({ hasText: 'Invite Member' }).first().click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      // Role selector should be visible (look for the select trigger or role text)
+      const roleText = page.getByText(/role/i).first()
+      await expect(roleText).toBeVisible()
+
+      // Close dialog
+      await page.getByRole('button', { name: /cancel/i }).click()
+    })
+
+    test('button states and interactions work correctly', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.locator('button').filter({ hasText: 'Invite Member' }).first().click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      // Send button should be disabled without email
+      const sendButton = page.getByRole('button', { name: /send invitation/i })
+      await expect(sendButton).toBeDisabled()
+
+      // Fill email to enable button
+      const emailInput = page.getByLabel(/email address/i)
+      await emailInput.fill('valid@email.com')
+      await expect(sendButton).toBeEnabled()
+
+      // Close dialog
+      await page.getByRole('button', { name: /cancel/i }).click()
+    })
+
+    test('keyboard navigation works correctly', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Verify tabs are visible and accessible
+      const profileTab = page.getByRole('tab', { name: /profile/i })
+      await expect(profileTab).toBeVisible()
+
+      // Click profile tab to ensure focus is in tab area
+      await profileTab.click()
+
+      // Navigate to account tab
+      await page.getByRole('tab', { name: /account/i }).click()
+      await expect(page.getByRole('tab', { name: /account/i })).toHaveAttribute('data-state', 'active')
+    })
+  })
+})