@etus/bhono-app 0.1.1

package/templates/base/tests/e2e/errors/error-boundary.spec.ts

@@ -0,0 +1,428 @@
+import { test, expect, isAuthenticated } from '../fixtures'
+
+/**
+ * Error Boundary E2E Tests
+ *
+ * Tests React error boundaries, network error handling,
+ * and error recovery UI patterns.
+ *
+ * @tags @error @error-boundary
+ */
+
+test.describe('Error Boundary @error @error-boundary', () => {
+  test.describe('Route Error Handling', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('error boundary shows fallback UI when route loader fails', async ({ page }) => {
+      // Intercept auth/me to return 500 error (simulates route loader failure)
+      await page.route('**/auth/me', async (route) => {
+        // First let it succeed to establish session, then fail on navigation
+        const response = await route.fetch()
+        await route.fulfill({ response })
+      })
+
+      // Navigate to dashboard first
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Now intercept API calls to cause loader failure
+      await page.route('**/api/audits**', (route) => {
+        route.fulfill({
+          status: 500,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: { message: 'Internal Server Error' } }),
+        })
+      })
+
+      // Page should still function - errors are handled gracefully
+      await expect(page).toHaveURL(/dashboard/)
+    })
+
+    test('error fallback shows "Something went wrong" message', async ({ page }) => {
+      // Navigate to authenticated page
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept the team API to fail with 500
+      await page.route('**/api/users**', (route) => {
+        route.fulfill({
+          status: 500,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: { message: 'Internal Server Error' } }),
+        })
+      })
+
+      // Navigate to team page which should trigger error UI
+      await page.goto('/team')
+
+      // The page should either show error UI or handle gracefully
+      // Check for error indicators or normal page load
+      const hasError = await page.getByText(/something went wrong|error|try again/i).isVisible().catch(() => false)
+      const hasTeamContent = await page.getByRole('heading', { name: /team members/i }).isVisible().catch(() => false)
+
+      // Should show either error state or graceful degradation
+      expect(hasError || hasTeamContent).toBeTruthy()
+    })
+
+    test('error fallback has "Try again" button that resets state', async ({ page }) => {
+      // Navigate to authenticated page
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      let requestCount = 0
+
+      // Intercept API to fail first, then succeed
+      await page.route('**/api/users**', (route) => {
+        requestCount++
+        if (requestCount <= 1) {
+          route.fulfill({
+            status: 500,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { message: 'Internal Server Error' } }),
+          })
+        } else {
+          // Let subsequent requests through
+          route.continue()
+        }
+      })
+
+      // Navigate to team page
+      await page.goto('/team')
+
+      // Look for try again button if error is shown
+      const tryAgainButton = page.getByRole('button', { name: /try again/i })
+      const hasButton = await tryAgainButton.isVisible({ timeout: 3000 }).catch(() => false)
+
+      if (hasButton) {
+        // Click try again - should reset error state
+        await tryAgainButton.click()
+
+        // Should either reload or show content
+        await expect(page).toHaveURL(/team/)
+      } else {
+        // Error was handled gracefully without showing error UI
+        // Verify page loaded
+        await expect(page).toHaveURL(/team/)
+      }
+    })
+  })
+
+  test.describe('Network Error Handling', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('network errors show user-friendly message with retry option', async ({ page }) => {
+      // First navigate to a working page
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept API call and abort (simulates network failure)
+      await page.route('**/api/users**', (route) => {
+        route.abort('failed')
+      })
+
+      // Navigate to team page
+      await page.goto('/team')
+
+      // Should show error state or handle gracefully
+      // Look for error indicators
+      const errorText = page.getByText(/error|failed|network|offline|try again/i)
+      const hasError = await errorText.first().isVisible({ timeout: 3000 }).catch(() => false)
+
+      // If error is shown, look for retry option
+      if (hasError) {
+        const retryButton = page.getByRole('button', { name: /try again|retry|reload/i })
+        const hasRetry = await retryButton.isVisible({ timeout: 2000 }).catch(() => false)
+
+        // Error UI should have a retry mechanism
+        expect(hasRetry || page.getByRole('link', { name: /home|dashboard|back/i })).toBeTruthy()
+      }
+
+      // Page should still be functional
+      await expect(page).toHaveURL(/team/)
+    })
+
+    test('API 500 errors show appropriate error message', async ({ page }) => {
+      // Navigate to dashboard first
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept API to return 500
+      await page.route('**/api/**', (route) => {
+        if (route.request().url().includes('/api/audits') ||
+            route.request().url().includes('/api/users') ||
+            route.request().url().includes('/api/storage')) {
+          route.fulfill({
+            status: 500,
+            contentType: 'application/json',
+            body: JSON.stringify({
+              error: {
+                message: 'Internal Server Error',
+                code: 'INTERNAL_ERROR',
+              },
+            }),
+          })
+        } else {
+          route.continue()
+        }
+      })
+
+      // Make an API request that will fail
+      const response = await page.request.get('/api/audits', {
+        failOnStatusCode: false,
+      })
+
+      // Verify error response format
+      expect(response.status()).toBe(500)
+      const body = await response.json()
+      expect(body).toHaveProperty('error')
+      expect(body.error).toHaveProperty('message')
+    })
+
+    test('timeout errors show timeout message', async ({ page }) => {
+      test.setTimeout(20000) // Extend timeout for this test
+
+      // Navigate to dashboard first
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept API to simulate very slow response
+      await page.route('**/api/users**', async (route) => {
+        // Delay for 10 seconds to trigger timeout behavior
+        await new Promise((resolve) => setTimeout(resolve, 10000))
+        route.continue()
+      })
+
+      // Navigate to team page - should handle slow/timeout gracefully
+      await page.goto('/team', { timeout: 15000 })
+
+      // Page should either show loading state or timeout message
+      // or gracefully handle the delay
+      await expect(page).toHaveURL(/team/)
+    })
+  })
+
+  test.describe('Error Recovery Flow', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('can navigate away from error state', async ({ page }) => {
+      // Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept team API to fail
+      await page.route('**/api/users**', (route) => {
+        route.fulfill({
+          status: 500,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: { message: 'Server Error' } }),
+        })
+      })
+
+      // Navigate to team page (may show error)
+      await page.goto('/team')
+
+      // Navigate to settings (should work regardless of team page error)
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Navigate to dashboard (should also work)
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+    })
+
+    test('error state does not persist after navigation', async ({ page }) => {
+      // Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept team API to fail once
+      let failCount = 0
+      await page.route('**/api/users**', (route) => {
+        failCount++
+        if (failCount <= 1) {
+          route.fulfill({
+            status: 500,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { message: 'Server Error' } }),
+          })
+        } else {
+          route.continue()
+        }
+      })
+
+      // Navigate to team page (may trigger error)
+      await page.goto('/team')
+
+      // Navigate to settings
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Navigate back to team - should work now
+      await page.goto('/team')
+      await expect(page).toHaveURL(/team/)
+    })
+
+    test('"Go home" button navigates to dashboard', async ({ page }) => {
+      // Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept to cause error
+      await page.route('**/api/users**', (route) => {
+        route.abort('failed')
+      })
+
+      // Navigate to team page
+      await page.goto('/team')
+
+      // Look for Go home button if error UI is shown
+      const goHomeButton = page.getByRole('button', { name: /go home|home/i })
+      const hasButton = await goHomeButton.isVisible({ timeout: 2000 }).catch(() => false)
+
+      if (hasButton) {
+        await goHomeButton.click()
+        await expect(page).toHaveURL(/dashboard/)
+      }
+    })
+
+    test('"Go back" button navigates to previous page', async ({ page }) => {
+      // Navigate to settings first
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Intercept to cause error
+      await page.route('**/api/users**', (route) => {
+        route.abort('failed')
+      })
+
+      // Navigate to team page
+      await page.goto('/team')
+
+      // Look for Go back button if error UI is shown
+      const goBackButton = page.getByRole('button', { name: /go back|back/i })
+      const hasButton = await goBackButton.isVisible({ timeout: 2000 }).catch(() => false)
+
+      if (hasButton) {
+        await goBackButton.click()
+        // Should go back to settings
+        await expect(page).toHaveURL(/settings/)
+      }
+    })
+  })
+
+  test.describe('Component Error Boundary', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('page remains functional after component error is recovered', async ({ page }) => {
+      // Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Force a page reload (simulates recovery from error)
+      await page.reload()
+
+      // Page should fully recover
+      await expect(page.getByRole('navigation')).toBeVisible()
+      await expect(page).toHaveURL(/dashboard/)
+    })
+
+    test('sidebar navigation works after error recovery', async ({ page }) => {
+      // Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Click on team link in sidebar
+      const teamLink = page.getByRole('link', { name: /team/i }).first()
+      await teamLink.click()
+
+      // Should navigate successfully
+      await expect(page).toHaveURL(/team/)
+
+      // Navigate to settings via sidebar
+      const settingsLink = page.getByRole('link', { name: /settings/i }).first()
+      await settingsLink.click()
+
+      // Should navigate successfully
+      await expect(page).toHaveURL(/settings/)
+    })
+  })
+
+  test.describe('Graceful Degradation', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('app shows loading state during slow API responses', async ({ page }) => {
+      // Intercept API to add delay
+      await page.route('**/api/users**', async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        route.continue()
+      })
+
+      // Navigate to team page
+      await page.goto('/team')
+
+      // Should either show loading indicator or content
+      // (checking that something is visible)
+      await expect(page.locator('body')).toBeVisible()
+      await expect(page).toHaveURL(/team/)
+    })
+
+    test('app handles empty API responses gracefully', async ({ page }) => {
+      // Navigate to dashboard first
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept API to return empty data
+      await page.route('**/api/audits**', (route) => {
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ data: [], pagination: { page: 1, pageSize: 10, total: 0, totalPages: 0 } }),
+        })
+      })
+
+      // Make API request
+      const response = await page.request.get('/api/audits')
+      expect(response.ok()).toBeTruthy()
+
+      const body = await response.json()
+      expect(body.data).toEqual([])
+    })
+
+    test('app handles malformed API responses', async ({ page }) => {
+      // Navigate to dashboard first
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Intercept API to return malformed response
+      await page.route('**/api/users**', (route) => {
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: 'invalid json{{{',
+        })
+      })
+
+      // Navigate to team page
+      await page.goto('/team')
+
+      // App should handle the error gracefully
+      // Either show error UI or fallback content
+      await expect(page).toHaveURL(/team/)
+    })
+  })
+})

