@etus/bhono-app 0.1.1

package/templates/base/tests/e2e/crud/team.spec.ts

@@ -0,0 +1,287 @@
+import { test, expect, isAuthenticated } from '../fixtures'
+
+/**
+ * Team CRUD E2E Tests
+ *
+ * Tests for team management functionality via the UI.
+ * Focuses on team member management, roles, and invitation flows.
+ *
+ * @tags @crud
+ */
+
+test.describe('Team CRUD @crud', () => {
+  test.beforeEach(async ({ page }) => {
+    const authenticated = await isAuthenticated(page)
+    test.skip(!authenticated, 'No authenticated session available')
+  })
+
+  test.describe('Team Members Display', () => {
+    test('should show team members on team page', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should see the Active Members card
+      const activeMembersCard = page.getByText(/active members/i)
+      await expect(activeMembersCard).toBeVisible()
+
+      // Should show member count
+      const memberCount = page.getByText(/\d+ member/)
+      await expect(memberCount).toBeVisible()
+    })
+
+    test('should display team member details', async ({ page }) => {
+      await page.goto('/team')
+
+      // Wait for page content to load - check for Active Members heading
+      await expect(page.getByRole('heading', { name: /active members/i })).toBeVisible()
+
+      // Should see at least one role badge (owner, admin, or member)
+      const roleBadge = page.locator('text=/owner|admin|member/i').first()
+      await expect(roleBadge).toBeVisible()
+    })
+
+    test('should display team page description', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should see the description text
+      await expect(page.getByText(/manage your team and invite new members/i)).toBeVisible()
+    })
+  })
+
+  test.describe('Role Management UI', () => {
+    test('should display role badges for team members', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should see owner role badge for the main user
+      const ownerBadge = page.locator('[class*="capitalize"]').filter({ hasText: /owner/i })
+      await expect(ownerBadge).toBeVisible()
+    })
+
+    test('should have role selection in invite dialog', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      const inviteButton = page.getByRole('button', { name: /invite member/i }).first()
+      await inviteButton.click()
+
+      // Should see role selection buttons
+      await expect(page.getByRole('button', { name: /^member$/i })).toBeVisible()
+      await expect(page.getByRole('button', { name: /^admin$/i })).toBeVisible()
+    })
+
+    test('should show role description when selecting roles', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      const inviteButton = page.getByRole('button', { name: /invite member/i }).first()
+      await inviteButton.click()
+
+      // Member role should be selected by default
+      const memberButton = page.getByRole('button', { name: /^member$/i })
+      await expect(memberButton).toBeVisible()
+
+      // Should show member role description
+      await expect(page.getByText(/members can view and collaborate/i)).toBeVisible()
+
+      // Click admin role
+      const adminButton = page.getByRole('button', { name: /^admin$/i })
+      await adminButton.click()
+
+      // Should show admin role description
+      await expect(page.getByText(/admins can manage team settings/i)).toBeVisible()
+    })
+  })
+
+  test.describe('Team Invitation Flow', () => {
+    test('should open invite dialog when clicking invite button', async ({ page }) => {
+      await page.goto('/team')
+
+      // Click invite button
+      const inviteButton = page.getByRole('button', { name: /invite member/i }).first()
+      await inviteButton.click()
+
+      // Dialog should be visible
+      await expect(page.getByRole('dialog')).toBeVisible()
+
+      // Dialog should have title
+      await expect(page.getByRole('heading', { name: /invite team member/i })).toBeVisible()
+    })
+
+    test('should have email input in invite dialog', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.getByRole('button', { name: /invite member/i }).first().click()
+
+      // Should see email input
+      const emailInput = page.getByLabel(/email address/i)
+      await expect(emailInput).toBeVisible()
+      await expect(emailInput).toBeEnabled()
+
+      // Should have placeholder
+      await expect(emailInput).toHaveAttribute('placeholder', /colleague@example\.com/i)
+    })
+
+    test('should have send invitation button in dialog', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.getByRole('button', { name: /invite member/i }).first().click()
+
+      // Should see Send Invitation button
+      const sendButton = page.getByRole('button', { name: /send invitation/i })
+      await expect(sendButton).toBeVisible()
+    })
+
+    test('should have cancel button in invite dialog', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.getByRole('button', { name: /invite member/i }).first().click()
+
+      // Should see Cancel button
+      const cancelButton = page.getByRole('button', { name: /cancel/i })
+      await expect(cancelButton).toBeVisible()
+
+      // Clicking cancel should close dialog
+      await cancelButton.click()
+      await expect(page.getByRole('dialog')).not.toBeVisible()
+    })
+
+    test('send invitation button should be disabled without email', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.getByRole('button', { name: /invite member/i }).first().click()
+
+      // Send button should be disabled when email is empty
+      const sendButton = page.getByRole('button', { name: /send invitation/i })
+      await expect(sendButton).toBeDisabled()
+    })
+
+    test('should enable send button when email is entered', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.getByRole('button', { name: /invite member/i }).first().click()
+
+      // Enter email
+      const emailInput = page.getByLabel(/email address/i)
+      await emailInput.fill('test@example.com')
+
+      // Send button should now be enabled
+      const sendButton = page.getByRole('button', { name: /send invitation/i })
+      await expect(sendButton).toBeEnabled()
+    })
+
+    test('should show invite dialog description', async ({ page }) => {
+      await page.goto('/team')
+
+      // Open invite dialog
+      await page.getByRole('button', { name: /invite member/i }).first().click()
+
+      // Should see description about invitation
+      await expect(page.getByText(/send an invitation to join your workspace/i)).toBeVisible()
+    })
+  })
+
+  test.describe('Pending Invitations', () => {
+    test('should show pending invitations section if invitations exist', async ({ page }) => {
+      await page.goto('/team')
+
+      // Check for pending invitations section (may or may not be visible depending on data)
+      const pendingSection = page.getByText(/pending invitation/i)
+      const pendingCount = await pendingSection.count()
+
+      if (pendingCount > 0) {
+        await expect(pendingSection.first()).toBeVisible()
+      }
+    })
+
+    test('should show resend and revoke buttons for pending invitations', async ({ page }) => {
+      await page.goto('/team')
+
+      // Look for pending invitation elements
+      const pendingBadge = page.locator('[class*="Badge"]').filter({ hasText: /pending/i })
+      const pendingCount = await pendingBadge.count()
+
+      if (pendingCount > 0) {
+        // Should see resend button
+        await expect(page.getByRole('button', { name: /resend/i })).toBeVisible()
+
+        // Should see revoke button
+        await expect(page.getByRole('button', { name: /revoke/i })).toBeVisible()
+      }
+    })
+
+    test('should show expiry information for pending invitations', async ({ page }) => {
+      await page.goto('/team')
+
+      // Look for expiry text
+      const expiryText = page.getByText(/expires in \d+ day/i)
+      const expiryCount = await expiryText.count()
+
+      if (expiryCount > 0) {
+        await expect(expiryText.first()).toBeVisible()
+      }
+    })
+  })
+
+  test.describe('Team Search', () => {
+    test('should filter members when searching', async ({ page }) => {
+      await page.goto('/team')
+
+      // Get initial member count visible
+      const memberSection = page.locator('[class*="divide-y"]').first()
+      await expect(memberSection).toBeVisible()
+
+      // Enter search that won't match anything
+      const searchInput = page.getByPlaceholder(/search members/i)
+      await searchInput.fill('nonexistent-member-xyz')
+
+      // Should show "no members found" message
+      await expect(page.getByText(/no members found/i)).toBeVisible()
+
+      // Clear search
+      await searchInput.clear()
+
+      // Members should be visible again
+      await expect(page.getByText(/no members found/i)).not.toBeVisible()
+    })
+
+    test('should search by name', async ({ page }) => {
+      await page.goto('/team')
+
+      // Search by partial name
+      const searchInput = page.getByPlaceholder(/search members/i)
+      await searchInput.fill('you')
+
+      // Should still show current user (marked as "You")
+      const memberRows = page.locator('[class*="divide-y"] > div')
+      const visibleRows = await memberRows.count()
+      expect(visibleRows).toBeGreaterThan(0)
+    })
+  })
+
+  test.describe('Navigation', () => {
+    test('should navigate to team page from sidebar', async ({ page }) => {
+      await page.goto('/dashboard')
+
+      // Look for team link in navigation
+      const teamLink = page.getByRole('link', { name: /team/i })
+
+      if (await teamLink.isVisible({ timeout: 3000 }).catch(() => false)) {
+        await teamLink.click()
+        await expect(page).toHaveURL(/team/)
+        await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+      }
+    })
+
+    test('should directly access team page via URL', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should load team page without redirect to login
+      await expect(page).not.toHaveURL(/login/)
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+    })
+  })
+})

