feat: scenario function add extanded

Co-authored-by: Minseok Choi <[email protected]>
minsgy · Jun 16, 2024 · 569f9af · 569f9af
1 parent 77edbc3
commit 569f9af
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 10 deletions.
diff --git a/example/src/mocks/browser.ts b/example/src/mocks/browser.ts
@@ -1,5 +1,39 @@
 // src/mocks/browser.js
-import { setupWorker } from "msw/browser"
+import { http, setupWorker } from "msw-devtools"
 import { handlers } from "./handlers"
+import { HttpResponse } from "msw"
 
 export const worker = setupWorker(...handlers)
+
+worker.scenario([
+  {
+    scenarioName: "test",
+    handlers: [
+      http.get("https://jsonplaceholder.typicode.com/todos/1", () => {
+        return HttpResponse.json({
+          firstName: "111",
+          lastName: "111",
+        })
+      }),
+      http.get("https://jsonplaceholder.typicode.com/todos/2", () => {
+        return HttpResponse.json({
+          firstName: "222",
+          lastName: "222",
+        })
+      }),
+    ],
+    isEnabled: true,
+  },
+  {
+    scenarioName: "test2",
+    handlers: [
+      http.get("https://jsonplaceholder.typicode.com/todos/3", () => {
+        return HttpResponse.json({
+          firstName: "333",
+          lastName: "333",
+        })
+      }),
+    ],
+    isEnabled: false,
+  },
+])
diff --git a/src/hooks/useMswDevtoolsState.ts b/src/hooks/useMswDevtoolsState.ts
@@ -53,7 +53,6 @@ export const useMswDevtoolsState = ({
       if (worker) {
         const httpUsedRoutes = generatorRequestHandler(routes)
         worker.resetHandlers(...httpUsedRoutes)
-        // first call is not needed
         if (isMounted.current) {
           onRouteUpdate?.(routes)
         } else {

diff --git a/src/providers/useMswDevtoolsContext.ts b/src/providers/useMswDevtoolsContext.ts
@@ -3,12 +3,14 @@
 import constate from "constate"
 import { useMswDevtoolsState } from "../hooks/useMswDevtoolsState"
 import { useEditorPanelState } from "@/hooks/useEditorPanelState"
-import { MSWDevtoolsProps } from ".."
+import { MSWDevtoolsProps, SetupWorker } from ".."
 
 export type MswDevtoolsContextType = Omit<
   MSWDevtoolsProps,
-  "children" | "position"
->
+  "children" | "position" | "worker"
+> & {
+  worker: ReturnType<SetupWorker>
+}
 
 const [
   MswDevToolsProvider,

diff --git a/src/shared/lib/http.ts → src/shared/lib/http/index.ts b/src/shared/lib/http.ts → src/shared/lib/http/index.ts
@@ -36,12 +36,14 @@ const createProxyMethod = <
         url,
         responseHandlersWithPresets,
       ])
+
       result.presets = (presets: HttpPreset[]) =>
         Reflect.apply(target, thisArg, [
           url,
           responseHandlersWithPresets,
           presets,
         ])
+
       return result
     },
   }) as HttpRequestHandler<
@@ -59,7 +61,7 @@ type HttpPreset = {
   response: any
 }
 
-type HttpRequestHandler<
+export type HttpRequestHandler<
   Params extends PathParams<keyof Params> = PathParams,
   RequestBodyType extends DefaultBodyType = DefaultBodyType,
   ResponseBodyType extends DefaultBodyType = undefined,
@@ -71,11 +73,13 @@ type HttpRequestHandler<
   presets: (presets: HttpPreset[]) => HttpHandler
 }
 
-// 4. custom http object creation
-const http = originHttp as {
+export type Http = {
   [method in keyof typeof originHttp]: HttpRequestHandler
 }
 
+// 4. custom http object creation
+const http = originHttp as Http
+
 // 5. method assignment
 HTTP_METHODS.forEach((method: keyof typeof originHttp) => {
   http[method] = createProxyMethod(method)

diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
@@ -1 +1,2 @@
 export * from "./http"
+export * from "./worker"
diff --git a/src/shared/lib/worker/index.ts b/src/shared/lib/worker/index.ts
@@ -0,0 +1,46 @@
+import {
+  setupWorker as originSetupWorker,
+  type SetupWorker as OriginSetupWorker,
+} from "msw/browser"
+import { RequestHandler } from "msw"
+import type { Http } from "../http"
+
+export type ScenarioRoutePreset = {
+  scenarioName: string
+  handlers: Array<ReturnType<Http[keyof Http]>>
+  isEnabled?: boolean
+}
+
+export type SetupWorker = (
+  ...handlers: Array<RequestHandler>
+) => OriginSetupWorker & {
+  /**
+   * Add a scenario to the worker
+   *
+   */
+  scenario: (scenarioRoutePreset: ScenarioRoutePreset[]) => void
+  listScenarios: () => ScenarioRoutePreset[]
+}
+
+const setupWorker = new Proxy(originSetupWorker, {
+  apply: (target, thisArg, argArray) => {
+    const originWorker = Reflect.apply(target, thisArg, argArray)
+    const scenarios: ScenarioRoutePreset[] = []
+    originWorker.scenario = (scenario: ScenarioRoutePreset[]) => {
+      scenarios.push(...scenario)
+      return scenario
+    }
+    originWorker.listScenarios = () => {
+      return scenarios
+    }
+    return originWorker
+  },
+}) as SetupWorker
+
+export const createScenarioPreset = (
+  scenarioRoutePreset: ScenarioRoutePreset[]
+) => {
+  return scenarioRoutePreset
+}
+
+export { setupWorker }
diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,5 @@
-import { SetupWorker } from "msw/lib/browser"
 import { HttpMethods } from "msw"
+import { SetupWorker } from "./shared/lib/worker"
 
 export interface MSWDevtoolsProps {
   /**
@@ -12,7 +12,7 @@ export interface MSWDevtoolsProps {
   /**
    * An instance of the MSW worker returned from `setupWorker`.
    */
-  worker: SetupWorker
+  worker?: ReturnType<SetupWorker>
   /**
    * This component takes children so that it can ensure the worker has started before rendering the tree. This guarantees that
    * all requests will be intercepted.