test(join): align e2e with new ContributionAmountField

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.
This commit is contained in:
Jennie Robinson Faber 2026-05-23 15:08:03 +01:00
parent 26ee1ca60d
commit 2f229cbfa0
2 changed files with 14 additions and 14 deletions

View file

@ -49,7 +49,7 @@ test.describe('Join page — member signup flow', () => {
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.getByTestId('contribution-amount')).toBeVisible()
await expect(page.locator('.form-submit')).toBeVisible()
})
@ -88,7 +88,7 @@ test.describe('Join page — member signup flow', () => {
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.locator('#join-contribution').fill('0')
await page.getByTestId('contribution-amount').fill('0')
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
await expect(page.locator('.form-submit')).toBeEnabled()
@ -108,18 +108,17 @@ test.describe('Join page — member signup flow', () => {
await page.goto('/join')
await page.waitForLoadState('networkidle')
await page.locator('#join-contribution').fill('10')
await page.locator('label[for="cadence-annual"]').click()
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('$10/month × 12')
await expect(summary).toContainText('$120 every year')
await expect(summary).toContainText('at each annual renewal')
await page.locator('label[for="cadence-monthly"]').click()
await page.getByTestId('cadence-monthly').click()
await expect(summary).toContainText('$10 today')
await expect(summary).toContainText('$10 every month')
await expect(summary).toContainText('each month')
})
test('contribution guidance label changes with amount tier', async ({ page }) => {
@ -128,10 +127,10 @@ test.describe('Join page — member signup flow', () => {
const guidance = page.locator('.contribution-guidance')
await page.locator('#join-contribution').fill('5')
await page.getByTestId('contribution-amount').fill('5')
await expect(guidance).toHaveText(/I can contribute/)
await page.locator('#join-contribution').fill('30')
await page.getByTestId('contribution-amount').fill('30')
await expect(guidance).toHaveText(/I can support others too/)
})
@ -191,7 +190,7 @@ test.describe('Join page — member signup flow', () => {
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.locator('#join-contribution').fill('15')
await page.getByTestId('contribution-amount').fill('15')
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
await expect(page.locator('.form-submit')).toBeEnabled()
@ -214,7 +213,7 @@ test.describe('Join page — member signup flow', () => {
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').fill('0')
await page.getByTestId('contribution-amount').fill('0')
await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
await page.locator('.form-submit').click()