msw 2.0.12 → 2.0.14

package/src/core/handlers/GraphQLHandler.ts

@@ -0,0 +1,266 @@
+import type { DocumentNode, GraphQLError, OperationTypeNode } from 'graphql'
+import {
+  DefaultBodyType,
+  RequestHandler,
+  RequestHandlerDefaultInfo,
+  RequestHandlerOptions,
+  ResponseResolver,
+} from './RequestHandler'
+import { getTimestamp } from '../utils/logging/getTimestamp'
+import { getStatusCodeColor } from '../utils/logging/getStatusCodeColor'
+import { serializeRequest } from '../utils/logging/serializeRequest'
+import { serializeResponse } from '../utils/logging/serializeResponse'
+import { Match, matchRequestUrl, Path } from '../utils/matching/matchRequestUrl'
+import {
+  ParsedGraphQLRequest,
+  GraphQLMultipartRequestBody,
+  parseGraphQLRequest,
+  parseDocumentNode,
+} from '../utils/internal/parseGraphQLRequest'
+import { getPublicUrlFromRequest } from '../utils/request/getPublicUrlFromRequest'
+import { devUtils } from '../utils/internal/devUtils'
+import { getAllRequestCookies } from '../utils/request/getRequestCookies'
+
+export type ExpectedOperationTypeNode = OperationTypeNode | 'all'
+export type GraphQLHandlerNameSelector = DocumentNode | RegExp | string
+
+export type GraphQLQuery = Record<string, any>
+export type GraphQLVariables = Record<string, any>
+
+export interface GraphQLHandlerInfo extends RequestHandlerDefaultInfo {
+  operationType: ExpectedOperationTypeNode
+  operationName: GraphQLHandlerNameSelector
+}
+
+export type GraphQLRequestParsedResult = {
+  match: Match
+  cookies: Record<string, string>
+} & (
+  | ParsedGraphQLRequest<GraphQLVariables>
+  /**
+   * An empty version of the ParsedGraphQLRequest
+   * which simplifies the return type of the resolver
+   * when the request is to a non-matching endpoint
+   */
+  | {
+      operationType?: undefined
+      operationName?: undefined
+      query?: undefined
+      variables?: undefined
+    }
+)
+
+export type GraphQLResolverExtras<Variables extends GraphQLVariables> = {
+  query: string
+  operationName: string
+  variables: Variables
+  cookies: Record<string, string>
+}
+
+export type GraphQLRequestBody<VariablesType extends GraphQLVariables> =
+  | GraphQLJsonRequestBody<VariablesType>
+  | GraphQLMultipartRequestBody
+  | Record<string, any>
+  | undefined
+
+export interface GraphQLJsonRequestBody<Variables extends GraphQLVariables> {
+  query: string
+  variables?: Variables
+}
+
+export interface GraphQLResponseBody<BodyType extends DefaultBodyType> {
+  data?: BodyType | null
+  errors?: readonly Partial<GraphQLError>[] | null
+}
+
+export function isDocumentNode(
+  value: DocumentNode | any,
+): value is DocumentNode {
+  if (value == null) {
+    return false
+  }
+
+  return typeof value === 'object' && 'kind' in value && 'definitions' in value
+}
+
+export class GraphQLHandler extends RequestHandler<
+  GraphQLHandlerInfo,
+  GraphQLRequestParsedResult,
+  GraphQLResolverExtras<any>
+> {
+  private endpoint: Path
+
+  static parsedRequestCache = new WeakMap<
+    Request,
+    ParsedGraphQLRequest<GraphQLVariables>
+  >()
+
+  constructor(
+    operationType: ExpectedOperationTypeNode,
+    operationName: GraphQLHandlerNameSelector,
+    endpoint: Path,
+    resolver: ResponseResolver<GraphQLResolverExtras<any>, any, any>,
+    options?: RequestHandlerOptions,
+  ) {
+    let resolvedOperationName = operationName
+
+    if (isDocumentNode(operationName)) {
+      const parsedNode = parseDocumentNode(operationName)
+
+      if (parsedNode.operationType !== operationType) {
+        throw new Error(
+          `Failed to create a GraphQL handler: provided a DocumentNode with a mismatched operation type (expected "${operationType}", but got "${parsedNode.operationType}").`,
+        )
+      }
+
+      if (!parsedNode.operationName) {
+        throw new Error(
+          `Failed to create a GraphQL handler: provided a DocumentNode with no operation name.`,
+        )
+      }
+
+      resolvedOperationName = parsedNode.operationName
+    }
+
+    const header =
+      operationType === 'all'
+        ? `${operationType} (origin: ${endpoint.toString()})`
+        : `${operationType} ${resolvedOperationName} (origin: ${endpoint.toString()})`
+
+    super({
+      info: {
+        header,
+        operationType,
+        operationName: resolvedOperationName,
+      },
+      resolver,
+      options,
+    })
+
+    this.endpoint = endpoint
+  }
+
+  /**
+   * Parses the request body, once per request, cached across all
+   * GraphQL handlers. This is done to avoid multiple parsing of the
+   * request body, which each requires a clone of the request.
+   */
+  async parseGraphQLRequestOrGetFromCache(
+    request: Request,
+  ): Promise<ParsedGraphQLRequest<GraphQLVariables>> {
+    if (!GraphQLHandler.parsedRequestCache.has(request)) {
+      GraphQLHandler.parsedRequestCache.set(
+        request,
+        await parseGraphQLRequest(request).catch((error) => {
+          console.error(error)
+          return undefined
+        }),
+      )
+    }
+
+    return GraphQLHandler.parsedRequestCache.get(request)
+  }
+
+  async parse(args: { request: Request }): Promise<GraphQLRequestParsedResult> {
+    /**
+     * If the request doesn't match a specified endpoint, there's no
+     * need to parse it since there's no case where we would handle this
+     */
+    const match = matchRequestUrl(new URL(args.request.url), this.endpoint)
+    const cookies = getAllRequestCookies(args.request)
+
+    if (!match.matches) {
+      return { match, cookies }
+    }
+
+    const parsedResult = await this.parseGraphQLRequestOrGetFromCache(
+      args.request,
+    )
+
+    if (typeof parsedResult === 'undefined') {
+      return { match, cookies }
+    }
+
+    return {
+      match,
+      cookies,
+      query: parsedResult.query,
+      operationType: parsedResult.operationType,
+      operationName: parsedResult.operationName,
+      variables: parsedResult.variables,
+    }
+  }
+
+  predicate(args: {
+    request: Request
+    parsedResult: GraphQLRequestParsedResult
+  }) {
+    if (args.parsedResult.operationType === undefined) {
+      return false
+    }
+
+    if (!args.parsedResult.operationName && this.info.operationType !== 'all') {
+      const publicUrl = getPublicUrlFromRequest(args.request)
+
+      devUtils.warn(`\
+Failed to intercept a GraphQL request at "${args.request.method} ${publicUrl}": anonymous GraphQL operations are not supported.
+
+Consider naming this operation or using "graphql.operation()" request handler to intercept GraphQL requests regardless of their operation name/type. Read more: https://mswjs.io/docs/api/graphql/#graphqloperationresolver`)
+      return false
+    }
+
+    const hasMatchingOperationType =
+      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
+
+    return (
+      args.parsedResult.match.matches &&
+      hasMatchingOperationType &&
+      hasMatchingOperationName
+    )
+  }
+
+  protected extendResolverArgs(args: {
+    request: Request
+    parsedResult: GraphQLRequestParsedResult
+  }) {
+    return {
+      query: args.parsedResult.query || '',
+      operationName: args.parsedResult.operationName || '',
+      variables: args.parsedResult.variables || {},
+      cookies: args.parsedResult.cookies,
+    }
+  }
+
+  async log(args: {
+    request: Request
+    response: Response
+    parsedResult: GraphQLRequestParsedResult
+  }) {
+    const loggedRequest = await serializeRequest(args.request)
+    const loggedResponse = await serializeResponse(args.response)
+    const statusColor = getStatusCodeColor(loggedResponse.status)
+    const requestInfo = args.parsedResult.operationName
+      ? `${args.parsedResult.operationType} ${args.parsedResult.operationName}`
+      : `anonymous ${args.parsedResult.operationType}`
+
+    console.groupCollapsed(
+      devUtils.formatMessage(
+        `${getTimestamp()} ${requestInfo} (%c${loggedResponse.status} ${
+          loggedResponse.statusText
+        }%c)`,
+      ),
+      `color:${statusColor}`,
+      'color:inherit',
+    )
+    console.log('Request:', loggedRequest)
+    console.log('Handler:', this)
+    console.log('Response:', loggedResponse)
+    console.groupEnd()
+  }
+}

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

