fix: unknown handler remove and passthrough options add

minsgy · Jun 10, 2024 · d4922c2 · d4922c2
1 parent cc74db7
commit d4922c2
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 208 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,7 +9,7 @@ function App() {
     queryKey: ["test"],
     queryFn: async () => {
       try {
-        const response = await fetch("https://json-test.com/v1/user")
+        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
         setError(null)
         return response.json()
       } catch (e) {

diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -3,162 +3,7 @@ import { http } from "msw-devtools"
 
 export const handlers = [
   http
-    .get("https://json-test.com/v1/user", () => {
-      return HttpResponse.json({
-        firstName: "zzz",
-        lastName: "zzz",
-      })
-    })
-    .presets([
-      {
-        status: 200,
-        description: "Success",
-        response: {
-          firstName: "John",
-          lastName: "Maverick",
-        },
-      },
-      {
-        status: 401,
-        description: "Unauthorized",
-        response: {
-          error: "Unauthorized",
-        },
-      },
-      {
-        status: 404,
-        description: "Not Found",
-        response: {
-          error: "Not Found",
-        },
-      },
-    ]),
-  http
-    .post("https://json-test.com/v1/user", () => {
-      return HttpResponse.json({
-        firstName: "zzz",
-        lastName: "zzz",
-      })
-    })
-    .presets([
-      {
-        status: 200,
-        description: "Success",
-        response: {
-          firstName: "John",
-          lastName: "Maverick",
-        },
-      },
-      {
-        status: 401,
-        description: "Unauthorized",
-        response: {
-          error: "Unauthorized",
-        },
-      },
-      {
-        status: 404,
-        description: "Not Found",
-        response: {
-          error: "Not Found",
-        },
-      },
-    ]),
-  http
-    .patch("https://json-test.com/v1/user", () => {
-      return HttpResponse.json({
-        firstName: "zzz",
-        lastName: "zzz",
-      })
-    })
-    .presets([
-      {
-        status: 200,
-        description: "Success",
-        response: {
-          firstName: "John",
-          lastName: "Maverick",
-        },
-      },
-      {
-        status: 401,
-        description: "Unauthorized",
-        response: {
-          error: "Unauthorized",
-        },
-      },
-      {
-        status: 404,
-        description: "Not Found",
-        response: {
-          error: "Not Found",
-        },
-      },
-    ]),
-  http
-    .put("https://json-test.com/v1/user", () => {
-      return HttpResponse.json({
-        firstName: "zzz",
-        lastName: "zzz",
-      })
-    })
-    .presets([
-      {
-        status: 200,
-        description: "Success",
-        response: {
-          firstName: "John",
-          lastName: "Maverick",
-        },
-      },
-      {
-        status: 401,
-        description: "Unauthorized",
-        response: {
-          error: "Unauthorized",
-        },
-      },
-      {
-        status: 404,
-        description: "Not Found",
-        response: {
-          error: "Not Found",
-        },
-      },
-    ]),
-  http
-    .put("https://json-test.com/v1/usertttt", () => {
-      return HttpResponse.json({
-        firstName: "zzz",
-        lastName: "zzz",
-      })
-    })
-    .presets([
-      {
-        status: 200,
-        description: "Success",
-        response: {
-          firstName: "John",
-          lastName: "Maverick",
-        },
-      },
-      {
-        status: 401,
-        description: "Unauthorized",
-        response: {
-          error: "Unauthorized",
-        },
-      },
-      {
-        status: 404,
-        description: "Not Found",
-        response: {
-          error: "Not Found",
-        },
-      },
-    ]),
-  http
-    .put("https://json-test.com/v1/usertttttttttt", () => {
+    .get("https://jsonplaceholder.typicode.com/todos/1", () => {
       return HttpResponse.json({
         firstName: "zzz",
         lastName: "zzz",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/hooks/useMswDevtoolsState.ts b/src/hooks/useMswDevtoolsState.ts
@@ -47,12 +47,11 @@ export const useMswDevtoolsState = ({
 
   useEffect(() => {
     if (state.worker) {
-      const usedRoutes = routes.filter(({ enabled }) => enabled)
-      const httpUsedRoutes = generatorRequestHandler(usedRoutes)
+      const httpUsedRoutes = generatorRequestHandler(routes)
       state.worker.resetHandlers(...httpUsedRoutes)
       // first call is not needed
       if (isMounted.current) {
-        onRouteUpdate?.(usedRoutes.filter(({ isHidden }) => !isHidden))
+        onRouteUpdate?.(routes)
       } else {
         isMounted.current = true
       }
@@ -62,7 +61,7 @@ export const useMswDevtoolsState = ({
   return {
     state,
     setEnabled,
-    routes: routes.filter(({ isHidden }) => !isHidden),
+    routes,
     setRoutes,
     onDeleteHandler,
     onAddHandler,

diff --git a/src/shared/icons.tsx b/src/shared/icons.tsx
@@ -10,14 +10,14 @@ export const MswLogo = () => {
       <g
         id="msw-logo"
         stroke="none"
-        stroke-width="1"
+        strokeWidth="1"
         fill="none"
-        fill-rule="evenodd"
+        fillRule="evenodd"
       >
         <g
           id="Group"
           transform="translate(63.000000, 60.500000) rotate(-42.000000) translate(-63.000000, -60.500000) translate(-8.000000, -21.000000)"
-          stroke-width="21"
+          strokeWidth="21"
         >
           <path
             d="M75.1396666,46.668325 C78.6024919,46.668325 81.7374919,48.0719124 84.0067856,50.341206 C86.2760793,52.6104997 87.6796666,55.7454997 87.6796666,59.208325 C87.6796666,62.3036716 86.534852,65.2896505 84.4655356,67.5916279 L84.4655356,67.5916279 L48.2320648,107.898963 C47.5120934,108.699884 46.5356444,109.133155 45.5389581,109.186204 C44.5422718,109.239252 43.5253482,108.912077 42.7244276,108.192106 L42.7244276,108.192106 L6.19781435,67.5916279 C3.88282918,65.0163603 2.8308369,61.7465599 3.00140781,58.5418302 C3.17197873,55.3371004 4.56511284,52.1974412 7.14038046,49.882456 C9.44235787,47.8131396 12.4283368,46.668325 15.5236833,46.668325 L15.5236833,46.668325 Z"

diff --git a/src/shared/utils/createHandler.ts b/src/shared/utils/createHandler.ts
@@ -7,19 +7,25 @@ import {
   HttpResponse,
   RequestHandler,
   delay,
+  passthrough,
 } from "msw"
 
 export const createHandler = (
   route: EnhancedDevtoolsRoute
 ): RequestHandler | null => {
-  const { method, url, handlers, selectedHandlerId, isHidden } = route
+  const { method, url, handlers, selectedHandlerId, isHidden, enabled } = route
 
   const httpHandler = createHttpHandler(method)
   return httpHandler(url, async (info) => {
     const selectedHandler =
       handlers.find((handler) => handler.id === selectedHandlerId) ??
       handlers[0]
 
+
+    if (!enabled) {
+      return passthrough()
+    }
+
     if (isHidden) {
       return new HttpResponse()
     }