msw 2.0.12 → 2.0.14

package/src/browser/utils/requestIntegrityCheck.ts

@@ -0,0 +1,23 @@
+import type { SetupWorkerInternalContext } from '../setupWorker/glossary'
+
+export async function requestIntegrityCheck(
+  context: SetupWorkerInternalContext,
+  serviceWorker: ServiceWorker,
+): Promise<ServiceWorker> {
+  // Signal Service Worker to report back its integrity
+  context.workerChannel.send('INTEGRITY_CHECK_REQUEST')
+
+  const { payload: actualChecksum } = await context.events.once(
+    'INTEGRITY_CHECK_RESPONSE',
+  )
+
+  // Compare the response from the Service Worker and the
+  // global variable set during the build.
+  if (actualChecksum !== SERVICE_WORKER_CHECKSUM) {
+    throw new Error(
+      `Currently active Service Worker (${actualChecksum}) is behind the latest published one (${SERVICE_WORKER_CHECKSUM}).`,
+    )
+  }
+
+  return serviceWorker
+}

package/src/browser/utils/supportsReadableStreamTransfer.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns a boolean indicating whether the current browser
+ * supports `ReadableStream` as a `Transferable` when posting
+ * messages.
+ */
+export function supportsReadableStreamTransfer() {
+  try {
+    const stream = new ReadableStream({
+      start: (controller) => controller.close(),
+    })
+    const message = new MessageChannel()
+    message.port1.postMessage(stream, [stream])
+    return true
+  } catch (error) {
+    return false
+  }
+}

package/src/core/HttpResponse.test.ts

@@ -0,0 +1,200 @@
+/**
+ * @vitest-environment node
+ */
+import { TextEncoder } from 'util'
+import { HttpResponse } from './HttpResponse'
+
+it('creates a plain response', async () => {
+  const response = new HttpResponse(null, { status: 301 })
+  expect(response.status).toBe(301)
+  expect(response.statusText).toBe('Moved Permanently')
+  expect(response.body).toBe(null)
+  expect(await response.text()).toBe('')
+  expect(Object.fromEntries(response.headers.entries())).toEqual({})
+})
+
+describe('HttpResponse.text()', () => {
+  it('creates a text response', async () => {
+    const response = HttpResponse.text('hello world', { status: 201 })
+
+    expect(response.status).toBe(201)
+    expect(response.statusText).toBe('Created')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('hello world')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/plain',
+    })
+  })
+
+  it('allows overriding the "Content-Type" response header', async () => {
+    const response = HttpResponse.text('hello world', {
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+      },
+    })
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('hello world')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/plain; charset=utf-8',
+    })
+  })
+})
+
+describe('HttpResponse.json()', () => {
+  it('creates a json response given an object', async () => {
+    const response = HttpResponse.json({ firstName: 'John' })
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.json()).toEqual({ firstName: 'John' })
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'application/json',
+    })
+  })
+
+  it('creates a json response given an array', async () => {
+    const response = HttpResponse.json([1, 2, 3])
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.json()).toEqual([1, 2, 3])
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'application/json',
+    })
+  })
+
+  it('creates a json response given a plain string', async () => {
+    const response = HttpResponse.json(`"hello"`)
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.json()).toBe(`"hello"`)
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'application/json',
+    })
+  })
+
+  it('creates a json response given a number', async () => {
+    const response = HttpResponse.json(123)
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.json()).toBe(123)
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'application/json',
+    })
+  })
+
+  it('creates a json response given a json ReadableStream', async () => {
+    const encoder = new TextEncoder()
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(encoder.encode(`{"firstName`))
+        controller.enqueue(encoder.encode(`":"John`))
+        controller.enqueue(encoder.encode(`"}`))
+        controller.close()
+      },
+    })
+    const response = HttpResponse.json(stream)
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    // A ReadableStream instance is not a valid body init
+    // for the "Response.json()" static method. It gets serialized
+    // into a plain object.
+    expect(await response.json()).toEqual({})
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'application/json',
+    })
+  })
+
+  it('allows overriding the "Content-Type" response header', async () => {
+    const response = HttpResponse.json(
+      { a: 1 },
+      {
+        headers: {
+          'Content-Type': 'application/hal+json',
+        },
+      },
+    )
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.json()).toEqual({ a: 1 })
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'application/hal+json',
+    })
+  })
+})
+
+describe('HttpResponse.xml()', () => {
+  it('creates an xml response', async () => {
+    const response = HttpResponse.xml('<user name="John" />')
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('<user name="John" />')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/xml',
+    })
+  })
+
+  it('allows overriding the "Content-Type" response header', async () => {
+    const response = HttpResponse.xml('<user name="John" />', {
+      headers: {
+        'Content-Type': 'text/xml; charset=utf-8',
+      },
+    })
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('<user name="John" />')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/xml; charset=utf-8',
+    })
+  })
+})
+
+it('creates an array buffer response', async () => {
+  const buffer = new TextEncoder().encode('hello world')
+  const response = HttpResponse.arrayBuffer(buffer)
+
+  expect(response.status).toBe(200)
+  expect(response.statusText).toBe('OK')
+  expect(response.body).toBeInstanceOf(ReadableStream)
+
+  const responseData = await response.arrayBuffer()
+  expect(responseData).toEqual(buffer.buffer)
+  expect(Object.fromEntries(response.headers.entries())).toEqual({
+    'content-length': '11',
+  })
+})
+
+it('creates a form data response', async () => {
+  const formData = new FormData()
+  formData.append('firstName', 'John')
+  const response = HttpResponse.formData(formData)
+
+  expect(response.status).toBe(200)
+  expect(response.statusText).toBe('OK')
+  expect(response.body).toBeInstanceOf(ReadableStream)
+
+  const responseData = await response.formData()
+  expect(responseData.get('firstName')).toBe('John')
+  expect(Object.fromEntries(response.headers.entries())).toEqual({
+    'content-type': expect.stringContaining(
+      'multipart/form-data; boundary=----',
+    ),
+  })
+})

