From e696d6e5265fedd6bb83488f9feb8061c8796905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Wed, 21 Oct 2026 22:51:06 +0200
Subject: [PATCH] test(e2e): match the activity calendar on data attributes,
 not wording

The card carries data-period and each goal row and goal field a
data-goal-key, so the spec no longer depends on the English labels.
---
 e2e/activity-calendar.spec.ts                 | 26 +++++++++----------
 .../__tests__/activity-calendar-card.test.tsx |  7 +++++
 .../activity/activity-calendar-card.tsx       |  8 +++++-
 .../activity/activity-goals-sheet.tsx         |  1 +
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/e2e/activity-calendar.spec.ts b/e2e/activity-calendar.spec.ts
index 3cfae6517..ef6b547ce 100644
--- a/e2e/activity-calendar.spec.ts
+++ b/e2e/activity-calendar.spec.ts
@@ -32,7 +32,9 @@ test.describe("activity calendar", () => {
     await page.locator('[data-slot="activity-calendar-previous"]').click();
     await expect(label).not.toHaveText(before ?? "");
 
-    await card.getByRole("radio", { name: "Week" }).click();
+    await expect(card).toHaveAttribute("data-period", "month");
+    await page.locator('[data-slot="activity-calendar-period-week"]').click();
+    await expect(card).toHaveAttribute("data-period", "week");
     if ((await days.count()) > 0) await expect(days).toHaveCount(7);
 
     // Nothing in the card pushes the page sideways on a phone.
@@ -47,22 +49,20 @@ test.describe("activity calendar", () => {
   test("saves a goal and shows its progress", async ({ page }) => {
     await page.goto("/insights/workouts");
     await page.locator('[data-slot="activity-calendar-set-goals"]').click();
-    await page.getByLabel("Steps per month").fill("150000");
+    const field = page.locator(
+      '[data-slot="activity-goals-form"] [data-goal-key="stepsPerMonth"]',
+    );
+    const goal = page.locator(
+      '[data-slot="activity-calendar-goal"][data-goal-key="stepsPerMonth"]',
+    );
+    await field.fill("150000");
     await page.locator('[data-slot="activity-goals-save"]').click();
-    await expect(
-      page
-        .locator('[data-slot="activity-calendar-goals"]')
-        .getByText("Steps per month"),
-    ).toBeVisible();
+    await expect(goal).toBeVisible();
 
     // Clear it again so the account is left as it was found.
     await page.locator('[data-slot="activity-calendar-set-goals"]').click();
-    await page.getByLabel("Steps per month").fill("");
+    await field.fill("");
     await page.locator('[data-slot="activity-goals-save"]').click();
-    await expect(
-      page
-        .locator('[data-slot="activity-calendar-goals"]')
-        .getByText("Steps per month"),
-    ).toHaveCount(0);
+    await expect(goal).toHaveCount(0);
   });
 });
diff --git a/src/components/activity/__tests__/activity-calendar-card.test.tsx b/src/components/activity/__tests__/activity-calendar-card.test.tsx
index d9c991492..f56ff213b 100644
--- a/src/components/activity/__tests__/activity-calendar-card.test.tsx
+++ b/src/components/activity/__tests__/activity-calendar-card.test.tsx
@@ -140,6 +140,13 @@ describe("ActivityCalendarCard", () => {
     state.data = calendar();
     const html = render();
     expect(html).toContain("Steps per month");
+    // Stable hooks for the end-to-end spec, independent of the wording.
+    expect(html).toContain(
+      'data-slot="activity-calendar-goal" data-goal-key="stepsPerMonth"',
+    );
+    expect(html).toMatch(
+      /data-slot="activity-calendar"[^>]*data-period="month"/,
+    );
     expect(html).toContain(
       'data-slot="activity-calendar-week-goal" data-met="true"',
     );
diff --git a/src/components/activity/activity-calendar-card.tsx b/src/components/activity/activity-calendar-card.tsx
index f941dcae2..a07960a0b 100644
--- a/src/components/activity/activity-calendar-card.tsx
+++ b/src/components/activity/activity-calendar-card.tsx
@@ -173,6 +173,7 @@ export function ActivityCalendarCard() {
     <Card
       id="activity-calendar"
       data-slot="activity-calendar"
+      data-period={period}
       className="scroll-mt-28"
     >
       <CardHeader>
@@ -483,7 +484,12 @@ export function ActivityCalendarCard() {
 
             <div className="space-y-2" data-slot="activity-calendar-goals">
               {data.goalProgress.map((g) => (
-                <div key={g.key} className="space-y-1">
+                <div
+                  key={g.key}
+                  className="space-y-1"
+                  data-slot="activity-calendar-goal"
+                  data-goal-key={g.key}
+                >
                   <div className="flex items-center justify-between gap-3 text-sm">
                     <span className="inline-flex items-center gap-1.5">
                       <Target
diff --git a/src/components/activity/activity-goals-sheet.tsx b/src/components/activity/activity-goals-sheet.tsx
index d5f1082b2..682489577 100644
--- a/src/components/activity/activity-goals-sheet.tsx
+++ b/src/components/activity/activity-goals-sheet.tsx
@@ -115,6 +115,7 @@ export function ActivityGoalsSheet({
               <Label htmlFor={id}>{t(`activityCalendar.goal.${key}`)}</Label>
               <Input
                 id={id}
+                data-goal-key={key}
                 inputMode="numeric"
                 autoComplete="off"
                 value={draft[key]}