jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test(join): align e2e with new ContributionAmountField

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

5
app/components/ContributionAmountField.vue
View file

@ -12,7 +12,7 @@
:checked="cadence === 'monthly'"
@change="onCadenceChange('monthly')"
>
<label :for="`${uid}-cadence-monthly`">
<label :for="`${uid}-cadence-monthly`" data-testid="cadence-monthly">
<span class="circle-label-name">Per Month</span>
</label>
</div>
@ -25,7 +25,7 @@
:checked="cadence === 'annual'"
@change="onCadenceChange('annual')"
>
<label :for="`${uid}-cadence-annual`">
<label :for="`${uid}-cadence-annual`" data-testid="cadence-annual">
<span class="circle-label-name">Per Year</span>
</label>
</div>
@ -44,6 +44,7 @@
step="1"
inputmode="numeric"
class="contribution-input"
data-testid="contribution-amount"
@input="onAmountInput"
>
</div>

23
e2e/join-flow.spec.js
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()