ghostguild-org/e2e/join-flow.spec.js

120 lines
4.3 KiB
JavaScript

import { test, expect } from '@playwright/test'
// Mock Helcim API responses for join flow (avoids dependency on external API)
function mockHelcimAPIs(page, { failCustomer = false } = {}) {
// Mock Helcim customer creation
page.route('**/api/helcim/customer', async (route) => {
if (failCustomer) {
return route.fulfill({
status: 409,
contentType: 'application/json',
body: JSON.stringify({
statusCode: 409,
statusMessage: 'A member with this email already exists',
message: 'A member with this email already exists'
})
})
}
return route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
customerId: 'test-cust-123',
customerCode: 'CUST-TEST-001'
})
})
})
// Mock subscription creation
page.route('**/api/helcim/subscription', async (route) => {
return route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
subscription: { id: 'test-sub-123', status: 'ACTIVE' }
})
})
})
}
test.describe('Join page — member signup flow', () => {
test('join form loads with all fields', async ({ page }) => {
await page.goto('/join')
await page.waitForLoadState('networkidle')
await expect(page.locator('#join-name')).toBeVisible()
await expect(page.locator('#join-email')).toBeVisible()
await expect(page.locator('#circle-community')).toBeAttached()
await expect(page.locator('#circle-founder')).toBeAttached()
await expect(page.locator('#circle-practitioner')).toBeAttached()
await expect(page.locator('#join-contribution')).toBeVisible()
await expect(page.locator('.form-submit')).toBeVisible()
})
test('submit button disabled when form incomplete', async ({ page }) => {
await page.goto('/join')
await page.waitForLoadState('networkidle')
// Clear name and email — circle defaults to community, contribution defaults to $15
await page.locator('#join-name').fill('')
await page.locator('#join-email').fill('')
// Button should be disabled with empty required fields
await expect(page.locator('.form-submit')).toBeDisabled()
// Fill only name — still incomplete
await page.locator('#join-name').fill('Test User')
await expect(page.locator('.form-submit')).toBeDisabled()
// Fill email too — now all fields are populated and button should be enabled
await page.locator('#join-email').fill('incomplete-test@example.com')
await expect(page.locator('.form-submit')).toBeEnabled()
})
test('fill and submit free tier', async ({ page }) => {
const uniqueEmail = `test-e2e-${Date.now()}@example.com`
await page.goto('/join')
await page.waitForLoadState('networkidle')
// Fill in the form
await page.locator('#join-name').fill('E2E Test User')
await page.locator('#join-email').fill(uniqueEmail)
await page.locator('#circle-community').check({ force: true })
await page.locator('#join-contribution').click()
await page.getByRole('option', { name: '$0/mo' }).click()
await expect(page.locator('.form-submit')).toBeEnabled()
// Mock Helcim APIs before submitting
await mockHelcimAPIs(page)
await page.locator('.form-submit').click()
// Free tier creates subscription then shows confirmation (step 3)
await expect(page.locator('.success-box')).toBeVisible({ timeout: 15000 })
})
test('duplicate email shows error', async ({ page }) => {
const duplicateEmail = `test-e2e-dup-${Date.now()}@example.com`
await page.goto('/join')
await page.waitForLoadState('networkidle')
// Mock customer endpoint to return 409 (email already exists)
await mockHelcimAPIs(page, { failCustomer: true })
await page.locator('#join-name').fill('Dup Test User')
await page.locator('#join-email').fill(duplicateEmail)
await page.locator('#circle-community').check({ force: true })
await page.locator('#join-contribution').click()
await page.getByRole('option', { name: '$0/mo' }).click()
await page.locator('.form-submit').click()
// Should show an error about the email already existing
await expect(page.locator('.error-box')).toBeVisible({ timeout: 10000 })
await expect(page.locator('.error-box')).toContainText(/already/i)
})
})