package/templates/base/tests/e2e/crud/users.spec.ts

@@ -0,0 +1,239 @@
+import { test, expect, isAuthenticated, waitForNavigation } from '../fixtures'
+
+/**
+ * User CRUD E2E Tests
+ *
+ * Tests for user management functionality via the UI.
+ * Since OAuth cannot be automated in E2E tests, these tests verify
+ * UI elements and flows are present and functioning correctly.
+ *
+ * @tags @crud
+ */
+
+test.describe('User CRUD @crud', () => {
+  test.beforeEach(async ({ page }) => {
+    const authenticated = await isAuthenticated(page)
+    test.skip(!authenticated, 'No authenticated session available')
+  })
+
+  test.describe('Team Page - User List', () => {
+    test('should display user list when authenticated', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should not be redirected to login
+      await expect(page).not.toHaveURL(/login/)
+
+      // Should see the Team Members heading
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Should see the Active Members card
+      await expect(page.getByText(/active members/i)).toBeVisible()
+
+      // Should see at least one team member (the current user)
+      const memberName = page.getByText(/e2e test user/i).first()
+      const memberEmail = page.getByText(/@.*\./i).first()
+
+      const hasName = await memberName.isVisible({ timeout: 3000 }).catch(() => false)
+      const hasEmail = await memberEmail.isVisible({ timeout: 3000 }).catch(() => false)
+
+      // Should have at least member info visible
+      expect(hasName || hasEmail).toBeTruthy()
+    })
+
+    test('should show invite button on team page', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should see the Invite Member button (use first() as there may be nested buttons)
+      const inviteButton = page.getByRole('button', { name: /invite member/i }).first()
+      await expect(inviteButton).toBeVisible()
+      await expect(inviteButton).toBeEnabled()
+    })
+
+    test('should show search functionality for members', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should see search input
+      const searchInput = page.getByPlaceholder(/search members/i)
+      await expect(searchInput).toBeVisible()
+
+      // Should be able to type in search
+      await searchInput.fill('test')
+      await expect(searchInput).toHaveValue('test')
+    })
+
+    test('current user should be displayed with (you) indicator', async ({ page }) => {
+      await page.goto('/team')
+
+      // The current user should be marked with "(you)"
+      await expect(page.getByText('(you)')).toBeVisible()
+    })
+
+    test('should display role badges for team members', async ({ page }) => {
+      await page.goto('/team')
+
+      // Should see at least one role badge (owner for current user)
+      const roleBadge = page.locator('[class*="capitalize"]').filter({ hasText: /owner|admin|member/i })
+      await expect(roleBadge.first()).toBeVisible()
+    })
+  })
+
+  test.describe('User Details - View', () => {
+    test('should display user avatar or initials', async ({ page }) => {
+      await page.goto('/team')
+
+      // Wait for page content to load - check for Active Members heading
+      await expect(page.getByRole('heading', { name: /active members/i })).toBeVisible()
+
+      // Should see at least one role badge (owner, admin, or member)
+      const roleBadge = page.locator('text=/owner|admin|member/i').first()
+      await expect(roleBadge).toBeVisible()
+    })
+
+    test('should display user email on team page', async ({ page }) => {
+      await page.goto('/team')
+
+      // At least one email should be visible (current user)
+      const emailPattern = page.locator('p').filter({ hasText: /@.*\./ })
+      // May or may not have email visible depending on data
+      const emailCount = await emailPattern.count()
+      if (emailCount > 0) {
+        await expect(emailPattern.first()).toBeVisible()
+      }
+    })
+  })
+
+  test.describe('Settings Page - Profile Update UI', () => {
+    test('should display settings page with profile tab', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Should see the Settings heading
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Should see Profile tab
+      const profileTab = page.getByRole('tab', { name: /profile/i })
+      await expect(profileTab).toBeVisible()
+    })
+
+    test('should have name input field on settings page', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Ensure we're on profile tab (default)
+      const profileTab = page.getByRole('tab', { name: /profile/i })
+      if (await profileTab.getAttribute('data-state') !== 'active') {
+        await profileTab.click()
+      }
+
+      // Should see Full Name input
+      const nameInput = page.getByLabel(/full name/i)
+      await expect(nameInput).toBeVisible()
+      await expect(nameInput).toBeEnabled()
+    })
+
+    test('should have email input field (disabled) on settings page', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Should see email input that is disabled
+      const emailInput = page.getByLabel(/email address/i)
+      await expect(emailInput).toBeVisible()
+      await expect(emailInput).toBeDisabled()
+    })
+
+    test('should have save changes button on settings page', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Should see Save Changes button
+      const saveButton = page.getByRole('button', { name: /save changes/i })
+      await expect(saveButton).toBeVisible()
+    })
+
+    test('should display profile picture section', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Should see Profile Picture card (use first() as text may appear multiple times)
+      await expect(page.getByText(/profile picture/i).first()).toBeVisible()
+
+      // Should see Change Photo button
+      const changePhotoButton = page.getByRole('button', { name: /change photo/i })
+      await expect(changePhotoButton).toBeVisible()
+    })
+
+    test('should have account tab with connected accounts', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Click on Account tab
+      const accountTab = page.getByRole('tab', { name: /account/i })
+      await accountTab.click()
+
+      // Should see Connected Accounts section
+      await expect(page.getByText(/connected accounts/i)).toBeVisible()
+
+      // Should see Google connected
+      await expect(page.getByText(/google/i)).toBeVisible()
+    })
+
+    test('should have notifications tab', async ({ page }) => {
+      await page.goto('/settings')
+
+      // Click on Notifications tab
+      const notificationsTab = page.getByRole('tab', { name: /notifications/i })
+      await notificationsTab.click()
+
+      // Should see Email Notifications section
+      await expect(page.getByText(/email notifications/i)).toBeVisible()
+    })
+  })
+
+  test.describe('Account Page - Security Settings', () => {
+    test('should display account page with security section', async ({ page }) => {
+      await page.goto('/account')
+
+      // Should see the Account heading
+      await expect(page.getByRole('heading', { name: /^account$/i })).toBeVisible()
+
+      // Should see Security section
+      await expect(page.getByRole('heading', { name: /security/i })).toBeVisible()
+    })
+
+    test('should display connected accounts on account page', async ({ page }) => {
+      await page.goto('/account')
+
+      // Should see Connected Accounts section
+      await expect(page.getByRole('heading', { name: /connected accounts/i })).toBeVisible()
+
+      // Should see Google connection status
+      await expect(page.getByText(/google/i).first()).toBeVisible()
+    })
+
+    test('should display active sessions section', async ({ page }) => {
+      await page.goto('/account')
+
+      // Should see Active Sessions section
+      await expect(page.getByRole('heading', { name: /active sessions/i })).toBeVisible()
+
+      // Should see current session indicator (use first() as "current" may appear multiple times)
+      await expect(page.getByText(/current/i).first()).toBeVisible()
+    })
+
+    test('should display API access section', async ({ page }) => {
+      await page.goto('/account')
+
+      // Should see API Access section
+      await expect(page.getByRole('heading', { name: /api access/i })).toBeVisible()
+
+      // Should see Create Key button
+      const createKeyButton = page.getByRole('button', { name: /create key/i })
+      await expect(createKeyButton).toBeVisible()
+    })
+
+    test('should display danger zone with delete account option', async ({ page }) => {
+      await page.goto('/account')
+
+      // Should see Danger Zone section
+      await expect(page.getByRole('heading', { name: /danger zone/i })).toBeVisible()
+
+      // Should see Delete Account button
+      const deleteButton = page.getByRole('button', { name: /delete/i }).first()
+      await expect(deleteButton).toBeVisible()
+    })
+  })
+})