msw 2.10.4 → 2.11.0

package/lib/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.10.4'
+const PACKAGE_VERSION = '2.11.0'
 const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw",
-  "version": "2.10.4",
+  "version": "2.11.0",
   "description": "Seamless REST/GraphQL API mocking library for browser and Node.js.",
   "type": "commonjs",
   "main": "./lib/core/index.js",
@@ -280,7 +280,7 @@
     "vitest-environment-miniflare": "^2.14.4",
     "webpack": "^5.95.0",
     "webpack-http-server": "^0.5.0",
-    "msw": "2.10.4"
+    "msw": "2.11.0"
   },
   "peerDependencies": {
     "typescript": ">= 4.8.x"

package/src/core/graphql.ts

@@ -6,11 +6,12 @@ import {
 import {
   GraphQLHandler,
   GraphQLVariables,
-  ExpectedOperationTypeNode,
+  GraphQLOperationType,
   GraphQLHandlerNameSelector,
   GraphQLResolverExtras,
   GraphQLResponseBody,
   GraphQLQuery,
+  GraphQLCustomPredicate,
 } from './handlers/GraphQLHandler'
 import type { Path } from './utils/matching/matchRequestUrl'
 
@@ -27,10 +28,11 @@ export type GraphQLRequestHandler = <
   Query extends GraphQLQuery = GraphQLQuery,
   Variables extends GraphQLVariables = GraphQLVariables,
 >(
-  operationName:
+  predicate:
     | GraphQLHandlerNameSelector
     | DocumentNode
-    | TypedDocumentNode<Query, Variables>,
+    | TypedDocumentNode<Query, Variables>
+    | GraphQLCustomPredicate,
   resolver: GraphQLResponseResolver<
     [Query] extends [never] ? GraphQLQuery : Query,
     Variables
@@ -48,17 +50,11 @@ export type GraphQLResponseResolver<
 >
 
 function createScopedGraphQLHandler(
-  operationType: ExpectedOperationTypeNode,
+  operationType: GraphQLOperationType,
   url: Path,
 ): GraphQLRequestHandler {
-  return (operationName, resolver, options = {}) => {
-    return new GraphQLHandler(
-      operationType,
-      operationName,
-      url,
-      resolver,
-      options,
-    )
+  return (predicate, resolver, options = {}) => {
+    return new GraphQLHandler(operationType, predicate, url, resolver, options)
   }
 }
 

package/src/core/handlers/GraphQLHandler.test.ts

@@ -1,6 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
+// @vitest-environment jsdom
 import { createRequestId, encodeBuffer } from '@mswjs/interceptors'
 import { OperationTypeNode, parse } from 'graphql'
 import {
@@ -62,7 +60,7 @@ const LOGIN = `
 `
 
 describe('info', () => {
-  test('exposes request handler information for query', () => {
+  it('exposes request handler information for query', () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -75,7 +73,7 @@ describe('info', () => {
     expect(handler.info.operationName).toEqual('GetUser')
   })
 
-  test('exposes request handler information for mutation', () => {
+  it('exposes request handler information for mutation', () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.MUTATION,
       'Login',
@@ -88,7 +86,7 @@ describe('info', () => {
     expect(handler.info.operationName).toEqual('Login')
   })
 
-  test('parses a query operation name from a given DocumentNode', () => {
+  it('parses a query operation name from a given DocumentNode', () => {
     const node = parse(`
       query GetUser {
         user {
@@ -109,7 +107,7 @@ describe('info', () => {
     expect(handler.info).toHaveProperty('operationName', 'GetUser')
   })
 
-  test('parses a mutation operation name from a given DocumentNode', () => {
+  it('parses a mutation operation name from a given DocumentNode', () => {
     const node = parse(`
       mutation Login {
         user {
@@ -129,7 +127,7 @@ describe('info', () => {
     expect(handler.info).toHaveProperty('operationName', 'Login')
   })
 
-  test('throws an exception given a DocumentNode with a mismatched operation type', () => {
+  it('throws an exception given a DocumentNode with a mismatched operation type', () => {
     const node = parse(`
       mutation CreateUser {
         user {
@@ -148,7 +146,7 @@ describe('info', () => {
 
 describe('parse', () => {
   describe('query', () => {
-    test('parses a query without variables (GET)', async () => {
+    it('parses a query without variables (GET)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -174,7 +172,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a query with variables (GET)', async () => {
+    it('parses a query with variables (GET)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -205,7 +203,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a query without variables (POST)', async () => {
+    it('parses a query without variables (POST)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -231,7 +229,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a query with variables (POST)', async () => {
+    it('parses a query with variables (POST)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -264,7 +262,7 @@ describe('parse', () => {
   })
 
   describe('mutation', () => {
-    test('parses a mutation without variables (GET)', async () => {
+    it('parses a mutation without variables (GET)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.MUTATION,
         'GetUser',
@@ -290,7 +288,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a mutation with variables (GET)', async () => {
+    it('parses a mutation with variables (GET)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.MUTATION,
         'GetUser',
@@ -321,7 +319,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a mutation without variables (POST)', async () => {
+    it('parses a mutation without variables (POST)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.MUTATION,
         'GetUser',
@@ -347,7 +345,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a mutation with variables (POST)', async () => {
+    it('parses a mutation with variables (POST)', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.MUTATION,
         'GetUser',
@@ -380,7 +378,7 @@ describe('parse', () => {
   })
 
   describe('with endpoint configuration', () => {
-    test('parses the request and parses grapqhl properties from it when the graphql.link endpoint matches', async () => {
+    it('parses the request and parses grapqhl properties from it when the graphql.link endpoint matches', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -441,7 +439,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a request but does not parse graphql properties from it graphql.link hostname does not match', async () => {
+    it('parses a request but does not parse graphql properties from it graphql.link hostname does not match', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -490,7 +488,7 @@ describe('parse', () => {
       })
     })
 
-    test('parses a request but does not parse graphql properties from it graphql.link pathname does not match', async () => {
+    it('parses a request but does not parse graphql properties from it graphql.link pathname does not match', async () => {
       const handler = new GraphQLHandler(
         OperationTypeNode.QUERY,
         'GetUser',
@@ -542,7 +540,7 @@ describe('parse', () => {
 })
 
 describe('predicate', () => {
-  test('respects operation type', async () => {
+  it('respects operation type', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -557,20 +555,20 @@ describe('predicate', () => {
     })
 
     expect(
-      handler.predicate({
+      await handler.predicate({
         request,
         parsedResult: await handler.parse({ request }),
       }),
     ).toBe(true)
     expect(
-      handler.predicate({
+      await handler.predicate({
         request: alienRequest,
         parsedResult: await handler.parse({ request: alienRequest }),
       }),
     ).toBe(false)
   })
 
-  test('respects operation name', async () => {
+  it('respects operation name', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -590,21 +588,21 @@ describe('predicate', () => {
         `,
     })
 
-    expect(
+    await expect(
       handler.predicate({
         request,
         parsedResult: await handler.parse({ request }),
       }),
-    ).toBe(true)
-    expect(
+    ).resolves.toBe(true)
+    await expect(
       handler.predicate({
         request: alienRequest,
         parsedResult: await handler.parse({ request: alienRequest }),
       }),
-    ).toBe(false)
+    ).resolves.toBe(false)
   })
 
-  test('allows anonymous GraphQL opertaions when using "all" expected operation type', async () => {
+  it('allows anonymous GraphQL opertaions when using "all" expected operation type', async () => {
     const handler = new GraphQLHandler('all', new RegExp('.*'), '*', resolver)
     const request = createPostGraphQLRequest({
       query: `
@@ -617,15 +615,15 @@ describe('predicate', () => {
       `,
     })
 
-    expect(
+    await expect(
       handler.predicate({
         request,
         parsedResult: await handler.parse({ request }),
       }),
-    ).toBe(true)
+    ).resolves.toBe(true)
   })
 
-  test('respects custom endpoint', async () => {
+  it('respects custom endpoint', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -642,23 +640,60 @@ describe('predicate', () => {
       query: GET_USER,
     })
 
-    expect(
+    await expect(
       handler.predicate({
         request,
         parsedResult: await handler.parse({ request }),
       }),
-    ).toBe(true)
-    expect(
+    ).resolves.toBe(true)
+    await expect(
       handler.predicate({
         request: alienRequest,
         parsedResult: await handler.parse({ request: alienRequest }),
       }),
-    ).toBe(false)
+    ).resolves.toBe(false)
+  })
+
+  it('supports custom predicate function', async () => {
+    const handler = new GraphQLHandler(
+      OperationTypeNode.QUERY,
+      ({ query }) => {
+        return query.includes('password')
+      },
+      /.+/,
+      resolver,
+    )
+
+    {
+      const request = createPostGraphQLRequest({
+        query: `query GetUser { user { password } }`,
+      })
+
+      await expect(
+        handler.predicate({
+          request,
+          parsedResult: await handler.parse({ request }),
+        }),
+      ).resolves.toBe(true)
+    }
+
+    {
+      const request = createPostGraphQLRequest({
+        query: `query GetUser { user { nonMatching } }`,
+      })
+
+      await expect(
+        handler.predicate({
+          request,
+          parsedResult: await handler.parse({ request }),
+        }),
+      ).resolves.toBe(false)
+    }
   })
 })
 
 describe('test', () => {
-  test('respects operation type', async () => {
+  it('respects operation type', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -676,7 +711,7 @@ describe('test', () => {
     expect(await handler.test({ request: alienRequest })).toBe(false)
   })
 
-  test('respects operation name', async () => {
+  it('respects operation name', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -696,11 +731,11 @@ describe('test', () => {
         `,
     })
 
-    expect(await handler.test({ request })).toBe(true)
-    expect(await handler.test({ request: alienRequest })).toBe(false)
+    await expect(handler.test({ request })).resolves.toBe(true)
+    await expect(handler.test({ request: alienRequest })).resolves.toBe(false)
   })
 
-  test('respects custom endpoint', async () => {
+  it('respects custom endpoint', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -717,13 +752,13 @@ describe('test', () => {
       query: GET_USER,
     })
 
-    expect(await handler.test({ request })).toBe(true)
-    expect(await handler.test({ request: alienRequest })).toBe(false)
+    await expect(handler.test({ request })).resolves.toBe(true)
+    await expect(handler.test({ request: alienRequest })).resolves.toBe(false)
   })
 })
 
 describe('run', () => {
-  test('returns a mocked response given a matching query', async () => {
+  it('returns a mocked response given a matching query', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -757,18 +792,18 @@ describe('run', () => {
     })
     expect(result!.request.method).toBe('POST')
     expect(result!.request.url).toBe('https://example.com/')
-    expect(await result!.request.json()).toEqual({
+    await expect(result!.request.json()).resolves.toEqual({
       query: GET_USER,
       variables: { userId: 'abc-123' },
     })
     expect(result!.response?.status).toBe(200)
     expect(result!.response?.statusText).toBe('OK')
-    expect(await result!.response?.json()).toEqual({
+    await expect(result!.response?.json()).resolves.toEqual({
       data: { user: { id: 'abc-123' } },
     })
   })
 
-  test('returns null given a non-matching query', async () => {
+  it('returns null given a non-matching query', async () => {
     const handler = new GraphQLHandler(
       OperationTypeNode.QUERY,
       'GetUser',
@@ -818,12 +853,12 @@ describe('request', () => {
     )
     const request = createPostGraphQLRequest({
       query: `
-          query GetAllUsers {
-            user {
-              id
-            }
+        query GetAllUsers {
+          user {
+            id
           }
-        `,
+        }
+      `,
     })
 
     const requestId = createRequestId()

package/src/core/handlers/GraphQLHandler.ts

@@ -21,15 +21,15 @@ import { toPublicUrl } from '../utils/request/toPublicUrl'
 import { devUtils } from '../utils/internal/devUtils'
 import { getAllRequestCookies } from '../utils/request/getRequestCookies'
 
-export type ExpectedOperationTypeNode = OperationTypeNode | 'all'
+export type GraphQLOperationType = OperationTypeNode | 'all'
 export type GraphQLHandlerNameSelector = DocumentNode | RegExp | string
 
 export type GraphQLQuery = Record<string, any> | null
 export type GraphQLVariables = Record<string, any>
 
 export interface GraphQLHandlerInfo extends RequestHandlerDefaultInfo {
-  operationType: ExpectedOperationTypeNode
-  operationName: GraphQLHandlerNameSelector
+  operationType: GraphQLOperationType
+  operationName: GraphQLHandlerNameSelector | GraphQLCustomPredicate
 }
 
 export type GraphQLRequestParsedResult = {
@@ -77,6 +77,21 @@ export type GraphQLResponseBody<BodyType extends DefaultBodyType> =
   | null
   | undefined
 
+export type GraphQLCustomPredicate = (args: {
+  request: Request
+  query: string
+  operationType: GraphQLOperationType
+  operationName: string
+  variables: GraphQLVariables
+  cookies: Record<string, string>
+}) => GraphQLCustomPredicateResult | Promise<GraphQLCustomPredicateResult>
+
+export type GraphQLCustomPredicateResult = boolean | { matches: boolean }
+
+export type GraphQLPredicate =
+  | GraphQLHandlerNameSelector
+  | GraphQLCustomPredicate
+
 export function isDocumentNode(
   value: DocumentNode | any,
 ): value is DocumentNode {
@@ -100,16 +115,16 @@ export class GraphQLHandler extends RequestHandler<
   >()
 
   constructor(
-    operationType: ExpectedOperationTypeNode,
-    operationName: GraphQLHandlerNameSelector,
+    operationType: GraphQLOperationType,
+    predicate: GraphQLPredicate,
     endpoint: Path,
     resolver: ResponseResolver<GraphQLResolverExtras<any>, any, any>,
     options?: RequestHandlerOptions,
   ) {
-    let resolvedOperationName = operationName
+    let resolvedOperationName = predicate
 
-    if (isDocumentNode(operationName)) {
-      const parsedNode = parseDocumentNode(operationName)
+    if (isDocumentNode(resolvedOperationName)) {
+      const parsedNode = parseDocumentNode(resolvedOperationName)
 
       if (parsedNode.operationType !== operationType) {
         throw new Error(
@@ -126,10 +141,15 @@ export class GraphQLHandler extends RequestHandler<
       resolvedOperationName = parsedNode.operationName
     }
 
+    const displayOperationName =
+      typeof resolvedOperationName === 'function'
+        ? '[custom predicate]'
+        : resolvedOperationName
+
     const header =
       operationType === 'all'
         ? `${operationType} (origin: ${endpoint.toString()})`
-        : `${operationType} ${resolvedOperationName} (origin: ${endpoint.toString()})`
+        : `${operationType}${displayOperationName ? ` ${displayOperationName}` : ''} (origin: ${endpoint.toString()})`
 
     super({
       info: {
@@ -175,7 +195,10 @@ export class GraphQLHandler extends RequestHandler<
     const cookies = getAllRequestCookies(args.request)
 
     if (!match.matches) {
-      return { match, cookies }
+      return {
+        match,
+        cookies,
+      }
     }
 
     const parsedResult = await this.parseGraphQLRequestOrGetFromCache(
@@ -183,7 +206,10 @@ export class GraphQLHandler extends RequestHandler<
     )
 
     if (typeof parsedResult === 'undefined') {
-      return { match, cookies }
+      return {
+        match,
+        cookies,
+      }
     }
 
     return {
@@ -196,10 +222,10 @@ export class GraphQLHandler extends RequestHandler<
     }
   }
 
-  predicate(args: {
+  async predicate(args: {
     request: Request
     parsedResult: GraphQLRequestParsedResult
-  }) {
+  }): Promise<boolean> {
     if (args.parsedResult.operationType === undefined) {
       return false
     }
@@ -218,10 +244,16 @@ Consider naming this operation or using "graphql.operation()" request handler to
       this.info.operationType === 'all' ||
       args.parsedResult.operationType === this.info.operationType
 
-    const hasMatchingOperationName =
-      this.info.operationName instanceof RegExp
-        ? this.info.operationName.test(args.parsedResult.operationName || '')
-        : args.parsedResult.operationName === this.info.operationName
+    /**
+     * Check if the operation name matches the outgoing GraphQL request.
+     * @note Unlike the HTTP handler, the custom predicate functions are invoked
+     * during predicate, not parsing, because GraphQL request parsing happens first,
+     * and non-GraphQL requests are filtered out automatically.
+     */
+    const hasMatchingOperationName = await this.matchOperationName({
+      request: args.request,
+      parsedResult: args.parsedResult,
+    })
 
     return (
       args.parsedResult.match.matches &&
@@ -230,12 +262,44 @@ Consider naming this operation or using "graphql.operation()" request handler to
     )
   }
 
+  private async matchOperationName(args: {
+    request: Request
+    parsedResult: GraphQLRequestParsedResult
+  }): Promise<boolean> {
+    if (typeof this.info.operationName === 'function') {
+      const customPredicateResult = await this.info.operationName({
+        request: args.request,
+        ...this.extendResolverArgs({
+          request: args.request,
+          parsedResult: args.parsedResult,
+        }),
+      })
+
+      /**
+       * @note Keep the { matches } signature in case we decide to support path parameters
+       * in GraphQL handlers. If that happens, the custom predicate would have to be moved
+       * to the parsing phase, the same as we have for the HttpHandler, and the user will
+       * have a possibility to return parsed path parameters from the custom predicate.
+       */
+      return typeof customPredicateResult === 'boolean'
+        ? customPredicateResult
+        : customPredicateResult.matches
+    }
+
+    if (this.info.operationName instanceof RegExp) {
+      return this.info.operationName.test(args.parsedResult.operationName || '')
+    }
+
+    return args.parsedResult.operationName === this.info.operationName
+  }
+
   protected extendResolverArgs(args: {
     request: Request
     parsedResult: GraphQLRequestParsedResult
   }) {
     return {
       query: args.parsedResult.query || '',
+      operationType: args.parsedResult.operationType!,
       operationName: args.parsedResult.operationName || '',
       variables: args.parsedResult.variables || {},
       cookies: args.parsedResult.cookies,