Check in a browser what the unit tests cannot see

Every serious defect in this project was found by opening the app, most
recently a feature that rendered blank cards to every user while its tests
passed, and a progress bar labelled in the wrong unit. Five checks now run
without a person: that the age-four figures on screen match what the API
computed, that a multi-week period draws as one bar rather than fragments,
that Sundays and holidays are red where Saturdays are not, that no identifier
leaks into visible text, and that no page logs an error.

Three of them were confirmed by reintroducing the original bug and watching
the right test fail. Dates are derived rather than written down: Easter is
computed independently instead of asked of the system under test, and the
fixture period is placed relative to today, so the suite does not expire.

It runs as its own job and does not block a merge until it has proved itself
stable.

frontend/e2e/tests/age4.spec.ts

@@ -0,0 +1,57 @@
+/**
+ * Regression guard for the age-4 savable/expiring arithmetic actually
+ * reaching the Dashboard UI.
+ *
+ * Domain rule (see AGENTS.md "Domain rules" and
+ * backend/app/config.py's `LeaveRules`): after the child turns 4, only 96
+ * days may be saved *per child* — for a `couple` workspace with two
+ * parents, that's a 48-day cap *per parent*, not 96 each. A prior bug
+ * modelled a two-parent family as able to save 192 days combined by
+ * applying the per-child cap to each parent independently — see
+ * `AnalyticsService`'s module docstring, which documents this exact
+ * failure mode. This test asserts the invariant holds in the API response
+ * AND that the Dashboard renders those same numbers (not some other,
+ * separately-computed figure) — the historically-buggy progress bar was a
+ * *wiring* defect, not a backend one.
+ */
+import { test, expect } from '@playwright/test'
+import { apiGetOverview, apiLogin, DEMO_EMAIL, DEMO_PASSWORD } from '../support/api'
+import { loadSeedFixture } from '../support/fixture'
+
+test('per-parent expiring/savable figures respect the 48/96 age-4 cap, and the Dashboard shows the same numbers', async ({
+  page,
+}) => {
+  const fixture = loadSeedFixture()
+  const token = await apiLogin(DEMO_EMAIL, DEMO_PASSWORD)
+  const overview = await apiGetOverview(token, fixture.workspaceId, fixture.childId)
+
+  // Ground truth from the API, independent of anything rendered.
+  expect(overview.parent_projections.length).toBe(2) // seed_demo.py: Alex + Sam
+  for (const projection of overview.parent_projections) {
+    expect(projection.savable_after_b4).toBeLessThanOrEqual(projection.savable_cap_at_b4)
+    expect(projection.savable_after_b4).toBeGreaterThanOrEqual(0)
+    expect(projection.expiring_at_b4).toBeGreaterThanOrEqual(0)
+  }
+  // The literal regression this guards: a two-parent workspace's per-parent
+  // caps must sum to the per-CHILD ceiling (96), never double it (192).
+  const capSum = overview.parent_projections.reduce((sum, p) => sum + p.savable_cap_at_b4, 0)
+  expect(capSum).toBeLessThanOrEqual(96)
+  const savableSum = overview.parent_projections.reduce((sum, p) => sum + p.savable_after_b4, 0)
+  expect(savableSum).toBeLessThanOrEqual(96)
+
+  // Now confirm the Dashboard actually surfaces these same figures.
+  await page.goto('/')
+  await expect(page.getByTestId('dashboard')).toBeVisible()
+
+  for (const projection of overview.parent_projections) {
+    const metric = page.getByTestId(`metric-expiring-parent-${projection.personal_data_uuid}`)
+    await expect(metric).toBeVisible()
+    const value = metric.locator('[data-testid^="metric-value-"]')
+    await expect(value).toHaveText(String(projection.expiring_at_b4))
+  }
+
+  const combinedMetric = page.getByTestId('metric-expiring-combined')
+  await expect(combinedMetric).toBeVisible()
+  const combinedValue = combinedMetric.locator('[data-testid^="metric-value-"]')
+  await expect(combinedValue).toHaveText(String(overview.combined_expiring_at_b4))
+})

frontend/e2e/tests/calendar-band.spec.ts

