feat: presets select 기능 추가

minsgy · Jun 9, 2024 · 4d48163 · 4d48163
1 parent 8da66fd
commit 4d48163
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 11 deletions.
diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -18,6 +18,20 @@ export const handlers = [
           lastName: "Maverick",
         },
       },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
     ]),
   http.post("https://api.example.com/user", () => {
     return HttpResponse.json({ success: true })

diff --git a/src/features/DevtoolsHandlerList.tsx b/src/features/DevtoolsHandlerList.tsx
@@ -16,7 +16,7 @@ import { Label } from "@/shared/ui/label"
 import { Switch } from "@/shared/ui/switch"
 
 export const DevtoolsHandlerList = () => {
-  const { routes, onToggleHandler } = useRoute()
+  const { routes, onToggleHandler, onSelectHandler } = useRoute()
   const { onOpenEditPanel } = useEditorRouteState()
 
   return (
@@ -43,10 +43,11 @@ export const DevtoolsHandlerList = () => {
             <div className="ml-auto flex items-center">
               <InputContainer label="delay" />
               <HandlerSelect
-                options={route.handlers ?? []}
-                defaultValue={
-                  route.handlers?.[route.selectedHandlerIndex]?.id ?? undefined
+                onValueChange={(handlerId) =>
+                  onSelectHandler(route.id, handlerId)
                 }
+                options={route.handlers ?? []}
+                defaultValue={route.handlers?.[0]?.id ?? undefined}
               />
               <Button
                 className="ml-[12px]"

diff --git a/src/hooks/useMswDevtoolsState.ts b/src/hooks/useMswDevtoolsState.ts
@@ -33,6 +33,13 @@ export const useMswDevtoolsState = (initialState: MswDevtoolsContextType) => {
     setRoutes(newRoutes)
   }
 
+  const onSelectHandler = (routeId: string, selectedHandlerId: string) => {
+    const findIndex = routes.findIndex((route) => route.id === routeId)
+    const newRoutes = [...routes]
+    newRoutes[findIndex].selectedHandlerId = selectedHandlerId
+    setRoutes(newRoutes)
+  }
+
   useEffect(() => {
     if (state.worker) {
       const usedRoutes = routes.filter(({ isSkip }) => isSkip)
@@ -48,5 +55,6 @@ export const useMswDevtoolsState = (initialState: MswDevtoolsContextType) => {
     onDeleteHandler,
     onAddHandler,
     onToggleHandler,
+    onSelectHandler,
   }
 }
diff --git a/src/providers/useMswDevtoolsContext.ts b/src/providers/useMswDevtoolsContext.ts
@@ -27,6 +27,7 @@ const [
       onAddHandler,
       onDeleteHandler,
       onToggleHandler,
+      onSelectHandler,
     } = useMswDevtoolsState(initialState)
     const {
       selectedRoute,
@@ -49,6 +50,7 @@ const [
       setIsOpenEditorPanel,
       isOpenEditorPanel,
       onCloseEditPanel,
+      onSelectHandler,
     }
   },
   (value) => value.state.isEnabled,
@@ -60,6 +62,7 @@ const [
     onDeleteHandler: value.onDeleteHandler,
     onAddHandler: value.onAddHandler,
     onToggleHandler: value.onToggleHandler,
+    onSelectHandler: value.onSelectHandler,
   }),
   (value) => ({
     selectedRoute: value.selectedRoute,

diff --git a/src/shared/utils/createHandler.ts b/src/shared/utils/createHandler.ts
@@ -10,12 +10,14 @@ import {
 } from "msw"
 
 export const createHandler = (route: DevtoolsRoute): RequestHandler | null => {
-  const { method, url, handlers, selectedHandlerIndex } = route
+  const { method, url, handlers, selectedHandlerId } = route
 
   const httpHandler = createHttpHandler(method)
   return httpHandler(url, async (info) => {
-    const handler = handlers[selectedHandlerIndex]
-    const jsonResponse = JSON.parse(handler.response)
+    const selectedHandler =
+      handlers.find((handler) => handler.id === selectedHandlerId) ??
+      handlers[0]
+    const jsonResponse = JSON.parse(selectedHandler.response)
 
     if (jsonResponse) {
       recursiveTransform(jsonResponse, (key, value) => {
@@ -35,7 +37,10 @@ export const createHandler = (route: DevtoolsRoute): RequestHandler | null => {
       await delay(route.delay)
     }
 
-    return HttpResponse.json(jsonResponse ?? { message: "No Response" })
+    return HttpResponse.json(jsonResponse ?? { message: "No Response" }, {
+      status: selectedHandler.status,
+      statusText: selectedHandler.description,
+    })
   })
 }
 

diff --git a/src/shared/utils/generatorSerializedRouteHandlers.ts b/src/shared/utils/generatorSerializedRouteHandlers.ts
@@ -18,15 +18,23 @@ export const generatorSerializedRouteHandlers = (
           description: option.description,
           origin: "msw",
         }))
-      : []
+      : [
+          {
+            id: createdUuid(),
+            response: JSON.stringify((route as any).response),
+            status: (route as any).status,
+            description: (route as any).description,
+            origin: "msw",
+          },
+        ]
     return {
       id: createdUuid(),
       url: (route.info as any).path,
       method: (route.info as any).method,
       isSkip: (route.info as any).isSkip ?? true,
       handlers,
       delay: 0,
-      selectedHandlerIndex: 0,
+      selectedHandlerId: handlers[0]?.id,
       description: "MSW Route (auto-generated)",
     }
   })

diff --git a/src/types.ts b/src/types.ts
@@ -45,7 +45,7 @@ export type DevtoolsRoute = {
   url: string
   method: HttpMethods
   handlers: DevtoolsHandler[]
-  selectedHandlerIndex: number
+  selectedHandlerId: string
   delay: number | null
 }