msw 2.0.12 → 2.0.13

package/src/core/utils/internal/parseGraphQLRequest.ts

@@ -0,0 +1,205 @@
+import type {
+  DocumentNode,
+  OperationDefinitionNode,
+  OperationTypeNode,
+} from 'graphql'
+import { parse } from 'graphql'
+import type { GraphQLVariables } from '../../handlers/GraphQLHandler'
+import { getPublicUrlFromRequest } from '../request/getPublicUrlFromRequest'
+import { devUtils } from './devUtils'
+import { jsonParse } from './jsonParse'
+import { parseMultipartData } from './parseMultipartData'
+
+interface GraphQLInput {
+  query: string | null
+  variables?: GraphQLVariables
+}
+
+export interface ParsedGraphQLQuery {
+  operationType: OperationTypeNode
+  operationName?: string
+}
+
+export type ParsedGraphQLRequest<
+  VariablesType extends GraphQLVariables = GraphQLVariables,
+> =
+  | (ParsedGraphQLQuery & {
+      query: string
+      variables?: VariablesType
+    })
+  | undefined
+
+export function parseDocumentNode(node: DocumentNode): ParsedGraphQLQuery {
+  const operationDef = node.definitions.find((definition) => {
+    return definition.kind === 'OperationDefinition'
+  }) as OperationDefinitionNode
+
+  return {
+    operationType: operationDef?.operation,
+    operationName: operationDef?.name?.value,
+  }
+}
+
+function parseQuery(query: string): ParsedGraphQLQuery | Error {
+  try {
+    const ast = parse(query)
+    return parseDocumentNode(ast)
+  } catch (error) {
+    return error as Error
+  }
+}
+
+export type GraphQLParsedOperationsMap = Record<string, string[]>
+export type GraphQLMultipartRequestBody = {
+  operations: string
+  map?: string
+} & {
+  [fileName: string]: File
+}
+
+function extractMultipartVariables<VariablesType extends GraphQLVariables>(
+  variables: VariablesType,
+  map: GraphQLParsedOperationsMap,
+  files: Record<string, File>,
+) {
+  const operations = { variables }
+
+  for (const [key, pathArray] of Object.entries(map)) {
+    if (!(key in files)) {
+      throw new Error(`Given files do not have a key '${key}' .`)
+    }
+
+    for (const dotPath of pathArray) {
+      const [lastPath, ...reversedPaths] = dotPath.split('.').reverse()
+      const paths = reversedPaths.reverse()
+      let target: Record<string, any> = operations
+
+      for (const path of paths) {
+        if (!(path in target)) {
+          throw new Error(`Property '${paths}' is not in operations.`)
+        }
+
+        target = target[path]
+      }
+
+      target[lastPath] = files[key]
+    }
+  }
+
+  return operations.variables
+}
+
+async function getGraphQLInput(request: Request): Promise<GraphQLInput | null> {
+  switch (request.method) {
+    case 'GET': {
+      const url = new URL(request.url)
+      const query = url.searchParams.get('query')
+      const variables = url.searchParams.get('variables') || ''
+
+      return {
+        query,
+        variables: jsonParse(variables),
+      }
+    }
+
+    case 'POST': {
+      // Clone the request so we could read its body without locking
+      // the body stream to the downward consumers.
+      const requestClone = request.clone()
+
+      // Handle multipart body GraphQL operations.
+      if (
+        request.headers.get('content-type')?.includes('multipart/form-data')
+      ) {
+        const responseJson = parseMultipartData<GraphQLMultipartRequestBody>(
+          await requestClone.text(),
+          request.headers,
+        )
+
+        if (!responseJson) {
+          return null
+        }
+
+        const { operations, map, ...files } = responseJson
+        const parsedOperations =
+          jsonParse<{ query?: string; variables?: GraphQLVariables }>(
+            operations,
+          ) || {}
+
+        if (!parsedOperations.query) {
+          return null
+        }
+
+        const parsedMap = jsonParse<GraphQLParsedOperationsMap>(map || '') || {}
+        const variables = parsedOperations.variables
+          ? extractMultipartVariables(
+              parsedOperations.variables,
+              parsedMap,
+              files,
+            )
+          : {}
+
+        return {
+          query: parsedOperations.query,
+          variables,
+        }
+      }
+
+      // Handle plain POST GraphQL operations.
+      const requestJson: {
+        query: string
+        variables?: GraphQLVariables
+        operations?: any /** @todo Annotate this */
+      } = await requestClone.json().catch(() => null)
+
+      if (requestJson?.query) {
+        const { query, variables } = requestJson
+
+        return {
+          query,
+          variables,
+        }
+      }
+    }
+
+    default:
+      return null
+  }
+}
+
+/**
+ * Determines if a given request can be considered a GraphQL request.
+ * Does not parse the query and does not guarantee its validity.
+ */
+export async function parseGraphQLRequest(
+  request: Request,
+): Promise<ParsedGraphQLRequest> {
+  const input = await getGraphQLInput(request)
+
+  if (!input || !input.query) {
+    return
+  }
+
+  const { query, variables } = input
+  const parsedResult = parseQuery(query)
+
+  if (parsedResult instanceof Error) {
+    const requestPublicUrl = getPublicUrlFromRequest(request)
+
+    throw new Error(
+      devUtils.formatMessage(
+        'Failed to intercept a GraphQL request to "%s %s": cannot parse query. See the error message from the parser below.\n\n%s',
+        request.method,
+        requestPublicUrl,
+        parsedResult.message,
+      ),
+    )
+  }
+
+  return {
+    query: input.query,
+    operationType: parsedResult.operationType,
+    operationName: parsedResult.operationName,
+    variables,
+  }
+}