package/src/core/HttpResponse.ts

@@ -0,0 +1,134 @@
+import type { DefaultBodyType, JsonBodyType } from './handlers/RequestHandler'
+import {
+  decorateResponse,
+  normalizeResponseInit,
+} from './utils/HttpResponse/decorators'
+
+export interface HttpResponseInit extends ResponseInit {
+  type?: ResponseType
+}
+
+declare const bodyType: unique symbol
+
+export interface StrictRequest<BodyType extends DefaultBodyType>
+  extends Request {
+  json(): Promise<BodyType>
+}
+
+/**
+ * Opaque `Response` type that supports strict body type.
+ */
+export interface StrictResponse<BodyType extends DefaultBodyType>
+  extends Response {
+  readonly [bodyType]: BodyType
+}
+
+/**
+ * A drop-in replacement for the standard `Response` class
+ * to allow additional features, like mocking the response `Set-Cookie` header.
+ *
+ * @example
+ * new HttpResponse('Hello world', { status: 201 })
+ * HttpResponse.json({ name: 'John' })
+ * HttpResponse.formData(form)
+ *
+ * @see {@link https://mswjs.io/docs/api/http-response `HttpResponse` API reference}
+ */
+export class HttpResponse extends Response {
+  constructor(body?: BodyInit | null, init?: HttpResponseInit) {
+    const responseInit = normalizeResponseInit(init)
+    super(body, responseInit)
+    decorateResponse(this, responseInit)
+  }
+
+  /**
+   * Create a `Response` with a `Content-Type: "text/plain"` body.
+   * @example
+   * HttpResponse.text('hello world')
+   * HttpResponse.text('Error', { status: 500 })
+   */
+  static text<BodyType extends string>(
+    body?: BodyType | null,
+    init?: HttpResponseInit,
+  ): StrictResponse<BodyType> {
+    const responseInit = normalizeResponseInit(init)
+
+    if (!responseInit.headers.has('Content-Type')) {
+      responseInit.headers.set('Content-Type', 'text/plain')
+    }
+
+    return new HttpResponse(body, responseInit) as StrictResponse<BodyType>
+  }
+
+  /**
+   * Create a `Response` with a `Content-Type: "application/json"` body.
+   * @example
+   * HttpResponse.json({ firstName: 'John' })
+   * HttpResponse.json({ error: 'Not Authorized' }, { status: 401 })
+   */
+  static json<BodyType extends JsonBodyType>(
+    body?: BodyType | null,
+    init?: HttpResponseInit,
+  ): StrictResponse<BodyType> {
+    const responseInit = normalizeResponseInit(init)
+
+    if (!responseInit.headers.has('Content-Type')) {
+      responseInit.headers.set('Content-Type', 'application/json')
+    }
+
+    return new HttpResponse(
+      JSON.stringify(body),
+      responseInit,
+    ) as StrictResponse<BodyType>
+  }
+
+  /**
+   * Create a `Response` with a `Content-Type: "application/xml"` body.
+   * @example
+   * HttpResponse.xml(`<user name="John" />`)
+   * HttpResponse.xml(`<article id="abc-123" />`, { status: 201 })
+   */
+  static xml<BodyType extends string>(
+    body?: BodyType | null,
+    init?: HttpResponseInit,
+  ): Response {
+    const responseInit = normalizeResponseInit(init)
+
+    if (!responseInit.headers.has('Content-Type')) {
+      responseInit.headers.set('Content-Type', 'text/xml')
+    }
+
+    return new HttpResponse(body, responseInit)
+  }
+
+  /**
+   * Create a `Response` with an `ArrayBuffer` body.
+   * @example
+   * const buffer = new ArrayBuffer(3)
+   * const view = new Uint8Array(buffer)
+   * view.set([1, 2, 3])
+   *
+   * HttpResponse.arrayBuffer(buffer)
+   */
+  static arrayBuffer(body?: ArrayBuffer, init?: HttpResponseInit): Response {
+    const responseInit = normalizeResponseInit(init)
+
+    if (body) {
+      responseInit.headers.set('Content-Length', body.byteLength.toString())
+    }
+
+    return new HttpResponse(body, responseInit)
+  }
+
+  /**
+   * Create a `Response` with a `FormData` body.
+   * @example
+   * const data = new FormData()
+   * data.set('name', 'Alice')
+   *
+   * HttpResponse.formData(data)
+   */
+  static formData(body?: FormData, init?: HttpResponseInit): Response {
+    return new HttpResponse(body, normalizeResponseInit(init))
+  }
+}