@@ -0,0 +1,64 @@
+/**
+ * A multi-week leave period must render as ONE continuous band across
+ * `CalendarWeek` rows, not fragment into a separate bar per week row, and
+ * only the row containing the band's true first/last day gets a rounded
+ * end cap (see `CalendarWeek.tsx`'s `computeBandSegments`/
+ * `isBridgeableGap`).
+ *
+ * The band under test is created directly via the API in global-setup.ts
+ * (15 consecutive weekdays, entirely inside one calendar month, dates
+ * derived from "today" — see that file), not by clicking through the UI,
+ * so a setup failure here is distinguishable from a real assertion
+ * failure. Its exact key is reproduced from `CalendarWeek.tsx`'s
+ * `bandKeyFor` for an ad-hoc (no wish) period: `adhoc:{parent}:{type}:{isDubbeldag}`.
+ */
+import { test, expect } from '@playwright/test'
+import { countWeekRows } from '../support/dates'
+import { goToCalendarMonth } from '../support/calendarNav'
+import { loadSeedFixture } from '../support/fixture'
+
+test('a multi-week band renders as one continuous bar with caps only at its true ends', async ({ page }) => {
+  const fixture = loadSeedFixture()
+  const { startDate, endDate, parentPersonalDataUuid, dayType } = fixture.band
+
+  const start = new Date(`${startDate}T00:00:00Z`)
+  const end = new Date(`${endDate}T00:00:00Z`)
+  const expectedRows = countWeekRows(start, end)
+  expect(expectedRows).toBeGreaterThan(1) // otherwise this isn't testing cross-week banding at all
+
+  await goToCalendarMonth(page, start)
+
+  const bandTestId = `calendar-band-adhoc:${parentPersonalDataUuid}:${dayType}:false::${startDate}`
+  const bandRows = page.locator(`[data-testid="${bandTestId}"]`)
+  await expect(bandRows).toHaveCount(expectedRows)
+
+  // Not fragmented: every row of this band shares exactly this one
+  // testid/key — if bridging across a weekend had failed, the run would
+  // have split into multiple distinct ids instead.
+  const allTestIds = await page
+    .locator('[data-testid^="calendar-band-adhoc:"]')
+    .evaluateAll((els) => els.map((el) => el.getAttribute('data-testid')))
+  const distinctIds = new Set(allTestIds)
+  expect(distinctIds.size, `expected exactly one band id, found: ${[...distinctIds].join(', ')}`).toBe(1)
+
+  const classNames = await bandRows.evaluateAll((els) => els.map((el) => el.className))
+  const startFlags = classNames.map((cls) => cls.includes('calendar-band--start'))
+  const endFlags = classNames.map((cls) => cls.includes('calendar-band--end'))
+
+  // Rounded start cap only on the first (true-start) row.
+  expect(startFlags[0]).toBe(true)
+  expect(startFlags.slice(1).every((flag) => flag === false)).toBe(true)
+
+  // Rounded end cap only on the last (true-end) row.
+  expect(endFlags[endFlags.length - 1]).toBe(true)
+  expect(endFlags.slice(0, -1).every((flag) => flag === false)).toBe(true)
+
+  // Rendered corner radius follows the class, not just its name.
+  await expect(bandRows.first()).toHaveCSS('border-top-left-radius', '4px')
+  await expect(bandRows.last()).toHaveCSS('border-top-right-radius', '4px')
+  if (expectedRows > 2) {
+    const middleRow = bandRows.nth(1)
+    await expect(middleRow).toHaveCSS('border-top-left-radius', '0px')
+    await expect(middleRow).toHaveCSS('border-top-right-radius', '0px')
+  }
+})

frontend/e2e/tests/console-errors.spec.ts

@@ -0,0 +1,25 @@
+/**
+ * No console errors on any main page — a cheap tripwire for exceptions
+ * that unit tests (which render components in isolation) don't exercise,
+ * such as a page-level data-fetch/render crash only visible end-to-end.
+ */
+import { test, expect } from '@playwright/test'
+import { MAIN_PAGES } from '../support/pages'
+
+test.describe('no console errors on main pages', () => {
+  for (const mainPage of MAIN_PAGES) {
+    test(`${mainPage.name} (${mainPage.path}) logs no console errors`, async ({ page }) => {
+      const errors: string[] = []
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') errors.push(msg.text())
+      })
+      page.on('pageerror', (err) => errors.push(err.message))
+
+      await page.goto(mainPage.path)
+      await expect(page.getByTestId(mainPage.testId)).toBeVisible()
+      await page.waitForLoadState('networkidle')
+
+      expect(errors, `console errors on ${mainPage.path}:\n${errors.join('\n')}`).toEqual([])
+    })
+  }
+})

frontend/e2e/tests/no-uuids.spec.ts

@@ -0,0 +1,25 @@
+/**
+ * No raw UUID should ever leak into visible copy where a name belongs (the
+ * historical bug: "3d6c6b2e-… has a large surplus" instead of a parent's
+ * name — see the surplus-advice/name-resolver code in
+ * `src/components/planning/PlanResults.tsx` and `src/utils/parentNames.ts`).
+ * Cheap to guard forever; scans the rendered text of every main page.
+ */
+import { test, expect } from '@playwright/test'
+import { MAIN_PAGES } from '../support/pages'
+
+const UUID_PATTERN = /\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/i
+
+test.describe('no raw UUIDs in visible copy', () => {
+  for (const mainPage of MAIN_PAGES) {
+    test(`${mainPage.name} (${mainPage.path}) never shows a raw id where a name belongs`, async ({ page }) => {
+      await page.goto(mainPage.path)
+      const root = page.getByTestId(mainPage.testId)
+      await expect(root).toBeVisible()
+
+      const text = await root.innerText()
+      const match = text.match(UUID_PATTERN)
+      expect(match?.[0] ?? null, `found a raw UUID in visible text on ${mainPage.path}`).toBeNull()
+    })
+  }
+})

