@etus/bhono-app 0.1.1

package/templates/base/tests/e2e/journeys/file-management.spec.ts

@@ -0,0 +1,307 @@
+import { test, expect, isAuthenticated, apiRequest, getAccountId, closeAllDialogs } from '../fixtures'
+
+/**
+ * File Upload Management Journey Tests
+ *
+ * These tests verify complete file management flows,
+ * including requesting upload URLs, validating file operations,
+ * and handling storage errors gracefully.
+ *
+ * Note: Some tests may skip if R2 storage is not configured.
+ *
+ * @tags @journey @storage @files
+ */
+
+test.describe('File Upload Management Journey @journey @storage', () => {
+  test.describe('Upload URL Request Flow', () => {
+    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.afterEach(async ({ page }) => {
+      await closeAllDialogs(page)
+    })
+
+    test('should request upload URL for image file', async ({ page }) => {
+      // Step 1: Request upload URL for a JPEG image
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          filename: 'test-image.jpg',
+          contentType: 'image/jpeg',
+        },
+      })
+
+      // Step 2: Handle both configured and unconfigured R2 states
+      expect([200, 400]).toContain(response.status())
+
+      const body = await response.json()
+
+      if (response.status() === 200) {
+        // Step 3: Verify successful response structure
+        expect(body).toHaveProperty('url')
+        expect(body).toHaveProperty('name')
+        expect(body).toHaveProperty('publicUrl')
+
+        // Step 4: Verify URL format
+        expect(body.url).toContain('/api/storage/upload/')
+        expect(typeof body.publicUrl).toBe('string')
+      } else {
+        // R2 not configured - verify error structure
+        expect(body).toHaveProperty('error')
+      }
+    })
+
+    test('should request upload URL for PNG file', async ({ page }) => {
+      // Step 1: Request upload URL for a PNG image
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          filename: 'avatar.png',
+          contentType: 'image/png',
+        },
+      })
+
+      // Step 2: Handle both configured and unconfigured states
+      expect([200, 400]).toContain(response.status())
+
+      const body = await response.json()
+
+      if (response.status() === 200) {
+        expect(body).toHaveProperty('url')
+        expect(body.name).toContain('.png')
+      }
+    })
+
+    test('should request upload URL for PDF document', async ({ page }) => {
+      // Step 1: Request upload URL for a PDF document
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          filename: 'document.pdf',
+          contentType: 'application/pdf',
+        },
+      })
+
+      expect([200, 400]).toContain(response.status())
+
+      const body = await response.json()
+
+      if (response.status() === 200) {
+        expect(body).toHaveProperty('url')
+        expect(body.name).toContain('.pdf')
+      }
+    })
+  })
+
+  test.describe('File Validation Flow', () => {
+    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 reject upload request with missing filename', async ({ page }) => {
+      // Step 1: Request with missing filename
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          contentType: 'image/jpeg',
+        },
+      })
+
+      // Step 2: Should return validation error
+      expect(response.status()).toBe(400)
+
+      const body = await response.json()
+      expect(body).toHaveProperty('error')
+    })
+
+    test('should reject upload request with missing content type', async ({ page }) => {
+      // Step 1: Request with missing content type
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          filename: 'test.jpg',
+        },
+      })
+
+      // Step 2: Should return validation error
+      expect(response.status()).toBe(400)
+
+      const body = await response.json()
+      expect(body).toHaveProperty('error')
+    })
+
+    test('should reject upload request with empty body', async ({ page }) => {
+      // Step 1: Request with empty body
+      const response = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {},
+      })
+
+      // Step 2: Should return validation error
+      expect(response.status()).toBe(400)
+
+      const body = await response.json()
+      expect(body).toHaveProperty('error')
+    })
+  })
+
+  test.describe('File Deletion Flow', () => {
+    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 return 404 for non-existent file deletion', async ({ page }) => {
+      // Step 1: Attempt to delete a non-existent file
+      const nonExistentKey = encodeURIComponent('test/non-existent-file-12345.jpg')
+      const response = await apiRequest(page, 'delete', `/api/storage/${nonExistentKey}`)
+
+      // Step 2: Should return 404 (not found) or 400 (R2 not configured)
+      expect([404, 400]).toContain(response.status())
+
+      const body = await response.json()
+      expect(body).toHaveProperty('error')
+      expect(body.error).toHaveProperty('message')
+    })
+
+    test('should handle deletion of randomly named files gracefully', async ({ page }) => {
+      // Step 1: Generate random file keys to test deletion
+      const randomKeys = [
+        `temp/file-${Date.now()}.jpg`,
+        `uploads/image-${Math.random().toString(36).substring(7)}.png`,
+        `avatars/user-${Date.now()}.webp`,
+      ]
+
+      for (const key of randomKeys) {
+        const encodedKey = encodeURIComponent(key)
+        const response = await apiRequest(page, 'delete', `/api/storage/${encodedKey}`)
+
+        // Step 2: All should return not found or R2 error
+        expect([404, 400]).toContain(response.status())
+
+        const body = await response.json()
+        expect(body).toHaveProperty('error')
+      }
+    })
+  })
+
+  test.describe('File Upload 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 return error for upload with empty body', async ({ page }) => {
+      // Step 1: Attempt upload with empty body
+      const testKey = encodeURIComponent('test/empty-upload.txt')
+      const response = await apiRequest(page, 'put', `/api/storage/upload/${testKey}`, {
+        headers: {
+          'content-type': 'text/plain',
+        },
+      })
+
+      // Step 2: Should return 400 error
+      expect(response.status()).toBe(400)
+
+      const body = await response.json()
+      expect(body).toHaveProperty('error')
+      expect(body.error).toHaveProperty('message')
+    })
+  })
+
+  test.describe('Profile Picture Upload Journey', () => {
+    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 profile picture section in settings', async ({ page }) => {
+      // Step 1: Navigate to settings page
+      await page.goto('/settings')
+      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible()
+
+      // Step 2: Verify Profile Picture section exists
+      await expect(page.getByRole('heading', { name: 'Profile Picture' })).toBeVisible()
+
+      // Step 3: Verify Change Photo button is present
+      const changePhotoButton = page.getByRole('button', { name: /change photo/i })
+      await expect(changePhotoButton).toBeVisible()
+      await expect(changePhotoButton).toBeEnabled()
+
+      // Step 4: Verify file size limit hint
+      await expect(page.getByText(/max 2mb/i)).toBeVisible()
+    })
+
+    test('should have file input for profile picture upload', async ({ page }) => {
+      // Step 1: Navigate to settings page
+      await page.goto('/settings')
+
+      // Step 2: Verify hidden file input exists
+      const fileInput = page.locator('input[type="file"]')
+      await expect(fileInput).toHaveCount(1)
+
+      // Step 3: Verify file input accepts images
+      const acceptAttr = await fileInput.getAttribute('accept')
+      expect(acceptAttr).toContain('image/')
+    })
+  })
+
+  test.describe('Complete File Management Workflow', () => {
+    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('complete file management workflow via API', async ({ page }) => {
+      // Step 1: Request upload URL
+      const uploadUrlResponse = await apiRequest(page, 'post', '/api/storage/upload-url', {
+        data: {
+          filename: `workflow-test-${Date.now()}.jpg`,
+          contentType: 'image/jpeg',
+        },
+      })
+
+      // Step 2: Handle R2 configuration state
+      if (uploadUrlResponse.status() === 400) {
+        // R2 not configured - test passes with graceful handling
+        const body = await uploadUrlResponse.json()
+        expect(body).toHaveProperty('error')
+        return
+      }
+
+      expect(uploadUrlResponse.status()).toBe(200)
+      const uploadData = await uploadUrlResponse.json()
+
+      // Step 3: Verify upload URL structure
+      expect(uploadData).toHaveProperty('url')
+      expect(uploadData).toHaveProperty('name')
+      expect(uploadData).toHaveProperty('publicUrl')
+
+      // Step 4: Verify the file key format
+      expect(uploadData.name).toMatch(/^[a-zA-Z0-9-_/.]+$/)
+
+      // Step 5: Try to delete the file (cleanup)
+      const encodedKey = encodeURIComponent(uploadData.name)
+      const deleteResponse = await apiRequest(page, 'delete', `/api/storage/${encodedKey}`)
+
+      // Should return 404 (file not actually uploaded) or success
+      expect([200, 404, 400]).toContain(deleteResponse.status())
+    })
+  })
+})