package/src/core/SetupApi.ts

@@ -0,0 +1,95 @@
+import { invariant } from 'outvariant'
+import { EventMap, Emitter } from 'strict-event-emitter'
+import {
+  RequestHandler,
+  RequestHandlerDefaultInfo,
+} from './handlers/RequestHandler'
+import { LifeCycleEventEmitter } from './sharedOptions'
+import { devUtils } from './utils/internal/devUtils'
+import { pipeEvents } from './utils/internal/pipeEvents'
+import { toReadonlyArray } from './utils/internal/toReadonlyArray'
+import { Disposable } from './utils/internal/Disposable'
+
+/**
+ * Generic class for the mock API setup.
+ */
+export abstract class SetupApi<EventsMap extends EventMap> extends Disposable {
+  protected initialHandlers: ReadonlyArray<RequestHandler>
+  protected currentHandlers: Array<RequestHandler>
+  protected readonly emitter: Emitter<EventsMap>
+  protected readonly publicEmitter: Emitter<EventsMap>
+
+  public readonly events: LifeCycleEventEmitter<EventsMap>
+
+  constructor(...initialHandlers: Array<RequestHandler>) {
+    super()
+
+    invariant(
+      this.validateHandlers(initialHandlers),
+      devUtils.formatMessage(
+        `Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?`,
+      ),
+    )
+
+    this.initialHandlers = toReadonlyArray(initialHandlers)
+    this.currentHandlers = [...initialHandlers]
+
+    this.emitter = new Emitter<EventsMap>()
+    this.publicEmitter = new Emitter<EventsMap>()
+    pipeEvents(this.emitter, this.publicEmitter)
+
+    this.events = this.createLifeCycleEvents()
+
+    this.subscriptions.push(() => {
+      this.emitter.removeAllListeners()
+      this.publicEmitter.removeAllListeners()
+    })
+  }
+
+  private validateHandlers(handlers: ReadonlyArray<RequestHandler>): boolean {
+    // Guard against incorrect call signature of the setup API.
+    return handlers.every((handler) => !Array.isArray(handler))
+  }
+
+  public use(...runtimeHandlers: Array<RequestHandler>): void {
+    invariant(
+      this.validateHandlers(runtimeHandlers),
+      devUtils.formatMessage(
+        `Failed to call "use()" with the given request handlers: invalid input. Did you forget to spread the array of request handlers?`,
+      ),
+    )
+
+    this.currentHandlers.unshift(...runtimeHandlers)
+  }
+
+  public restoreHandlers(): void {
+    this.currentHandlers.forEach((handler) => {
+      handler.isUsed = false
+    })
+  }
+
+  public resetHandlers(...nextHandlers: Array<RequestHandler>): void {
+    this.currentHandlers =
+      nextHandlers.length > 0 ? [...nextHandlers] : [...this.initialHandlers]
+  }
+
+  public listHandlers(): ReadonlyArray<
+    RequestHandler<RequestHandlerDefaultInfo, any, any>
+  > {
+    return toReadonlyArray(this.currentHandlers)
+  }
+
+  private createLifeCycleEvents(): LifeCycleEventEmitter<EventsMap> {
+    return {
+      on: (...args: any[]) => {
+        return (this.publicEmitter.on as any)(...args)
+      },
+      removeListener: (...args: any[]) => {
+        return (this.publicEmitter.removeListener as any)(...args)
+      },
+      removeAllListeners: (...args: any[]) => {
+        return this.publicEmitter.removeAllListeners(...args)
+      },
+    }
+  }
+}

