@etus/bhono-app 0.1.1

package/templates/base/tests/e2e/pages/ui-features.spec.ts

@@ -0,0 +1,393 @@
+import { test, expect, isAuthenticated, closeAllDialogs } from '../fixtures'
+
+/**
+ * UI Features Gap Tests
+ *
+ * These tests verify UI feature coverage gaps identified during review,
+ * including security settings, notifications, file uploads, and error handling.
+ *
+ * @tags @ui @features @pages
+ */
+
+test.describe('UI Features Gap Tests @ui @features @pages', () => {
+  test.describe('Account Security - Active Sessions', () => {
+    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 display active sessions list in account security', async ({ page }) => {
+      await page.goto('/account')
+
+      // Verify Active Sessions section
+      await expect(page.getByRole('heading', { name: /active sessions/i })).toBeVisible()
+
+      // Verify session list description
+      await expect(page.getByText(/devices where you're currently logged in/i)).toBeVisible()
+
+      // Verify at least one session is displayed (current session)
+      await expect(page.getByText(/current/i).first()).toBeVisible()
+
+      // Verify session shows device/browser info
+      await expect(page.getByText(/chrome on|safari on|firefox on|edge on/i).first()).toBeVisible()
+
+      // Verify session shows activity time
+      await expect(page.getByText(/active now|hours ago|minutes ago/i).first()).toBeVisible()
+
+      // Verify Sign out all button exists for multiple sessions
+      const signOutAllButton = page.getByRole('button', { name: /sign out all/i })
+      await expect(signOutAllButton).toBeVisible()
+    })
+  })
+
+  test.describe('Account Security - Danger Zone', () => {
+    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 display danger zone with delete confirmation controls', async ({ page }) => {
+      await page.goto('/account')
+
+      // Scroll to danger zone
+      const dangerZoneHeading = page.getByRole('heading', { name: /danger zone/i })
+      await dangerZoneHeading.scrollIntoViewIfNeeded()
+
+      // Verify Danger Zone section
+      await expect(dangerZoneHeading).toBeVisible()
+
+      // Verify irreversible actions warning
+      await expect(page.getByText(/irreversible and destructive actions/i)).toBeVisible()
+
+      // Verify Export Data option
+      await expect(page.getByText('Export Data')).toBeVisible()
+      await expect(page.getByText(/download a copy of all your data/i)).toBeVisible()
+      const exportButton = page.getByRole('button', { name: /^export$/i })
+      await expect(exportButton).toBeVisible()
+      await expect(exportButton).toBeEnabled()
+
+      // Verify Delete Account option
+      await expect(page.getByText('Delete Account').first()).toBeVisible()
+      await expect(page.getByText(/permanently delete your account and data/i)).toBeVisible()
+
+      // Verify Delete button is present and styled as destructive
+      const deleteButton = page.getByRole('button', { name: /^delete$/i }).first()
+      await expect(deleteButton).toBeVisible()
+      await expect(deleteButton).toBeEnabled()
+    })
+  })
+
+  test.describe('Account Deletion Confirmation', () => {
+    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 show deletion confirmation dialog with email validation', async ({ page }) => {
+      await page.goto('/account')
+
+      // Scroll to and click Delete button
+      const dangerZoneHeading = page.getByRole('heading', { name: /danger zone/i })
+      await dangerZoneHeading.scrollIntoViewIfNeeded()
+
+      const deleteButton = page.getByRole('button', { name: /^delete$/i }).first()
+      await deleteButton.click()
+
+      // Verify dialog opens
+      await expect(page.getByRole('dialog')).toBeVisible()
+      await expect(page.getByRole('heading', { name: /delete account/i })).toBeVisible()
+
+      // Verify warning message
+      await expect(page.getByText(/this action cannot be undone/i)).toBeVisible()
+      await expect(page.getByText(/all your data will be permanently deleted/i)).toBeVisible()
+
+      // Verify email confirmation input
+      const confirmInput = page.getByPlaceholder(/enter your email/i)
+      await expect(confirmInput).toBeVisible()
+
+      // Verify Delete Account button is disabled initially
+      const confirmDeleteButton = page.getByRole('button', { name: /delete account/i })
+      await expect(confirmDeleteButton).toBeDisabled()
+
+      // Type incorrect email - button should remain disabled
+      await confirmInput.fill('wrong@email.com')
+      await expect(confirmDeleteButton).toBeDisabled()
+
+      // Verify Cancel button works
+      const cancelButton = page.getByRole('button', { name: /cancel/i })
+      await cancelButton.click()
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+
+      // Verify we're still on account page
+      await expect(page.getByRole('heading', { name: /^account$/i, level: 1 })).toBeVisible()
+    })
+  })
+
+  test.describe('Settings - Notification Preferences', () => {
+    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 persist notification preferences on toggle', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Switch to Notifications tab
+      const notificationsTab = page.getByRole('tab', { name: /notifications/i })
+      await expect(notificationsTab).toBeVisible()
+      await notificationsTab.click()
+      await expect(notificationsTab).toHaveAttribute('data-state', 'active')
+
+      // Verify Email Notifications section
+      await expect(page.getByRole('heading', { name: /email notifications/i })).toBeVisible()
+
+      // Find Team Invitations toggle
+      const teamInvitationsRow = page.locator('div').filter({ hasText: /^Team Invitations/ })
+      const toggleSwitch = teamInvitationsRow.getByRole('switch').first()
+      await expect(toggleSwitch).toBeVisible()
+
+      // Get initial state
+      const initialState = await toggleSwitch.getAttribute('aria-checked')
+
+      // Toggle the switch
+      await toggleSwitch.click()
+
+      // Verify state changed
+      const newState = await toggleSwitch.getAttribute('aria-checked')
+      expect(newState).not.toBe(initialState)
+
+      // Reload page to verify persistence
+      await page.reload()
+
+      // Navigate back to notifications tab
+      const reloadedNotificationsTab = page.getByRole('tab', { name: /notifications/i })
+      await reloadedNotificationsTab.click()
+
+      // Find the toggle again and check state persisted
+      const reloadedRow = page.locator('div').filter({ hasText: /^Team Invitations/ })
+      const reloadedToggle = reloadedRow.getByRole('switch').first()
+
+      const persistedState = await reloadedToggle.getAttribute('aria-checked')
+
+      // Restore original state if it changed
+      if (persistedState !== initialState) {
+        await reloadedToggle.click()
+      }
+    })
+  })
+
+  test.describe('Settings - Connected Accounts', () => {
+    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 display connected accounts in settings', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Switch to Account tab
+      const accountTab = page.getByRole('tab', { name: /account/i })
+      await expect(accountTab).toBeVisible()
+      await accountTab.click()
+      await expect(accountTab).toHaveAttribute('data-state', 'active')
+
+      // Verify Connected Accounts section
+      await expect(page.getByRole('heading', { name: /connected accounts/i })).toBeVisible()
+      await expect(page.getByText(/manage your connected oauth providers/i)).toBeVisible()
+
+      // Verify Google provider is shown
+      await expect(page.getByText('Google')).toBeVisible()
+
+      // Verify connected status indicator
+      await expect(page.getByText(/connected/i).first()).toBeVisible()
+
+      // Verify Sessions section is also present
+      await expect(page.getByRole('heading', { name: /sessions/i })).toBeVisible()
+      await expect(page.getByText(/current session/i)).toBeVisible()
+    })
+  })
+
+  test.describe('File Upload - Cancellation', () => {
+    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 allow cancellation of file upload flow', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Verify Profile Picture section exists
+      await expect(page.getByRole('heading', { name: 'Profile Picture' })).toBeVisible()
+
+      // Verify Change Photo button is present
+      const changePhotoButton = page.getByRole('button', { name: /change photo/i })
+      await expect(changePhotoButton).toBeVisible()
+      await expect(changePhotoButton).toBeEnabled()
+
+      // Verify file input exists
+      const fileInput = page.locator('input[type="file"]')
+      await expect(fileInput).toHaveCount(1)
+
+      // Verify file input accepts images
+      const acceptAttr = await fileInput.getAttribute('accept')
+      expect(acceptAttr).toContain('image/')
+
+      // Click the change photo button to initiate upload flow
+      await changePhotoButton.click()
+
+      // The file dialog would open - since we can't interact with native file dialogs,
+      // verify the input can be programmatically triggered and the page remains functional
+      await expect(page.getByRole('heading', { name: 'Profile Picture' })).toBeVisible()
+
+      // Verify the page is still functional after cancellation (no dialog opened)
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+    })
+  })
+
+  test.describe('Network Errors - Retry Option', () => {
+    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 network errors and allow retry', async ({ page }) => {
+      // Navigate to a page that loads data
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Simulate network failure by blocking API requests
+      await page.route('**/api/**', (route) => {
+        route.abort('failed')
+      })
+
+      // Try to open invite dialog which makes API calls
+      const inviteButton = page.locator('button').filter({ hasText: 'Invite Member' }).first()
+      if (await inviteButton.isVisible()) {
+        await inviteButton.click()
+
+        // The dialog should still open
+        await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5000 }).catch(() => {
+          // Dialog may not open due to network error
+        })
+      }
+
+      // Remove route blocking
+      await page.unroute('**/api/**')
+
+      // Reload page to verify recovery
+      await page.reload()
+
+      // Page should recover and display correctly
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Verify navigation still works after error recovery
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+    })
+  })
+
+  test.describe('File Upload - Invalid File Types', () => {
+    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 reject invalid file types with error message', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Verify Profile Picture section
+      await expect(page.getByRole('heading', { name: 'Profile Picture' })).toBeVisible()
+
+      // Get file input
+      const fileInput = page.locator('input[type="file"]')
+      await expect(fileInput).toHaveCount(1)
+
+      // Verify the input has accept attribute limiting file types
+      const acceptAttr = await fileInput.getAttribute('accept')
+      expect(acceptAttr).toContain('image/')
+
+      // Try to simulate uploading an invalid file type
+      // The browser's native file picker will typically filter by accept attribute
+      // but we can test the API validation layer
+      const response = await page.request.post('/api/storage/upload-url', {
+        data: {
+          filename: 'malicious.exe',
+          contentType: 'application/x-msdownload',
+        },
+        failOnStatusCode: false,
+      })
+
+      // Should reject non-allowed file types (either at API or storage level)
+      // The status could be 400 (validation) or 200 (R2 handles it) depending on implementation
+      const body = await response.json()
+
+      if (response.status() === 400) {
+        // Validation error - verify error structure
+        expect(body).toHaveProperty('error')
+        expect(body.error).toHaveProperty('message')
+      } else if (response.status() === 200) {
+        // Storage configured but file type may still be blocked by other means
+        expect(body).toHaveProperty('url')
+      }
+
+      // Verify page still works after invalid file type attempt
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+      await expect(page.getByRole('heading', { name: 'Profile Picture' })).toBeVisible()
+
+      // Verify file size hint is displayed
+      await expect(page.getByText(/max 2mb/i)).toBeVisible()
+    })
+
+    test('should display file type restrictions to user', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Verify the file input accepts only images
+      const fileInput = page.locator('input[type="file"]')
+      const acceptAttr = await fileInput.getAttribute('accept')
+
+      // Should accept image types
+      expect(acceptAttr).toMatch(/image\//i)
+
+      // Verify the UI shows allowed file types or size restrictions
+      await expect(page.getByText(/max 2mb/i)).toBeVisible()
+
+      // The profile picture section should have clear guidance
+      await expect(page.getByText(/your profile picture is visible to other team members/i)).toBeVisible()
+    })
+  })
+})

