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() { @@ -483,7 +484,12 @@ export function ActivityCalendarCard() {
{data.goalProgress.map((g) => ( -
+
{t(`activityCalendar.goal.${key}`)}