Feature 15: Recipe Detail and Kitchen Reading Mode (#162)

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

web/src/sw/apiStrategy.test.ts

@@ -1,51 +1,16 @@
 // Runs the real Workbox network-first strategy against an in-memory cache
 // storage: jsdom has none, and the worker itself needs service worker globals.
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { RouteHandlerCallbackOptions } from 'workbox-core/types'
 import { createApiClient, createVerifiedSession } from '../api/index.ts'
 import { createNetworkStatus } from '../pwa/networkStatus.ts'
 import { fakeLocation, jsonResponse } from '../test/fetchStub.ts'
-import { createApiStrategy } from './apiStrategy'
-import { cacheFallbackHeader, cacheNames, routeFor } from './routes'
-
-const origin = 'https://mealquest.test'
-
-// FakeCache keys entries by URL, which is all the API cache needs.
-class FakeCache {
-  readonly entries = new Map<string, Response>()
-  async match(request: RequestInfo | URL): Promise<Response | undefined> {
-    return this.entries.get(new Request(request).url)?.clone()
-  }
-  async put(request: RequestInfo | URL, response: Response): Promise<void> {
-    this.entries.set(new Request(request).url, response)
-  }
-}
-
-// FakeExtendableEvent stands in for the worker-only ExtendableEvent,
-// collecting the promises the strategy waits on.
-class FakeExtendableEvent extends Event {
-  readonly pending: Promise<unknown>[] = []
-  waitUntil(promise: Promise<unknown>) {
-    this.pending.push(promise)
-  }
-}
+import { answer, origin, stubFetchThroughWorker, stubWorkerCaches, type FakeCache } from '../test/serviceWorker.ts'
+import { cacheFallbackHeader } from './routes'
 
 let cache: FakeCache
 
 beforeEach(() => {
-  cache = new FakeCache()
-  // Workbox checks its arguments against these worker-only globals.
-  vi.stubGlobal('FetchEvent', class FetchEvent {})
-  vi.stubGlobal('ExtendableEvent', FakeExtendableEvent)
-  const only = (name: string | undefined) => {
-    if (name !== cacheNames.api) throw new Error(`unexpected cache ${name}`)
-    return cache
-  }
-  vi.stubGlobal('caches', {
-    open: async (name: string) => only(name),
-    match: async (request: RequestInfo | URL, options?: MultiCacheQueryOptions) =>
-      only(options?.cacheName).match(request),
-  })
+  cache = stubWorkerCaches()
 })
 
 afterEach(() => {
@@ -58,17 +23,6 @@ async function handle(path: string): Promise<Response> {
   return answer(new Request(new URL(path, origin)))
 }
 
-async function answer(request: Request): Promise<Response> {
-  expect(routeFor({ method: request.method, url: new URL(request.url), mode: 'cors' }, origin)).toEqual({
-    strategy: 'network-first',
-    cacheName: cacheNames.api,
-  })
-  const event = new FakeExtendableEvent('fetch')
-  const response = await createApiStrategy().handle({ request, event: event as unknown as RouteHandlerCallbackOptions['event'] })
-  await Promise.all(event.pending)
-  return response
-}
-
 function recipe(): Response {
   return new Response(JSON.stringify({ id: '01J9ZR', name: 'Chicken tikka masala' }), {
     status: 200,
@@ -107,22 +61,13 @@ describe('previously viewed plan and recipe reads', () => {
   const server: Record<string, unknown> = { '/api/v1/plans/2026-W40': plan, '/api/v1/recipes/01J9ZR': recipe }
   let reachable: boolean
 
-  // The page's fetch goes through the worker's API strategy; the strategy's
-  // own fetch (always a Request) is the network. The API client fetches a
-  // path string, so the two are told apart by the argument's type. As in a
-  // browser, a worker that cannot answer is a network error to the page.
   beforeEach(() => {
     reachable = true
     vi.spyOn(navigator, 'onLine', 'get').mockImplementation(() => reachable)
-    vi.stubGlobal('fetch', async (input: RequestInfo | URL, init?: RequestInit) => {
-      if (!(input instanceof Request)) {
-        return answer(new Request(new URL(String(input), origin), init)).catch((error: unknown) => {
-          throw new TypeError('Failed to fetch', { cause: error })
-        })
-      }
+    stubFetchThroughWorker(async (request) => {
       if (!reachable) throw new TypeError('Failed to fetch')
-      const body = server[new URL(input.url).pathname]
-      if (body === undefined) throw new Error(`unexpected network fetch: ${input.url}`)
+      const body = server[new URL(request.url).pathname]
+      if (body === undefined) throw new Error(`unexpected network fetch: ${request.url}`)
       return jsonResponse(200, body)
     })
   })