Upgrade msw-storybook-addon to v3 and msw to 2.15.0

AGENTS.md

@@ -181,7 +181,7 @@ Every Vue component that is added or changed must come with both:
 
 Split the two by what each can verify reliably:
 
-- Stories cover rendering, props and validation messages. Note that MSW request mocking is **not** currently reliable under `vitest --project=storybook` — handlers registered for `*/api/recipe` are not served, so the request fails at the network layer. Do not write a story that asserts on a mocked response body.
+- Stories cover rendering, props and validation messages, including MSW-mocked response bodies — register handlers per-story via the `beforeEach({ msw }) { msw.use(handler); }` hook (not the legacy `parameters.msw` object, which `msw-storybook-addon`'s CSF-Next API silently ignores). See `RecipeList.stories.ts` and `RecipeDetail.stories.ts` for examples.
 - Unit tests cover request payloads, success/error branches and routing, by mocking `@/services/recipe-api` (the API layer) so the real service/TanStack Query wiring is still exercised. See `src/components/organisms/recipe/new-recipe-form.test.ts`.
 
 ### Style & Linting

ui/menu-website/.storybook/msw-handlers.ts

@@ -54,8 +54,8 @@ export const recipeDetailLoadingHandler = http.get(recipeDetailPath, async () =>
 export const recipesSuccessHandler = http.get(recipePath, async () => {
   await delay(150);
   return HttpResponse.json([
-    { id: '1', name: 'Chocolate Cake' },
-    { id: '2', name: 'Tomato Soup' },
+    { id: 1, title: 'Chocolate Cake' },
+    { id: 2, title: 'Tomato Soup' },
   ]);
 });
 
@@ -72,8 +72,8 @@ export const recipesErrorHandler = http.get(recipePath, async () => {
 export const recipesLoadingHandler = http.get(recipePath, async () => {
   await delay(3000);
   return HttpResponse.json([
-    { id: '1', name: 'Chocolate Cake' },
-    { id: '2', name: 'Tomato Soup' },
+    { id: 1, title: 'Chocolate Cake' },
+    { id: 2, title: 'Tomato Soup' },
   ]);
 });
 

ui/menu-website/.storybook/preview.ts

@@ -4,7 +4,8 @@ import addonLinks from '@storybook/addon-links';
 import { setup, definePreview } from '@storybook/vue3-vite';
 import { QLayout, QPageContainer, Quasar } from 'quasar';
 import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
-import { initialize, mswLoader } from 'msw-storybook-addon';
+import { setupWorker } from 'msw/browser';
+import addonMsw from 'msw-storybook-addon';
 import { router } from './router';
 import { ingredientUnitsHandler } from './msw-handlers';
 
@@ -14,14 +15,6 @@ import '@quasar/extras/material-icons/material-icons.css';
 import 'quasar/src/css/index.sass'; // as suggested in https://quasar.dev/start/vite-plugin
 import '../src/css/app.scss';
 
-initialize({
-  serviceWorker: {
-    url: '/mockServiceWorker.js',
-  },
-  onUnhandledRequest: 'bypass',
-  quiet: true,
-});
-
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -56,8 +49,6 @@ export const withPageLayout = () => ({
 });
 
 export default definePreview({
-  loaders: [mswLoader],
-
   initialGlobals: {
     backgrounds: { value: 'light' },
   },
@@ -72,6 +63,10 @@ export default definePreview({
     }),
   ],
 
+  beforeEach({ msw }) {
+    msw.use(ingredientUnitsHandler);
+  },
+
   parameters: {
     controls: {
       matchers: {
@@ -104,10 +99,6 @@ export default definePreview({
       },
     },
 
-    msw: {
-      handlers: [ingredientUnitsHandler],
-    },
-
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations
@@ -116,6 +107,21 @@ export default definePreview({
     },
   },
 
-  addons: [addonLinks(), addonDocs(), addonA11y()],
+  addons: [
+    addonLinks(),
+    addonDocs(),
+    addonA11y(),
+    addonMsw(async () => {
+      const worker = setupWorker();
+      await worker.start({
+        serviceWorker: {
+          url: '/mockServiceWorker.js',
+        },
+        onUnhandledRequest: 'bypass',
+        quiet: true,
+      });
+      return worker;
+    }),
+  ],
 });
 

ui/menu-website/package.json

@@ -65,8 +65,8 @@
     "globals": "^17.9.0",
     "jiti": "^2.7.0",
     "jsdom": "^30.0.1",
-    "msw": "^2.12.14",
-    "msw-storybook-addon": "^2.0.6",
+    "msw": "^2.15.0",
+    "msw-storybook-addon": "^3.0.0",
     "npm-run-all2": "^8.0.4",
     "openapi-typescript": "^7.13.0",
     "playwright": "^1.62.1",