package/templates/base/tests/e2e/performance/baselines.spec.ts

@@ -0,0 +1,162 @@
+import { test, expect, isAuthenticated } from '../fixtures'
+
+/**
+ * Performance Baseline Tests
+ *
+ * These tests establish performance baselines for key pages.
+ * They measure page load times and ensure they stay within acceptable limits.
+ *
+ * @tags @performance @baseline
+ */
+
+// Performance thresholds (in milliseconds)
+const THRESHOLDS = {
+  pageLoad: 5000, // Max time for page to be fully interactive
+  firstPaint: 2000, // Max time to first meaningful paint
+  apiResponse: 1000, // Max time for API responses
+}
+
+test.describe('Performance Baselines @performance @baseline', () => {
+  test.describe('Public Pages', () => {
+    test('login page loads within threshold', async ({ page }) => {
+      const startTime = Date.now()
+
+      await page.goto('/login', { waitUntil: 'networkidle' })
+
+      const loadTime = Date.now() - startTime
+
+      // Verify page loaded
+      await expect(page.getByText('Welcome back')).toBeVisible()
+
+      // Check load time is within threshold
+      expect(loadTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+
+    test('404 page loads within threshold', async ({ page }) => {
+      const startTime = Date.now()
+
+      await page.goto('/non-existent-page', { waitUntil: 'domcontentloaded' })
+
+      const loadTime = Date.now() - startTime
+
+      // Verify 404 content
+      await expect(page.getByText('404').first()).toBeVisible()
+
+      // Check load time
+      expect(loadTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+  })
+
+  test.describe('Authenticated Pages', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('dashboard page loads within threshold', async ({ page }) => {
+      const startTime = Date.now()
+
+      await page.goto('/dashboard', { waitUntil: 'networkidle' })
+
+      const loadTime = Date.now() - startTime
+
+      // Verify page loaded
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Check load time
+      expect(loadTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+
+    test('team page loads within threshold', async ({ page }) => {
+      const startTime = Date.now()
+
+      await page.goto('/team', { waitUntil: 'networkidle' })
+
+      const loadTime = Date.now() - startTime
+
+      // Verify page loaded
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Check load time
+      expect(loadTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+
+    test('settings page loads within threshold', async ({ page }) => {
+      const startTime = Date.now()
+
+      await page.goto('/settings', { waitUntil: 'networkidle' })
+
+      const loadTime = Date.now() - startTime
+
+      // Verify page loaded
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Check load time
+      expect(loadTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+
+    test('integrations page loads within threshold', async ({ page }) => {
+      const startTime = Date.now()
+
+      await page.goto('/integrations', { waitUntil: 'networkidle' })
+
+      const loadTime = Date.now() - startTime
+
+      // Verify page loaded
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Check load time
+      expect(loadTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+  })
+
+  test.describe('API Performance', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('API responses within threshold', async ({ page }) => {
+      // Navigate to dashboard first to establish session
+      await page.goto('/dashboard')
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Test auth/me endpoint performance
+      const startTime = Date.now()
+      const response = await page.request.get('/auth/me')
+      const responseTime = Date.now() - startTime
+
+      expect(response.ok()).toBeTruthy()
+      expect(responseTime).toBeLessThan(THRESHOLDS.apiResponse)
+    })
+  })
+
+  test.describe('Navigation Performance', () => {
+    test.beforeEach(async ({ page }) => {
+      const authenticated = await isAuthenticated(page)
+      test.skip(!authenticated, 'No authenticated session available')
+    })
+
+    test('navigation between pages is responsive', async ({ page }) => {
+      // Start at dashboard
+      await page.goto('/dashboard', { waitUntil: 'networkidle' })
+      await expect(page.getByRole('navigation')).toBeVisible()
+
+      // Navigate to team - measure time
+      const teamStart = Date.now()
+      await page.goto('/team', { waitUntil: 'domcontentloaded' })
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+      const teamTime = Date.now() - teamStart
+
+      // Navigate to settings - measure time
+      const settingsStart = Date.now()
+      await page.goto('/settings', { waitUntil: 'domcontentloaded' })
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+      const settingsTime = Date.now() - settingsStart
+
+      // Both navigations should be fast
+      expect(teamTime).toBeLessThan(THRESHOLDS.pageLoad)
+      expect(settingsTime).toBeLessThan(THRESHOLDS.pageLoad)
+    })
+  })
+})