package/src/core/bypass.test.ts

@@ -0,0 +1,47 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { bypass } from './bypass'
+
+it('returns bypassed request given a request url string', async () => {
+  const request = bypass('https://api.example.com/resource')
+
+  // Relative URLs are rebased against the current location.
+  expect(request.method).toBe('GET')
+  expect(request.url).toBe('https://api.example.com/resource')
+  expect(Object.fromEntries(request.headers.entries())).toEqual({
+    'x-msw-intention': 'bypass',
+  })
+})
+
+it('returns bypassed request given a request url', async () => {
+  const request = bypass(new URL('/resource', 'https://api.example.com'))
+
+  expect(request.url).toBe('https://api.example.com/resource')
+  expect(Object.fromEntries(request.headers)).toEqual({
+    'x-msw-intention': 'bypass',
+  })
+})
+
+it('returns bypassed request given request instance', async () => {
+  const original = new Request('http://localhost/resource', {
+    method: 'POST',
+    headers: {
+      'X-My-Header': 'value',
+    },
+    body: 'hello world',
+  })
+  const request = bypass(original)
+
+  expect(request.method).toBe('POST')
+  expect(request.url).toBe('http://localhost/resource')
+
+  const bypassedRequestBody = await request.text()
+  expect(original.bodyUsed).toBe(false)
+
+  expect(bypassedRequestBody).toEqual(await original.text())
+  expect(Object.fromEntries(request.headers.entries())).toEqual({
+    ...Object.fromEntries(original.headers.entries()),
+    'x-msw-intention': 'bypass',
+  })
+})

package/src/core/bypass.ts