package/src/core/utils/internal/parseMultipartData.test.ts

@@ -0,0 +1,76 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { parseMultipartData } from './parseMultipartData'
+
+test('parses a given valid multipart string', async () => {
+  expect.assertions(3)
+  await testMultipartDataWithContentType(
+    'multipart/form-data; boundary=WebKitFormBoundaryvZ1cVXWyK0ilQdab',
+  )
+})
+
+test('parses a given valid multipart string given non-pretty content-type', async () => {
+  expect.assertions(3)
+  // node-fetch will serialize content-type in this format, which is valid according to HTTP
+  // https://github.com/node-fetch/node-fetch/blob/d8fc32d6b29bd43d1ad377e80b3e439fe37f2904/test/main.js#L1438
+  await testMultipartDataWithContentType(
+    'multipart/form-data;boundary=WebKitFormBoundaryvZ1cVXWyK0ilQdab',
+  )
+})
+
+test('parses a given valid multipart string given content-type with extra spaces', async () => {
+  expect.assertions(3)
+  await testMultipartDataWithContentType(
+    'multipart/form-data;   boundary=WebKitFormBoundaryvZ1cVXWyK0ilQdab',
+  )
+})
+
+async function testMultipartDataWithContentType(
+  contentType: string,
+): Promise<void> {
+  const body = `\
+------WebKitFormBoundaryvZ1cVXWyK0ilQdab\r
+Content-Disposition: form-data; name="file"; filename="file1.txt"\r
+Content-Type: application/octet-stream\r
+\r
+file content\r
+------WebKitFormBoundaryvZ1cVXWyK0ilQdab\r
+Content-Disposition: form-data; name="text"\r
+\r
+text content\r
+------WebKitFormBoundaryvZ1cVXWyK0ilQdab\r
+Content-Disposition: form-data; name="text2"\r
+\r
+another text content\r
+------WebKitFormBoundaryvZ1cVXWyK0ilQdab\r
+Content-Disposition: form-data; name="text2"\r
+\r
+\r
+another text content 2\r
+\r
+------WebKitFormBoundaryvZ1cVXWyK0ilQdab--`
+  const headers = new Headers({
+    'content-type': contentType,
+  })
+  const parsed = parseMultipartData(body, headers)
+
+  // Workaround: JSDOM does not have `Blob.text` implementation.
+  // see https://github.com/jsdom/jsdom/issues/2555
+  expect(parsed).toHaveProperty('file.name', 'file1.txt')
+
+  expect(parsed).toHaveProperty('text', 'text content')
+  expect(parsed).toHaveProperty('text2', [
+    'another text content',
+    '\r\nanother text content 2\r\n',
+  ])
+}
+
+test('returns undefined without an error given an invalid multipart string', () => {
+  const headers = new Headers({
+    'content-type': 'multipart/form-data; boundary=dummyBoundary',
+  })
+  const parse = () => parseMultipartData(`{"invalid": ["multipart"]}`, headers)
+  expect(parse).not.toThrow()
+  expect(parse()).toBeUndefined()
+})