package/templates/base/tests/e2e/errors/error-handling.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect, isAuthenticated } from '../fixtures'
+
+/**
+ * API Error Handling E2E Tests
+ *
+ * Tests API error responses and validation behavior.
+ * Form validation UI tests are in crud/team.spec.ts and crud/integrations.spec.ts.
+ *
+ * @tags @error @api
+ */
+
+test.describe('API Error Handling @error @api', () => {
+  test.beforeEach(async ({ page }) => {
+    const authenticated = await isAuthenticated(page)
+    test.skip(!authenticated, 'No authenticated session available')
+  })
+
+  test('API returns proper error format for invalid UUID', async ({ page }) => {
+    // Request with invalid UUID format
+    const invalidId = 'invalid-uuid-format'
+    const response = await page.request.get(`/api/users/${invalidId}`, {
+      failOnStatusCode: false,
+    })
+
+    // Should return 400 for validation error
+    expect(response.status()).toBe(400)
+
+    const body = await response.json()
+
+    // Should have error property
+    expect(body).toHaveProperty('error')
+  })
+
+  test('API returns proper error format for non-existent resource', async ({ page }) => {
+    // Request a user that doesn't exist (valid UUID format)
+    const nonExistentId = '00000000-0000-0000-0000-000000000000'
+    const response = await page.request.get(`/api/users/${nonExistentId}`, {
+      failOnStatusCode: false,
+    })
+
+    // API may return 400 (bad request) or 404 (not found)
+    expect([400, 404]).toContain(response.status())
+
+    const body = await response.json()
+    expect(body).toHaveProperty('error')
+  })
+})

