@etus/bhono-app 0.1.1

package/templates/base/tests/e2e/journeys/critical-flows.spec.ts

@@ -0,0 +1,281 @@
+import { test, expect, isAuthenticated, waitForNavigation } from '../fixtures'
+
+/**
+ * Critical User Journey Tests
+ *
+ * These tests verify complete user flows, not individual features.
+ * They represent the most important paths through the application
+ * that must always work.
+ *
+ * @tags @critical
+ */
+
+test.describe('Critical User Journeys @critical', () => {
+  test.describe('Authentication Journey', () => {
+    test('should display complete login page with OAuth option', async ({ page }) => {
+      await page.goto('/login')
+
+      // Verify page loads correctly
+      await expect(page.getByText('Welcome back')).toBeVisible()
+
+      // Verify Google OAuth button is present and enabled
+      const googleOAuthButton = page.getByRole('button', { name: /continue with google/i })
+      await expect(googleOAuthButton).toBeVisible()
+      await expect(googleOAuthButton).toBeEnabled()
+
+      // Verify the login page has proper structure
+      await expect(page.locator('body')).toBeVisible()
+    })
+  })
+
+  test.describe('Authenticated User Journeys', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('should navigate from dashboard to settings', async ({ page }) => {
+      // Start at dashboard
+      await page.goto('/dashboard')
+      await expect(page).not.toHaveURL(/login/)
+
+      // Find and click settings link in navigation
+      const settingsLink = page.getByRole('link', { name: /settings/i })
+      await expect(settingsLink).toBeVisible()
+      await settingsLink.click()
+
+      // Verify settings page loaded
+      await waitForNavigation(page, '/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Verify settings tabs are available
+      await expect(page.getByRole('tab', { name: /profile/i })).toBeVisible()
+      await expect(page.getByRole('tab', { name: /account/i })).toBeVisible()
+    })
+
+    test('should navigate from dashboard to team management', async ({ page }) => {
+      // Start at dashboard
+      await page.goto('/dashboard')
+      await expect(page).not.toHaveURL(/login/)
+
+      // Find and click team link in navigation
+      const teamLink = page.getByRole('link', { name: /team/i })
+      await expect(teamLink).toBeVisible()
+      await teamLink.click()
+
+      // Verify team page loaded
+      await waitForNavigation(page, '/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Verify team page elements are present
+      await expect(page.getByText('Active Members')).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Invite Member' }).first()).toBeVisible()
+    })
+
+    test('should complete team invitation flow', async ({ page }) => {
+      // Navigate to team page
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Open invite dialog
+      const inviteButton = page.getByRole('button', { name: 'Invite Member' }).first()
+      await expect(inviteButton).toBeVisible()
+      await inviteButton.click()
+
+      // Verify dialog opened
+      await expect(page.getByRole('dialog')).toBeVisible()
+      await expect(page.getByRole('heading', { name: /invite team member/i })).toBeVisible()
+
+      // Fill the email field
+      const emailInput = page.getByLabel(/email address/i)
+      await expect(emailInput).toBeVisible()
+      await emailInput.fill('newmember@example.com')
+
+      // Select a role (Member is default, try selecting Admin)
+      const adminButton = page.getByRole('button', { name: /^admin$/i })
+      await expect(adminButton).toBeVisible()
+      await adminButton.click()
+
+      // Verify role description changes
+      await expect(page.getByText(/admins can manage team settings/i)).toBeVisible()
+
+      // Verify Send Invitation button is now enabled
+      const sendButton = page.getByRole('button', { name: /send invitation/i })
+      await expect(sendButton).toBeEnabled()
+
+      // Close dialog without submitting (to avoid test data pollution)
+      const cancelButton = page.getByRole('button', { name: /cancel/i })
+      await cancelButton.click()
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+    })
+
+    test('should complete profile update flow', async ({ page }) => {
+      // Navigate to settings page
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Ensure Profile tab is active
+      const profileTab = page.getByRole('tab', { name: /profile/i })
+      await expect(profileTab).toBeVisible()
+
+      // Verify profile form elements
+      const nameInput = page.getByLabel(/full name/i)
+      await expect(nameInput).toBeVisible()
+      await expect(nameInput).toBeEnabled()
+
+      const emailInput = page.getByLabel(/email address/i)
+      await expect(emailInput).toBeVisible()
+      await expect(emailInput).toBeDisabled() // Email should be read-only
+
+      // Verify profile picture section
+      await expect(page.getByRole('heading', { name: 'Profile Picture' })).toBeVisible()
+      const changePhotoButton = page.getByRole('button', { name: /change photo/i })
+      await expect(changePhotoButton).toBeVisible()
+
+      // Verify save button is present
+      const saveButton = page.getByRole('button', { name: /save changes/i })
+      await expect(saveButton).toBeVisible()
+    })
+
+    test('should complete full navigation circuit', async ({ page }) => {
+      // Step 1: Start at Dashboard
+      await page.goto('/dashboard')
+      await expect(page).not.toHaveURL(/login/)
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Step 2: Navigate to Team
+      const teamLink = page.getByRole('link', { name: /team/i })
+      await expect(teamLink).toBeVisible()
+      await teamLink.click()
+      await waitForNavigation(page, '/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Step 3: Navigate to Settings
+      const settingsLink = page.getByRole('link', { name: /settings/i })
+      await expect(settingsLink).toBeVisible()
+      await settingsLink.click()
+      await waitForNavigation(page, '/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Step 4: Navigate to Account
+      const accountLink = page.getByRole('link', { name: /account/i })
+      await expect(accountLink).toBeVisible()
+      await accountLink.click()
+      await waitForNavigation(page, '/account')
+      await expect(page.getByRole('heading', { name: /^account$/i })).toBeVisible()
+
+      // Step 5: Navigate to Integrations
+      const integrationsLink = page.getByRole('link', { name: /integrations/i })
+      await expect(integrationsLink).toBeVisible()
+      await integrationsLink.click()
+      await waitForNavigation(page, '/integrations')
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Step 6: Return to Dashboard (completing the circuit)
+      const dashboardLink = page.getByRole('link', { name: /dashboard/i })
+      await expect(dashboardLink).toBeVisible()
+      await dashboardLink.click()
+      await waitForNavigation(page, '/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+    })
+
+    test('should complete settings profile update journey', async ({ page }) => {
+      // Navigate to settings page
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Ensure Profile tab is active
+      const profileTab = page.getByRole('tab', { name: /profile/i })
+      await expect(profileTab).toBeVisible()
+
+      // Get the name input and store original value
+      const nameInput = page.getByLabel(/full name/i)
+      await expect(nameInput).toBeVisible()
+      const originalName = await nameInput.inputValue()
+
+      // Update name with new value
+      const testName = 'Test User Updated'
+      await nameInput.clear()
+      await nameInput.fill(testName)
+
+      // Click save button
+      const saveButton = page.getByRole('button', { name: /save changes/i })
+      await expect(saveButton).toBeVisible()
+      await saveButton.click()
+
+      // Wait for update to complete (button should not show spinner after)
+      await expect(saveButton).toBeEnabled({ timeout: 5000 })
+
+      // Verify we stayed on the settings page
+      await expect(page).toHaveURL(/settings/)
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Restore original value
+      await nameInput.clear()
+      await nameInput.fill(originalName || '')
+      await saveButton.click()
+      await expect(saveButton).toBeEnabled({ timeout: 5000 })
+    })
+
+    test('should complete webhook creation journey', async ({ page }) => {
+      // Navigate to integrations page
+      await page.goto('/integrations')
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Click Add Webhook button
+      const addWebhookButton = page.getByRole('button', { name: 'Add Webhook' }).first()
+      await expect(addWebhookButton).toBeVisible()
+      await addWebhookButton.click()
+
+      // Verify dialog opened (check for Create Webhook heading)
+      const createWebhookHeading = page.getByRole('heading', { name: /create webhook/i })
+      await expect(createWebhookHeading).toBeVisible()
+
+      // Fill webhook URL
+      const urlInput = page.getByPlaceholder('https://api.example.com/webhooks')
+      await expect(urlInput).toBeVisible()
+      await urlInput.fill('https://api.test.com/webhook')
+
+      // Select User Created event
+      const userCreatedEvent = page.getByRole('button', { name: 'User Created' })
+      await expect(userCreatedEvent).toBeVisible()
+      await userCreatedEvent.click()
+
+      // Verify create button is now enabled (URL filled and event selected)
+      const createButton = page.getByRole('button', { name: 'Create Webhook', exact: true })
+      await expect(createButton).toBeEnabled()
+
+      // Cancel to avoid test data pollution
+      const cancelButton = page.getByRole('button', { name: 'Cancel' })
+      await cancelButton.click()
+      await expect(createWebhookHeading).not.toBeVisible()
+    })
+
+    test('should verify account security check journey', async ({ page }) => {
+      // Navigate to account page
+      await page.goto('/account')
+      await expect(page.getByRole('heading', { name: /^account$/i })).toBeVisible()
+
+      // Verify Security section is visible
+      await expect(page.getByRole('heading', { name: /^security$/i })).toBeVisible()
+      await expect(page.getByText(/two-factor authentication/i)).toBeVisible()
+
+      // Verify Connected Accounts section with Google
+      await expect(page.getByRole('heading', { name: /connected accounts/i })).toBeVisible()
+      await expect(page.getByText('Google')).toBeVisible()
+      // Verify Google shows as Connected (find the Connected badge near Google)
+      const connectedAccountsSection = page.locator('section').filter({ hasText: 'Connected Accounts' })
+      await expect(connectedAccountsSection.getByText('Connected').first()).toBeVisible()
+
+      // Verify Active Sessions section with current session
+      await expect(page.getByRole('heading', { name: /active sessions/i })).toBeVisible()
+      await expect(page.getByText('Current', { exact: true })).toBeVisible()
+
+      // Verify API Access section with Create Key button
+      await expect(page.getByRole('heading', { name: /api access/i })).toBeVisible()
+      const createKeyButton = page.getByRole('button', { name: /create key/i })
+      await expect(createKeyButton).toBeVisible()
+      await expect(createKeyButton).toBeEnabled()
+    })
+  })
+})

package/templates/base/tests/e2e/journeys/error-recovery.spec.ts

@@ -0,0 +1,354 @@
+import { test, expect, isAuthenticated, apiRequest, getAccountId, closeAllDialogs } from '../fixtures'
+
+/**
+ * Error Recovery and Retry Journey Tests
+ *
+ * These tests verify application resilience and error handling,
+ * including graceful degradation, error display, and recovery flows.
+ *
+ * @tags @journey @error-handling @resilience
+ */
+
+test.describe('Error Recovery Journey @journey @error-handling', () => {
+  test.describe('API Error Handling', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+
+      const accountId = getAccountId()
+      test.skip(!accountId, 'No account ID available')
+    })
+
+    test('should handle 404 errors gracefully', async ({ page }) => {
+      // Step 1: Request non-existent resource
+      const response = await apiRequest(page, 'get', '/api/users/00000000-0000-0000-0000-000000000000')
+
+      // Step 2: Verify 404 response
+      expect(response.status()).toBe(404)
+
+      const body = await response.json()
+
+      // Step 3: Verify error structure
+      expect(body).toHaveProperty('error')
+      expect(body.error).toHaveProperty('message')
+      expect(typeof body.error.message).toBe('string')
+    })
+
+    test('should handle validation errors with details', async ({ page }) => {
+      // Step 1: Send invalid data to create endpoint
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          // Missing required fields
+        },
+      })
+
+      // Step 2: Verify validation error
+      expect(response.status()).toBe(400)
+
+      const body = await response.json()
+
+      // Step 3: Verify error structure
+      expect(body).toHaveProperty('error')
+      expect(body.error).toHaveProperty('message')
+    })
+
+    test('should handle invalid UUID format errors', async ({ page }) => {
+      // Step 1: Request with invalid ID format
+      const response = await apiRequest(page, 'get', '/api/accounts/invalid-uuid')
+
+      // Step 2: Verify validation error
+      expect([400, 422]).toContain(response.status())
+
+      const body = await response.json()
+
+      // Step 3: Verify error structure
+      expect(body).toHaveProperty('error')
+    })
+  })
+
+  test.describe('UI Error Display', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test.afterEach(async ({ page }) => {
+      await closeAllDialogs(page)
+    })
+
+    test('should handle navigation to non-existent page', async ({ page }) => {
+      // Step 1: Navigate to non-existent page
+      await page.goto('/non-existent-page-12345')
+
+      // Step 2: Should either show 404 or redirect to dashboard
+      const url = page.url()
+      const pageContent = await page.content()
+
+      // App should handle gracefully - either show error or redirect
+      expect(
+        url.includes('404') || url.includes('dashboard') || pageContent.includes('not found')
+      ).toBeTruthy()
+    })
+
+    test('should display loading states during data fetch', async ({ page }) => {
+      // Step 1: Navigate to team page
+      await page.goto('/team')
+
+      // Step 2: Page should eventually load content
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible({ timeout: 10000 })
+
+      // Step 3: Verify page loaded successfully without errors
+      await expect(page.getByText(/active members/i)).toBeVisible()
+    })
+  })
+
+  test.describe('Form Validation Recovery', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test.afterEach(async ({ page }) => {
+      await closeAllDialogs(page)
+    })
+
+    test('should recover from invalid form input', async ({ page }) => {
+      // Step 1: Navigate to team page
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Step 2: Open invite dialog
+      const inviteButton = page.locator('button').filter({ hasText: 'Invite Member' }).first()
+      await inviteButton.click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      // Step 3: Verify submit is disabled with empty email
+      const sendButton = page.getByRole('button', { name: /send invitation/i })
+      await expect(sendButton).toBeDisabled()
+
+      // Step 4: Enter invalid email format (partial)
+      const emailInput = page.getByLabel(/email address/i)
+      await emailInput.fill('invalid-email')
+
+      // Step 5: Button may still be enabled but submission would fail
+      // Enter valid email to recover
+      await emailInput.clear()
+      await emailInput.fill('valid@example.com')
+
+      // Step 6: Verify form recovered - button should be enabled
+      await expect(sendButton).toBeEnabled()
+
+      // Step 7: Cancel to avoid test pollution
+      await page.getByRole('button', { name: /cancel/i }).click()
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+    })
+
+    test('should handle empty name in profile update', async ({ page }) => {
+      // Step 1: Navigate to settings
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Step 2: Get the name input
+      const nameInput = page.getByLabel(/full name/i)
+      await expect(nameInput).toBeVisible()
+
+      // Step 3: Store original value
+      const originalName = await nameInput.inputValue()
+
+      // Step 4: Clear name and try to save
+      await nameInput.clear()
+
+      // Step 5: The save button should still work but backend validates
+      const saveButton = page.getByRole('button', { name: /save changes/i })
+      await expect(saveButton).toBeVisible()
+
+      // Step 6: Restore original name for recovery
+      await nameInput.fill(originalName || 'Test User')
+      await expect(nameInput).toHaveValue(originalName || 'Test User')
+    })
+  })
+
+  test.describe('Network Error Recovery', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('should handle page reload without losing context', async ({ page }) => {
+      // Step 1: Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Step 2: Reload the page
+      await page.reload()
+
+      // Step 3: Verify page recovered
+      await expect(page).toHaveURL(/dashboard/)
+      await expect(page).not.toHaveURL(/login/)
+
+      // Step 4: Verify navigation still works
+      await expect(page.getByRole('navigation')).toBeVisible()
+    })
+
+    test('should handle back/forward navigation', async ({ page }) => {
+      // Step 1: Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Step 2: Navigate to team
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Step 3: Go back
+      await page.goBack()
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Step 4: Go forward
+      await page.goForward()
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+    })
+  })
+
+  test.describe('API Retry Behavior', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+
+      const accountId = getAccountId()
+      test.skip(!accountId, 'No account ID available')
+    })
+
+    test('should handle multiple rapid API requests', async ({ page }) => {
+      // Step 1: Make multiple rapid requests
+      const requests = Array(5)
+        .fill(null)
+        .map(() => apiRequest(page, 'get', '/api/audits?limit=1'))
+
+      // Step 2: Wait for all requests
+      const responses = await Promise.all(requests)
+
+      // Step 3: All should succeed
+      for (const response of responses) {
+        expect(response.ok()).toBeTruthy()
+      }
+    })
+
+    test('should handle sequential API calls', async ({ page }) => {
+      // Step 1: Make sequential calls to different endpoints
+      const endpoints = ['/api/audits?limit=1', '/api/users?limit=1', '/api/accounts']
+
+      for (const endpoint of endpoints) {
+        const response = await apiRequest(page, 'get', endpoint)
+        expect(response.ok()).toBeTruthy()
+
+        const body = await response.json()
+        expect(body).toHaveProperty('data')
+      }
+    })
+  })
+
+  test.describe('Dialog Error Handling', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test.afterEach(async ({ page }) => {
+      await closeAllDialogs(page)
+    })
+
+    test('should close dialog on escape key', async ({ page }) => {
+      // Step 1: Navigate to team page
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Step 2: Open invite dialog
+      await page.locator('button').filter({ hasText: 'Invite Member' }).first().click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      // Step 3: Press escape
+      await page.keyboard.press('Escape')
+
+      // Step 4: Dialog should close
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+
+      // Step 5: Page should remain functional
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+    })
+
+    test('should allow reopening dialog after cancel', async ({ page }) => {
+      // Step 1: Navigate to integrations
+      await page.goto('/integrations')
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Step 2: Open webhook dialog
+      await page.getByRole('button', { name: 'Add Webhook' }).first().click()
+      await expect(page.getByRole('heading', { name: /create webhook/i })).toBeVisible()
+
+      // Step 3: Cancel
+      await page.getByRole('button', { name: 'Cancel' }).click()
+      await expect(page.getByRole('heading', { name: /create webhook/i })).not.toBeVisible()
+
+      // Step 4: Reopen dialog
+      await page.getByRole('button', { name: 'Add Webhook' }).first().click()
+      await expect(page.getByRole('heading', { name: /create webhook/i })).toBeVisible()
+
+      // Step 5: Clean up
+      await page.getByRole('button', { name: 'Cancel' }).click()
+    })
+  })
+
+  test.describe('Complete Error Recovery Workflow', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test.afterEach(async ({ page }) => {
+      await closeAllDialogs(page)
+    })
+
+    test('complete error recovery workflow across pages', async ({ page }) => {
+      // Step 1: Start at dashboard
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Step 2: Try invalid navigation then recover
+      await page.goto('/non-existent-12345')
+      // Either stays on current page or shows error
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Step 3: Navigate to settings and test form recovery
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      const nameInput = page.getByLabel(/full name/i)
+      const originalName = await nameInput.inputValue()
+
+      // Modify and recover
+      await nameInput.clear()
+      await nameInput.fill(originalName || 'Test')
+      await expect(nameInput).toHaveValue(originalName || 'Test')
+
+      // Step 4: Navigate to team and test dialog recovery
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      await page.locator('button').filter({ hasText: 'Invite Member' }).first().click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      await page.keyboard.press('Escape')
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+
+      // Step 5: Reload and verify session persists
+      await page.reload()
+      await expect(page).not.toHaveURL(/login/)
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Step 6: Return to dashboard to complete workflow
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+    })
+  })
+})