package/templates/base/tests/e2e/journeys/integrations.spec.ts

@@ -0,0 +1,372 @@
+import { test, expect, isAuthenticated, closeAllDialogs } from '../fixtures'
+
+/**
+ * Integration Management Journey Tests
+ *
+ * These tests verify complete integration management user flows,
+ * including browsing integrations, webhooks, and API documentation.
+ *
+ * @tags @critical @journey @integrations
+ */
+
+test.describe('Integration Management Journeys @critical @journey @integrations', () => {
+  test.describe('Integrations Overview Journey', () => {
+    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 integrations page with header', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify page loads with main heading
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Verify description
+      await expect(page.getByText(/connect third-party services and manage webhooks/i)).toBeVisible()
+
+      // Verify connected count indicator
+      await expect(page.getByText(/\d+ connected/)).toBeVisible()
+    })
+
+    test('should display search input', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify search input is visible
+      const searchInput = page.getByPlaceholder(/search integrations/i)
+      await expect(searchInput).toBeVisible()
+      await expect(searchInput).toBeEnabled()
+    })
+
+    test('should display category filter buttons', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify all category buttons are visible
+      await expect(page.getByRole('button', { name: 'All' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Communication' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Payments' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Development' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Automation' })).toBeVisible()
+    })
+
+    test('should display available integrations section', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify Available Integrations heading
+      await expect(page.getByRole('heading', { name: /available integrations/i })).toBeVisible()
+
+      // Verify some integration cards are visible (using first() to handle multiple matches)
+      await expect(page.getByText('Slack').first()).toBeVisible()
+      await expect(page.getByText('Discord').first()).toBeVisible()
+      await expect(page.getByText('Stripe').first()).toBeVisible()
+    })
+
+    test('should display integration cards with details', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify Slack integration card
+      await expect(page.getByText('Slack').first()).toBeVisible()
+      await expect(page.getByText(/send notifications and updates to slack channels/i)).toBeVisible()
+
+      // Verify Stripe integration card
+      await expect(page.getByText('Stripe').first()).toBeVisible()
+      await expect(page.getByText(/process payments and manage subscriptions/i)).toBeVisible()
+
+      // Verify GitHub integration card
+      await expect(page.getByText('GitHub').first()).toBeVisible()
+      await expect(page.getByText(/sync repositories and track issues/i)).toBeVisible()
+    })
+  })
+
+  test.describe('Integration Search Journey', () => {
+    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 filter integrations by search', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Type in search
+      const searchInput = page.getByPlaceholder(/search integrations/i)
+      await searchInput.fill('slack')
+
+      // Verify only Slack is visible
+      await expect(page.getByText('Slack').first()).toBeVisible()
+
+      // Verify other integrations are not visible
+      await expect(page.getByText('Discord').first()).not.toBeVisible()
+      await expect(page.getByText('Stripe').first()).not.toBeVisible()
+    })
+
+    test('should show no results message when search has no matches', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Type search that has no matches
+      const searchInput = page.getByPlaceholder(/search integrations/i)
+      await searchInput.fill('nonexistentintegration')
+
+      // Verify no results message
+      await expect(page.getByText(/no integrations found matching your search/i)).toBeVisible()
+    })
+
+    test('should clear search and show all integrations', async ({ page }) => {
+      await page.goto('/integrations')
+
+      const searchInput = page.getByPlaceholder(/search integrations/i)
+
+      // Search for specific integration
+      await searchInput.fill('github')
+      await expect(page.getByText('GitHub').first()).toBeVisible()
+      await expect(page.getByText('Slack').first()).not.toBeVisible()
+
+      // Clear search
+      await searchInput.clear()
+
+      // Verify all integrations are back
+      await expect(page.getByText('GitHub').first()).toBeVisible()
+      await expect(page.getByText('Slack').first()).toBeVisible()
+      await expect(page.getByText('Stripe').first()).toBeVisible()
+    })
+  })
+
+  test.describe('Integration Category Filter Journey', () => {
+    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 filter by Communication category', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Click Communication category
+      await page.getByRole('button', { name: 'Communication' }).click()
+
+      // Verify only communication integrations are visible
+      await expect(page.getByText('Slack').first()).toBeVisible()
+      await expect(page.getByText('Discord').first()).toBeVisible()
+
+      // Verify other categories are not visible
+      await expect(page.getByText('Stripe').first()).not.toBeVisible()
+      await expect(page.getByText('GitHub').first()).not.toBeVisible()
+    })
+
+    test('should filter by Development category', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Click Development category
+      await page.getByRole('button', { name: 'Development' }).click()
+
+      // Verify only development integrations are visible
+      await expect(page.getByText('GitHub').first()).toBeVisible()
+      await expect(page.getByText('Linear').first()).toBeVisible()
+
+      // Verify other categories are not visible
+      await expect(page.getByText('Slack').first()).not.toBeVisible()
+      await expect(page.getByText('Stripe').first()).not.toBeVisible()
+    })
+
+    test('should return to all integrations when All is clicked', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // First filter by a category
+      await page.getByRole('button', { name: 'Payments' }).click()
+      await expect(page.getByText('Stripe').first()).toBeVisible()
+      await expect(page.getByText('Slack').first()).not.toBeVisible()
+
+      // Click All to reset filter
+      await page.getByRole('button', { name: 'All' }).click()
+
+      // Verify all integrations are visible
+      await expect(page.getByText('Stripe').first()).toBeVisible()
+      await expect(page.getByText('Slack').first()).toBeVisible()
+      await expect(page.getByText('GitHub').first()).toBeVisible()
+    })
+  })
+
+  test.describe('Webhook Management Journey', () => {
+    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 webhooks section', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify Webhooks heading
+      await expect(page.getByRole('heading', { name: /webhooks/i })).toBeVisible()
+
+      // Verify webhooks description
+      await expect(page.getByText(/receive real-time notifications when events happen/i)).toBeVisible()
+
+      // Verify Add Webhook button
+      const addWebhookButton = page.getByRole('button', { name: 'Add Webhook' }).first()
+      await expect(addWebhookButton).toBeVisible()
+    })
+
+    test('should display existing webhook details', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify webhook URL is displayed
+      await expect(page.getByText('https://api.example.com/webhooks/receive')).toBeVisible()
+
+      // Verify event badges are shown
+      await expect(page.getByText('user.created')).toBeVisible()
+      await expect(page.getByText('user.updated')).toBeVisible()
+
+      // Verify last delivery info
+      await expect(page.getByText(/last delivery/i)).toBeVisible()
+    })
+
+    test('should open create webhook dialog', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Click Add Webhook button
+      const addWebhookButton = page.getByRole('button', { name: 'Add Webhook' }).first()
+      await addWebhookButton.click()
+
+      // Verify dialog opens
+      await expect(page.getByRole('heading', { name: /create webhook/i })).toBeVisible()
+
+      // Verify dialog description
+      await expect(page.getByText(/configure a url to receive post requests/i)).toBeVisible()
+    })
+
+    test('should display webhook form fields', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Open dialog
+      await page.getByRole('button', { name: 'Add Webhook' }).first().click()
+
+      // Verify Endpoint URL field
+      await expect(page.getByLabel(/endpoint url/i)).toBeVisible()
+      await expect(page.getByPlaceholder('https://api.example.com/webhooks')).toBeVisible()
+
+      // Verify Events section
+      await expect(page.getByText(/events to subscribe/i)).toBeVisible()
+
+      // Verify event buttons
+      await expect(page.getByRole('button', { name: 'User Created' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'User Updated' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'User Deleted' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Team Member Added' })).toBeVisible()
+    })
+
+    test('should enable create button when form is valid', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Open dialog
+      await page.getByRole('button', { name: 'Add Webhook' }).first().click()
+
+      // Verify Create button is initially disabled
+      const createButton = page.getByRole('button', { name: 'Create Webhook', exact: true })
+      await expect(createButton).toBeDisabled()
+
+      // Fill in URL
+      await page.getByPlaceholder('https://api.example.com/webhooks').fill('https://test.example.com/webhook')
+
+      // Still disabled (no events selected)
+      await expect(createButton).toBeDisabled()
+
+      // Select an event
+      await page.getByRole('button', { name: 'User Created' }).click()
+
+      // Now button should be enabled
+      await expect(createButton).toBeEnabled()
+    })
+
+    test('should cancel webhook creation', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Open dialog
+      await page.getByRole('button', { name: 'Add Webhook' }).first().click()
+      await expect(page.getByRole('heading', { name: /create webhook/i })).toBeVisible()
+
+      // Fill in form
+      await page.getByPlaceholder('https://api.example.com/webhooks').fill('https://cancel-test.com/webhook')
+      await page.getByRole('button', { name: 'User Created' }).click()
+
+      // Click Cancel
+      await page.getByRole('button', { name: 'Cancel' }).click()
+
+      // Verify dialog is closed
+      await expect(page.getByRole('heading', { name: /create webhook/i })).not.toBeVisible()
+
+      // Verify we're still on integrations page
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+    })
+  })
+
+  test.describe('API Documentation Journey', () => {
+    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 API documentation section', async ({ page }) => {
+      await page.goto('/integrations')
+
+      // Verify Build Custom Integrations section
+      await expect(page.getByText('Build Custom Integrations')).toBeVisible()
+      await expect(page.getByText(/use our api to build your own integrations/i)).toBeVisible()
+
+      // Verify View API Docs button
+      const apiDocsButton = page.getByRole('button', { name: /view api docs/i })
+      await expect(apiDocsButton).toBeVisible()
+      await expect(apiDocsButton).toBeEnabled()
+    })
+  })
+
+  test.describe('Integration Navigation Journey', () => {
+    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 navigate from integrations to other pages and back', async ({ page }) => {
+      // Start at integrations
+      await page.goto('/integrations')
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Navigate to dashboard
+      await page.goto('/dashboard')
+      await expect(page).toHaveURL(/dashboard/)
+
+      // Return to integrations
+      await page.goto('/integrations')
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+
+      // Navigate to team
+      await page.goto('/team')
+      await expect(page.getByRole('heading', { name: /team members/i })).toBeVisible()
+
+      // Return to integrations
+      await page.goto('/integrations')
+      await expect(page.getByRole('heading', { name: 'Integrations', exact: true })).toBeVisible()
+    })
+  })
+})