feat: Scenario Feature (#13)

minsgy · Jun 19, 2024 · 5661c89 · 5661c89
2 parents 77edbc3 + 7fb48ff
commit 5661c89
Show file tree

Hide file tree

Showing 23 changed files with 972 additions and 653 deletions.
diff --git a/example/pnpm-lock.yaml b/example/pnpm-lock.yaml
diff --git a/example/public/mockServiceWorker.js b/example/public/mockServiceWorker.js
@@ -8,20 +8,20 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = "2.2.13"
-const INTEGRITY_CHECKSUM = "26357c79639bfa20d64c0efca2a87423"
-const IS_MOCKED_RESPONSE = Symbol("isMockedResponse")
+const PACKAGE_VERSION = '2.2.13'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
-self.addEventListener("install", function () {
+self.addEventListener('install', function () {
   self.skipWaiting()
 })
 
-self.addEventListener("activate", function (event) {
+self.addEventListener('activate', function (event) {
   event.waitUntil(self.clients.claim())
 })
 
-self.addEventListener("message", async function (event) {
+self.addEventListener('message', async function (event) {
   const clientId = event.source.id
 
   if (!clientId || !self.clients) {
@@ -35,20 +35,20 @@ self.addEventListener("message", async function (event) {
   }
 
   const allClients = await self.clients.matchAll({
-    type: "window",
+    type: 'window',
   })
 
   switch (event.data) {
-    case "KEEPALIVE_REQUEST": {
+    case 'KEEPALIVE_REQUEST': {
       sendToClient(client, {
-        type: "KEEPALIVE_RESPONSE",
+        type: 'KEEPALIVE_RESPONSE',
       })
       break
     }
 
-    case "INTEGRITY_CHECK_REQUEST": {
+    case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
-        type: "INTEGRITY_CHECK_RESPONSE",
+        type: 'INTEGRITY_CHECK_RESPONSE',
         payload: {
           packageVersion: PACKAGE_VERSION,
           checksum: INTEGRITY_CHECKSUM,
@@ -57,22 +57,22 @@ self.addEventListener("message", async function (event) {
       break
     }
 
-    case "MOCK_ACTIVATE": {
+    case 'MOCK_ACTIVATE': {
       activeClientIds.add(clientId)
 
       sendToClient(client, {
-        type: "MOCKING_ENABLED",
+        type: 'MOCKING_ENABLED',
         payload: true,
       })
       break
     }
 
-    case "MOCK_DEACTIVATE": {
+    case 'MOCK_DEACTIVATE': {
       activeClientIds.delete(clientId)
       break
     }
 
-    case "CLIENT_CLOSED": {
+    case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId)
 
       const remainingClients = allClients.filter((client) => {
@@ -89,17 +89,17 @@ self.addEventListener("message", async function (event) {
   }
 })
 
-self.addEventListener("fetch", function (event) {
+self.addEventListener('fetch', function (event) {
   const { request } = event
 
   // Bypass navigation requests.
-  if (request.mode === "navigate") {
+  if (request.mode === 'navigate') {
     return
   }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
     return
   }
 
@@ -129,7 +129,7 @@ async function handleRequest(event, requestId) {
       sendToClient(
         client,
         {
-          type: "RESPONSE",
+          type: 'RESPONSE',
           payload: {
             requestId,
             isMockedResponse: IS_MOCKED_RESPONSE in response,
@@ -140,7 +140,7 @@ async function handleRequest(event, requestId) {
             headers: Object.fromEntries(responseClone.headers.entries()),
           },
         },
-        [responseClone.body]
+        [responseClone.body],
       )
     })()
   }
@@ -155,18 +155,18 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (client?.frameType === "top-level") {
+  if (client?.frameType === 'top-level') {
     return client
   }
 
   const allClients = await self.clients.matchAll({
-    type: "window",
+    type: 'window',
   })
 
   return allClients
     .filter((client) => {
       // Get only those clients that are currently visible.
-      return client.visibilityState === "visible"
+      return client.visibilityState === 'visible'
     })
     .find((client) => {
       // Find the client ID that's recorded in the
@@ -188,7 +188,7 @@ async function getResponse(event, client, requestId) {
     // Remove internal MSW request header so the passthrough request
     // complies with any potential CORS preflight checks on the server.
     // Some servers forbid unknown request headers.
-    delete headers["x-msw-intention"]
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }
@@ -211,7 +211,7 @@ async function getResponse(event, client, requestId) {
   const clientMessage = await sendToClient(
     client,
     {
-      type: "REQUEST",
+      type: 'REQUEST',
       payload: {
         id: requestId,
         url: request.url,
@@ -229,15 +229,15 @@ async function getResponse(event, client, requestId) {
         keepalive: request.keepalive,
       },
     },
-    [requestBuffer]
+    [requestBuffer],
   )
 
   switch (clientMessage.type) {
-    case "MOCK_RESPONSE": {
+    case 'MOCK_RESPONSE': {
       return respondWithMock(clientMessage.data)
     }
 
-    case "PASSTHROUGH": {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }
@@ -259,7 +259,7 @@ function sendToClient(client, message, transferrables = []) {
 
     client.postMessage(
       message,
-      [channel.port2].concat(transferrables.filter(Boolean))
+      [channel.port2].concat(transferrables.filter(Boolean)),
     )
   })
 }

diff --git a/example/src/mocks/browser.ts b/example/src/mocks/browser.ts
@@ -1,5 +1,48 @@
 // 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([
+  {
+    description: "장바구니 상품 추가 시나리오",
+    handlers: [
+      http
+        .get("https://jsonplaceholder.typicode.com/cart", () => {
+          return HttpResponse.json({
+            firstName: "111",
+            lastName: "111",
+          })
+        })
+        .presets([
+          {
+            status: 200,
+            description: "장바구니 상품 추가",
+            response: {
+              firstName: "111",
+              lastName: "111",
+            },
+          },
+        ]),
+      http.post("https://jsonplaceholder.typicode.com/cart/1", () => {
+        return HttpResponse.json({
+          firstName: "222",
+          lastName: "222",
+        })
+      }),
+    ],
+  },
+  {
+    description: "장바구니 상품 삭제 시나리오",
+    handlers: [
+      http.delete("https://jsonplaceholder.typicode.com/cart/1", () => {
+        return HttpResponse.json({
+          firstName: "333",
+          lastName: "333",
+        })
+      }),
+    ],
+  },
+])
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@uiw/codemirror-theme-github": "^4.22.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/MSWDevtools.tsx b/src/app/MSWDevtools.tsx
@@ -2,6 +2,8 @@ import "@/shared/styles/global.css"
 import { MSWDevtoolsProps } from "../types"
 import { MswDevToolsProvider } from "@/providers/useMswDevtoolsContext"
 import { MSWDevtoolsPanel } from "@/features/MSWDevtoolsPanel"
+import { useState } from "react"
+import { DevtoolsFloatingButton } from "@/features/DevtoolsFloatingButton"
 
 export const MSWDevtools = ({
   isEnabled = false,
@@ -11,6 +13,8 @@ export const MSWDevtools = ({
   position,
   initialOpen = false,
 }: MSWDevtoolsProps) => {
+  const [isOpened, setIsOpened] = useState(initialOpen)
+
   if (isEnabled && !worker) {
     console.warn(
       "worker is not defined. Please pass in a worker instance from setupWorker(...handlers)"
@@ -28,7 +32,20 @@ export const MSWDevtools = ({
         isEnabled={isEnabled}
         worker={worker}
         onRouteUpdate={onRouteUpdate}>
-        <MSWDevtoolsPanel position={position} />
+        {isOpened ? (
+          <MSWDevtoolsPanel
+            onCloseDevtools={() => {
+              setIsOpened(false)
+            }}
+          />
+        ) : (
+          <DevtoolsFloatingButton
+            position={position}
+            onClick={() => {
+              setIsOpened(true)
+            }}
+          />
+        )}
       </MswDevToolsProvider>
       {children}
     </>

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,5 +1,3 @@
 import { HttpMethods } from "msw"
 
 export const ROUTE_METHODS = Object.values(HttpMethods)
-
-export const MENU_TABS = ["handlers", "config"] as const
diff --git a/src/features/DevtoolsFloatingButton.tsx b/src/features/DevtoolsFloatingButton.tsx
@@ -6,7 +6,7 @@ import { match } from "ts-pattern"
 import { Position } from ".."
 
 type DevtoolsFloatingButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  position: Position
+  position?: Position
 }
 
 export const DevtoolsFloatingButton = ({