package/src/core/utils/internal/parseMultipartData.ts

@@ -0,0 +1,104 @@
+import { stringToHeaders } from 'headers-polyfill'
+import { DefaultRequestMultipartBody } from '../../handlers/RequestHandler'
+
+interface ParsedContentHeaders {
+  name: string
+  filename?: string
+  contentType: string
+}
+
+interface ContentDispositionDirective {
+  [key: string]: string | undefined
+  name: string
+  filename?: string
+  'form-data': string
+}
+
+function parseContentHeaders(headersString: string): ParsedContentHeaders {
+  const headers = stringToHeaders(headersString)
+  const contentType = headers.get('content-type') || 'text/plain'
+  const disposition = headers.get('content-disposition')
+
+  if (!disposition) {
+    throw new Error('"Content-Disposition" header is required.')
+  }
+
+  const directives = disposition.split(';').reduce((acc, chunk) => {
+    const [name, ...rest] = chunk.trim().split('=')
+    acc[name] = rest.join('=')
+    return acc
+  }, {} as ContentDispositionDirective)
+
+  const name = directives.name?.slice(1, -1)
+  const filename = directives.filename?.slice(1, -1)
+
+  return {
+    name,
+    filename,
+    contentType,
+  }
+}
+
+/**
+ * Parses a given string as a multipart/form-data.
+ * Does not throw an exception on an invalid multipart string.
+ */
+export function parseMultipartData<T extends DefaultRequestMultipartBody>(
+  data: string,
+  headers?: Headers,
+): T | undefined {
+  const contentType = headers?.get('content-type')
+
+  if (!contentType) {
+    return undefined
+  }
+
+  const [, ...directives] = contentType.split(/; */)
+  const boundary = directives
+    .filter((d) => d.startsWith('boundary='))
+    .map((s) => s.replace(/^boundary=/, ''))[0]
+
+  if (!boundary) {
+    return undefined
+  }
+
+  const boundaryRegExp = new RegExp(`--+${boundary}`)
+  const fields = data
+    .split(boundaryRegExp)
+    .filter((chunk) => chunk.startsWith('\r\n') && chunk.endsWith('\r\n'))
+    .map((chunk) => chunk.trimStart().replace(/\r\n$/, ''))
+
+  if (!fields.length) {
+    return undefined
+  }
+
+  const parsedBody: DefaultRequestMultipartBody = {}
+
+  try {
+    for (const field of fields) {
+      const [contentHeaders, ...rest] = field.split('\r\n\r\n')
+      const contentBody = rest.join('\r\n\r\n')
+      const { contentType, filename, name } =
+        parseContentHeaders(contentHeaders)
+
+      const value =
+        filename === undefined
+          ? contentBody
+          : new File([contentBody], filename, { type: contentType })
+
+      const parsedValue = parsedBody[name]
+
+      if (parsedValue === undefined) {
+        parsedBody[name] = value
+      } else if (Array.isArray(parsedValue)) {
+        parsedBody[name] = [...parsedValue, value]
+      } else {
+        parsedBody[name] = [parsedValue, value]
+      }
+    }
+
+    return parsedBody as T
+  } catch (error) {
+    return undefined
+  }
+}

package/src/core/utils/internal/pipeEvents.test.ts

@@ -0,0 +1,14 @@
+import { Emitter } from 'strict-event-emitter'
+import { pipeEvents } from './pipeEvents'
+
+it('pipes events from the source emitter to the destination emitter', () => {
+  const source = new Emitter()
+  const destination = new Emitter()
+  pipeEvents(source, destination)
+
+  const callback = vi.fn()
+  destination.on('hello', callback)
+
+  source.emit('hello', 'world', { data: true })
+  expect(callback).toHaveBeenNthCalledWith(1, 'world', { data: true })
+})

package/src/core/utils/internal/pipeEvents.ts