frontend/e2e/tests/red-days.spec.ts

@@ -0,0 +1,73 @@
+/**
+ * §3.4 red-day rendering, and the "combined holiday name" trap.
+ *
+ * The backend (`app/utils/holidays.py::get_swedish_holidays`) returns a
+ * COMBINED name like "Påskdagen; Söndag" whenever a fixed public holiday
+ * falls on a Sunday — `get_red_days` keeps that combined string (only a
+ * *bare* "Söndag" is dropped). A careless frontend filter that splits on
+ * ';' and throws away anything containing a weekday name would silently
+ * delete Påskdagen/Pingstdagen's own name along with it. This test asserts
+ * both holidays render as NAMED red days, by their real name, in the
+ * calendar cell's visible text (not hover-only).
+ *
+ * All dates are computed from "today" (see support/dates.ts) — never a
+ * hardcoded year — because Easter/Pentecost's date, and therefore which
+ * year's calendar page to look at, changes every run.
+ */
+import { test, expect } from '@playwright/test'
+import { addDays, nextEasterOnOrAfter, whitSunday, toIsoDate } from '../support/dates'
+import { calendarDayCell, goToCalendarMonth } from '../support/calendarNav'
+
+const RED_DAY_BG = 'rgb(253, 236, 235)' // .calendar-day--red-day
+const WEEKEND_BG = 'rgb(240, 240, 240)' // .calendar-day--weekend (plain Saturday)
+
+test.describe('red days, klämdagar and the combined-holiday-name trap', () => {
+  test('Easter Sunday (Påskdagen) renders as a named red day', async ({ page }) => {
+    const easter = nextEasterOnOrAfter(new Date())
+    await goToCalendarMonth(page, easter)
+
+    const cell = calendarDayCell(page, toIsoDate(easter))
+    await expect(cell).toHaveClass(/calendar-day--red-day/)
+    await expect(cell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(cell.getByTestId('calendar-day-holiday-name')).toHaveText('Påskdagen')
+  })
+
+  test('Whit Sunday (Pingstdagen) renders as a named red day', async ({ page }) => {
+    const whitsun = whitSunday(nextEasterOnOrAfter(new Date()))
+    await goToCalendarMonth(page, whitsun)
+
+    const cell = calendarDayCell(page, toIsoDate(whitsun))
+    await expect(cell).toHaveClass(/calendar-day--red-day/)
+    await expect(cell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(cell.getByTestId('calendar-day-holiday-name')).toHaveText('Pingstdagen')
+  })
+
+  test('a plain Sunday is red without a holiday name; a plain Saturday is neutral grey', async ({ page }) => {
+    // Two and three weeks before Easter: far enough from Easter's own
+    // de-facto cluster (Långfredagen/Påskafton/Påskdagen/Annandag påsk,
+    // Easter-2..Easter+1) that neither date is itself a public or de-facto
+    // holiday, just an ordinary weekend.
+    const easter = nextEasterOnOrAfter(new Date())
+    const plainSunday = addDays(easter, -14)
+    const plainSaturday = addDays(plainSunday, -1)
+
+    // Navigate by the Sunday's own month, not Easter's: whatever month
+    // `plainSunday` falls in, `plainSaturday` (the day right before it) is
+    // guaranteed to appear in that same month's grid too — either as an
+    // ordinary day in the month, or as a leading fill-in day completing
+    // that first Mon–Sun week row (see Calendar.tsx's `startOffset`) — so
+    // this never depends on the two dates sharing a calendar month.
+    await goToCalendarMonth(page, plainSunday)
+
+    const sundayCell = calendarDayCell(page, toIsoDate(plainSunday))
+    await expect(sundayCell).toHaveClass(/calendar-day--red-day/)
+    await expect(sundayCell).not.toHaveClass(/calendar-day--weekend/)
+    await expect(sundayCell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(sundayCell.getByTestId('calendar-day-holiday-name')).toHaveCount(0)
+
+    const saturdayCell = calendarDayCell(page, toIsoDate(plainSaturday))
+    await expect(saturdayCell).toHaveClass(/calendar-day--weekend/)
+    await expect(saturdayCell).not.toHaveClass(/calendar-day--red-day/)
+    await expect(saturdayCell).toHaveCSS('background-color', WEEKEND_BG)
+  })
+})