From 2f229cbfa01ea7fd06d31df49f1abf450b512d58 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:08:03 +0100
Subject: [PATCH] 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.
---
 app/components/ContributionAmountField.vue |  5 +++--
 e2e/join-flow.spec.js                      | 23 +++++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/ContributionAmountField.vue b/app/components/ContributionAmountField.vue
index 2f564f1..b8a331a 100644
--- a/app/components/ContributionAmountField.vue
+++ b/app/components/ContributionAmountField.vue
@@ -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>
diff --git a/e2e/join-flow.spec.js b/e2e/join-flow.spec.js
index 6369d1a..bb7de07 100644
--- a/e2e/join-flow.spec.js
+++ b/e2e/join-flow.spec.js
@@ -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()