@@ -0,0 +1,25 @@
+import { Emitter, EventMap } from 'strict-event-emitter'
+
+/**
+ * Pipes all emitted events from one emitter to another.
+ */
+export function pipeEvents<Events extends EventMap>(
+  source: Emitter<Events>,
+  destination: Emitter<Events>,
+): void {
+  const rawEmit: typeof source.emit & { _isPiped?: boolean } = source.emit
+
+  if (rawEmit._isPiped) {
+    return
+  }
+
+  const sourceEmit: typeof source.emit & { _isPiped?: boolean } =
+    function sourceEmit(this: typeof source, event, ...data) {
+      destination.emit(event, ...data)
+      return rawEmit.call(this, event, ...data)
+    }
+
+  sourceEmit._isPiped = true
+
+  source.emit = sourceEmit
+}

package/src/core/utils/internal/requestHandlerUtils.ts

@@ -0,0 +1,21 @@
+import { RequestHandler } from '../../handlers/RequestHandler'
+
+export function use(
+  currentHandlers: Array<RequestHandler>,
+  ...handlers: Array<RequestHandler>
+): void {
+  currentHandlers.unshift(...handlers)
+}
+
+export function restoreHandlers(handlers: Array<RequestHandler>): void {
+  handlers.forEach((handler) => {
+    handler.isUsed = false
+  })
+}
+
+export function resetHandlers(
+  initialHandlers: Array<RequestHandler>,
+  ...nextHandlers: Array<RequestHandler>
+) {
+  return nextHandlers.length > 0 ? [...nextHandlers] : [...initialHandlers]
+}

package/src/core/utils/internal/toReadonlyArray.test.ts

@@ -0,0 +1,30 @@
+import { toReadonlyArray } from './toReadonlyArray'
+
+it('creates a copy of an array', () => {
+  expect(toReadonlyArray([1, 2, 3])).toEqual([1, 2, 3])
+})
+
+it('does not affect the source array', () => {
+  const source = ['a', 'b', 'c']
+  toReadonlyArray(source)
+
+  expect(source.push('d')).toBe(4)
+  expect(source).toEqual(['a', 'b', 'c', 'd'])
+})
+
+it('forbids modifying the array copy', () => {
+  const source = [1, 2, 3]
+  const copy = toReadonlyArray(source)
+
+  expect(() => {
+    // @ts-expect-error Intentional runtime misusage.
+    copy[2] = 1
+  }).toThrow(/Cannot assign to read only property '\d+' of object/)
+
+  expect(() => {
+    // @ts-expect-error Intentional runtime misusage.
+    copy.push(4)
+  }).toThrow(/Cannot add property \d+, object is not extensible/)
+
+  expect(source).toEqual([1, 2, 3])
+})

package/src/core/utils/internal/toReadonlyArray.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates an immutable copy of the given array.
+ */
+export function toReadonlyArray<T>(source: Array<T>): ReadonlyArray<T> {
+  const clone = [...source] as Array<T>
+  Object.freeze(clone)
+  return clone
+}

package/src/core/utils/internal/tryCatch.test.ts

@@ -0,0 +1,29 @@
+import { tryCatch } from './tryCatch'
+
+test('returns the function payload', () => {
+  const result = tryCatch(() => 'hello')
+  expect(result).toEqual('hello')
+})
+
+test('silences exceptions by default', () => {
+  const result = tryCatch(() => {
+    throw new Error('Exception')
+  })
+
+  expect(result).toBeUndefined()
+})
+
+test('executes a custom callback function when an exception occurs', async () => {
+  await new Promise<void>((resolve) => {
+    tryCatch(
+      () => {
+        throw new Error('Exception')
+      },
+      (error) => {
+        expect(error).toBeInstanceOf(Error)
+        expect(error.message).toEqual('Exception')
+        resolve()
+      },
+    )
+  })
+})

package/src/core/utils/internal/tryCatch.ts

@@ -0,0 +1,11 @@
+export function tryCatch<Fn extends (...args: any[]) => any>(
+  fn: Fn,
+  onException?: (error: Error) => void,
+): ReturnType<Fn> | undefined {
+  try {
+    const result = fn()
+    return result
+  } catch (error) {
+    onException?.(error as Error)
+  }
+}

package/src/core/utils/internal/uuidv4.ts

@@ -0,0 +1,3 @@
+export function uuidv4(): string {
+  return Math.random().toString(16).slice(2)
+}

