Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
  dev_agentandClaude Opus 5.5
|
ee7b329ec8 | ||
 orchestrator-agent
|
9046b6df78 | ||
|
orchestrator-agent
|
759fbbe3dd | ||
|
orchestrator-agent
|
d390d8dcce | ||
|
orchestrator-agent
|
25edb6fb26 | ||
|
orchestrator-agent
|
17fa82ef2b |
@@ -82,7 +82,8 @@ sqlc:
|
||||
$(SQLC) generate
|
||||
|
||||
# Fails on any difference from the committed generated code, including new
|
||||
# or deleted files.
|
||||
# or deleted files. A failing git status is itself a failure: its empty
|
||||
# output would otherwise read as "no drift".
|
||||
sqlc-check: sqlc
|
||||
@drift="$$(git status --porcelain --untracked-files=all -- $(SQLC_OUT))"; \
|
||||
@drift="$$(git status --porcelain --untracked-files=all -- $(SQLC_OUT))" || { echo "git status failed; cannot check internal/db for drift"; exit 1; }; \
|
||||
if [ -n "$$drift" ]; then echo "internal/db is stale; run make sqlc and commit:"; echo "$$drift"; git diff -- $(SQLC_OUT); exit 1; fi
|
||||
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
# Accessibility pass
|
||||
|
||||
A pass over every route the PWA serves (the routes in [STATES.md](STATES.md))
|
||||
for launch, on 2026-10-10. Each route was checked for:
|
||||
|
||||
- **Keyboard** — every action reachable and operable with the keyboard alone.
|
||||
- **Focus** — a visible focus ring on everything that takes focus.
|
||||
- **Names and roles** — what a screen reader announces: switches, checkboxes,
|
||||
the current nav item, dialogs and their labels.
|
||||
- **Contrast** — text at least 4.5:1 against its ground, for every token pair
|
||||
used for text.
|
||||
- **Hit targets** — every tap target at least 44 × 44 px.
|
||||
- **Reduced motion** — what `prefers-reduced-motion: reduce` turns off.
|
||||
|
||||
The pass read each screen's markup and stylesheets, computed contrast from
|
||||
[tokens.css](../web/src/styles/tokens.css), and checked the fixes' computed
|
||||
styles in Chrome. Severity: **high** blocks a task for keyboard or
|
||||
screen-reader users; **medium** fails a criterion above but leaves a way
|
||||
through; **low** is a gap outside the criteria above, or a polish item. High
|
||||
and medium findings are fixed in this pass with a regression test; low ones are
|
||||
follow-ups.
|
||||
|
||||
## Shared building blocks
|
||||
|
||||
Most of the criteria are met once, in the shared components every screen uses:
|
||||
|
||||
| Concern | Where | Behaviour |
|
||||
| --- | --- | --- |
|
||||
| Focus ring | [base.css](../web/src/styles/base.css) | `:focus-visible` draws a 2 px grape (`--color-accent`) outline 2 px out, on every focusable element. |
|
||||
| Dialogs | [Sheet](../web/src/ui/Sheet.tsx) | `role="dialog"`, `aria-modal="true"`, and a required `aria-label` or `aria-labelledby` (the type will not compile without one). Opening moves focus in, Tab is trapped, Escape and the scrim close, the page behind is `inert`, and focus returns to the opener. Every sheet is labelled by its visible title. |
|
||||
| Toggles | [Toggle](../web/src/ui/Toggle.tsx) | A `<button role="switch" aria-checked>`; Space and Enter flip it; a 44 px hit box around the 40 × 24 track. |
|
||||
| Checkboxes | [Checkbox](../web/src/ui/Checkbox.tsx) | A native `<input type="checkbox">` inside its `<label>`; the label row is the 44 px target. |
|
||||
| Segmented controls | [Segmented](../web/src/ui/Segmented.tsx) | `role="radiogroup"` of `role="radio"` buttons with a roving tab stop; arrows, Home and End move the choice. |
|
||||
| Icon buttons | [IconButton](../web/src/ui/IconButton.tsx) | A required `label` names every icon-only button; the 40 px face sits in a 44 px hit box. |
|
||||
| Primary nav | [BottomBar](../web/src/shell/BottomBar.tsx), [Rail](../web/src/shell/Rail.tsx), [Sidebar](../web/src/shell/Sidebar.tsx) | `<nav aria-label="Primary">` of `NavLink`s; the current item has `aria-current="page"`, nested routes (`/plan/shopping`, `/settings/ai`) keep their section current. The bottom bar's inactive items keep their name in a visually hidden label. |
|
||||
| Status and errors | [ErrorBanner](../web/src/ui/ErrorBanner.tsx), `role="status"` / `role="alert"` lines | Loading regions are `aria-busy` and named; errors are announced. |
|
||||
| Reduced motion | `--motion-scale` in tokens.css; `@media (prefers-reduced-motion: reduce)` in each animated component; `matchMedia` before every Web Animations call | Sheets appear without rising, skeletons stop pulsing, buttons do not scale, toggles and checkboxes do not spring, the nav pill jumps rather than slides, and the Discover deck fades a decided card out with no throw, bump, wiggle or promotion. |
|
||||
|
||||
## Routes
|
||||
|
||||
| Route | Keyboard | Focus | Names and roles | Hit targets | Reduced motion |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| App shell (every route) | Nav is links in tab order. | Global ring; **the bottom bar's ring was 1.8:1 on the dark bar — fixed (M2).** | `nav "Primary"`, `aria-current="page"`. | Bottom bar items 62 px tall, ≥ 44 px wide; rail items 56 × 44. | Pill jumps; no label fade. |
|
||||
| `/` Home | All tiles, status rows, Recipe, the bell and the Rotation check are buttons or links. | Global ring; tiles, status rows and "We didn't make it" draw a 3 px ring, inside their cards' padding. | Tonight `section`, Status list; the bell is named "Recent updates" and its sheet is labelled by its title. | Recipe pill and "We didn't make it" kept at 44 px. | — |
|
||||
| `/onboarding` (all steps) | Buttons and form fields; Add Regular submits on Enter. | Global ring. | `h1` per step; progress bar hidden; "Add Regular" and "Add *pick*" named. | Covered by onboarding tests. | — |
|
||||
| `/plan` Draft board (mobile) | **Swap without drag:** each day tile is a button that opens the swap sheet; the sheet's rows are buttons. Previous/Next week, Rebuild week, Push to Calendar are buttons. | Global ring. | Week list "Dinners this week"; swap sheet labelled "Swap *Day*"; Quest log / Regulars radio group. | Tiles ≥ 86 px tall. | Sheet appears without rising. |
|
||||
| `/plan` plan manager (tablet, desktop) | **Swap without drag:** every day has a "Swap *Day*" button opening the swap sheet. Dragging also works by keyboard: Enter or Space picks a dinner up, arrows move between days, Enter drops, Escape cancels; a polite live region narrates each step and focus lands on the day's swap button. | Global ring. | Days named by weekday; the panel is "Quest log and Regulars"; each draggable row is described by the keys hint. | **The tablet-portrait Quest log chips were 38 px tall — fixed (M4).** | — |
|
||||
| `/plan/shopping` Supply run | Native checkboxes; links to the archive. | Global ring. | Groups named by dinner; native checkbox per item; read-only weeks say "have it" in text, not by colour alone. | Checkbox rows 44 px. | — |
|
||||
| `/plan/shopping/archive` | Period radio group; posts are links. | Posts draw a 3 px ring. | Periods named by heading. | — | — |
|
||||
| `/discover` | **← Pass, → Try it** anywhere on the page (not while typing, nor with a sheet open); Pass and Try it are also buttons; the Quest log pill opens its sheet. | Global ring. | Only the top card is exposed, labelled by its name; cards behind are `aria-hidden` and `inert`; Try it / Pass labels are shown under the buttons. | Pass and Try it 62 px; Quest log pill 44 px. | Card fades out; no throw, bump, wiggle, snap-back spring or promotion. |
|
||||
| `/quick` Quick dinners | Tab radio group; add buttons; More link. | Global ring; More draws a 3 px ring. | Rows named by idea; "Added" is a status. | Covered by Quick dinners tests. | — |
|
||||
| `/cook-from-pantry` | Field adds an ingredient on Enter; chips' remove buttons; Find ideas. | The field rings as a whole (`:focus-within`). | Ingredients list "Ingredients on hand"; idea cards named. | Chip remove buttons 44 px. | — |
|
||||
| `/dinner/:id` (phone) | Buttons for Favorite, Add to week, back. | Global ring. | Favorite is `aria-pressed`; Add to week sheet labelled. | Favorite 52 px. | — |
|
||||
| `/dinner/:id` Kitchen reading mode | ← / → move steps (not while typing, nor with a sheet open); Previous and Next step buttons; text size radio group; ingredient checkboxes. | **The text-size pill clipped its focus ring — fixed (M3).** | Keep screen on is a `role="switch"`; ingredients are native checkboxes; the current step is `aria-current="step"`. | Checkboxes 44 px rows. | — |
|
||||
| `/settings` | Rows are links; on tablet, a `tablist` with arrow keys. | Global ring. | Tabs `role="tab"` / `tabpanel`. | Covered by Settings tests. | — |
|
||||
| `/settings/notifications` | Every channel is a switch; reminder time button; webhook form. | Global ring. | Each switch named "*Event*: *Channel*"; the matrix is a named group; the webhook sheet is labelled. | Toggle hit box 44 px. | — |
|
||||
| `/settings/ai` | Selects, slider, Add/Replace key. | Global ring. | Native `select`s and range input with labels; key sheet labelled. | Covered by AI settings tests. | — |
|
||||
| `/settings/household` | Selects; time zone list of buttons. | Global ring. | The chosen time zone is `aria-pressed`. | Zone options 48 px. | — |
|
||||
| `/settings/regulars` | Add, edit and favourite buttons; method selects; recipe search. | Global ring. | Favourite is `aria-pressed`; edit sheet labelled. | Covered by Regulars tests. | — |
|
||||
| `/settings/calendar` | Connect link; calendar select. | Global ring. | Reconnect problems are `role="alert"`. | — | — |
|
||||
|
||||
## Text contrast
|
||||
|
||||
WCAG AA asks 4.5:1 for normal-size text. Every colour a stylesheet gives text,
|
||||
on every ground it is drawn on:
|
||||
|
||||
| Text token | Grounds | Lowest ratio |
|
||||
| --- | --- | --- |
|
||||
| `--color-text` | bg, surface, neutral-100, neutral-200, accent-100, accent-200, accent-2-100, accent-2-200, accent-2-300 | 11.10 (on accent-2-300) |
|
||||
| `--color-neutral-700` | bg, surface, neutral-100, neutral-200, accent-100, accent-200, accent-2-100, accent-2-200 | 5.22 (on accent-200) |
|
||||
| `--color-neutral-800` | the same light grounds | 7.90 |
|
||||
| `--color-neutral-900` | the same light grounds | 11.18 |
|
||||
| `--color-accent` | the same light grounds | 7.16 |
|
||||
| `--color-accent-700` | the same light grounds | 5.76 |
|
||||
| `--color-accent-800` | the same light grounds | 8.69 |
|
||||
| `--color-accent-2-800` | the same light grounds | 7.51 |
|
||||
| `--color-accent-2-900` | the light grounds and accent-2-300 | 9.51 (on accent-2-300) |
|
||||
| `--on-accent` | accent, accent-800, neutral-800 | 8.39 (on accent) |
|
||||
| `--color-bg` | text, neutral-800 | 9.26 (on neutral-800) |
|
||||
| `--color-neutral-400` | text (the bottom bar's inactive items) | 8.28 |
|
||||
|
||||
`--color-neutral-600` (3.5:1 on surface, 4.0:1 on bg) was used for muted text
|
||||
in five places and failed — fixed (M1). [contrast.test.ts](../web/src/contrast.test.ts)
|
||||
checks every pair above from tokens.css and fails if any stylesheet gives text a
|
||||
colour token not in this table.
|
||||
|
||||
Non-text: the teal Try it button and teal "+" buttons draw a light icon on
|
||||
`--color-accent-2-600` at 3.73:1, which meets the 3:1 asked of icons; their
|
||||
names are text elsewhere (the shown label, or `aria-label`).
|
||||
|
||||
## Findings
|
||||
|
||||
### Fixed in this pass
|
||||
|
||||
| # | Severity | Route | Finding | Fix | Regression test |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| M1 | Medium | `/plan`, `/dinner/:id`, `/cook-from-pantry` | Muted text in `--color-neutral-600` at 3.5–4.0:1: the swapping day's dinner and start-by time, Regulars already this week in the swap sheet, ingredients set out and steps done in Kitchen reading mode, and the ingredient field's placeholder. | `--color-neutral-700` (≥ 5.4:1 on bg and surface); still muted against `--color-text`, and set-out ingredients keep their strike-through. | [contrast.test.ts](../web/src/contrast.test.ts); the swapping-tile and done-step colour assertions in [PlanPage.test.tsx](../web/src/plan/PlanPage.test.tsx) and [KitchenReading.test.tsx](../web/src/dinners/KitchenReading.test.tsx). |
|
||||
| M2 | Medium | Every route (phone) | The bottom bar's focus ring was the global grape ring on the near-black bar: 1.8:1, nearly invisible. | The bar's items ring in `--on-accent` (15.4:1 on the bar). | "rings a focused item in on-accent ink" in [BottomBar.test.tsx](../web/src/shell/BottomBar.test.tsx). |
|
||||
| M3 | Medium | `/dinner/:id` Kitchen reading mode | The text-size pill hides overflow, so the focus ring of the chosen size — drawn outside it — was cut off top and bottom, and in grape on the grape fill. | The ring sits 4 px inside the size, in `--on-accent` (8.4:1 on grape). Only the chosen size takes focus (roving tab stop). | "rings the focused size inside the clipped pill" in [KitchenReading.test.tsx](../web/src/dinners/KitchenReading.test.tsx). |
|
||||
| M4 | Medium | `/plan` (tablet portrait, 768–1179 px) | The Quest log strip's draggable chips were 38 px tall (28 px photo, 3 px padding, 2 px border). | The chip button keeps a 44 × 44 px minimum. | The strip test's `expectMinHitArea` in [PlanPage.test.tsx](../web/src/plan/PlanPage.test.tsx). |
|
||||
|
||||
No high findings.
|
||||
|
||||
### Follow-ups (low)
|
||||
|
||||
| # | Route | Finding | Suggested follow-up |
|
||||
| --- | --- | --- | --- |
|
||||
| L1 | Every route with a checkbox | An unchecked checkbox's `--color-neutral-400` border is 1.9:1 on bg — below the 3:1 WCAG asks of a control's boundary. Its label row still names and reveals it. | Darken the border (for example `--color-neutral-600`, 4.0:1) with the design owner. |
|
||||
| L2 | Settings, Kitchen reading mode | An off toggle's `--color-neutral-300` track is 1.4:1 on bg; the knob's position and the switch's name carry the state. | Give the off track a ≥ 3:1 edge with the design owner. |
|
||||
| L3 | `/discover` | The ← / → shortcuts are not announced to screen readers. | Add `aria-keyshortcuts` to Pass and Try it. |
|
||||
| L4 | `/discover` | Deciding the last card replaces Pass and Try it with "All caught up", and focus falls back to the page. | Move focus to "Get more now" when the deck empties. |
|
||||
| L5 | `/discover` | A decision is not announced; the next card's name appears silently. | A polite status ("Added to the Quest log" / "Passed") after each decision. |
|
||||
| L6 | `/plan` (mobile) | A day tile's name is its day and dinner ("MON Beef tacos"); it does not say it opens the swap sheet. | Add "Swap" to the tile's accessible name. |
|
||||
@@ -0,0 +1,50 @@
|
||||
# Empty, loading and error states
|
||||
|
||||
Every route the PWA serves — the handoff's routes plus the added Settings
|
||||
screens — with its empty, loading and error state. The handoff does not mock
|
||||
these states; it gives one pattern for each
|
||||
([handoff README](../design/MealQuest%20UI%20Designs/design_handoff_mealquest/README.md),
|
||||
"Empty / loading / error states"), and every screen uses the shared component
|
||||
for it:
|
||||
|
||||
| State | Component | Pattern |
|
||||
| --- | --- | --- |
|
||||
| Loading | `Skeleton` ([web/src/ui/Skeleton.tsx](../web/src/ui/Skeleton.tsx)) | Pill-shaped skeletons in `--color-surface` with a 1.2 s opacity pulse (no pulse under reduced motion). |
|
||||
| Error | `ErrorBanner` ([web/src/ui/ErrorBanner.tsx](../web/src/ui/ErrorBanner.tsx)) | `--color-neutral-100` card, grape-700 (`--color-accent-700`) text, and a **Retry** button that reads or asks again. |
|
||||
| Empty | `EmptyState` ([web/src/ui/EmptyState.tsx](../web/src/ui/EmptyState.tsx)) | Bagel title, body text and an optional primary action — the Discover deck's "All caught up / New side quests arrive Sunday." with "Get more now" is the model. |
|
||||
|
||||
[web/src/states.test.tsx](../web/src/states.test.tsx) renders the loading,
|
||||
empty and error variant of each route below against a stubbed API, asserting
|
||||
the copy and pressing Retry. Each screen's own test file covers its other
|
||||
states.
|
||||
|
||||
The loading and error rows name the screen's main read. Smaller reads on a
|
||||
screen (a Quest log count, a calendar list, a webhook card) use the same
|
||||
`Skeleton` and `ErrorBanner` in place.
|
||||
|
||||
## Handoff routes
|
||||
|
||||
| Route | Screen | Empty | Loading | Error |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `/` | Home | `EmptyState` "No quest planned tonight" with **Plan this week**; rows that do not apply are hidden. | Skeletons for the date, Tonight card and status rows. | "Couldn't load tonight's quest. …" + Retry. |
|
||||
| `/onboarding` | Onboarding — Welcome step | None: the step reads nothing; it shows the welcome and the Regulars, Side quests and Quest log terms with **Let's start**. | None: nothing to read. | None: nothing to read. |
|
||||
| `/onboarding/regulars` | Onboarding — Regulars step | "Your regulars · 0" with the Common picks to add; **Next: notifications** stays disabled until enough Regulars are saved. | Skeleton under "Your regulars". | "Your Regulars could not load: …" + Retry. |
|
||||
| `/onboarding/notifications` | Onboarding — Notifications step | None: the step reads nothing. | While finishing, **Turn on notifications** and **Maybe later** are disabled. | "Could not finish setting up: …"; the buttons come back to try again, with **Add Regulars** when fewer than three Regulars are saved. |
|
||||
| `/plan` | Weekly plan (Draft board) | `EmptyState` "Nothing planned yet" with **Draft this week**. | Seven skeleton tiles ("Plan loading"; "Drafting this week" while the AI drafts). | "Couldn't load this week's plan. …" + Retry. |
|
||||
| `/plan/shopping` | Supply run | `EmptyState` "No shopping list yet" with **Make the shopping list**; an archived week with none shows "No shopping list". A list with no ingredients shows "Nothing to buy". | Skeleton title and dinner cards. | "Couldn't load the shopping list. …" + Retry. |
|
||||
| `/plan/shopping/archive` | Supply archive | `EmptyState` "Nothing archived yet" — "Each week's Supply run becomes a post here once it's made." | Skeleton posts. | "Couldn't load the Supply archive. …" + Retry. |
|
||||
| `/discover` | Side quests deck | `EmptyState` **"All caught up"** — "New side quests arrive Sunday." with **Get more now**. | Skeleton card stack (also while a batch finds more). | "Couldn't load your side quests. …" + Retry. |
|
||||
| `/quick` | Quick dinners | No ideas found: "Couldn't find Quick dinners. No ideas came back with a recipe to match." + Retry (an `ErrorBanner`, as no idea was found to show). | Six skeleton rows while the tab's ideas are found. | "Couldn't start looking for Quick dinners. …" + Retry. |
|
||||
| `/cook-from-pantry` | Cook from what I have | Before a search: no ingredient chips and **Find ideas** disabled. No ideas found: "Couldn't find ideas. No ideas came back with a recipe to match." + Retry. | Five skeleton cards ("Ideas loading"). | "Couldn't start looking for ideas. …" + Retry. |
|
||||
| `/dinner/:id` | Dinner detail | `EmptyState` "Dinner not found" — "This dinner isn't in our kitchen — it may have been removed." | Skeleton hero, title and lines. | "Couldn't load this dinner. …" + Retry. |
|
||||
| `/settings` | Settings home | Status lines "None on rotation yet", "Not connected", "Push off · Google Chat not connected". | A skeleton per status line. | "Settings could not load: …" + Retry, which reads every failed status again. |
|
||||
| `/settings/notifications` | Notifications & Google Chat | No webhook stored: the webhook form with **Save webhook**. | Skeletons for the channel matrix and the webhook card. | "Notification settings could not load: …" + Retry ("The Google Chat webhook could not load: …" for the webhook card). A failed webhook test says "Test message not sent: …" under the form. |
|
||||
| `/settings/ai` | Admin · AI assistant | No key stored: "No key stored" with **Add key**. | Skeleton. | "AI settings could not load: …" + Retry. |
|
||||
|
||||
## Added Settings screens
|
||||
|
||||
| Route | Screen | Empty | Loading | Error |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `/settings/household` | Household | None: the household's settings always exist, seeded on first start; the screen shows the seeded values. | Skeleton. | "Household settings could not load: …" + Retry. |
|
||||
| `/settings/regulars` | Regular dinners | "On rotation · 0" — "No Regulars yet. Add the dinners your household makes on repeat." | Skeleton. | "Your Regulars could not load: …" + Retry. |
|
||||
| `/settings/calendar` | Google Calendar | "Not connected" with **Connect Google Calendar**. | Skeleton (and one for the calendar picker). | "Google Calendar status could not load: …" + Retry ("Your calendars could not load: …" + Retry for the picker). |
|
||||
@@ -0,0 +1,86 @@
|
||||
// Text contrast over the design tokens (docs/A11Y.md, "Text contrast"). Every
|
||||
// colour a stylesheet gives text must be a token listed in TEXT_GROUNDS, and
|
||||
// every pair listed there must reach WCAG AA's 4.5:1 for normal-size text.
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import tokens from './styles/tokens.css?raw'
|
||||
|
||||
const stylesheets = import.meta.glob<string>(['./**/*.css', '!./styles/tokens.css'], {
|
||||
query: '?raw',
|
||||
import: 'default',
|
||||
eager: true,
|
||||
})
|
||||
|
||||
// The grounds MealQuest's pages, cards, rows and tinted fills use.
|
||||
const LIGHT_GROUNDS = [
|
||||
'--color-bg',
|
||||
'--color-surface',
|
||||
'--color-neutral-100',
|
||||
'--color-neutral-200',
|
||||
'--color-accent-100',
|
||||
'--color-accent-200',
|
||||
'--color-accent-2-100',
|
||||
'--color-accent-2-200',
|
||||
]
|
||||
|
||||
// Each text colour token, with every ground it is drawn on.
|
||||
const TEXT_GROUNDS: Record<string, string[]> = {
|
||||
'--color-text': [...LIGHT_GROUNDS, '--color-accent-2-300'],
|
||||
'--color-neutral-700': LIGHT_GROUNDS,
|
||||
'--color-neutral-800': LIGHT_GROUNDS,
|
||||
'--color-neutral-900': LIGHT_GROUNDS,
|
||||
'--color-accent': LIGHT_GROUNDS,
|
||||
'--color-accent-700': LIGHT_GROUNDS,
|
||||
'--color-accent-800': LIGHT_GROUNDS,
|
||||
'--color-accent-2-800': LIGHT_GROUNDS,
|
||||
'--color-accent-2-900': [...LIGHT_GROUNDS, '--color-accent-2-300'],
|
||||
// Light ink on the grape fills (buttons, the active nav pill, the chosen
|
||||
// text size) and on the dark ones (the Offline pill).
|
||||
'--on-accent': ['--color-accent', '--color-accent-800', '--color-neutral-800'],
|
||||
// The dark pill button and the chosen settings tab.
|
||||
'--color-bg': ['--color-text', '--color-neutral-800'],
|
||||
// The bottom bar's inactive items, on the dark bar.
|
||||
'--color-neutral-400': ['--color-text'],
|
||||
}
|
||||
|
||||
function hex(name: string): string {
|
||||
const value = new RegExp(`^\\s*${name}:\\s*(#[0-9a-fA-F]{6})\\b`, 'm').exec(tokens)?.[1]
|
||||
if (value === undefined) throw new Error(`${name} is not a hex colour in tokens.css`)
|
||||
return value
|
||||
}
|
||||
|
||||
// Relative luminance, per WCAG 2.
|
||||
function luminance(colour: string): number {
|
||||
const [r, g, b] = [1, 3, 5].map((i) => {
|
||||
const c = Number.parseInt(colour.slice(i, i + 2), 16) / 255
|
||||
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
|
||||
})
|
||||
return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!
|
||||
}
|
||||
|
||||
function contrast(a: string, b: string): number {
|
||||
const [light, dark] = [luminance(hex(a)), luminance(hex(b))].sort((x, y) => y - x)
|
||||
return (light! + 0.05) / (dark! + 0.05)
|
||||
}
|
||||
|
||||
describe('text contrast', () => {
|
||||
const pairs = Object.entries(TEXT_GROUNDS).flatMap(([text, grounds]) => grounds.map((ground) => [text, ground] as const))
|
||||
|
||||
it.each(pairs)('%s on %s reaches 4.5:1', (text, ground) => {
|
||||
expect(contrast(text, ground)).toBeGreaterThanOrEqual(4.5)
|
||||
})
|
||||
|
||||
it('gives text only the colour tokens checked above', () => {
|
||||
expect(Object.keys(stylesheets).length).toBeGreaterThan(0)
|
||||
const unchecked = Object.entries(stylesheets).flatMap(([path, css]) =>
|
||||
Array.from(css.matchAll(/(?<![\w-])color:\s*([^;}]+)/g))
|
||||
.map((match) => match[1]!.trim())
|
||||
.filter((value) => value !== 'inherit')
|
||||
.filter((value) => {
|
||||
const token = /^var\((--[\w-]+)\)$/.exec(value)?.[1]
|
||||
return token === undefined || !(token in TEXT_GROUNDS)
|
||||
})
|
||||
.map((value) => `${path}: color: ${value}`),
|
||||
)
|
||||
expect(unchecked).toEqual([])
|
||||
})
|
||||
})
|
||||
@@ -341,6 +341,13 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* The pill clips anything outside it, so the focus ring sits inside the
|
||||
size, drawn in on-accent ink: only the chosen size takes focus. */
|
||||
.readingHeader .textSize > :focus-visible {
|
||||
outline-color: var(--on-accent);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.readingHeader .textSize > :nth-child(1) {
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -433,7 +440,7 @@
|
||||
}
|
||||
|
||||
.setOut {
|
||||
color: var(--color-neutral-600);
|
||||
color: var(--color-neutral-700);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@@ -515,7 +522,7 @@
|
||||
}
|
||||
|
||||
.stepDone {
|
||||
color: var(--color-neutral-600);
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.stepCurrent {
|
||||
|
||||
@@ -325,7 +325,7 @@ describe('Kitchen reading mode', () => {
|
||||
// The step done is muted, its number a check.
|
||||
expect(steps()[0]!.textContent).toBe('Rinse the rice and start it cooking.')
|
||||
expect(steps()[0]!.querySelector('svg')).not.toBeNull()
|
||||
expect(declaredStyle(steps()[0]!).color).toBe('var(--color-neutral-600)')
|
||||
expect(declaredStyle(steps()[0]!).color).toBe('var(--color-neutral-700)')
|
||||
expect(declaredStyle(steps()[0]!).fontSize).toBe('calc(18px * var(--reading-scale))')
|
||||
|
||||
fireEvent.click(next)
|
||||
@@ -381,6 +381,21 @@ describe('Kitchen reading mode', () => {
|
||||
})
|
||||
|
||||
describe('text size', () => {
|
||||
it('rings the focused size inside the clipped pill, in on-accent ink on the grape', async () => {
|
||||
serve()
|
||||
await renderPage()
|
||||
const medium = screen.getByRole('radio', { name: 'Medium text' })
|
||||
// A key press makes the next focus a keyboard one, which
|
||||
// :focus-visible matches.
|
||||
fireEvent.keyDown(document.body, { key: 'Tab' })
|
||||
medium.focus()
|
||||
expect(medium.matches(':focus-visible')).toBe(true)
|
||||
// The pill hides overflow, so a ring outside the size would be cut off.
|
||||
expect(declaredStyle(medium).getPropertyValue('outline-offset')).toBe('-4px')
|
||||
expect(declaredStyle(medium).getPropertyValue('outline-color')).toBe('var(--on-accent)')
|
||||
expect(declaredStyle(medium).background).toBe('var(--color-accent)')
|
||||
})
|
||||
|
||||
it('is remembered on this device', async () => {
|
||||
serve()
|
||||
const view = await renderPage()
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--color-neutral-600);
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.notice {
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
|
||||
.swapping .dinner,
|
||||
.swapping .startBy {
|
||||
color: var(--color-neutral-600);
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.rebuildCell {
|
||||
@@ -410,6 +410,12 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* An upright tablet's week: four days over three, every column wide enough
|
||||
that nothing scrolls sideways. */
|
||||
.portraitPage .week {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.column {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
|
||||
@@ -8,6 +8,7 @@ import { SupplyRunPage } from '../shopping/SupplyRunPage.tsx'
|
||||
import { cacheFallbackHeader } from '../sw/routes.ts'
|
||||
import { HOUSEHOLD_SETTINGS } from '../test/ApiProviders.tsx'
|
||||
import { declaredStyle } from '../test/cssRules.ts'
|
||||
import { expectMinHitArea } from '../test/hitArea.ts'
|
||||
import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
|
||||
import { mockViewport } from '../test/matchMedia.ts'
|
||||
import { ago, cooking, duration, PlanPage } from './PlanPage.tsx'
|
||||
@@ -1222,7 +1223,7 @@ describe('PlanPage', () => {
|
||||
expect(declaredStyle(friday).background).toBe('var(--color-bg)')
|
||||
expect(declaredStyle(friday).boxShadow).toBe('inset 0 0 0 2px var(--color-accent)')
|
||||
expect(declaredStyle(within(friday).getByText('FRI · SWAPPING…')).color).toBe('var(--color-accent-700)')
|
||||
expect(declaredStyle(within(friday).getByText('Pizza night')).color).toBe('var(--color-neutral-600)')
|
||||
expect(declaredStyle(within(friday).getByText('Pizza night')).color).toBe('var(--color-neutral-700)')
|
||||
|
||||
// "Quest log · N | Regulars · N", on the Quest log first.
|
||||
expect(await within(sheet).findByRole('radio', { name: 'Quest log · 1', checked: true })).toBeInTheDocument()
|
||||
@@ -1644,6 +1645,9 @@ describe.each([
|
||||
const chip = within(within(strip).getByRole('list', { name: 'Quest log dinners' })).getByRole('listitem')
|
||||
expect(chip).toHaveTextContent('Lemon orzo')
|
||||
expect(declaredStyle(within(chip).getByRole('img', { hidden: true, name: 'Lemon orzo' })).width).toBe('28px')
|
||||
// The 28 px photo makes a 38 px chip; the chip is a button, so it
|
||||
// keeps the 44 px tap minimum.
|
||||
expectMinHitArea(within(chip).getByRole('button', { name: /Lemon orzo/ }))
|
||||
// The strip follows the grid.
|
||||
const grid = await screen.findByRole('list', { name: 'Dinners this week' })
|
||||
expect(grid.compareDocumentPosition(strip) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Confirm } from '../settings/LeaveGuard.tsx'
|
||||
import { methodLabels } from '../settings/RegularsSettingsPage.tsx'
|
||||
import { formatClockTime, useHouseholdSettings } from '../settings/api.ts'
|
||||
import { supplyRunScreen, useGenerateSupplyRun, useSupplyRun, WEEK_PARAM } from '../shopping/api.ts'
|
||||
import { useBreakpoint, type Breakpoint } from '../shell/useBreakpoint.ts'
|
||||
import { useBreakpoint, useOrientation, type Breakpoint } from '../shell/useBreakpoint.ts'
|
||||
import { Button } from '../ui/Button.tsx'
|
||||
import buttonStyles from '../ui/Button.module.css'
|
||||
import { EmptyState } from '../ui/EmptyState.tsx'
|
||||
@@ -673,8 +673,10 @@ function PushFailure({ error, cached, onRetry }: { error: Error; cached: boolean
|
||||
// week; the week buttons keep ?week= on the week shown. The board keeps its place in the tree across layouts, so crossing a
|
||||
// breakpoint keeps a draft being followed. From tablet up a dinner is
|
||||
// dragged from the strip or the panel onto a day of the grid to swap it in.
|
||||
// An upright tablet lays the week out four days over three.
|
||||
export function PlanPage() {
|
||||
const layout = useBreakpoint()
|
||||
const orientation = useOrientation()
|
||||
const settings = useHouseholdSettings()
|
||||
const [params, setParams] = useSearchParams()
|
||||
const chosen = params.get(WEEK_PARAM)
|
||||
@@ -699,7 +701,11 @@ export function PlanPage() {
|
||||
}
|
||||
return (
|
||||
<PlanDragProvider>
|
||||
<div className={`${styles.page} ${styles[`${layout}Page`]}`}>
|
||||
<div
|
||||
className={[styles.page, styles[`${layout}Page`], layout === 'tablet' && orientation === 'portrait' && styles.portraitPage]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
<div className={styles.board}>
|
||||
{content}
|
||||
{layout === 'tablet' && <QuestLogStrip />}
|
||||
|
||||
@@ -190,7 +190,12 @@
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* The 28 px photo makes a 38 px chip; the chip is a button, so it keeps the
|
||||
44 px tap minimum. */
|
||||
.chip.draggable {
|
||||
box-sizing: border-box;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 3px 12px 3px 3px;
|
||||
}
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
/* A dinner already this week: shown, muted, and not a button. */
|
||||
.already {
|
||||
color: var(--color-neutral-600);
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.skeletonRow {
|
||||
|
||||
@@ -80,7 +80,10 @@ export function RegularsSettingsPage() {
|
||||
// Which sheet is open, for which Regular.
|
||||
type Open = { sheet: 'edit' | 'fix'; id: string } | null
|
||||
|
||||
function RegularsManager() {
|
||||
// RegularsManager lists, adds, edits and fixes the recipes of the
|
||||
// household's Regulars: this page's body, and the Settings "Regular
|
||||
// dinners" sub-tab at tablet and desktop widths.
|
||||
export function RegularsManager() {
|
||||
const regulars = useRegulars()
|
||||
const add = useAddRegular()
|
||||
const remove = useRemoveRegular()
|
||||
|
||||
@@ -104,7 +104,10 @@ describe('SettingsPage', () => {
|
||||
expect(await screen.findByText('America/New_York · Dinner at 5:30 pm')).toBeInTheDocument()
|
||||
expect(within(row('AI assistant')).getByText('Anthropic · Claude Sonnet')).toBeInTheDocument()
|
||||
expect(within(row('Household')).getByText('America/New_York · Dinner at 5:30 pm')).toBeInTheDocument()
|
||||
// The rotation count and the hidden Regular dinners sub-tab both read
|
||||
// the Regulars.
|
||||
expect(fetchMock.mock.calls.map(([input]) => String(input)).sort()).toEqual([
|
||||
REGULARS_PATH,
|
||||
REGULARS_PATH,
|
||||
CALENDAR_PATH,
|
||||
'/api/v1/settings/ai',
|
||||
@@ -117,7 +120,7 @@ describe('SettingsPage', () => {
|
||||
})
|
||||
|
||||
it('shows the not-yet-available states while the server has no endpoint for them', async () => {
|
||||
stubSettings()
|
||||
stubSettings({ [REGULARS_PATH]: () => errorResponse(404, 'not_found') })
|
||||
renderSettings()
|
||||
expect(await within(row('Regular dinners')).findByText('Rotation count unavailable')).toBeInTheDocument()
|
||||
expect(
|
||||
|
||||
@@ -83,6 +83,12 @@
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* An upright tablet stacks the columns: Notifications above the AI
|
||||
assistant and Recipe search. */
|
||||
.portrait .columns {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.column {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -95,24 +101,3 @@
|
||||
padding: 24px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
margin: 0;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
@@ -11,9 +11,11 @@ import {
|
||||
HOUSEHOLD_SETTINGS,
|
||||
NOTIFICATION_SETTINGS,
|
||||
RECIPE_SEARCH_SETTINGS,
|
||||
SETTINGS_REGULARS,
|
||||
} from '../test/ApiProviders.tsx'
|
||||
import { InDataRouter } from '../test/dataRouter.tsx'
|
||||
import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
|
||||
import { dinnerBody, type DinnerBody } from '../test/dinners.ts'
|
||||
import { fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
|
||||
import { expectMinHitArea } from '../test/hitArea.ts'
|
||||
import { mockViewport } from '../test/matchMedia.ts'
|
||||
import { SettingsPage } from './SettingsPage.tsx'
|
||||
@@ -32,6 +34,7 @@ function stubAPI(responders: Record<string, Responder> = {}): Mock<typeof fetch>
|
||||
'GET /api/v1/settings/recipe-search': () => jsonResponse(200, RECIPE_SEARCH_SETTINGS),
|
||||
'GET /api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
|
||||
'GET /api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK),
|
||||
'GET /api/v1/dinners?status=regular': () => jsonResponse(200, SETTINGS_REGULARS),
|
||||
...responders,
|
||||
}
|
||||
const fetchMock = vi.fn<typeof fetch>((input, init) => {
|
||||
@@ -121,7 +124,7 @@ describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
|
||||
expect(tab('Regular dinners')).toHaveAttribute('aria-selected', 'true')
|
||||
expect(tab('Regular dinners')).toHaveFocus()
|
||||
expect(panel('Regular dinners')).toBeVisible()
|
||||
expect(within(panel('Regular dinners')).getByRole('region', { name: 'Regular dinners' })).toBeInTheDocument()
|
||||
expect(await within(panel('Regular dinners')).findByRole('heading', { name: 'On rotation · 1' })).toBeInTheDocument()
|
||||
expect(panel('Household')).not.toBeVisible()
|
||||
|
||||
fireEvent.keyDown(tab('Regular dinners'), { key: 'End' })
|
||||
@@ -165,6 +168,123 @@ describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
|
||||
})
|
||||
})
|
||||
|
||||
const TACOS = dinnerBody('d1', 'Beef tacos', { method: 'stovetop', minutes_total: 40, difficulty: 'easy' })
|
||||
const PIZZA = dinnerBody('d3', 'Pizza night', { grounding_status: 'failed', grounding_error: 'no_recipe_found' })
|
||||
|
||||
// stubRegulars answers the Regulars from server.regulars, so a write's
|
||||
// responder changes what the next read sees.
|
||||
function stubRegulars(regulars: DinnerBody[], responders: (server: { regulars: DinnerBody[] }) => Record<string, Responder>) {
|
||||
const server = { regulars }
|
||||
const fetchMock = stubAPI({
|
||||
'GET /api/v1/dinners?status=regular': () => jsonResponse(200, { dinners: server.regulars }),
|
||||
...responders(server),
|
||||
})
|
||||
return { server, fetchMock }
|
||||
}
|
||||
|
||||
// writes lists the requests other than GETs, as method, path and body.
|
||||
function writes(fetchMock: Mock<typeof fetch>) {
|
||||
return fetchMock.mock.calls
|
||||
.filter(([, init]) => (init?.method ?? 'GET') !== 'GET')
|
||||
.map(([input, init]) => [init?.method, String(input), init?.body])
|
||||
}
|
||||
|
||||
// openRegulars shows the Regular dinners tab once its Regulars have loaded.
|
||||
async function openRegulars() {
|
||||
fireEvent.click(tab('Regular dinners'))
|
||||
const regulars = within(panel('Regular dinners'))
|
||||
await regulars.findByRole('heading', { level: 2, name: /^On rotation/ })
|
||||
return regulars
|
||||
}
|
||||
|
||||
function regularRow(name: string) {
|
||||
const item = within(screen.getByRole('list', { name: 'Regulars' }))
|
||||
.getAllByRole('listitem')
|
||||
.find((li) => within(li).queryByText(name) !== null)
|
||||
if (item === undefined) throw new Error(`no Regular row named ${name}`)
|
||||
return within(item)
|
||||
}
|
||||
|
||||
describe.each([1440, 1180])('SettingsPage Regular dinners tab at %i px (mock 2e)', (width) => {
|
||||
it('lists the Regulars as /settings/regulars does, under the page title rather than its own', async () => {
|
||||
stubRegulars([TACOS, PIZZA], () => ({}))
|
||||
await renderAt(width)
|
||||
const regulars = await openRegulars()
|
||||
expect(regulars.getByRole('heading', { level: 2, name: 'On rotation · 2' })).toBeInTheDocument()
|
||||
expect(regularRow('Beef tacos').getByText('Stovetop · 40 min')).toBeInTheDocument()
|
||||
expect(regularRow('Beef tacos').getByText('Recipe found')).toBeInTheDocument()
|
||||
expect(regularRow('Pizza night').getByText('Needs a recipe')).toBeInTheDocument()
|
||||
expect(regulars.getByRole('textbox', { name: 'Add a Regular' })).toBeInTheDocument()
|
||||
expect(screen.getAllByRole('heading', { level: 1 }).map((h) => h.textContent)).toEqual(['Settings'])
|
||||
expect(regulars.queryByRole('button', { name: 'Back to Settings' })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('adds a Regular by name', async () => {
|
||||
const { fetchMock } = stubRegulars([TACOS], (server) => ({
|
||||
'POST /api/v1/dinners': (body) => {
|
||||
const created = dinnerBody('d9', (body as { name: string }).name, { grounding_status: 'pending' })
|
||||
server.regulars = [...server.regulars, created]
|
||||
return jsonResponse(201, { ...created, grounding_job_id: 'job-1' })
|
||||
},
|
||||
}))
|
||||
await renderAt(width)
|
||||
const regulars = await openRegulars()
|
||||
fireEvent.change(regulars.getByRole('textbox', { name: 'Add a Regular' }), { target: { value: 'Chicken enchiladas' } })
|
||||
fireEvent.click(regulars.getByRole('button', { name: 'Add Regular' }))
|
||||
|
||||
expect(await regulars.findByRole('heading', { level: 2, name: 'On rotation · 2' })).toBeInTheDocument()
|
||||
expect(regularRow('Chicken enchiladas').getByText('Finding recipe…')).toBeInTheDocument()
|
||||
expect(writes(fetchMock)).toEqual([['POST', '/api/v1/dinners', JSON.stringify({ name: 'Chicken enchiladas' })]])
|
||||
})
|
||||
|
||||
it('edits a Regular in its sheet', async () => {
|
||||
const { fetchMock } = stubRegulars([TACOS], (server) => ({
|
||||
'PATCH /api/v1/dinners/d1': (body) => {
|
||||
const edited = { ...TACOS, ...(body as object) }
|
||||
server.regulars = [edited]
|
||||
return jsonResponse(200, edited)
|
||||
},
|
||||
}))
|
||||
await renderAt(width)
|
||||
await openRegulars()
|
||||
fireEvent.click(regularRow('Beef tacos').getByRole('button', { name: /^Beef tacos/ }))
|
||||
const sheet = within(screen.getByRole('dialog', { name: 'Edit Beef tacos' }))
|
||||
fireEvent.change(sheet.getByLabelText('Minutes'), { target: { value: '25' } })
|
||||
fireEvent.click(sheet.getByRole('button', { name: 'Save changes' }))
|
||||
|
||||
await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
|
||||
expect(writes(fetchMock)).toEqual([['PATCH', '/api/v1/dinners/d1', JSON.stringify({ minutes_total: 25 })]])
|
||||
expect(await regularRow('Beef tacos').findByText('Stovetop · 25 min')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('fixes the recipe of a Regular that needs one', async () => {
|
||||
const { fetchMock } = stubRegulars([PIZZA], (server) => ({
|
||||
'GET /api/v1/dinners/d3/recipe-candidates': () =>
|
||||
jsonResponse(200, {
|
||||
candidates: [
|
||||
{ candidate_id: 'https://example.com/pizza', title: 'Weeknight pizza', site_name: 'Example Kitchen', photo_url: null, minutes: 45 },
|
||||
],
|
||||
}),
|
||||
'POST /api/v1/dinners/d3/ground': () => {
|
||||
const fixed = { ...PIZZA, grounding_status: 'grounded', grounding_error: null }
|
||||
server.regulars = [fixed]
|
||||
return jsonResponse(200, fixed)
|
||||
},
|
||||
}))
|
||||
await renderAt(width)
|
||||
await openRegulars()
|
||||
fireEvent.click(regularRow('Pizza night').getByRole('button', { name: /^Pizza night/ }))
|
||||
const sheet = within(screen.getByRole('dialog', { name: 'Fix recipe' }))
|
||||
fireEvent.click(await sheet.findByRole('button', { name: 'Use Weeknight pizza from Example Kitchen' }))
|
||||
|
||||
await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
|
||||
expect(writes(fetchMock)).toEqual([
|
||||
['POST', '/api/v1/dinners/d3/ground', JSON.stringify({ candidate_id: 'https://example.com/pizza' })],
|
||||
])
|
||||
expect(await regularRow('Pizza night').findByText('Recipe found')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('SettingsPage reminder time across tabs', () => {
|
||||
it('shows a reminder time saved on Notifications in the Household tab, keeping its draft', async () => {
|
||||
const saved = { ...HOUSEHOLD_SETTINGS }
|
||||
@@ -195,10 +315,7 @@ describe('SettingsPage reminder time across tabs', () => {
|
||||
|
||||
describe('SettingsPage across the 768 px breakpoint', () => {
|
||||
it('shows the mobile list below 768 px and the sub-tabs from 768 px', async () => {
|
||||
stubAPI({
|
||||
'GET /api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
|
||||
'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
|
||||
})
|
||||
stubAPI({ 'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED) })
|
||||
const resize = await renderAt(767)
|
||||
expect(screen.getByRole('link', { name: /^AI assistant/ })).toHaveAttribute('href', '/settings/ai')
|
||||
expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
|
||||
@@ -209,10 +326,7 @@ describe('SettingsPage across the 768 px breakpoint', () => {
|
||||
})
|
||||
|
||||
it('keeps an unsaved draft and its leave guard across 1180 px, 390 px and back', async () => {
|
||||
stubAPI({
|
||||
'GET /api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
|
||||
'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
|
||||
})
|
||||
stubAPI({ 'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED) })
|
||||
const resize = await renderAt(1180)
|
||||
fireEvent.change(await screen.findByRole('textbox', { name: 'System prompt' }), {
|
||||
target: { value: 'A draft' },
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
|
||||
import { Card } from '../ui/Card.tsx'
|
||||
import { useBreakpoint, useOrientation } from '../shell/useBreakpoint.ts'
|
||||
import { AIAssistantCard } from './AISettingsPage.tsx'
|
||||
import { HouseholdSettingsSections } from './HouseholdSettingsPage.tsx'
|
||||
import { LeaveGuard } from './LeaveGuard.tsx'
|
||||
import { ChatWebhookCard, NotificationsCard } from './NotificationsPage.tsx'
|
||||
import { RecipeSearchCard } from './RecipeSearchCard.tsx'
|
||||
import { RegularsManager } from './RegularsSettingsPage.tsx'
|
||||
import styles from './SettingsTabs.module.css'
|
||||
|
||||
type Tab = 'household' | 'regulars' | 'notifications-ai'
|
||||
@@ -21,7 +22,10 @@ const step: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 }
|
||||
// sub-tabs instead of the mobile list. Every tab stays mounted while hidden,
|
||||
// so a draft survives switching tabs, and one leave guard covers them all.
|
||||
// hidden hides the page but keeps it mounted, drafts and leave guard included.
|
||||
// On an upright tablet the two columns stack into one.
|
||||
export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
|
||||
const layout = useBreakpoint()
|
||||
const orientation = useOrientation()
|
||||
const [tab, setTab] = useState<Tab>('notifications-ai')
|
||||
const [householdDirty, setHouseholdDirty] = useState(false)
|
||||
const [aiDirty, setAIDirty] = useState(false)
|
||||
@@ -64,7 +68,10 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.page} hidden={hidden}>
|
||||
<div
|
||||
className={[styles.page, layout === 'tablet' && orientation === 'portrait' && styles.portrait].filter(Boolean).join(' ')}
|
||||
hidden={hidden}
|
||||
>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.heading}>
|
||||
<h1 className={styles.title}>Settings</h1>
|
||||
@@ -94,13 +101,7 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
|
||||
|
||||
{panel('household', styles.single, <HouseholdSettingsSections onDirtyChange={setHouseholdDirty} />)}
|
||||
|
||||
{panel(
|
||||
'regulars',
|
||||
styles.single,
|
||||
// TODO(Feature 12): embed the Regular dinners screen here once Feature
|
||||
// 12 builds it.
|
||||
<Placeholder title="Regular dinners">Managing the household's Regulars arrives in a later update.</Placeholder>,
|
||||
)}
|
||||
{panel('regulars', styles.single, <RegularsManager />)}
|
||||
|
||||
{panel(
|
||||
'notifications-ai',
|
||||
@@ -121,17 +122,3 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Placeholder is a neutral card holding a section's place until the feature
|
||||
// that owns it renders it.
|
||||
function Placeholder({ title, children }: { title: string; children: ReactNode }) {
|
||||
const titleId = useId()
|
||||
return (
|
||||
<Card className={styles.placeholder} aria-labelledby={titleId} role="region">
|
||||
<h2 id={titleId} className={styles.cardTitle}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className={styles.hint}>{children}</p>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -22,3 +22,9 @@
|
||||
.desktop .main {
|
||||
padding: 32px 36px;
|
||||
}
|
||||
|
||||
/* An upright tablet (820 px wide) leaves 724 px beside the rail; slimmer side
|
||||
padding gives the page a little more of it. */
|
||||
.tablet.portrait .main {
|
||||
padding: 32px 28px;
|
||||
}
|
||||
|
||||
@@ -2,15 +2,17 @@ import { Outlet } from 'react-router'
|
||||
import { BottomBar } from './BottomBar.tsx'
|
||||
import { Rail } from './Rail.tsx'
|
||||
import { Sidebar } from './Sidebar.tsx'
|
||||
import { useBreakpoint } from './useBreakpoint.ts'
|
||||
import { useBreakpoint, useOrientation } from './useBreakpoint.ts'
|
||||
import styles from './AppShell.module.css'
|
||||
|
||||
// The responsive frame around every page: one nav layout per breakpoint and a
|
||||
// scrolling main area for the routed page.
|
||||
// scrolling main area for the routed page. A portrait viewport is marked so
|
||||
// the narrower upright tablet keeps its content clear of the rail.
|
||||
export function AppShell() {
|
||||
const breakpoint = useBreakpoint()
|
||||
const orientation = useOrientation()
|
||||
return (
|
||||
<div className={`${styles.shell} ${styles[breakpoint]}`}>
|
||||
<div className={[styles.shell, styles[breakpoint], orientation === 'portrait' && styles.portrait].filter(Boolean).join(' ')}>
|
||||
{breakpoint === 'mobile' && <BottomBar />}
|
||||
{breakpoint === 'tablet' && <Rail />}
|
||||
{breakpoint === 'desktop' && <Sidebar />}
|
||||
|
||||
@@ -48,6 +48,12 @@
|
||||
color: var(--on-accent);
|
||||
}
|
||||
|
||||
/* The app-wide grape focus ring barely shows on the dark bar (1.8:1); the
|
||||
bar's ring is the light on-accent ink instead. */
|
||||
.item:focus-visible {
|
||||
outline-color: var(--on-accent);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: var(--font-body);
|
||||
font-size: 13px;
|
||||
|
||||
@@ -182,6 +182,18 @@ describe('BottomBar', () => {
|
||||
])
|
||||
})
|
||||
|
||||
it('rings a focused item in on-accent ink, which shows on the dark bar', async () => {
|
||||
await renderAt('/')
|
||||
const item = link('Plan')
|
||||
// A key press makes the next focus a keyboard one, which :focus-visible
|
||||
// matches; earlier tests' clicks would leave it a pointer one.
|
||||
fireEvent.keyDown(document.body, { key: 'Tab' })
|
||||
item.focus()
|
||||
expect(item).toHaveFocus()
|
||||
expect(item.matches(':focus-visible')).toBe(true)
|
||||
expect(declaredStyle(item).getPropertyValue('outline-color')).toBe('var(--on-accent)')
|
||||
})
|
||||
|
||||
it('does not animate when the active item stays the same', async () => {
|
||||
await renderAt('/plan')
|
||||
fireEvent.click(link('Plan'))
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { AppRoutes } from '../App.tsx'
|
||||
import planStyles from '../plan/PlanPage.module.css'
|
||||
import settingsTabsStyles from '../settings/SettingsTabs.module.css'
|
||||
import {
|
||||
AI_MODELS,
|
||||
AI_SETTINGS,
|
||||
CHAT_WEBHOOK_NONE,
|
||||
GOOGLE_NOT_CONNECTED,
|
||||
HOME,
|
||||
HOUSEHOLD_SETTINGS,
|
||||
NOTIFICATION_SETTINGS,
|
||||
RECIPE_SEARCH_SETTINGS,
|
||||
ApiProviders,
|
||||
} from '../test/ApiProviders.tsx'
|
||||
import { declaredStyle } from '../test/cssRules.ts'
|
||||
import { InDataRouter } from '../test/dataRouter.tsx'
|
||||
import { dinnerBody } from '../test/dinners.ts'
|
||||
import { jsonResponse, ME } from '../test/fetchStub.ts'
|
||||
import { mockViewport } from '../test/matchMedia.ts'
|
||||
import shellStyles from './AppShell.module.css'
|
||||
import railStyles from './Rail.module.css'
|
||||
|
||||
// Every primary route on a tablet held upright (820 × 1180) and on its side
|
||||
// (1180 × 820): both have the 96 px rail and the tablet layout; upright, the
|
||||
// shell is marked portrait, the Plan week reflows four days over three, and
|
||||
// Settings' two columns stack into one.
|
||||
|
||||
const PORTRAIT = { width: 820, height: 1180 }
|
||||
const LANDSCAPE = { width: 1180, height: 820 }
|
||||
|
||||
const DAYS = ['2026-10-05', '2026-10-06', '2026-10-07', '2026-10-08', '2026-10-09', '2026-10-10', '2026-10-11']
|
||||
|
||||
const PLAN = {
|
||||
id: 'plan-1',
|
||||
week_start: '2026-10-05',
|
||||
week_label: 'Week 41 · Oct 5 – 11',
|
||||
status: 'draft',
|
||||
ai_note: null,
|
||||
calendar_synced_at: null,
|
||||
days: DAYS.map((date, i) => ({
|
||||
date,
|
||||
dinner: { id: `d${i}`, name: `Dinner ${i}`, photo: null, minutes: 30, method: 'stovetop', origin: 'regular' },
|
||||
is_new: false,
|
||||
start_by: null,
|
||||
})),
|
||||
updated_at: '2026-10-04T15:00:00Z',
|
||||
}
|
||||
|
||||
const SUPPLY_RUN = {
|
||||
weekStart: '2026-10-05',
|
||||
label: 'Week 41 · Oct 5 – 11',
|
||||
title: null,
|
||||
status: 'current',
|
||||
sent_to_chat_at: null,
|
||||
chat_send_unconfirmed_at: null,
|
||||
needed_count: 1,
|
||||
total_count: 1,
|
||||
groups: [
|
||||
{
|
||||
dinner: { id: 'd0', name: 'Dinner 0' },
|
||||
date: '2026-10-05',
|
||||
day: 'Monday',
|
||||
items: [{ id: 'i1', name: 'Ground beef', qty: '1 lb', needed: true }],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const DETAIL = {
|
||||
id: 'd1',
|
||||
name: 'Korean beef bowls',
|
||||
status: 'regular',
|
||||
origin: 'regular',
|
||||
method: 'stovetop',
|
||||
minutes_total: 30,
|
||||
difficulty: 'easy',
|
||||
cuisine: 'korean',
|
||||
is_favorite: false,
|
||||
photo_urls: null,
|
||||
ingredients: [{ name: 'Ground beef', qty: '1', unit: 'lb', note: null, raw_text: '1 lb ground beef' }],
|
||||
steps: ['Brown the beef.'],
|
||||
source: null,
|
||||
grounding_status: 'manual',
|
||||
grounding_error: null,
|
||||
why_picked: null,
|
||||
}
|
||||
|
||||
// The API every route reads, answered as a settled household's server would.
|
||||
// Any other request stays pending, so a route that reads more just shows its
|
||||
// loading state.
|
||||
const API: Record<string, unknown> = {
|
||||
'/api/v1/me': ME,
|
||||
'/api/v1/home': HOME,
|
||||
'/api/v1/rotation-reviews': { reviews: [] },
|
||||
'/api/v1/settings/household': HOUSEHOLD_SETTINGS,
|
||||
'/api/v1/settings/ai': AI_SETTINGS,
|
||||
'/api/v1/settings/ai/models': AI_MODELS,
|
||||
'/api/v1/settings/recipe-search': RECIPE_SEARCH_SETTINGS,
|
||||
'/api/v1/settings/notifications': NOTIFICATION_SETTINGS,
|
||||
'/api/v1/settings/chat-webhook': CHAT_WEBHOOK_NONE,
|
||||
'/api/v1/integrations/google': GOOGLE_NOT_CONNECTED,
|
||||
'/api/v1/plans/2026-10-05': PLAN,
|
||||
'/api/v1/shopping/2026-10-05': SUPPLY_RUN,
|
||||
'/api/v1/shopping/archive?by=week': { by: 'week', periods: [] },
|
||||
'/api/v1/suggestions/deck': { suggestions: [], active_batch: null, failed_batch: null },
|
||||
'/api/v1/dinners?status=regular': { dinners: [dinnerBody('r1', 'Beef tacos')] },
|
||||
'/api/v1/dinners?status=quest_log': { dinners: [] },
|
||||
'/api/v1/dinners/d1': DETAIL,
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers({ toFake: ['Date'] })
|
||||
vi.setSystemTime(new Date('2026-10-07T16:00:00Z'))
|
||||
const path = (input: Parameters<typeof fetch>[0]) => new URL(String(input), 'https://mealquest.test')
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn<typeof fetch>((input) => {
|
||||
const url = path(input)
|
||||
const key = `${url.pathname}${url.search}`
|
||||
if (!Object.hasOwn(API, key)) return new Promise<Response>(() => {})
|
||||
return Promise.resolve(jsonResponse(200, API[key]))
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
Reflect.deleteProperty(window, 'matchMedia')
|
||||
vi.useRealTimers()
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
async function renderAt(path: string, { width, height }: { width: number; height: number }) {
|
||||
mockViewport(width, { height })
|
||||
render(
|
||||
<InDataRouter path={path}>
|
||||
<ApiProviders>
|
||||
<AppRoutes />
|
||||
</ApiProviders>
|
||||
</InDataRouter>,
|
||||
)
|
||||
// The routes wait for the household settings (OnboardingGate).
|
||||
await screen.findByRole('navigation', { name: 'Primary' })
|
||||
}
|
||||
|
||||
function shell() {
|
||||
return screen.getByRole('main').parentElement!
|
||||
}
|
||||
|
||||
const ROUTES: [string, string][] = [
|
||||
['Home', '/'],
|
||||
['Plan', '/plan?week=2026-10-05'],
|
||||
['Supply run', '/plan/shopping'],
|
||||
['Supply archive', '/plan/shopping/archive'],
|
||||
['Discover', '/discover'],
|
||||
['Quick dinners', '/quick'],
|
||||
['Cook from what I have', '/cook-from-pantry'],
|
||||
['Dinner detail (Kitchen reading mode)', '/dinner/d1'],
|
||||
['Settings', '/settings'],
|
||||
['Notifications', '/settings/notifications'],
|
||||
['AI assistant', '/settings/ai'],
|
||||
['Household', '/settings/household'],
|
||||
['Regulars', '/settings/regulars'],
|
||||
['Calendar', '/settings/calendar'],
|
||||
]
|
||||
|
||||
describe.each([
|
||||
['portrait', PORTRAIT],
|
||||
['landscape', LANDSCAPE],
|
||||
])('tablet %s', (orientation, viewport) => {
|
||||
const portrait = orientation === 'portrait'
|
||||
|
||||
it.each(ROUTES)(`renders %s with the 96 px rail in the tablet ${orientation} layout`, async (_name, path) => {
|
||||
await renderAt(path, viewport)
|
||||
expect(screen.getAllByRole('navigation')).toHaveLength(1)
|
||||
expect(screen.getByRole('navigation', { name: 'Primary' })).toHaveClass(railStyles.rail!)
|
||||
expect(declaredStyle(screen.getByRole('navigation', { name: 'Primary' })).width).toBe('96px')
|
||||
expect(shell()).toHaveClass(shellStyles.tablet!)
|
||||
if (portrait) expect(shell()).toHaveClass(shellStyles.portrait!)
|
||||
else expect(shell()).not.toHaveClass(shellStyles.portrait!)
|
||||
expect(await screen.findByRole('heading', { level: 1 })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it(`lays the Plan week out ${portrait ? 'four days over three' : 'in seven columns'}`, async () => {
|
||||
await renderAt('/plan?week=2026-10-05', viewport)
|
||||
const week = await screen.findByRole('list', { name: 'Dinners this week' })
|
||||
const page = week.closest(`.${planStyles.tabletPage}`)
|
||||
expect(page).not.toBeNull()
|
||||
if (portrait) expect(page).toHaveClass(planStyles.portraitPage!)
|
||||
else expect(page).not.toHaveClass(planStyles.portraitPage!)
|
||||
expect(declaredStyle(week).gridTemplateColumns).toBe(
|
||||
portrait ? 'repeat(4, minmax(0, 1fr))' : 'repeat(7, minmax(112px, 1fr))',
|
||||
)
|
||||
expect(declaredStyle(week).overflowX).toBe('auto')
|
||||
})
|
||||
|
||||
it(`shows Settings (mock 2e) in ${portrait ? 'one column' : 'two columns'}`, async () => {
|
||||
await renderAt('/settings', viewport)
|
||||
const panel = screen.getByRole('tabpanel', { name: 'Notifications & AI' })
|
||||
const page = panel.closest(`.${settingsTabsStyles.page}`)
|
||||
if (portrait) expect(page).toHaveClass(settingsTabsStyles.portrait!)
|
||||
else expect(page).not.toHaveClass(settingsTabsStyles.portrait!)
|
||||
expect(declaredStyle(panel).gridTemplateColumns).toBe(
|
||||
portrait ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1.15fr)',
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
it('reflows when the tablet turns', async () => {
|
||||
const resize = mockViewport(PORTRAIT.width, { height: PORTRAIT.height })
|
||||
render(
|
||||
<InDataRouter path="/plan?week=2026-10-05">
|
||||
<ApiProviders>
|
||||
<AppRoutes />
|
||||
</ApiProviders>
|
||||
</InDataRouter>,
|
||||
)
|
||||
const week = await screen.findByRole('list', { name: 'Dinners this week' })
|
||||
expect(shell()).toHaveClass(shellStyles.portrait!)
|
||||
expect(week.closest(`.${planStyles.tabletPage}`)).toHaveClass(planStyles.portraitPage!)
|
||||
resize(LANDSCAPE.width, LANDSCAPE.height)
|
||||
expect(shell()).toHaveClass(shellStyles.tablet!)
|
||||
expect(shell()).not.toHaveClass(shellStyles.portrait!)
|
||||
expect(week.closest(`.${planStyles.tabletPage}`)).not.toHaveClass(planStyles.portraitPage!)
|
||||
})
|
||||
@@ -7,6 +7,12 @@ export type Breakpoint = 'mobile' | 'tablet' | 'desktop'
|
||||
export const TABLET_QUERY = '(min-width: 768px)'
|
||||
export const DESKTOP_QUERY = '(min-width: 1200px)'
|
||||
|
||||
export type Orientation = 'portrait' | 'landscape'
|
||||
|
||||
// A tablet held upright (820 × 1180) has the rail and the tablet layout but
|
||||
// far less width than one on its side, so pages reflow for it.
|
||||
export const PORTRAIT_QUERY = '(orientation: portrait)'
|
||||
|
||||
// The layout the current viewport calls for, updated as the viewport crosses
|
||||
// a breakpoint.
|
||||
export function useBreakpoint(): Breakpoint {
|
||||
@@ -29,3 +35,16 @@ export function useBreakpoint(): Breakpoint {
|
||||
lists.desktop.matches ? 'desktop' : lists.tablet.matches ? 'tablet' : 'mobile',
|
||||
)
|
||||
}
|
||||
|
||||
// The viewport's orientation, updated as the device turns.
|
||||
export function useOrientation(): Orientation {
|
||||
const [list] = useState(() => window.matchMedia(PORTRAIT_QUERY))
|
||||
const subscribe = useCallback(
|
||||
(onChange: () => void) => {
|
||||
list.addEventListener('change', onChange)
|
||||
return () => list.removeEventListener('change', onChange)
|
||||
},
|
||||
[list],
|
||||
)
|
||||
return useSyncExternalStore(subscribe, () => (list.matches ? 'portrait' : 'landscape'))
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { QueryClientProvider } from '@tanstack/react-query'
|
||||
import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
|
||||
import { defaultScheduler, notifyManager, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { act, fireEvent, render, screen, within } from '@testing-library/react'
|
||||
import { MemoryRouter } from 'react-router'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi, type Mock, type MockInstance } from 'vitest'
|
||||
import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
|
||||
@@ -213,8 +213,46 @@ function reload(page: { unmount: () => void }) {
|
||||
vi.setSystemTime(now)
|
||||
}
|
||||
|
||||
async function advance(ms: number) {
|
||||
await act(() => vi.advanceTimersByTimeAsync(ms))
|
||||
// advance jumps the clock past a deadline or a wait, firing the timers due
|
||||
// by then; what they set off runs as later turns (until, settle) let it.
|
||||
function advance(ms: number) {
|
||||
act(() => vi.advanceTimersByTime(ms))
|
||||
}
|
||||
|
||||
// The host's setImmediate, which these tests do not fake: it runs its
|
||||
// callback on the next turn of the event loop, once every promise already
|
||||
// resolved has run, whatever the clock says.
|
||||
const nextTurn = (globalThis as unknown as { setImmediate: (callback: () => void) => void }).setImmediate
|
||||
|
||||
// turn lets the page take one turn of the event loop, inside act: the
|
||||
// promises it has resolved run, and React renders and runs the effects they
|
||||
// cause. No time passes, real or fake.
|
||||
async function turn() {
|
||||
await act(() => new Promise<void>((resolve) => nextTurn(resolve)))
|
||||
}
|
||||
|
||||
// TURNS bounds how many turns until waits and settle takes: far more than
|
||||
// any change here needs to reach the page.
|
||||
const TURNS = 50
|
||||
|
||||
// until lets the page take turns until check passes, and returns what check
|
||||
// returns; it fails with check's error if check still fails after TURNS.
|
||||
async function until<T>(check: () => T): Promise<T> {
|
||||
for (let turns = 0; ; turns++) {
|
||||
try {
|
||||
return check()
|
||||
} catch (error) {
|
||||
if (turns === TURNS) throw error
|
||||
}
|
||||
await turn()
|
||||
}
|
||||
}
|
||||
|
||||
// settle lets the page take TURNS turns, the clock standing still: whatever
|
||||
// it would do without a deadline or a wait passing, such as send a PATCH too
|
||||
// soon, it has done.
|
||||
async function settle() {
|
||||
for (let turns = 0; turns < TURNS; turns++) await turn()
|
||||
}
|
||||
|
||||
// The page's setTimeout, watched: retrySecondTry waits for a timer to be set.
|
||||
@@ -224,8 +262,8 @@ let timers: MockInstance<typeof setTimeout>
|
||||
// doubled by its failed first try — once that wait's timer is set, so the jump
|
||||
// never lands before the timer it is meant to fire.
|
||||
async function retrySecondTry() {
|
||||
await waitFor(() => expect(timers).toHaveBeenCalledWith(expect.any(Function), 2 * RETRY_FIRST))
|
||||
await advance(2 * RETRY_FIRST)
|
||||
await until(() => expect(timers).toHaveBeenCalledWith(expect.any(Function), 2 * RETRY_FIRST))
|
||||
advance(2 * RETRY_FIRST)
|
||||
}
|
||||
|
||||
function checkbox(name: string) {
|
||||
@@ -240,16 +278,21 @@ beforeEach(() => {
|
||||
onLine = true
|
||||
reachable = true
|
||||
mockViewport(390)
|
||||
// setTimeout moves with real time, and a test can jump past a deadline or
|
||||
// a wait (advance).
|
||||
vi.useFakeTimers({ toFake: ['Date', 'setTimeout', 'clearTimeout'], shouldAdvanceTime: true })
|
||||
// The clock and setTimeout move only when a test jumps past a deadline or
|
||||
// a wait (advance), never with real time: under load, real time would fire
|
||||
// a deadline or a wait the test never reached. React Query sends its
|
||||
// batched notices a turn later, as it does in the app on a setTimeout of 0,
|
||||
// so the page renders its changes without the clock moving.
|
||||
vi.useFakeTimers({ toFake: ['Date', 'setTimeout', 'clearTimeout'] })
|
||||
vi.setSystemTime(new Date('2026-10-07T16:00:00Z'))
|
||||
notifyManager.setScheduler(nextTurn)
|
||||
timers = vi.spyOn(globalThis, 'setTimeout')
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
vi.useRealTimers()
|
||||
notifyManager.setScheduler(defaultScheduler)
|
||||
vi.unstubAllGlobals()
|
||||
Reflect.deleteProperty(window, 'matchMedia')
|
||||
})
|
||||
@@ -258,7 +301,7 @@ describe('offline toggle queue', () => {
|
||||
it('applies toggles made offline at once, saves them in order and sends them in that order once online', async () => {
|
||||
const { fetchMock } = stubServer()
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
goOffline()
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
@@ -276,7 +319,7 @@ describe('offline toggle queue', () => {
|
||||
expect(patches(fetchMock)).toEqual([])
|
||||
|
||||
goOnline()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(fetchMock)).toEqual([
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('i1')} {"needed":false}`,
|
||||
@@ -292,14 +335,14 @@ describe('offline toggle queue', () => {
|
||||
it('queues a toggle whose PATCH fails with a network error and sends it again once back online', async () => {
|
||||
const { fetchMock } = stubServer()
|
||||
await openPage()
|
||||
fireEvent.click(await screen.findByRole('checkbox', { name: 'Taco seasoning' }))
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
fireEvent.click(await until(() => screen.getByRole('checkbox', { name: 'Taco seasoning' })))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(screen.getByText('3 / 3')).toBeInTheDocument()
|
||||
|
||||
// The browser still says online, but the server cannot be reached.
|
||||
reachable = false
|
||||
fireEvent.click(checkbox('Corn tortillas'))
|
||||
expect(await within(row('Corn tortillas')).findByText('will sync')).toBeInTheDocument()
|
||||
expect(await until(() => within(row('Corn tortillas')).getByText('will sync'))).toBeInTheDocument()
|
||||
expect(patches(fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`, `${ITEM('i2')} {"needed":false}`])
|
||||
expect(checkbox('Corn tortillas')).not.toBeChecked()
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
@@ -307,7 +350,7 @@ describe('offline toggle queue', () => {
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
|
||||
goOnline()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`, `${ITEM('i2')} {"needed":false}`, `${ITEM('i2')} {"needed":false}`])
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(screen.queryByText('will sync')).not.toBeInTheDocument()
|
||||
@@ -316,7 +359,7 @@ describe('offline toggle queue', () => {
|
||||
it('opens the saved list after a reload offline and replays the saved toggles in order once online', async () => {
|
||||
const { fetchMock } = stubServer()
|
||||
const first = await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
goOffline()
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
@@ -325,7 +368,7 @@ describe('offline toggle queue', () => {
|
||||
// Reload while offline: the settings, /me and the list cannot be read.
|
||||
reload(first)
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
expect(checkbox('Taco seasoning')).toBeChecked()
|
||||
expect(checkbox('Ground beef')).not.toBeChecked()
|
||||
expect(within(row('Taco seasoning')).getByText('will sync')).toBeInTheDocument()
|
||||
@@ -333,9 +376,9 @@ describe('offline toggle queue', () => {
|
||||
expect(patches(fetchMock)).toEqual([])
|
||||
|
||||
goOnline()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`, `${ITEM('i1')} {"needed":false}`])
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(checkbox('Taco seasoning')).toBeChecked()
|
||||
expect(checkbox('Ground beef')).not.toBeChecked()
|
||||
@@ -344,7 +387,7 @@ describe('offline toggle queue', () => {
|
||||
it('discards a queued toggle the server refuses because the list was archived, puts the count back and says so', async () => {
|
||||
const server = stubServer(() => errorResponse(409, 'archived'))
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
goOffline()
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
@@ -352,25 +395,25 @@ describe('offline toggle queue', () => {
|
||||
|
||||
server.archive()
|
||||
goOnline()
|
||||
const alert = await screen.findByRole('alert')
|
||||
const alert = await until(() => screen.getByRole('alert'))
|
||||
expect(alert).toHaveTextContent("Couldn't mark Taco seasoning to buy. archived message")
|
||||
expect(await screen.findByText('Archived')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('Archived'))).toBeInTheDocument()
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(within(row('Taco seasoning')).getByText('have it')).toBeInTheDocument()
|
||||
expect(screen.queryByText('will sync')).not.toBeInTheDocument()
|
||||
expect(queue()).toEqual([])
|
||||
// Sent once, never again.
|
||||
goOnline()
|
||||
await waitFor(() => expect(patches(server.fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`]))
|
||||
await until(() => expect(patches(server.fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`]))
|
||||
})
|
||||
|
||||
it('does not queue a toggle the server refuses: it is put back and says why', async () => {
|
||||
const server = stubServer(() => errorResponse(400, 'invalid'))
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
expect(await screen.findByRole('alert')).toHaveTextContent("Couldn't mark Ground beef “have it”. invalid message")
|
||||
expect(await until(() => screen.getByRole('alert'))).toHaveTextContent("Couldn't mark Ground beef “have it”. invalid message")
|
||||
expect(checkbox('Ground beef')).toBeChecked()
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(screen.queryByText('will sync')).not.toBeInTheDocument()
|
||||
@@ -378,7 +421,7 @@ describe('offline toggle queue', () => {
|
||||
|
||||
goOffline()
|
||||
goOnline()
|
||||
await waitFor(() => expect(patches(server.fetchMock)).toEqual([`${ITEM('i1')} {"needed":false}`]))
|
||||
await until(() => expect(patches(server.fetchMock)).toEqual([`${ITEM('i1')} {"needed":false}`]))
|
||||
})
|
||||
})
|
||||
|
||||
@@ -395,16 +438,16 @@ describe('offline toggle queue, replay', () => {
|
||||
localStorage.setItem(SAVED_KEY, JSON.stringify({ schedule: null, runs, queue: queued }))
|
||||
|
||||
await openPage()
|
||||
await waitFor(() => expect(answers.waiting()).toBe(1))
|
||||
fireEvent.click(await screen.findByRole('checkbox', { name: 'Corn tortillas' }))
|
||||
await until(() => expect(answers.waiting()).toBe(1))
|
||||
fireEvent.click(await until(() => screen.getByRole('checkbox', { name: 'Corn tortillas' })))
|
||||
for (let sent = 1; sent <= 4; sent++) {
|
||||
await waitFor(() => expect(patches(server.fetchMock)).toHaveLength(sent))
|
||||
await until(() => expect(patches(server.fetchMock)).toHaveLength(sent))
|
||||
// The next one is not sent before this one is answered.
|
||||
await new Promise((resolve) => setTimeout(resolve, 20))
|
||||
await settle()
|
||||
expect(patches(server.fetchMock)).toHaveLength(sent)
|
||||
act(() => answers.release())
|
||||
}
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(server.fetchMock)).toEqual([
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('n1')} {"needed":false}`,
|
||||
@@ -412,27 +455,27 @@ describe('offline toggle queue, replay', () => {
|
||||
`${ITEM('i2')} {"needed":false}`,
|
||||
])
|
||||
expect(server.mostInFlight()).toBe(1)
|
||||
await waitFor(() => expect(screen.getByText('1 / 3')).toBeInTheDocument())
|
||||
await until(() => expect(screen.getByText('1 / 3')).toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('replays at least once: a toggle the server applied before a reload is sent again and leaves the item and count the same', async () => {
|
||||
const answers = held()
|
||||
const server = stubServer(undefined, answers.hold)
|
||||
const first = await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
// The server applied it; the page reloads before its answer arrives.
|
||||
await waitFor(() => expect(answers.waiting()).toBe(1))
|
||||
await until(() => expect(answers.waiting()).toBe(1))
|
||||
expect(queue()).toEqual(['i3 true'])
|
||||
reload(first)
|
||||
act(() => answers.release())
|
||||
|
||||
await openPage()
|
||||
await waitFor(() => expect(answers.waiting()).toBe(1))
|
||||
await until(() => expect(answers.waiting()).toBe(1))
|
||||
act(() => answers.release())
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(server.fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`, `${ITEM('i3')} {"needed":true}`])
|
||||
await waitFor(() => expect(screen.getByText('3 / 3')).toBeInTheDocument())
|
||||
await until(() => expect(screen.getByText('3 / 3')).toBeInTheDocument())
|
||||
expect(checkbox('Taco seasoning')).toBeChecked()
|
||||
expect(server.run('2026-10-05')).toMatchObject({ needed_count: 3, total_count: 3 })
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
@@ -442,18 +485,18 @@ describe('offline toggle queue, replay', () => {
|
||||
const answers = held()
|
||||
stubServer(undefined, answers.hold)
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
goOffline()
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
expect(within(row('Ground beef')).getByText('will sync')).toBeInTheDocument()
|
||||
|
||||
goOnline()
|
||||
await waitFor(() => expect(answers.waiting()).toBe(1))
|
||||
await until(() => expect(answers.waiting()).toBe(1))
|
||||
expect(within(row('Ground beef')).getByText('will sync')).toBeInTheDocument()
|
||||
expect(queue()).toEqual(['i1 false'])
|
||||
|
||||
act(() => answers.release())
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(queue()).toEqual([])
|
||||
expect(screen.getByText('1 / 3')).toBeInTheDocument()
|
||||
})
|
||||
@@ -463,29 +506,29 @@ describe('offline toggle queue, replay', () => {
|
||||
// The first PATCH never answers; every later one answers at once.
|
||||
const server = stubServer(undefined, () => (++tries === 1 ? new Promise<void>(() => {}) : Promise.resolve()))
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
await waitFor(() => expect(patches(server.fetchMock)).toHaveLength(1))
|
||||
await until(() => expect(patches(server.fetchMock)).toHaveLength(1))
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
expect(queue()).toEqual(['i3 true', 'i1 false'])
|
||||
|
||||
// Past the deadline the hung PATCH is aborted; both still wait, in order.
|
||||
await advance(TOGGLE_DEADLINE)
|
||||
expect(await within(row('Taco seasoning')).findByText('will sync')).toBeInTheDocument()
|
||||
advance(TOGGLE_DEADLINE)
|
||||
expect(await until(() => within(row('Taco seasoning')).getByText('will sync'))).toBeInTheDocument()
|
||||
expect(within(row('Ground beef')).getByText('will sync')).toBeInTheDocument()
|
||||
expect(patches(server.fetchMock)).toHaveLength(1)
|
||||
expect(queue()).toEqual(['i3 true', 'i1 false'])
|
||||
|
||||
await retrySecondTry()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(server.fetchMock)).toEqual([
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('i1')} {"needed":false}`,
|
||||
])
|
||||
expect(server.mostInFlight()).toBe(1)
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
})
|
||||
@@ -496,26 +539,26 @@ describe('offline toggle queue, replay', () => {
|
||||
// answers. Every later /me answers at once.
|
||||
const server = stubServer(undefined, undefined, () => (++tries === 2 ? new Promise<void>(() => {}) : Promise.resolve()))
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
await waitFor(() => expect(tries).toBe(2))
|
||||
await until(() => expect(tries).toBe(2))
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
expect(queue()).toEqual(['i3 true', 'i1 false'])
|
||||
|
||||
// Past the deadline the hung /me is abandoned; both still wait, in order.
|
||||
await advance(TOGGLE_DEADLINE)
|
||||
expect(await within(row('Taco seasoning')).findByText('will sync')).toBeInTheDocument()
|
||||
advance(TOGGLE_DEADLINE)
|
||||
expect(await until(() => within(row('Taco seasoning')).getByText('will sync'))).toBeInTheDocument()
|
||||
expect(within(row('Ground beef')).getByText('will sync')).toBeInTheDocument()
|
||||
expect(patches(server.fetchMock)).toEqual([])
|
||||
|
||||
// The next try sends a fresh /me, which the server answers.
|
||||
await retrySecondTry()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(mes(server.fetchMock)).toBe(3)
|
||||
expect(patches(server.fetchMock)).toEqual([`${ITEM('i3')} {"needed":true}`, `${ITEM('i1')} {"needed":false}`])
|
||||
expect(server.mostInFlight()).toBe(1)
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
})
|
||||
@@ -536,29 +579,29 @@ describe('offline toggle queue, replay', () => {
|
||||
() => (refusedAt !== null && ++tries === 1 ? new Promise<void>(() => {}) : Promise.resolve()),
|
||||
)
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(checkbox('Taco seasoning'))
|
||||
await waitFor(() => expect(tries).toBe(1))
|
||||
await until(() => expect(tries).toBe(1))
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
expect(patches(server.fetchMock)).toHaveLength(1)
|
||||
|
||||
// Past the deadline the hung refresh is abandoned; both still wait, in order.
|
||||
await advance(TOGGLE_DEADLINE)
|
||||
expect(await within(row('Taco seasoning')).findByText('will sync')).toBeInTheDocument()
|
||||
advance(TOGGLE_DEADLINE)
|
||||
expect(await until(() => within(row('Taco seasoning')).getByText('will sync'))).toBeInTheDocument()
|
||||
expect(within(row('Ground beef')).getByText('will sync')).toBeInTheDocument()
|
||||
expect(queue()).toEqual(['i3 true', 'i1 false'])
|
||||
|
||||
// The next try is refused again and sends a fresh refresh, which answers.
|
||||
await retrySecondTry()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
expect(patches(server.fetchMock)).toEqual([
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('i3')} {"needed":true}`,
|
||||
`${ITEM('i1')} {"needed":false}`,
|
||||
])
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument()
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
})
|
||||
@@ -566,21 +609,21 @@ describe('offline toggle queue, replay', () => {
|
||||
it('tries a toggle again once the server is back, with no online event from the browser', async () => {
|
||||
const { fetchMock } = stubServer()
|
||||
await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
|
||||
// The browser says online throughout; the server cannot be reached, then can.
|
||||
reachable = false
|
||||
fireEvent.click(checkbox('Corn tortillas'))
|
||||
expect(await within(row('Corn tortillas')).findByText('will sync')).toBeInTheDocument()
|
||||
expect(await until(() => within(row('Corn tortillas')).getByText('will sync'))).toBeInTheDocument()
|
||||
reachable = true
|
||||
expect(patches(fetchMock)).toEqual([])
|
||||
|
||||
// Nothing says the server is back: only the wait's timer tries it again.
|
||||
await retrySecondTry()
|
||||
await waitFor(() => expect(queue()).toEqual([]))
|
||||
await until(() => expect(queue()).toEqual([]))
|
||||
// The first try failed at GET /api/v1/me, before its PATCH.
|
||||
expect(patches(fetchMock)).toEqual([`${ITEM('i2')} {"needed":false}`])
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(screen.getByText('1 / 3')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
@@ -588,20 +631,20 @@ describe('offline toggle queue, replay', () => {
|
||||
const answers = held()
|
||||
stubServer(undefined, answers.hold)
|
||||
const page = await openPage()
|
||||
expect(await screen.findByText('2 / 3')).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText('2 / 3'))).toBeInTheDocument()
|
||||
goOffline()
|
||||
fireEvent.click(checkbox('Ground beef'))
|
||||
expect(within(row('Ground beef')).getByText('will sync')).toBeInTheDocument()
|
||||
|
||||
page.leave()
|
||||
goOnline()
|
||||
await waitFor(() => expect(answers.waiting()).toBe(1))
|
||||
await until(() => expect(answers.waiting()).toBe(1))
|
||||
page.reopen()
|
||||
expect(await within(row('Ground beef')).findByText('will sync')).toBeInTheDocument()
|
||||
expect(await until(() => within(row('Ground beef')).getByText('will sync'))).toBeInTheDocument()
|
||||
expect(queue()).toEqual(['i1 false'])
|
||||
|
||||
act(() => answers.release())
|
||||
await waitFor(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
await until(() => expect(screen.queryByText('will sync')).not.toBeInTheDocument())
|
||||
expect(queue()).toEqual([])
|
||||
expect(screen.getByText('1 / 3')).toBeInTheDocument()
|
||||
})
|
||||
@@ -613,10 +656,10 @@ describe('offline toggle queue, replay', () => {
|
||||
const getItem = vi.spyOn(Storage.prototype, 'getItem')
|
||||
await openPage()
|
||||
|
||||
expect(await screen.findByText(/Couldn't load the household settings/)).toBeInTheDocument()
|
||||
expect(await until(() => screen.getByText(/Couldn't load the household settings/))).toBeInTheDocument()
|
||||
expect(screen.getByText(/can't be kept on this device while offline/)).toBeInTheDocument()
|
||||
const reads = getItem.mock.calls.filter(([key]) => key === SAVED_KEY).length
|
||||
await new Promise((resolve) => setTimeout(resolve, 50))
|
||||
await settle()
|
||||
expect(getItem.mock.calls.filter(([key]) => key === SAVED_KEY)).toHaveLength(reads)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -0,0 +1,601 @@
|
||||
import { QueryClientProvider } from '@tanstack/react-query'
|
||||
import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { Route, Routes } from 'react-router'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from './api/index.ts'
|
||||
import { DinnerDetailPage } from './dinners/DinnerDetailPage.tsx'
|
||||
import { DiscoverPage } from './discover/DiscoverPage.tsx'
|
||||
import { HomePage } from './home/HomePage.tsx'
|
||||
import { CookFromPantryPage } from './ideas/CookFromPantryPage.tsx'
|
||||
import { QuickDinnersPage } from './ideas/QuickDinnersPage.tsx'
|
||||
import { OnboardingPage } from './onboarding/OnboardingPage.tsx'
|
||||
import { createNetworkStatus } from './pwa/networkStatus.ts'
|
||||
import { PlanPage } from './plan/PlanPage.tsx'
|
||||
import { defaultWeek } from './plan/week.ts'
|
||||
import { AISettingsPage } from './settings/AISettingsPage.tsx'
|
||||
import { CalendarSettingsPage } from './settings/CalendarSettingsPage.tsx'
|
||||
import { HouseholdSettingsPage } from './settings/HouseholdSettingsPage.tsx'
|
||||
import { NotificationsPage } from './settings/NotificationsPage.tsx'
|
||||
import { RegularsSettingsPage } from './settings/RegularsSettingsPage.tsx'
|
||||
import { SettingsPage } from './settings/SettingsPage.tsx'
|
||||
import { SupplyArchivePage } from './shopping/SupplyArchivePage.tsx'
|
||||
import { SupplyRunPage } from './shopping/SupplyRunPage.tsx'
|
||||
import {
|
||||
AI_MODELS,
|
||||
AI_SETTINGS,
|
||||
CHAT_WEBHOOK_NONE,
|
||||
GOOGLE_NOT_CONNECTED,
|
||||
HOME,
|
||||
HOUSEHOLD_SETTINGS,
|
||||
NOTIFICATION_SETTINGS,
|
||||
RECIPE_SEARCH_SETTINGS,
|
||||
SETTINGS_API,
|
||||
} from './test/ApiProviders.tsx'
|
||||
import { InDataRouter } from './test/dataRouter.tsx'
|
||||
import { dinnerBody } from './test/dinners.ts'
|
||||
import { errorResponse, fakeLocation, jsonResponse, ME } from './test/fetchStub.ts'
|
||||
import { mockViewport } from './test/matchMedia.ts'
|
||||
import skeletonStyles from './ui/Skeleton.module.css'
|
||||
|
||||
// The empty, loading and error state of every route, as docs/STATES.md
|
||||
// lists them: each route renders its loading, empty and error variants
|
||||
// against a stubbed API.
|
||||
|
||||
type Responder = () => Response | Promise<Response>
|
||||
|
||||
// pending is a response that never comes, so the page stays loading.
|
||||
const pending: Responder = () => new Promise<Response>(() => {})
|
||||
|
||||
// failThen answers the first request with a 500, and every later one with
|
||||
// then: Retry reads again and gets it.
|
||||
function failThen(then: Responder): Responder {
|
||||
let failed = false
|
||||
return () => {
|
||||
if (failed) return then()
|
||||
failed = true
|
||||
return errorResponse(500, 'internal')
|
||||
}
|
||||
}
|
||||
|
||||
const json = (body: unknown): Responder => () => jsonResponse(200, body)
|
||||
|
||||
// startJobs answers each POST that starts a job with the next job id, j1,
|
||||
// j2 and so on.
|
||||
function startJobs(): Responder {
|
||||
let n = 0
|
||||
return () => jsonResponse(202, { jobId: `j${++n}` })
|
||||
}
|
||||
|
||||
// serve answers "METHOD path" requests from responders, with /me and the
|
||||
// household settings; any other request fails the test.
|
||||
function serve(responders: Record<string, Responder>) {
|
||||
const all: Record<string, Responder> = {
|
||||
'GET /api/v1/me': json(ME),
|
||||
'GET /api/v1/settings/household': json(HOUSEHOLD_SETTINGS),
|
||||
...responders,
|
||||
}
|
||||
const fetchMock = vi.fn<typeof fetch>((input, init) => {
|
||||
const key = `${init?.method ?? 'GET'} ${String(input)}`
|
||||
const respond = Object.hasOwn(all, key) ? all[key] : undefined
|
||||
if (respond === undefined) throw new Error(`unexpected fetch: ${key}`)
|
||||
return Promise.resolve(respond())
|
||||
})
|
||||
vi.stubGlobal('fetch', fetchMock)
|
||||
return fetchMock
|
||||
}
|
||||
|
||||
// renderRoute renders element on its route pattern at path, under a data
|
||||
// router as App renders it, once /me has loaded as AuthBootstrap loads it.
|
||||
async function renderRoute(path: string, pattern: string, element: ReactNode) {
|
||||
const api = createApiClient(fakeLocation(path), createNetworkStatus(window), createVerifiedSession(localStorage))
|
||||
await api.loadMe()
|
||||
return render(
|
||||
<ApiProvider client={api}>
|
||||
<QueryClientProvider client={createQueryClient()}>
|
||||
<InDataRouter path={path}>
|
||||
<Routes>
|
||||
<Route path={pattern} element={element} />
|
||||
</Routes>
|
||||
</InDataRouter>
|
||||
</QueryClientProvider>
|
||||
</ApiProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
function skeletons() {
|
||||
return document.querySelectorAll(`.${skeletonStyles.skeleton}`)
|
||||
}
|
||||
|
||||
// expectLoading waits for the pill skeletons and checks nothing failed.
|
||||
async function expectLoading() {
|
||||
await waitFor(() => expect(skeletons().length).toBeGreaterThan(0))
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
}
|
||||
|
||||
// expectOnlyLoadingBefore checks, once a page's independent sections have
|
||||
// settled, that the one skeleton left is the held read's: it sits before
|
||||
// next, the first settled section after it, and nothing failed.
|
||||
function expectOnlyLoadingBefore(next: Element) {
|
||||
expect(skeletons()).toHaveLength(1)
|
||||
const left = skeletons().item(0)
|
||||
if (left === null) throw new Error('no skeleton left')
|
||||
expect(next.contains(left)).toBe(false)
|
||||
expect(left.compareDocumentPosition(next) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
}
|
||||
|
||||
// expectRetry finds the error banner saying said, presses its Retry and
|
||||
// waits for recovered.
|
||||
async function expectRetry(said: string, recovered: () => Promise<unknown>) {
|
||||
const alert = await screen.findByRole('alert')
|
||||
expect(alert).toHaveTextContent(said)
|
||||
fireEvent.click(within(alert).getByRole('button', { name: 'Retry' }))
|
||||
await recovered()
|
||||
await waitFor(() => expect(screen.queryByRole('alert')).not.toBeInTheDocument())
|
||||
}
|
||||
|
||||
const WEEK = () => defaultWeek(HOUSEHOLD_SETTINGS, new Date())
|
||||
|
||||
beforeEach(() => {
|
||||
mockViewport(390)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
Reflect.deleteProperty(window, 'matchMedia')
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
describe('/ Home', () => {
|
||||
const NOTHING_TONIGHT = { ...HOME, tonight: null, sideQuestCount: 0, recentUpdates: { unread: false } }
|
||||
const page = async (home: Responder) => {
|
||||
serve({ 'GET /api/v1/home': home, 'GET /api/v1/rotation-reviews': json({ reviews: [] }) })
|
||||
await renderRoute('/', '/', <HomePage />)
|
||||
}
|
||||
|
||||
it('loading: skeletons', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no quest planned tonight, with Plan this week', async () => {
|
||||
await page(json(NOTHING_TONIGHT))
|
||||
expect(await screen.findByRole('heading', { name: 'No quest planned tonight' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Plan this week' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(json(NOTHING_TONIGHT)))
|
||||
await expectRetry("Couldn't load tonight's quest. internal message", () =>
|
||||
screen.findByRole('heading', { name: 'No quest planned tonight' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/onboarding Welcome step', () => {
|
||||
it('reads nothing, so it has no empty, loading or error state', async () => {
|
||||
const fetchMock = serve({})
|
||||
await renderRoute('/onboarding', '/onboarding/*', <OnboardingPage />)
|
||||
expect(screen.getByRole('heading', { name: 'Welcome to MealQuest' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: "Let's start" })).toBeEnabled()
|
||||
expect(skeletons()).toHaveLength(0)
|
||||
expect(fetchMock.mock.calls.map(([input]) => String(input))).toEqual(['/api/v1/me'])
|
||||
})
|
||||
})
|
||||
|
||||
describe('/onboarding/regulars Regulars step', () => {
|
||||
const page = async (regulars: Responder) => {
|
||||
serve({ 'GET /api/v1/dinners?status=regular': regulars })
|
||||
await renderRoute('/onboarding/regulars', '/onboarding/*', <OnboardingPage />)
|
||||
}
|
||||
|
||||
it('loading: skeleton', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no Regulars yet, common picks offered and Next disabled', async () => {
|
||||
await page(json({ dinners: [] }))
|
||||
expect(await screen.findByRole('heading', { name: 'Common picks' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('heading', { name: 'Your regulars · 0' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Next: notifications' })).toBeDisabled()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(json({ dinners: [] })))
|
||||
await expectRetry('Your Regulars could not load: internal message', () =>
|
||||
screen.findByRole('heading', { name: 'Common picks' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/onboarding/notifications Notifications step', () => {
|
||||
const page = async (finish: Responder) => {
|
||||
serve({ 'PATCH /api/v1/settings/household': finish })
|
||||
await renderRoute('/onboarding/notifications', '/onboarding/*', <OnboardingPage />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Maybe later' }))
|
||||
}
|
||||
|
||||
it("loading: the step's buttons wait while it finishes", async () => {
|
||||
await page(pending)
|
||||
await waitFor(() => expect(screen.getByRole('button', { name: 'Maybe later' })).toBeDisabled())
|
||||
expect(screen.getByRole('button', { name: 'Turn on notifications' })).toBeDisabled()
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: says finishing failed and lets it be tried again', async () => {
|
||||
await page(failThen(pending))
|
||||
expect(await screen.findByRole('alert')).toHaveTextContent('Could not finish setting up: internal message')
|
||||
expect(screen.getByRole('button', { name: 'Maybe later' })).toBeEnabled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('/plan Draft board', () => {
|
||||
const page = async (plan: Responder) => {
|
||||
serve({ [`GET /api/v1/plans/${WEEK()}`]: plan, [`GET /api/v1/shopping/${WEEK()}`]: () => errorResponse(404, 'not_found') })
|
||||
await renderRoute('/plan', '/plan', <PlanPage />)
|
||||
}
|
||||
const noPlan = () => errorResponse(404, 'not_found')
|
||||
|
||||
it('loading: skeleton tiles', async () => {
|
||||
await page(pending)
|
||||
expect(await screen.findByRole('region', { name: 'Plan loading' })).toBeInTheDocument()
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: nothing planned yet, with Draft this week', async () => {
|
||||
await page(noPlan)
|
||||
expect(await screen.findByRole('heading', { name: 'Nothing planned yet' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Draft this week' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(noPlan))
|
||||
await expectRetry("Couldn't load this week's plan. internal message", () =>
|
||||
screen.findByRole('heading', { name: 'Nothing planned yet' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/plan/shopping Supply run', () => {
|
||||
const page = async (run: Responder) => {
|
||||
serve({ [`GET /api/v1/shopping/${WEEK()}`]: run })
|
||||
await renderRoute('/plan/shopping', '/plan/shopping', <SupplyRunPage />)
|
||||
}
|
||||
const noList = () => errorResponse(404, 'not_found')
|
||||
|
||||
it('loading: skeleton cards', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no shopping list yet, with Make the shopping list', async () => {
|
||||
await page(noList)
|
||||
expect(await screen.findByRole('heading', { name: 'No shopping list yet' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Make the shopping list' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(noList))
|
||||
await expectRetry("Couldn't load the shopping list. internal message", () =>
|
||||
screen.findByRole('heading', { name: 'No shopping list yet' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/plan/shopping/archive Supply archive', () => {
|
||||
const page = async (archive: Responder) => {
|
||||
serve({ 'GET /api/v1/shopping/archive?by=week': archive })
|
||||
await renderRoute('/plan/shopping/archive', '/plan/shopping/archive', <SupplyArchivePage />)
|
||||
}
|
||||
const nothing = json({ by: 'week', periods: [] })
|
||||
|
||||
it('loading: skeleton posts', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: nothing archived yet', async () => {
|
||||
await page(nothing)
|
||||
expect(await screen.findByRole('heading', { name: 'Nothing archived yet' })).toBeInTheDocument()
|
||||
expect(screen.getByText("Each week's Supply run becomes a post here once it's made.")).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(nothing))
|
||||
await expectRetry("Couldn't load the Supply archive. internal message", () =>
|
||||
screen.findByRole('heading', { name: 'Nothing archived yet' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/discover Side quests', () => {
|
||||
const page = async (deck: Responder) => {
|
||||
serve({ 'GET /api/v1/suggestions/deck': deck, 'GET /api/v1/dinners?status=quest_log': json({ dinners: [] }) })
|
||||
await renderRoute('/discover', '/discover', <DiscoverPage />)
|
||||
}
|
||||
const empty = json({ suggestions: [], active_batch: null, failed_batch: null })
|
||||
|
||||
it('loading: skeleton cards', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: All caught up / New side quests arrive Sunday., with Get more now', async () => {
|
||||
await page(empty)
|
||||
expect(await screen.findByRole('heading', { name: 'All caught up' })).toBeInTheDocument()
|
||||
expect(screen.getByText('New side quests arrive Sunday.')).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Get more now' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(empty))
|
||||
await expectRetry("Couldn't load your side quests. internal message", () =>
|
||||
screen.findByRole('heading', { name: 'All caught up' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/quick Quick dinners', () => {
|
||||
const QUICK = 'POST /api/v1/ideas/quick'
|
||||
const job = (status: string, error: string | null) => ({
|
||||
id: 'j1',
|
||||
kind: 'quick_ideas',
|
||||
status,
|
||||
result: { stage: 'grounding', kind: 'under30', exclude: [], ideas: [], dropped: 0 },
|
||||
error,
|
||||
})
|
||||
const page = async (quick: Responder, poll: Responder = pending) => {
|
||||
serve({ [QUICK]: quick, 'GET /api/v1/jobs/j1': poll, 'GET /api/v1/jobs/j2': pending })
|
||||
await renderRoute('/quick', '/quick', <QuickDinnersPage />)
|
||||
}
|
||||
|
||||
it('loading: skeleton rows', async () => {
|
||||
await page(pending)
|
||||
await waitFor(() => expect(screen.getAllByTestId('skeleton-row')).toHaveLength(6))
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no ideas found, with Retry', async () => {
|
||||
await page(startJobs(), json(job('failed', 'no_ideas_found')))
|
||||
await expectRetry("Couldn't find Quick dinners. No ideas came back with a recipe to match.", () =>
|
||||
waitFor(() => expect(skeletons().length).toBeGreaterThan(0)),
|
||||
)
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(pending))
|
||||
await expectRetry("Couldn't start looking for Quick dinners. internal message", () =>
|
||||
waitFor(() => expect(screen.getAllByTestId('skeleton-row')).toHaveLength(6)),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/cook-from-pantry Cook from what I have', () => {
|
||||
const FIND = 'POST /api/v1/ideas/from-ingredients'
|
||||
const job = {
|
||||
id: 'j1',
|
||||
kind: 'ideas_from_ingredients',
|
||||
status: 'failed',
|
||||
result: { stage: 'grounding', ingredients: ['Rice'], quick_only: false, ideas: [], dropped: 0 },
|
||||
error: 'no_ideas_found',
|
||||
}
|
||||
const page = async (find: Responder, poll: Responder = pending) => {
|
||||
serve({ [FIND]: find, 'GET /api/v1/jobs/j1': poll, 'GET /api/v1/jobs/j2': pending })
|
||||
await renderRoute('/cook-from-pantry', '/cook-from-pantry', <CookFromPantryPage />)
|
||||
}
|
||||
const search = () => {
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'Add ingredient' }), { target: { value: 'Rice' } })
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Find ideas' }))
|
||||
}
|
||||
|
||||
it('loading: skeleton cards', async () => {
|
||||
await page(pending)
|
||||
search()
|
||||
expect(await screen.findByRole('region', { name: 'Ideas loading' })).toBeInTheDocument()
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no ingredients yet, with Find ideas disabled; no ideas found, with Retry', async () => {
|
||||
await page(startJobs(), json(job))
|
||||
expect(screen.getByRole('button', { name: 'Find ideas' })).toBeDisabled()
|
||||
search()
|
||||
await expectRetry("Couldn't find ideas. No ideas came back with a recipe to match.", () =>
|
||||
screen.findByRole('region', { name: 'Ideas' }),
|
||||
)
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(pending))
|
||||
search()
|
||||
await expectRetry("Couldn't start looking for ideas. internal message", () =>
|
||||
screen.findByRole('region', { name: 'Ideas loading' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/dinner/:id Dinner', () => {
|
||||
const page = async (dinner: Responder) => {
|
||||
serve({ 'GET /api/v1/dinners/d1': dinner })
|
||||
await renderRoute('/dinner/d1', '/dinner/:id', <DinnerDetailPage />)
|
||||
}
|
||||
const notFound = () => errorResponse(404, 'not_found')
|
||||
|
||||
it('loading: skeletons', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: dinner not found', async () => {
|
||||
await page(notFound)
|
||||
expect(await screen.findByRole('heading', { name: 'Dinner not found' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(notFound))
|
||||
await expectRetry("Couldn't load this dinner. internal message", () =>
|
||||
screen.findByRole('heading', { name: 'Dinner not found' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/settings Settings home', () => {
|
||||
const page = async (calendar: Responder) => {
|
||||
const api = Object.fromEntries(Object.entries(SETTINGS_API).map(([path, respond]) => [`GET ${path}`, respond]))
|
||||
serve({ ...api, 'GET /api/v1/dinners?status=regular': json({ dinners: [] }), 'GET /api/v1/integrations/google': calendar })
|
||||
await renderRoute('/settings', '/settings', <SettingsPage />)
|
||||
}
|
||||
const notConnected = json(GOOGLE_NOT_CONNECTED)
|
||||
|
||||
it('loading: status skeletons', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no Regulars, calendar not connected, Google Chat not connected', async () => {
|
||||
await page(notConnected)
|
||||
expect(await screen.findByText('None on rotation yet')).toBeInTheDocument()
|
||||
expect(await screen.findByText('Not connected')).toBeInTheDocument()
|
||||
expect(await screen.findByText(/Google Chat not connected/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(notConnected))
|
||||
await expectRetry('Settings could not load: internal message', () => screen.findByText('Not connected'))
|
||||
})
|
||||
})
|
||||
|
||||
describe('/settings/notifications Notifications', () => {
|
||||
const page = async (prefs: Responder) => {
|
||||
serve({ 'GET /api/v1/settings/notifications': prefs, 'GET /api/v1/settings/chat-webhook': json(CHAT_WEBHOOK_NONE) })
|
||||
await renderRoute('/settings/notifications', '/settings/notifications', <NotificationsPage />)
|
||||
}
|
||||
|
||||
it('loading: skeleton for the channel matrix', async () => {
|
||||
await page(pending)
|
||||
// The webhook card and this device's push status read on their own;
|
||||
// once they settle, the one skeleton left is the channel matrix's.
|
||||
await screen.findByRole('button', { name: 'Save webhook' })
|
||||
const device = screen.getByRole('group', { name: 'Notifications on this device' })
|
||||
await waitFor(() => expect(device.querySelectorAll(`.${skeletonStyles.skeleton}`)).toHaveLength(0))
|
||||
expectOnlyLoadingBefore(device)
|
||||
expect(screen.queryByRole('group', { name: 'Notification channels' })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('empty: no Google Chat webhook stored', async () => {
|
||||
await page(json(NOTIFICATION_SETTINGS))
|
||||
expect(await screen.findByRole('button', { name: 'Save webhook' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(json(NOTIFICATION_SETTINGS)))
|
||||
await expectRetry('Notification settings could not load: internal message', () =>
|
||||
screen.findByRole('group', { name: 'Notification channels' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('/settings/ai AI assistant', () => {
|
||||
const NO_KEY = { ...AI_SETTINGS, api_key_last4: null, key_verified_at: null }
|
||||
const page = async (settings: Responder) => {
|
||||
serve({
|
||||
'GET /api/v1/settings/ai': settings,
|
||||
'GET /api/v1/settings/ai/models': json(AI_MODELS),
|
||||
'GET /api/v1/settings/recipe-search': json(RECIPE_SEARCH_SETTINGS),
|
||||
})
|
||||
await renderRoute('/settings/ai', '/settings/ai', <AISettingsPage />)
|
||||
}
|
||||
|
||||
it('loading: skeleton for the AI assistant form', async () => {
|
||||
await page(pending)
|
||||
// The Recipe search card reads on its own; once it settles, the one
|
||||
// skeleton left is the AI assistant form's.
|
||||
await screen.findByRole('button', { name: 'Save recipe search' })
|
||||
expectOnlyLoadingBefore(screen.getByRole('region', { name: 'Recipe search' }))
|
||||
expect(screen.queryByText('No key stored')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('empty: no key stored, with Add key', async () => {
|
||||
await page(json(NO_KEY))
|
||||
expect(await screen.findByText('No key stored')).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Add key' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(json(NO_KEY)))
|
||||
await expectRetry('AI settings could not load: internal message', () => screen.findByText('No key stored'))
|
||||
})
|
||||
})
|
||||
|
||||
describe('/settings/household Household', () => {
|
||||
const page = async (settings: Responder) => {
|
||||
serve({ 'GET /api/v1/settings/household': settings })
|
||||
await renderRoute('/settings/household', '/settings/household', <HouseholdSettingsPage />)
|
||||
}
|
||||
|
||||
it('loading: skeleton', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
// The household's settings always exist (seeded on first start), so its
|
||||
// "empty" state is the seeded defaults.
|
||||
it('empty: the seeded settings', async () => {
|
||||
await page(json(HOUSEHOLD_SETTINGS))
|
||||
expect(await screen.findByLabelText('Dinner time')).toHaveValue('17:30')
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(json(HOUSEHOLD_SETTINGS)))
|
||||
await expectRetry('Household settings could not load: internal message', () => screen.findByLabelText('Dinner time'))
|
||||
})
|
||||
})
|
||||
|
||||
describe('/settings/regulars Regular dinners', () => {
|
||||
const page = async (regulars: Responder) => {
|
||||
serve({ 'GET /api/v1/dinners?status=regular': regulars })
|
||||
await renderRoute('/settings/regulars', '/settings/regulars', <RegularsSettingsPage />)
|
||||
}
|
||||
const none = json({ dinners: [] })
|
||||
|
||||
it('loading: skeleton', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: no Regulars yet', async () => {
|
||||
await page(none)
|
||||
expect(await screen.findByText('No Regulars yet. Add the dinners your household makes on repeat.')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(json({ dinners: [dinnerBody('d1', 'Beef tacos')] })))
|
||||
await expectRetry('Your Regulars could not load: internal message', () => screen.findByText('Beef tacos'))
|
||||
})
|
||||
})
|
||||
|
||||
describe('/settings/calendar Calendar', () => {
|
||||
const page = async (connection: Responder) => {
|
||||
serve({ 'GET /api/v1/integrations/google': connection })
|
||||
await renderRoute('/settings/calendar', '/settings/calendar', <CalendarSettingsPage />)
|
||||
}
|
||||
const notConnected = json(GOOGLE_NOT_CONNECTED)
|
||||
|
||||
it('loading: skeleton', async () => {
|
||||
await page(pending)
|
||||
await expectLoading()
|
||||
})
|
||||
|
||||
it('empty: not connected, with Connect Google Calendar', async () => {
|
||||
await page(notConnected)
|
||||
expect(await screen.findByRole('heading', { name: 'Not connected' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('link', { name: 'Connect Google Calendar' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error: banner with Retry', async () => {
|
||||
await page(failThen(notConnected))
|
||||
await expectRetry('Google Calendar status could not load: internal message', () =>
|
||||
screen.findByRole('heading', { name: 'Not connected' }),
|
||||
)
|
||||
})
|
||||
})
|
||||
@@ -2,7 +2,8 @@ import { QueryClientProvider } from '@tanstack/react-query'
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
|
||||
import { createNetworkStatus } from '../pwa/networkStatus.ts'
|
||||
import { errorResponse, fakeLocation, jsonResponse } from './fetchStub.ts'
|
||||
import { dinnerBody } from './dinners.ts'
|
||||
import { fakeLocation, jsonResponse } from './fetchStub.ts'
|
||||
|
||||
// AI_SETTINGS is a GET /api/v1/settings/ai body: Anthropic with a verified key.
|
||||
export const AI_SETTINGS = {
|
||||
@@ -99,12 +100,16 @@ export const CHAT_WEBHOOK = {
|
||||
last_test_status: null,
|
||||
}
|
||||
|
||||
// SETTINGS_REGULARS is a GET /api/v1/dinners?status=regular body: one
|
||||
// Regular, its recipe found.
|
||||
export const SETTINGS_REGULARS = { dinners: [dinnerBody('r1', 'Beef tacos')] }
|
||||
|
||||
// SETTINGS_API answers the settings home's requests, for stubFetchByPath, as
|
||||
// today's server does: the dinners endpoint does not exist yet, and neither
|
||||
// Google Calendar nor Google Chat is connected. The home's sub-tabs stay mounted on mobile, so
|
||||
// it also reads the AI models and recipe search settings.
|
||||
// today's server does: one Regular on rotation, and neither Google Calendar
|
||||
// nor Google Chat connected. The home's sub-tabs stay mounted on mobile, so
|
||||
// it also reads the Regulars list, the AI models and recipe search settings.
|
||||
export const SETTINGS_API = {
|
||||
'/api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
|
||||
'/api/v1/dinners?status=regular': () => jsonResponse(200, SETTINGS_REGULARS),
|
||||
'/api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
|
||||
'/api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
|
||||
'/api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK_NONE),
|
||||
|
||||
@@ -3,16 +3,22 @@ import { act } from '@testing-library/react'
|
||||
type Listener = (event: MediaQueryListEvent) => void
|
||||
|
||||
// Replaces window.matchMedia with one that answers min-width / max-width
|
||||
// queries for a pretend viewport width, and prefers-reduced-motion: reduce
|
||||
// with reducedMotion (jsdom has no matchMedia and no layout). Returns a
|
||||
// function that resizes the pretend viewport and notifies every query whose
|
||||
// answer changed.
|
||||
export function mockViewport(initialWidth: number, { reducedMotion = false } = {}): (width: number) => void {
|
||||
// queries for a pretend viewport width, orientation: portrait for its height
|
||||
// (a viewport given no height is landscape), and prefers-reduced-motion:
|
||||
// reduce with reducedMotion (jsdom has no matchMedia and no layout). Returns
|
||||
// a function that resizes the pretend viewport and notifies every query
|
||||
// whose answer changed.
|
||||
export function mockViewport(
|
||||
initialWidth: number,
|
||||
{ reducedMotion = false, height: initialHeight = 0 } = {},
|
||||
): (width: number, height?: number) => void {
|
||||
let width = initialWidth
|
||||
let height = initialHeight
|
||||
const lists: { list: MediaQueryList; listeners: Set<Listener> }[] = []
|
||||
|
||||
function evaluate(query: string): boolean {
|
||||
if (query === '(prefers-reduced-motion: reduce)') return reducedMotion
|
||||
if (query === '(orientation: portrait)') return height >= width
|
||||
const min = /\(min-width:\s*(\d+)px\)/.exec(query)
|
||||
const max = /\(max-width:\s*(\d+)px\)/.exec(query)
|
||||
if (!min && !max) throw new Error(`mockViewport cannot evaluate ${JSON.stringify(query)}`)
|
||||
@@ -37,9 +43,10 @@ export function mockViewport(initialWidth: number, { reducedMotion = false } = {
|
||||
return list
|
||||
}
|
||||
|
||||
return (next: number) => {
|
||||
return (nextWidth: number, nextHeight = 0) => {
|
||||
const before = lists.map(({ list }) => list.matches)
|
||||
width = next
|
||||
width = nextWidth
|
||||
height = nextHeight
|
||||
act(() => {
|
||||
lists.forEach(({ list, listeners }, i) => {
|
||||
if (list.matches === before[i]) return
|
||||
|
||||
Reference in New Issue
Block a user