feat(msw): separated mock handler and made it reusable (#1182)

* feat(msw): separate mock handler and aggregate function definition in `split-tags` and `tags` modes

* feat: support `split` mode

Author: soartec-lab

packages/core/src/types.ts

@@ -526,6 +526,7 @@ export type GeneratorTargetFull = {
   implementationMock: {
     function: string;
     handler: string;
+    handlerName: string;
   };
   importsMock: GeneratorImport[];
   mutators?: GeneratorMutator[];
@@ -538,7 +539,11 @@ export type GeneratorTargetFull = {
 export type GeneratorOperation = {
   imports: GeneratorImport[];
   implementation: string;
-  implementationMock: { function: string; handler: string };
+  implementationMock: {
+    function: string;
+    handler: string;
+    handlerName: string;
+  };
   importsMock: GeneratorImport[];
   tags: string[];
   mutator?: GeneratorMutator;

packages/core/src/writers/target-tags.ts

@@ -39,6 +39,7 @@ const generateTargetTags = (
         implementationMock: {
           function: operation.implementationMock.function,
           handler: operation.implementationMock.handler,
+          handlerName: '  ' + operation.implementationMock.handlerName,
         },
       };
 
@@ -57,6 +58,10 @@ const generateTargetTags = (
         handler:
           currentOperation.implementationMock.handler +
           operation.implementationMock.handler,
+        handlerName:
+          currentOperation.implementationMock.handlerName +
+          ',\n  ' +
+          operation.implementationMock.handlerName,
       },
       mutators: operation.mutator
         ? [...(currentOperation.mutators ?? []), operation.mutator]
@@ -150,9 +155,11 @@ export const generateTargetForTags = (
               implementationMock: {
                 function: target.implementationMock.function,
                 handler:
-                  header.implementationMock +
                   target.implementationMock.handler +
+                  header.implementationMock +
+                  target.implementationMock.handlerName +
                   footer.implementationMock,
+                handlerName: target.implementationMock.handlerName,
               },
               imports: target.imports,
               importsMock: target.importsMock,

packages/core/src/writers/target.ts

@@ -30,6 +30,13 @@ export const generateTarget = (
       acc.implementation += operation.implementation + '\n';
       acc.implementationMock.function += operation.implementationMock.function;
       acc.implementationMock.handler += operation.implementationMock.handler;
+
+      const handlerNameSeparator = acc.implementationMock.handlerName.length
+        ? ',\n  '
+        : '  ';
+      acc.implementationMock.handlerName +=
+        handlerNameSeparator + operation.implementationMock.handlerName;
+
       if (operation.mutator) {
         acc.mutators.push(operation.mutator);
       }
@@ -70,9 +77,12 @@ export const generateTarget = (
           titles,
           output: options,
         });
+
         acc.implementation = header.implementation + acc.implementation;
         acc.implementationMock.handler =
-          header.implementationMock + acc.implementationMock.handler;
+          acc.implementationMock.handler +
+          header.implementationMock +
+          acc.implementationMock.handlerName;
 
         const footer = builder.footer({
           outputClient: options?.client,
@@ -93,6 +103,7 @@ export const generateTarget = (
       implementationMock: {
         function: '',
         handler: '',
+        handlerName: '',
       },
       importsMock: [],
       mutators: [],

packages/mock/src/msw/index.ts

@@ -76,34 +76,36 @@ export const generateMSW = (
 
   const functionName = `get${pascal(operationId)}Mock`;
 
+  const handlerName = `get${pascal(operationId)}MockHandler`;
+
+  const handlerImplementation = `
+export const ${handlerName} = http.${verb}('${route}', async () => {
+  await delay(${getDelay(override, !isFunction(mock) ? mock : undefined)});
+  return new HttpResponse(${
+    value && value !== 'undefined'
+      ? isTextPlain
+        ? `${functionName}()`
+        : `JSON.stringify(${functionName}())`
+      : null
+  },
+    { 
+      status: 200,
+      headers: {
+        'Content-Type': '${isTextPlain ? 'text/plain' : 'application/json'}',
+      }
+    }
+  )
+})
+`;
+
   return {
     implementation: {
       function:
         value && value !== 'undefined'
           ? `export const ${functionName} = () => (${value})\n\n`
           : '',
-      handler: `http.${verb}('${route}', async () => {
-        await delay(${getDelay(
-          override,
-          !isFunction(mock) ? mock : undefined,
-        )});
-        return new HttpResponse(${
-          value && value !== 'undefined'
-            ? isTextPlain
-              ? `${functionName}()`
-              : `JSON.stringify(${functionName}())`
-            : null
-        },
-          { 
-            status: 200,
-            headers: {
-              'Content-Type': '${
-                isTextPlain ? 'text/plain' : 'application/json'
-              }',
-            }
-          }
-        )
-      }),`,
+      handlerName: handlerName,
+      handler: handlerImplementation,
     },
     imports,
   };

packages/orval/src/client.ts

@@ -121,7 +121,7 @@ export const generateClientFooter: GeneratorClientFooter = ({
   if (!footer) {
     return {
       implementation: '',
-      implementationMock: `]\n`,
+      implementationMock: `\n]\n`,
     };
   }