@@ -0,0 +1,218 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { HttpHandler, HttpRequestResolverExtras } from './HttpHandler'
+import { HttpResponse } from '..'
+import { ResponseResolver } from './RequestHandler'
+
+const resolver: ResponseResolver<
+  HttpRequestResolverExtras<{ userId: string }>
+> = ({ params }) => {
+  return HttpResponse.json({ userId: params.userId })
+}
+
+describe('info', () => {
+  test('exposes request handler information', () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+
+    expect(handler.info.header).toEqual('GET /user/:userId')
+    expect(handler.info.method).toEqual('GET')
+    expect(handler.info.path).toEqual('/user/:userId')
+    expect(handler.isUsed).toBe(false)
+  })
+})
+
+describe('parse', () => {
+  test('parses a URL given a matching request', async () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+    const request = new Request(new URL('/user/abc-123', location.href))
+
+    expect(await handler.parse({ request })).toEqual({
+      match: {
+        matches: true,
+        params: {
+          userId: 'abc-123',
+        },
+      },
+      cookies: {},
+    })
+  })
+
+  test('parses a URL and ignores the request method', async () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+    const request = new Request(new URL('/user/def-456', location.href), {
+      method: 'POST',
+    })
+
+    expect(await handler.parse({ request })).toEqual({
+      match: {
+        matches: true,
+        params: {
+          userId: 'def-456',
+        },
+      },
+      cookies: {},
+    })
+  })
+
+  test('returns negative match result given a non-matching request', async () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+    const request = new Request(new URL('/login', location.href))
+
+    expect(await handler.parse({ request })).toEqual({
+      match: {
+        matches: false,
+        params: {},
+      },
+      cookies: {},
+    })
+  })
+})
+
+describe('predicate', () => {
+  test('returns true given a matching request', async () => {
+    const handler = new HttpHandler('POST', '/login', resolver)
+    const request = new Request(new URL('/login', location.href), {
+      method: 'POST',
+    })
+
+    expect(
+      handler.predicate({
+        request,
+        parsedResult: await handler.parse({ request }),
+      }),
+    ).toBe(true)
+  })
+
+  test('respects RegExp as the request method', async () => {
+    const handler = new HttpHandler(/.+/, '/login', resolver)
+    const requests = [
+      new Request(new URL('/login', location.href)),
+      new Request(new URL('/login', location.href), { method: 'POST' }),
+      new Request(new URL('/login', location.href), { method: 'DELETE' }),
+    ]
+
+    for (const request of requests) {
+      expect(
+        handler.predicate({
+          request,
+          parsedResult: await handler.parse({ request }),
+        }),
+      ).toBe(true)
+    }
+  })
+
+  test('returns false given a non-matching request', async () => {
+    const handler = new HttpHandler('POST', '/login', resolver)
+    const request = new Request(new URL('/user/abc-123', location.href))
+
+    expect(
+      handler.predicate({
+        request,
+        parsedResult: await handler.parse({ request }),
+      }),
+    ).toBe(false)
+  })
+})
+
+describe('test', () => {
+  test('returns true given a matching request', async () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+    const firstTest = await handler.test({
+      request: new Request(new URL('/user/abc-123', location.href)),
+    })
+    const secondTest = await handler.test({
+      request: new Request(new URL('/user/def-456', location.href)),
+    })
+
+    expect(firstTest).toBe(true)
+    expect(secondTest).toBe(true)
+  })
+
+  test('returns false given a non-matching request', async () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+    const firstTest = await handler.test({
+      request: new Request(new URL('/login', location.href)),
+    })
+    const secondTest = await handler.test({
+      request: new Request(new URL('/user/', location.href)),
+    })
+    const thirdTest = await handler.test({
+      request: new Request(new URL('/user/abc-123/extra', location.href)),
+    })
+
+    expect(firstTest).toBe(false)
+    expect(secondTest).toBe(false)
+    expect(thirdTest).toBe(false)
+  })
+})
+
+describe('run', () => {
+  test('returns a mocked response given a matching request', async () => {
+    const handler = new HttpHandler('GET', '/user/:userId', resolver)
+    const request = new Request(new URL('/user/abc-123', location.href))
+    const result = await handler.run({ request })
+
+    expect(result!.handler).toEqual(handler)
+    expect(result!.parsedResult).toEqual({
+      match: {
+        matches: true,
+        params: {
+          userId: 'abc-123',
+        },
+      },
+      cookies: {},
+    })
+    expect(result!.request.method).toBe('GET')
+    expect(result!.request.url).toBe('http://localhost/user/abc-123')
+    expect(result!.response?.status).toBe(200)
+    expect(result!.response?.statusText).toBe('OK')
+    expect(await result?.response?.json()).toEqual({ userId: 'abc-123' })
+  })
+
+  test('returns null given a non-matching request', async () => {
+    const handler = new HttpHandler('POST', '/login', resolver)
+    const result = await handler.run({
+      request: new Request(new URL('/users', location.href)),
+    })
+
+    expect(result).toBeNull()
+  })
+
+  test('returns an empty "params" object given request with no URL parameters', async () => {
+    const handler = new HttpHandler('GET', '/users', resolver)
+    const result = await handler.run({
+      request: new Request(new URL('/users', location.href)),
+    })
+
+    expect(result?.parsedResult?.match?.params).toEqual({})
+  })
+
+  test('exhauses resolver until its generator completes', async () => {
+    const handler = new HttpHandler('GET', '/users', function* () {
+      let count = 0
+
+      while (count < 5) {
+        count += 1
+        yield HttpResponse.text('pending')
+      }
+
+      return HttpResponse.text('complete')
+    })
+
+    const run = async () => {
+      const result = await handler.run({
+        request: new Request(new URL('/users', location.href)),
+      })
+      return result?.response?.text()
+    }
+
+    expect(await run()).toBe('pending')
+    expect(await run()).toBe('pending')
+    expect(await run()).toBe('pending')
+    expect(await run()).toBe('pending')
+    expect(await run()).toBe('pending')
+    expect(await run()).toBe('complete')
+    expect(await run()).toBe('complete')
+  })
+})