@@ -0,0 +1,36 @@
+import { invariant } from 'outvariant'
+
+export type BypassRequestInput = string | URL | Request
+
+/**
+ * Creates a `Request` instance that will always be ignored by MSW.
+ *
+ * @example
+ * import { bypass } from 'msw'
+ *
+ * fetch(bypass('/resource'))
+ * fetch(bypass(new URL('/resource', 'https://example.com)))
+ * fetch(bypass(new Request('https://example.com/resource')))
+ *
+ * @see {@link https://mswjs.io/docs/api/bypass `bypass()` API reference}
+ */
+export function bypass(input: BypassRequestInput, init?: RequestInit): Request {
+  const request = input instanceof Request ? input : new Request(input, init)
+
+  invariant(
+    !request.bodyUsed,
+    'Failed to create a bypassed request to "%s %s": given request instance already has its body read. Make sure to clone the intercepted request if you wish to read its body before bypassing it.',
+    request.method,
+    request.url,
+  )
+
+  const requestClone = request.clone()
+
+  // Set the internal header that would instruct MSW
+  // to bypass this request from any further request matching.
+  // Unlike "passthrough()", bypass is meant for performing
+  // additional requests within pending request resolution.
+  requestClone.headers.set('x-msw-intention', 'bypass')
+
+  return requestClone
+}

package/src/core/delay.ts

@@ -0,0 +1,70 @@
+import { isNodeProcess } from 'is-node-process'
+
+export const SET_TIMEOUT_MAX_ALLOWED_INT = 2147483647
+export const MIN_SERVER_RESPONSE_TIME = 100
+export const MAX_SERVER_RESPONSE_TIME = 400
+export const NODE_SERVER_RESPONSE_TIME = 5
+
+function getRealisticResponseTime(): number {
+  if (isNodeProcess()) {
+    return NODE_SERVER_RESPONSE_TIME
+  }
+
+  return Math.floor(
+    Math.random() * (MAX_SERVER_RESPONSE_TIME - MIN_SERVER_RESPONSE_TIME) +
+      MIN_SERVER_RESPONSE_TIME,
+  )
+}
+
+export type DelayMode = 'real' | 'infinite'
+
+/**
+ * Delays the response by the given duration (ms).
+ *
+ * @example
+ * await delay() // emulate realistic server response time
+ * await delay(1200) // delay response by 1200ms
+ * await delay('infinite') // delay response infinitely
+ *
+ * @see {@link https://mswjs.io/docs/api/delay `delay()` API reference}
+ */
+export async function delay(
+  durationOrMode?: DelayMode | number,
+): Promise<void> {
+  let delayTime: number
+
+  if (typeof durationOrMode === 'string') {
+    switch (durationOrMode) {
+      case 'infinite': {
+        // Using `Infinity` as a delay value executes the response timeout immediately.
+        // Instead, use the maximum allowed integer for `setTimeout`.
+        delayTime = SET_TIMEOUT_MAX_ALLOWED_INT
+        break
+      }
+      case 'real': {
+        delayTime = getRealisticResponseTime()
+        break
+      }
+      default: {
+        throw new Error(
+          `Failed to delay a response: unknown delay mode "${durationOrMode}". Please make sure you provide one of the supported modes ("real", "infinite") or a number.`,
+        )
+      }
+    }
+  } else if (typeof durationOrMode === 'undefined') {
+    // Use random realistic server response time when no explicit delay duration was provided.
+    delayTime = getRealisticResponseTime()
+  } else {
+    // Guard against passing values like `Infinity` or `Number.MAX_VALUE`
+    // as the response delay duration. They don't produce the result you may expect.
+    if (durationOrMode > SET_TIMEOUT_MAX_ALLOWED_INT) {
+      throw new Error(
+        `Failed to delay a response: provided delay duration (${durationOrMode}) exceeds the maximum allowed duration for "setTimeout" (${SET_TIMEOUT_MAX_ALLOWED_INT}). This will cause the response to be returned immediately. Please use a number within the allowed range to delay the response by exact duration, or consider the "infinite" delay mode to delay the response indefinitely.`,
+      )
+    }
+
+    delayTime = durationOrMode
+  }
+
+  return new Promise((resolve) => setTimeout(resolve, delayTime))
+}

package/src/core/graphql.test.ts

@@ -0,0 +1,11 @@
+import { graphql } from './graphql'
+
+test('exports supported GraphQL operation types', () => {
+  expect(graphql).toBeDefined()
+  expect(Object.keys(graphql)).toEqual([
+    'query',
+    'mutation',
+    'operation',
+    'link',
+  ])
+})