package/src/core/utils/logging/getStatusCodeColor.test.ts

@@ -0,0 +1,22 @@
+import { getStatusCodeColor } from './getStatusCodeColor'
+
+test('returns a green color for status codes lower than 300', () => {
+  expect(getStatusCodeColor(100)).toBe('#69AB32')
+  expect(getStatusCodeColor(200)).toBe('#69AB32')
+  expect(getStatusCodeColor(204)).toBe('#69AB32')
+})
+
+test('returns a yellow color for status codes between 201 and 400', () => {
+  expect(getStatusCodeColor(300)).toBe('#F0BB4B')
+  expect(getStatusCodeColor(304)).toBe('#F0BB4B')
+})
+
+test('returns a red color for status codes higher than 400', () => {
+  expect(getStatusCodeColor(400)).toBe('#E95F5D')
+  expect(getStatusCodeColor(404)).toBe('#E95F5D')
+  expect(getStatusCodeColor(500)).toBe('#E95F5D')
+})
+
+test('returns a red color for unknown status code', () => {
+  expect(getStatusCodeColor(700)).toBe('#E95F5D')
+})

package/src/core/utils/logging/getStatusCodeColor.ts

@@ -0,0 +1,20 @@
+export enum StatusCodeColor {
+  Success = '#69AB32',
+  Warning = '#F0BB4B',
+  Danger = '#E95F5D',
+}
+
+/**
+ * Returns a HEX color for a given response status code number.
+ */
+export function getStatusCodeColor(status: number): StatusCodeColor {
+  if (status < 300) {
+    return StatusCodeColor.Success
+  }
+
+  if (status < 400) {
+    return StatusCodeColor.Warning
+  }
+
+  return StatusCodeColor.Danger
+}

package/src/core/utils/logging/getTimestamp.test.ts

@@ -0,0 +1,18 @@
+import { getTimestamp } from './getTimestamp'
+
+beforeAll(() => {
+  // Stub native `Date` prototype methods used in the tested module,
+  // to always produce a predictable value for testing purposes.
+  vi.spyOn(global.Date.prototype, 'getHours').mockImplementation(() => 12)
+  vi.spyOn(global.Date.prototype, 'getMinutes').mockImplementation(() => 4)
+  vi.spyOn(global.Date.prototype, 'getSeconds').mockImplementation(() => 8)
+})
+
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
+test('returns a timestamp string of the invocation time', () => {
+  const timestamp = getTimestamp()
+  expect(timestamp).toBe('12:04:08')
+})

package/src/core/utils/logging/getTimestamp.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns a timestamp string in a "HH:MM:SS" format.
+ */
+export function getTimestamp(): string {
+  const now = new Date()
+
+  return [now.getHours(), now.getMinutes(), now.getSeconds()]
+    .map(String)
+    .map((chunk) => chunk.slice(0, 2))
+    .map((chunk) => chunk.padStart(2, '0'))
+    .join(':')
+}

package/src/core/utils/logging/serializeRequest.test.ts

@@ -0,0 +1,23 @@
+import { encodeBuffer } from '@mswjs/interceptors'
+import { serializeRequest } from './serializeRequest'
+
+test('serializes given Request instance into a plain object', async () => {
+  const request = await serializeRequest(
+    new Request(new URL('http://test.mswjs.io/user'), {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'text/plain',
+        'X-Header': 'secret',
+      }),
+      body: encodeBuffer('text-body'),
+    }),
+  )
+
+  expect(request.method).toBe('POST')
+  expect(request.url.href).toBe('http://test.mswjs.io/user')
+  expect(request.headers).toEqual({
+    'content-type': 'text/plain',
+    'x-header': 'secret',
+  })
+  expect(request.body).toBe('text-body')
+})

package/src/core/utils/logging/serializeRequest.ts

@@ -0,0 +1,23 @@
+export interface LoggedRequest {
+  url: URL
+  method: string
+  headers: Record<string, string>
+  body: string
+}
+
+/**
+ * Formats a mocked request for introspection in browser's console.
+ */
+export async function serializeRequest(
+  request: Request,
+): Promise<LoggedRequest> {
+  const requestClone = request.clone()
+  const requestText = await requestClone.text()
+
+  return {
+    url: new URL(request.url),
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    body: requestText,
+  }
+}