package/src/core/handlers/HttpHandler.ts

@@ -0,0 +1,169 @@
+import { ResponseResolutionContext } from '../utils/getResponse'
+import { devUtils } from '../utils/internal/devUtils'
+import { isStringEqual } from '../utils/internal/isStringEqual'
+import { getStatusCodeColor } from '../utils/logging/getStatusCodeColor'
+import { getTimestamp } from '../utils/logging/getTimestamp'
+import { serializeRequest } from '../utils/logging/serializeRequest'
+import { serializeResponse } from '../utils/logging/serializeResponse'
+import {
+  matchRequestUrl,
+  Match,
+  Path,
+  PathParams,
+} from '../utils/matching/matchRequestUrl'
+import { getPublicUrlFromRequest } from '../utils/request/getPublicUrlFromRequest'
+import { getAllRequestCookies } from '../utils/request/getRequestCookies'
+import { cleanUrl, getSearchParams } from '../utils/url/cleanUrl'
+import {
+  RequestHandler,
+  RequestHandlerDefaultInfo,
+  RequestHandlerOptions,
+  ResponseResolver,
+} from './RequestHandler'
+
+type HttpHandlerMethod = string | RegExp
+
+export interface HttpHandlerInfo extends RequestHandlerDefaultInfo {
+  method: HttpHandlerMethod
+  path: Path
+}
+
+export enum HttpMethods {
+  HEAD = 'HEAD',
+  GET = 'GET',
+  POST = 'POST',
+  PUT = 'PUT',
+  PATCH = 'PATCH',
+  OPTIONS = 'OPTIONS',
+  DELETE = 'DELETE',
+}
+
+export type RequestQuery = {
+  [queryName: string]: string
+}
+
+export type HttpRequestParsedResult = {
+  match: Match
+  cookies: Record<string, string>
+}
+
+export type HttpRequestResolverExtras<Params extends PathParams> = {
+  params: Params
+  cookies: Record<string, string>
+}
+
+/**
+ * Request handler for HTTP requests.
+ * Provides request matching based on method and URL.
+ */
+export class HttpHandler extends RequestHandler<
+  HttpHandlerInfo,
+  HttpRequestParsedResult,
+  HttpRequestResolverExtras<any>
+> {
+  constructor(
+    method: HttpHandlerMethod,
+    path: Path,
+    resolver: ResponseResolver<HttpRequestResolverExtras<any>, any, any>,
+    options?: RequestHandlerOptions,
+  ) {
+    super({
+      info: {
+        header: `${method} ${path}`,
+        path,
+        method,
+      },
+      resolver,
+      options,
+    })
+
+    this.checkRedundantQueryParameters()
+  }
+
+  private checkRedundantQueryParameters() {
+    const { method, path } = this.info
+
+    if (path instanceof RegExp) {
+      return
+    }
+
+    const url = cleanUrl(path)
+
+    // Bypass request handler URLs that have no redundant characters.
+    if (url === path) {
+      return
+    }
+
+    const searchParams = getSearchParams(path)
+    const queryParams: string[] = []
+
+    searchParams.forEach((_, paramName) => {
+      queryParams.push(paramName)
+    })
+
+    devUtils.warn(
+      `Found a redundant usage of query parameters in the request handler URL for "${method} ${path}". Please match against a path instead and access query parameters in the response resolver function using "req.url.searchParams".`,
+    )
+  }
+
+  async parse(args: {
+    request: Request
+    resolutionContext?: ResponseResolutionContext
+  }) {
+    const url = new URL(args.request.url)
+    const match = matchRequestUrl(
+      url,
+      this.info.path,
+      args.resolutionContext?.baseUrl,
+    )
+    const cookies = getAllRequestCookies(args.request)
+
+    return {
+      match,
+      cookies,
+    }
+  }
+
+  predicate(args: { request: Request; parsedResult: HttpRequestParsedResult }) {
+    const hasMatchingMethod = this.matchMethod(args.request.method)
+    const hasMatchingUrl = args.parsedResult.match.matches
+    return hasMatchingMethod && hasMatchingUrl
+  }
+
+  private matchMethod(actualMethod: string): boolean {
+    return this.info.method instanceof RegExp
+      ? this.info.method.test(actualMethod)
+      : isStringEqual(this.info.method, actualMethod)
+  }
+
+  protected extendResolverArgs(args: {
+    request: Request
+    parsedResult: HttpRequestParsedResult
+  }) {
+    return {
+      params: args.parsedResult.match?.params || {},
+      cookies: args.parsedResult.cookies,
+    }
+  }
+
+  async log(args: { request: Request; response: Response }) {
+    const publicUrl = getPublicUrlFromRequest(args.request)
+    const loggedRequest = await serializeRequest(args.request)
+    const loggedResponse = await serializeResponse(args.response)
+    const statusColor = getStatusCodeColor(loggedResponse.status)
+
+    console.groupCollapsed(
+      devUtils.formatMessage(
+        `${getTimestamp()} ${args.request.method} ${publicUrl} (%c${
+          loggedResponse.status
+        } ${loggedResponse.statusText}%c)`,
+      ),
+      `color:${statusColor}`,
+      'color:inherit',
+    )
+    console.log('Request', loggedRequest)
+    console.log('Handler:', this)
+    console.log('Response', loggedResponse)
+    console.groupEnd()
+  }
+}