AP-7179 allow passing custom callback to MswHelper (#630)

oskarski · kibertoad · web-flow · commit 7789245ccc03 · 2025-05-20T13:07:21.000+02:00
* AP-7179 allow passing custom callback to `MswHelper`

* AP-7179 applied CR

* Further refinement

---------

Co-authored-by: Igor Savin &lt;iselwin@gmail.com&gt;
diff --git a/packages/app/universal-testing-utils/README.md b/packages/app/universal-testing-utils/README.md
@@ -98,6 +98,46 @@ describe('MswHelper', () => {
         })
     })
 
+    // use this approach when you need to implement custom logic within mocked endpoint,
+    // e. g. call your own mock
+    describe("mockValidResponseWithImplementation", () => {
+        it("mocks POST request with custom implementation", async () => {
+            const apiMock = vi.fn();
+
+            mswHelper.mockValidResponseWithImplementation(postContractWithPathParams, server, {
+                // setting this to :userId makes the params accessible by name within the callback
+                pathParams: { userId: ':userId' },
+                handleRequest: async (requestInfo) => {
+                    apiMock(await requestInfo.request.json())
+
+                    return {
+                        id: `id-${requestInfo.params.userId}`,
+                    }
+                },
+            })
+
+            const response = await sendByPayloadRoute(
+                wretchClient,
+                postContractWithPathParams,
+                {
+                    pathParams: {
+                        userId: "9",
+                    },
+                    body: { name: "test-name" },
+                },
+            );
+
+            expect(apiMock).toHaveBeenCalledWith({
+                name: "test-name",
+            });
+            expect(response).toMatchInlineSnapshot(`
+              {
+                "id": "9",
+              }
+            `);
+        });
+    })
+
     describe('mockAnyResponse', () => {
         it('mocks POST request without path params', async () => {
             mswHelper.mockAnyResponse(postContract, server, {
diff --git a/packages/app/universal-testing-utils/src/MswHelper.spec.ts b/packages/app/universal-testing-utils/src/MswHelper.spec.ts
@@ -6,6 +6,7 @@ import wretch from 'wretch'
 import {
   getContract,
   getContractWithPathParams,
+  getContractWithQueryParams,
   postContract,
   postContractWithPathParams,
 } from '../test/testContracts.ts'
@@ -197,4 +198,83 @@ describe('MswHelper', () => {
             `)
     })
   })
+
+  describe('mockValidResponseWithImplementation', () => {
+    it('mocks GET request without path params with query params with custom implementation', async () => {
+      mswHelper.mockValidResponseWithImplementation(getContractWithQueryParams, server, {
+        handleRequest: (requestInfo) => {
+          // msw doesn't parse query params on its own
+          const url = new URL(requestInfo.request.url)
+          return {
+            id: url.searchParams.get('yearFrom')!,
+          }
+        },
+      })
+
+      const response = await sendByGetRoute(wretchClient, getContractWithQueryParams, {
+        queryParams: { yearFrom: 2000 },
+      })
+
+      expect(response).toMatchInlineSnapshot(`
+              {
+                "id": "2000",
+              }
+            `)
+    })
+
+    it('mocks POST request without path params with custom implementation', async () => {
+      const mock = vi.fn()
+
+      mswHelper.mockValidResponseWithImplementation(postContract, server, {
+        handleRequest: async (requestInfo) => {
+          const requestBody = await requestInfo.request.json()
+          mock(requestBody)
+
+          return {
+            id: requestBody.name,
+          }
+        },
+      })
+
+      const response = await sendByPayloadRoute(wretchClient, postContract, {
+        body: { name: 'test-name' },
+      })
+
+      expect(mock).toHaveBeenCalledWith({ name: 'test-name' })
+      expect(response).toMatchInlineSnapshot(`
+              {
+                "id": "test-name",
+              }
+            `)
+    })
+
+    it('mocks POST request with path params with custom implementation', async () => {
+      const mock = vi.fn()
+
+      mswHelper.mockValidResponseWithImplementation(postContractWithPathParams, server, {
+        pathParams: { userId: ':userId' },
+        handleRequest: async (requestInfo) => {
+          mock(await requestInfo.request.json())
+
+          return {
+            id: `id-${requestInfo.params.userId}`,
+          }
+        },
+      })
+
+      const response = await sendByPayloadRoute(wretchClient, postContractWithPathParams, {
+        pathParams: {
+          userId: '3',
+        },
+        body: { name: 'test-name' },
+      })
+
+      expect(mock).toHaveBeenCalledWith({ name: 'test-name' })
+      expect(response).toMatchInlineSnapshot(`
+              {
+                "id": "id-3",
+              }
+            `)
+    })
+  })
 })
diff --git a/packages/app/universal-testing-utils/src/MswHelper.ts b/packages/app/universal-testing-utils/src/MswHelper.ts
@@ -1,10 +1,17 @@
 import {
   type CommonRouteDefinition,
+  type InferSchemaInput,
   type InferSchemaOutput,
+  type PayloadRouteDefinition,
   mapRouteToPath,
 } from '@lokalise/api-contracts'
-import type { InferSchemaInput } from '@lokalise/api-contracts'
-import { http, HttpResponse } from 'msw'
+import {
+  http,
+  type DefaultBodyType,
+  HttpResponse,
+  type HttpResponseResolver,
+  type PathParams,
+} from 'msw'
 import type { SetupServerApi } from 'msw/node'
 import type { ZodObject, z } from 'zod'
 
@@ -21,6 +28,26 @@ export type MockParamsNoPath<ResponseBody> = {
   responseBody: ResponseBody
 } & CommonMockParams
 
+export type MockWithImplementationParamsNoPath<
+  Params extends PathParams<keyof Params>,
+  RequestBody extends DefaultBodyType,
+  ResponseBody extends DefaultBodyType,
+> = {
+  handleRequest: (
+    requestInfo: Parameters<HttpResponseResolver<Params, RequestBody, ResponseBody>>[0],
+  ) => ResponseBody | Promise<ResponseBody>
+} & CommonMockParams
+
+export type MockWithImplementationParams<
+  Params extends PathParams<keyof Params>,
+  RequestBody extends DefaultBodyType,
+  ResponseBody extends DefaultBodyType,
+> = {
+  pathParams: Params
+} & MockWithImplementationParamsNoPath<Params, RequestBody, ResponseBody>
+
+type HttpMethod = 'get' | 'delete' | 'post' | 'patch' | 'put'
+
 function joinURL(base: string, path: string): string {
   return `${base.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`
 }
@@ -53,7 +80,7 @@ export class MswHelper {
 
     const resolvedPath = joinURL(this.baseUrl, path)
     // @ts-expect-error
-    const method: 'get' | 'delete' | 'post' | 'patch' | 'put' = contract.method
+    const method: HttpMethod = contract.method
     server.use(
       http[method](resolvedPath, () =>
         HttpResponse.json(params.responseBody, {
@@ -95,7 +122,7 @@ export class MswHelper {
 
     const resolvedPath = joinURL(this.baseUrl, path)
     // @ts-expect-error
-    const method: 'get' | 'delete' | 'post' | 'patch' | 'put' = contract.method
+    const method: HttpMethod = contract.method
     server.use(
       http[method](resolvedPath, () =>
         HttpResponse.json(params.responseBody, {
@@ -105,6 +132,69 @@ export class MswHelper {
     )
   }
 
+  mockValidResponseWithImplementation<
+    ResponseBodySchema extends z.Schema,
+    PathParamsSchema extends z.Schema | undefined,
+    RequestBodySchema extends z.Schema | undefined = undefined,
+    RequestQuerySchema extends z.Schema | undefined = undefined,
+    RequestHeaderSchema extends z.Schema | undefined = undefined,
+    IsNonJSONResponseExpected extends boolean = false,
+    IsEmptyResponseExpected extends boolean = false,
+  >(
+    contract:
+      | CommonRouteDefinition<
+          InferSchemaOutput<PathParamsSchema>,
+          ResponseBodySchema,
+          PathParamsSchema,
+          RequestQuerySchema,
+          RequestHeaderSchema,
+          IsNonJSONResponseExpected,
+          IsEmptyResponseExpected
+        >
+      | PayloadRouteDefinition<InferSchemaOutput<PathParamsSchema>, RequestBodySchema>,
+    server: SetupServerApi,
+    params: PathParamsSchema extends undefined
+      ? MockWithImplementationParamsNoPath<
+          PathParams,
+          InferSchemaInput<RequestBodySchema>,
+          InferSchemaInput<ResponseBodySchema>
+        >
+      : MockWithImplementationParams<
+          InferSchemaInput<PathParamsSchema>,
+          InferSchemaInput<RequestBodySchema>,
+          InferSchemaInput<ResponseBodySchema>
+        >,
+  ): void {
+    const path = contract.requestPathParamsSchema
+      ? // @ts-expect-error this is safe
+        contract.pathResolver(params.pathParams)
+      : mapRouteToPath(contract)
+
+    const resolvedPath = joinURL(this.baseUrl, path)
+
+    // @ts-expect-error
+    const method: HttpMethod = contract.method
+
+    server.use(
+      http[method](resolvedPath, async (requestInfo) => {
+        return HttpResponse.json(
+          await params.handleRequest(
+            requestInfo as Parameters<
+              HttpResponseResolver<
+                InferSchemaInput<PathParamsSchema>,
+                InferSchemaInput<RequestBodySchema>,
+                InferSchemaInput<ResponseBodySchema>
+              >
+            >[0],
+          ),
+          {
+            status: params.responseCode,
+          },
+        )
+      }),
+    )
+  }
+
   mockAnyResponse<PathParamsSchema extends z.Schema | undefined>(
     contract: CommonRouteDefinition<
       InferSchemaOutput<PathParamsSchema>,
diff --git a/packages/app/universal-testing-utils/test/testContracts.ts b/packages/app/universal-testing-utils/test/testContracts.ts
@@ -10,6 +10,9 @@ const RESPONSE_BODY_SCHEMA = z.object({
 const PATH_PARAMS_SCHEMA = z.object({
   userId: z.string(),
 })
+const QUERY_PARAMS_SCHEMA = z.object({
+  yearFrom: z.coerce.number(),
+})
 
 export const postContract = buildPayloadRoute({
   successResponseBodySchema: RESPONSE_BODY_SCHEMA,
@@ -31,6 +34,16 @@ export const getContract = buildGetRoute({
   pathResolver: () => '/',
 })
 
+export const getContractWithQueryParams = buildGetRoute({
+  successResponseBodySchema: RESPONSE_BODY_SCHEMA,
+  description: 'some description',
+  requestQuerySchema: QUERY_PARAMS_SCHEMA,
+  responseSchemasByStatusCode: {
+    200: RESPONSE_BODY_SCHEMA,
+  },
+  pathResolver: () => '/',
+})
+
 export const postContractWithPathParams = buildPayloadRoute({
   successResponseBodySchema: RESPONSE_BODY_SCHEMA,
   requestBodySchema: REQUEST_BODY_SCHEMA,
