Release corrections round 2: offline onboarding lockout and stale candidates after rename (#103)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/App.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from '@testing-library/react'
+import { act, cleanup, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApiClient, createVerifiedSession } from './api/index.ts'
 import { createNetworkStatus } from './pwa/networkStatus.ts'
@@ -236,6 +236,13 @@ describe('App offline bootstrap', () => {
     vi.spyOn(navigator, 'onLine', 'get').mockImplementation(() => onLine)
   })
 
+  // A test that emits an offline event leaves TanStack Query's online
+  // manager, shared by every test, offline until an online event.
+  afterEach(() => {
+    cleanup()
+    window.dispatchEvent(new Event('online'))
+  })
+
   it.each([
     ['/plan', 'Plan'],
     ['/dinner/01J9ZK', 'Dinner'],
@@ -250,6 +257,31 @@ describe('App offline bootstrap', () => {
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   })
 
+  it('opens the saved page when the browser has emitted an offline event', async () => {
+    await visitOnline()
+    // /me is still loading, with the app mounted, when the browser emits
+    // its offline event; only then does /me fail.
+    let failMe!: () => void
+    vi.stubGlobal(
+      'fetch',
+      vi.fn<typeof fetch>().mockImplementationOnce(
+        () => new Promise((_, reject) => (failMe = () => reject(new TypeError('Failed to fetch')))),
+      ).mockRejectedValue(new TypeError('Failed to fetch')),
+    )
+    renderAt('/plan')
+    await vi.waitFor(() => expect(failMe).toBeDefined())
+    onLine = false
+    act(() => {
+      window.dispatchEvent(new Event('offline'))
+    })
+    act(() => failMe())
+
+    expect(await screen.findByRole('heading', { level: 1, name: 'Plan' })).toBeInTheDocument()
+    expect(screen.queryByRole('main', { name: 'Loading MealQuest' })).not.toBeInTheDocument()
+    expect(screen.getByRole('status')).toHaveTextContent('Offline — showing saved data')
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
   it('opens the saved pages when the server is unreachable but the browser reports online', async () => {
     await visitOnline()
     vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockRejectedValue(new TypeError('Failed to fetch')))

web/src/onboarding/OnboardingGate.tsx

@@ -19,7 +19,8 @@ function inOnboarding(pathname: string): boolean {
 // The service worker never caches the settings, so offline on the saved
 // pages (see AuthBootstrap) they cannot be read: the saved pages open as they
 // are, since onboarding needs the server anyway, and the settings are read
-// again when the browser is back online.
+// again when the browser is back online. The read runs even while the
+// browser reports offline, so that case fails fast instead of waiting.
 export function OnboardingGate() {
   const api = useApi()
   const { pathname } = useLocation()

web/src/settings/api.ts

@@ -367,12 +367,16 @@ function parseHouseholdSettings(where: string, body: unknown): HouseholdSettings
 
 export const HOUSEHOLD_SETTINGS_KEY = ['settings', 'household'] as const
 
+// useHouseholdSettings runs even while the browser reports offline, like
+// /me: OnboardingGate reads it before every page, so offline it must fail
+// into the saved pages instead of waiting for the network.
 export function useHouseholdSettings() {
   const { apiFetch } = useApi()
   return useQuery({
     queryKey: HOUSEHOLD_SETTINGS_KEY,
     queryFn: async () =>
       parseHouseholdSettings(`GET ${HOUSEHOLD_SETTINGS_PATH}`, await apiFetch<unknown>(HOUSEHOLD_SETTINGS_PATH)),
+    networkMode: 'always',
   })
 }