Jennie Robinson Faber
2f229cbfa0
Add data-testid hooks for the contribution amount input and cadence
toggle labels so playwright can target them through useId-generated
ids. Update join-flow.spec.js to use the new selectors and to assert
the new billing-summary copy ('at each annual renewal' / 'each month'),
dropping the obsolete '/month x 12' parenthetical.
225 lines
8 KiB
JavaScript
225 lines
8 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.getByTestId('contribution-amount')).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 — agreement still unchecked, so still disabled
|
||
await page.locator('#join-email').fill('incomplete-test@example.com')
|
||
await expect(page.locator('.form-submit')).toBeDisabled()
|
||
|
||
// Check the Community Guidelines agreement — now all required fields satisfied
|
||
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||
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 })
|
||
// Contribution is now a numeric input with preset chips, not a select
|
||
await page.getByTestId('contribution-amount').fill('0')
|
||
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||
|
||
await expect(page.locator('.form-submit')).toBeEnabled()
|
||
|
||
// Mock Helcim APIs before submitting
|
||
await mockHelcimAPIs(page)
|
||
|
||
await page.locator('.form-submit').click()
|
||
|
||
// Free tier flips the SignupFlowOverlay into its success state
|
||
await expect(
|
||
page.getByRole('heading', { name: 'Welcome to Ghost Guild!' })
|
||
).toBeVisible({ timeout: 15000 })
|
||
})
|
||
|
||
test('cadence toggle updates billing summary to annual ×12', async ({ page }) => {
|
||
await page.goto('/join')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
await page.getByTestId('contribution-amount').fill('10')
|
||
await page.getByTestId('cadence-annual').click()
|
||
|
||
const summary = page.locator('.billing-summary')
|
||
await expect(summary).toBeVisible()
|
||
await expect(summary).toContainText('$120 today')
|
||
await expect(summary).toContainText('at each annual renewal')
|
||
|
||
await page.getByTestId('cadence-monthly').click()
|
||
await expect(summary).toContainText('$10 today')
|
||
await expect(summary).toContainText('each month')
|
||
})
|
||
|
||
test('contribution guidance label changes with amount tier', async ({ page }) => {
|
||
await page.goto('/join')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
const guidance = page.locator('.contribution-guidance')
|
||
|
||
await page.getByTestId('contribution-amount').fill('5')
|
||
await expect(guidance).toHaveText(/I can contribute/)
|
||
|
||
await page.getByTestId('contribution-amount').fill('30')
|
||
await expect(guidance).toHaveText(/I can support others too/)
|
||
})
|
||
|
||
test('paid tier flow reaches success state with HelcimPay stubbed', async ({ page }) => {
|
||
const uniqueEmail = `test-e2e-paid-${Date.now()}@example.com`
|
||
|
||
// Stub HelcimPay window globals before the page loads so the composable's
|
||
// script-load path is bypassed and we resolve verifyPayment synchronously.
|
||
await page.addInitScript(() => {
|
||
window.appendHelcimPayIframe = (checkoutToken) => {
|
||
const eventName = 'helcim-pay-js-' + checkoutToken
|
||
setTimeout(() => {
|
||
window.postMessage({
|
||
eventName,
|
||
eventStatus: 'SUCCESS',
|
||
eventMessage: JSON.stringify({
|
||
data: {
|
||
data: {
|
||
transactionId: 'stub-txn-1',
|
||
cardToken: 'stub-card-token-1',
|
||
cardNumber: '4111111111111234',
|
||
cardType: 'visa'
|
||
}
|
||
}
|
||
})
|
||
}, '*')
|
||
}, 50)
|
||
}
|
||
window.removeHelcimPayIframe = () => {}
|
||
})
|
||
|
||
await page.goto('/join')
|
||
await page.waitForLoadState('networkidle')
|
||
|
||
await mockHelcimAPIs(page)
|
||
|
||
await page.route('**/api/helcim/initialize-payment', async (route) => {
|
||
return route.fulfill({
|
||
status: 200,
|
||
contentType: 'application/json',
|
||
body: JSON.stringify({
|
||
success: true,
|
||
checkoutToken: 'stub-checkout-token',
|
||
secretToken: 'stub-secret-token'
|
||
})
|
||
})
|
||
})
|
||
|
||
await page.route('**/api/helcim/verify-payment', async (route) => {
|
||
return route.fulfill({
|
||
status: 200,
|
||
contentType: 'application/json',
|
||
body: JSON.stringify({ success: true })
|
||
})
|
||
})
|
||
|
||
await page.locator('#join-name').fill('Paid E2E User')
|
||
await page.locator('#join-email').fill(uniqueEmail)
|
||
await page.locator('#circle-community').check({ force: true })
|
||
await page.getByTestId('contribution-amount').fill('15')
|
||
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||
|
||
await expect(page.locator('.form-submit')).toBeEnabled()
|
||
await page.locator('.form-submit').click()
|
||
|
||
await expect(
|
||
page.getByRole('heading', { name: 'Welcome to Ghost Guild!' })
|
||
).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.getByTestId('contribution-amount').fill('0')
|
||
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
|
||
await page.locator('.form-submit').click()
|
||
|
||
// Helcim 409 puts SignupFlowOverlay into its error state
|
||
const overlayError = page.locator('.signup-flow-overlay .error-box')
|
||
await expect(overlayError).toBeVisible({ timeout: 10000 })
|
||
await expect(overlayError).toContainText(/already/i)
|
||
})
|
||
})
|