package/templates/base/tests/e2e/errors/error-handling.unauth.spec.ts

@@ -0,0 +1,205 @@
+import { test, expect } from '../fixtures'
+
+/**
+ * Error Handling E2E Tests - Unauthenticated
+ *
+ * Tests error states that don't require authentication:
+ * - 404 pages
+ * - Authentication redirect behavior
+ * - Health check endpoints
+ *
+ * @tags @error
+ */
+
+test.describe('Error Handling @error', () => {
+  test.describe('404 Errors', () => {
+    test('404 page displays for unknown routes', async ({ page }) => {
+      await page.goto('/this-page-does-not-exist')
+
+      // Should show 404 content
+      await expect(page.getByText('404').first()).toBeVisible()
+    })
+
+    test('404 page displays for nested unknown routes', async ({ page }) => {
+      await page.goto('/some/deeply/nested/unknown/route')
+
+      // Should show 404 content
+      await expect(page.getByText('404').first()).toBeVisible()
+    })
+
+    test('404 page has navigation back to home', async ({ page }) => {
+      await page.goto('/this-page-does-not-exist')
+
+      // Should show 404 content
+      await expect(page.getByText('404').first()).toBeVisible()
+
+      // Should have some form of navigation (link, button, or nav element)
+      const homeLink = page.getByRole('link', { name: /home|back|return|go back/i })
+      const homeButton = page.getByRole('button', { name: /home|back|return|go back/i })
+      const navElement = page.getByRole('navigation')
+
+      const hasHomeLink = await homeLink.isVisible({ timeout: 3000 }).catch(() => false)
+      const hasHomeButton = await homeButton.isVisible({ timeout: 3000 }).catch(() => false)
+      const hasNavigation = await navElement.isVisible({ timeout: 3000 }).catch(() => false)
+
+      // At least one navigation option should be present
+      expect(hasHomeLink || hasHomeButton || hasNavigation).toBeTruthy()
+    })
+  })
+
+  test.describe('Authentication Errors', () => {
+    // Run serially to avoid affecting other tests' session state
+    test.describe.configure({ mode: 'serial' })
+
+    test('unauthenticated access to protected route redirects to login', async ({ page }) => {
+      // Clear any existing session
+      await page.context().clearCookies()
+
+      // Try to access protected dashboard route
+      await page.goto('/dashboard')
+
+      // Should be redirected to login
+      await expect(page).toHaveURL(/login/)
+    })
+
+    test('unauthenticated access to settings redirects to login', async ({ page }) => {
+      // Clear any existing session
+      await page.context().clearCookies()
+
+      // Try to access protected settings route
+      await page.goto('/settings')
+
+      // Should be redirected to login
+      await expect(page).toHaveURL(/login/)
+    })
+
+    test('unauthenticated access to team page redirects to login', async ({ page }) => {
+      // Clear any existing session
+      await page.context().clearCookies()
+
+      // Try to access protected team route
+      await page.goto('/team')
+
+      // Should be redirected to login
+      await expect(page).toHaveURL(/login/)
+    })
+
+    test('invalid session cookie returns 401 from API', async ({ page }) => {
+      // Clear any existing session
+      await page.context().clearCookies()
+
+      // Try to access authenticated API endpoint
+      const response = await page.request.get('/auth/me', {
+        failOnStatusCode: false,
+      })
+
+      // Should return 401 Unauthorized
+      expect(response.status()).toBe(401)
+    })
+
+    test('cleared session cannot access protected API endpoints', async ({ page }) => {
+      // Clear any existing session
+      await page.context().clearCookies()
+
+      // Try to access users API endpoint
+      const response = await page.request.get('/api/users', {
+        failOnStatusCode: false,
+      })
+
+      // Should return 401 Unauthorized
+      expect(response.status()).toBe(401)
+    })
+  })
+
+  test.describe('API Health Endpoints', () => {
+    test('health endpoint returns proper format', async ({ request, baseURL }) => {
+      const response = await request.get(`${baseURL}/health`, {
+        failOnStatusCode: false,
+      })
+
+      // Check content type to ensure we're hitting the API
+      const contentType = response.headers()['content-type'] || ''
+
+      if (!contentType.includes('application/json')) {
+        test.skip(true, 'API not available in current dev server setup')
+        return
+      }
+
+      // Accept 200 (healthy) or 503 (unhealthy but responding)
+      expect([200, 503]).toContain(response.status())
+
+      const body = await response.json()
+
+      // Should have proper structure
+      expect(body).toHaveProperty('status')
+      expect(body).toHaveProperty('checks')
+
+      // Status should be a valid value
+      expect(['healthy', 'unhealthy', 'degraded']).toContain(body.status)
+
+      // Checks should be an object with service statuses
+      expect(typeof body.checks).toBe('object')
+    })
+
+    test('liveness endpoint returns proper format', async ({ request, baseURL }) => {
+      const response = await request.get(`${baseURL}/health/live`, {
+        failOnStatusCode: false,
+      })
+
+      // Check content type
+      const contentType = response.headers()['content-type'] || ''
+
+      if (!contentType.includes('application/json')) {
+        test.skip(true, 'API not available in current dev server setup')
+        return
+      }
+
+      expect(response.ok()).toBeTruthy()
+
+      const body = await response.json()
+      expect(body).toHaveProperty('alive')
+      expect(body.alive).toBe(true)
+    })
+  })
+
+  test.describe('Network Error Simulation @slow', () => {
+    test.skip('page handles slow network gracefully', async ({ page }) => {
+      // SKIPPED: This test takes 60-90s - run with: npx playwright test --grep @slow
+      test.setTimeout(90000)
+
+      // Simulate slow network (moderate throttling, not extreme)
+      const cdp = await page.context().newCDPSession(page)
+      await cdp.send('Network.emulateNetworkConditions', {
+        offline: false,
+        downloadThroughput: 200 * 1024, // 200kb/s (more realistic slow 3G)
+        uploadThroughput: 200 * 1024,
+        latency: 500, // 500ms latency
+      })
+
+      // Navigate to home page with extended timeout
+      await page.goto('/', { timeout: 60000, waitUntil: 'domcontentloaded' })
+
+      // Page should still load (eventually)
+      await expect(page.locator('body')).toBeVisible({ timeout: 60000 })
+    })
+
+    test('page shows appropriate state when offline', async ({ page }) => {
+      // First load the page while online
+      await page.goto('/')
+      await expect(page.locator('body')).toBeVisible()
+
+      // Go offline
+      await page.context().setOffline(true)
+
+      // Try to navigate to another page
+      try {
+        await page.goto('/login', { timeout: 5000 })
+      } catch {
+        // Navigation should fail when offline - this is expected
+      }
+
+      // Go back online for cleanup
+      await page.context().setOffline(false)
+    })
+  })
+})