chore(01-01): configure MSW for API mocking

- Add msw as dev dependency for mocking API requests
- Create src/test/mocks/handlers.ts with mock endpoints for patterns, playlists, status
- Create src/test/mocks/server.ts with MSW server setup
- Update src/test/setup.ts to start/stop MSW server and reset handlers between tests

frontend/package-lock.json

@@ -58,6 +58,7 @@
         "globals": "^16.5.0",
         "jsdom": "^27.0.1",
         "lucide-react": "^0.562.0",
+        "msw": "^2.12.7",
         "postcss": "^8.5.6",
         "shadcn": "^3.7.0",
         "tailwind-merge": "^3.4.0",

frontend/package.json

@@ -66,6 +66,7 @@
     "globals": "^16.5.0",
     "jsdom": "^27.0.1",
     "lucide-react": "^0.562.0",
+    "msw": "^2.12.7",
     "postcss": "^8.5.6",
     "shadcn": "^3.7.0",
     "tailwind-merge": "^3.4.0",

frontend/src/test/mocks/handlers.ts

@@ -0,0 +1,47 @@
+import { http, HttpResponse } from 'msw'
+
+// Default mock data
+const mockPatterns = [
+  { name: 'star.thr', path: 'patterns/star.thr' },
+  { name: 'spiral.thr', path: 'patterns/spiral.thr' },
+]
+
+const mockPlaylists = ['default', 'favorites']
+
+const mockStatus = {
+  is_running: false,
+  is_paused: false,
+  current_file: null,
+  speed: 100,
+  connection_status: 'connected',
+}
+
+export const handlers = [
+  // Pattern endpoints
+  http.get('/list_theta_rho_files', () => {
+    return HttpResponse.json(mockPatterns)
+  }),
+
+  http.get('/list_theta_rho_files_with_metadata', () => {
+    return HttpResponse.json(mockPatterns.map(p => ({ ...p, metadata: {} })))
+  }),
+
+  // Playlist endpoints
+  http.get('/list_all_playlists', () => {
+    return HttpResponse.json(mockPlaylists)
+  }),
+
+  // Status endpoint
+  http.get('/serial_status', () => {
+    return HttpResponse.json(mockStatus)
+  }),
+
+  // API prefix versions
+  http.get('/api/patterns', () => {
+    return HttpResponse.json(mockPatterns)
+  }),
+
+  http.get('/api/status', () => {
+    return HttpResponse.json(mockStatus)
+  }),
+]

frontend/src/test/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)

frontend/src/test/setup.ts

@@ -1,8 +1,16 @@
 import '@testing-library/jest-dom/vitest'
 import { cleanup } from '@testing-library/react'
-import { afterEach } from 'vitest'
+import { afterAll, afterEach, beforeAll } from 'vitest'
+import { server } from './mocks/server'
 
-// Cleanup after each test
+// Start MSW server before tests
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+
+// Reset handlers after each test
 afterEach(() => {
   cleanup()
+  server.resetHandlers()
 })
+
+// Close server after all tests
+afterAll(() => server.close())