msw 2.0.11 → 2.0.13

package/src/browser/setupWorker/stop/utils/printStopMessage.test.ts

@@ -0,0 +1,26 @@
+import { printStopMessage } from './printStopMessage'
+
+beforeAll(() => {
+  vi.spyOn(global.console, 'log').mockImplementation(() => void 0)
+})
+
+afterEach(() => {
+  vi.resetAllMocks()
+})
+
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
+test('prints a stop message to the console', () => {
+  printStopMessage()
+  expect(console.log).toHaveBeenCalledWith(
+    '%c[MSW] Mocking disabled.',
+    'color:orangered;font-weight:bold;',
+  )
+})
+
+test('does not print any message when log level is quiet', () => {
+  printStopMessage({ quiet: true })
+  expect(console.log).not.toHaveBeenCalled()
+})

package/src/browser/setupWorker/stop/utils/printStopMessage.ts

@@ -0,0 +1,12 @@
+import { devUtils } from '~/core/utils/internal/devUtils'
+
+export function printStopMessage(args: { quiet?: boolean } = {}): void {
+  if (args.quiet) {
+    return
+  }
+
+  console.log(
+    `%c${devUtils.formatMessage('Mocking disabled.')}`,
+    'color:orangered;font-weight:bold;',
+  )
+}

package/src/browser/tsconfig.browser.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.browser.json",
+  "compilerOptions": {
+    "composite": false
+  }
+}

package/src/browser/tsconfig.browser.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.src.json",
+  "compilerOptions": {
+    // Expose browser-specific libraries only for the
+    // source code under the "src/browser" directory.
+    "lib": ["DOM", "WebWorker"]
+  },
+  "include": ["../../global.d.ts", "./global.browser.d.ts", "./**/*.ts"]
+}

package/src/browser/utils/deferNetworkRequestsUntil.test.ts

@@ -0,0 +1,48 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { deferNetworkRequestsUntil } from './deferNetworkRequestsUntil'
+
+beforeAll(() => {
+  // Stubs native `fetch` function to remove any external
+  // asynchronicity from this test suite.
+  window.fetch = vi.fn().mockImplementation(() => {
+    return Promise.resolve({
+      json: () => ({
+        response: 'body',
+      }),
+    })
+  })
+})
+
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
+test('defers any requests that happen while a given promise is pending', async () => {
+  const events: string[] = []
+
+  // Emulate a Service Worker registration Promise.
+  const workerPromise = new Promise<null>((resolve) => {
+    setTimeout(resolve, 1000)
+  })
+
+  workerPromise.then(() => {
+    events.push('promise resolved')
+  })
+
+  // Calling this functions intercepts all requests that happen while
+  // the given promise is pending, and defers their execution
+  // until the promise is resolved.
+  deferNetworkRequestsUntil(workerPromise)
+
+  // Perform a request.
+  const requestPromise = fetch('/user').then(() => {
+    events.push('response received')
+  })
+
+  await Promise.all([workerPromise, requestPromise])
+
+  // Assert the order of resolved events.
+  expect(events).toEqual(['promise resolved', 'response received'])
+})

package/src/browser/utils/deferNetworkRequestsUntil.ts

@@ -0,0 +1,29 @@
+import { until } from '@open-draft/until'
+
+/**
+ * Intercepts and defers any requests on the page
+ * until the Service Worker instance is ready.
+ * Must only be used in a browser.
+ */
+export function deferNetworkRequestsUntil(predicatePromise: Promise<any>) {
+  // Defer any `XMLHttpRequest` requests until the Service Worker is ready.
+  const originalXhrSend = window.XMLHttpRequest.prototype.send
+  window.XMLHttpRequest.prototype.send = function (
+    ...args: Parameters<XMLHttpRequest['send']>
+  ) {
+    // Keep this function synchronous to comply with `XMLHttpRequest.prototype.send`,
+    // because that method is always synchronous.
+    until(() => predicatePromise).then(() => {
+      window.XMLHttpRequest.prototype.send = originalXhrSend
+      this.send(...args)
+    })
+  }
+
+  // Defer any `fetch` requests until the Service Worker is ready.
+  const originalFetch = window.fetch
+  window.fetch = async (...args) => {
+    await until(() => predicatePromise)
+    window.fetch = originalFetch
+    return window.fetch(...args)
+  }
+}

package/src/browser/utils/getAbsoluteWorkerUrl.test.ts

@@ -0,0 +1,31 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { getAbsoluteWorkerUrl } from './getAbsoluteWorkerUrl'
+
+const rawLocation = window.location
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    value: rawLocation,
+  })
+})
+
+it('returns absolute worker url relatively to the root', () => {
+  expect(getAbsoluteWorkerUrl('./worker.js')).toBe('http://localhost/worker.js')
+})
+
+it('returns an absolute worker url relatively to the current path', () => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      href: 'http://localhost/path/to/page',
+    },
+  })
+
+  expect(getAbsoluteWorkerUrl('./worker.js')).toBe(
+    'http://localhost/path/to/worker.js',
+  )
+
+  // Leading slash must still resolve to the root.
+  expect(getAbsoluteWorkerUrl('/worker.js')).toBe('http://localhost/worker.js')
+})

package/src/browser/utils/getAbsoluteWorkerUrl.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns an absolute Service Worker URL based on the given
+ * relative URL (known during the registration).
+ */
+export function getAbsoluteWorkerUrl(workerUrl: string): string {
+  return new URL(workerUrl, location.href).href
+}

package/src/browser/utils/parseWorkerRequest.ts

@@ -0,0 +1,15 @@
+import { pruneGetRequestBody } from './pruneGetRequestBody'
+import type { ServiceWorkerIncomingRequest } from '../setupWorker/glossary'
+
+/**
+ * Converts a given request received from the Service Worker
+ * into a Fetch `Request` instance.
+ */
+export function parseWorkerRequest(
+  incomingRequest: ServiceWorkerIncomingRequest,
+): Request {
+  return new Request(incomingRequest.url, {
+    ...incomingRequest,
+    body: pruneGetRequestBody(incomingRequest),
+  })
+}

package/src/browser/utils/pruneGetRequestBody.test.ts

@@ -0,0 +1,53 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { TextEncoder } from 'util'
+import { pruneGetRequestBody } from './pruneGetRequestBody'
+
+test('sets empty GET request body to undefined', () => {
+  expect(
+    pruneGetRequestBody({
+      method: 'GET',
+    }),
+  ).toBeUndefined()
+
+  expect(
+    pruneGetRequestBody({
+      method: 'GET',
+      // There's no such thing as a GET request with a body.
+      body: new ArrayBuffer(5),
+    }),
+  ).toBeUndefined()
+})
+
+test('sets HEAD request body to undefined', () => {
+  expect(
+    pruneGetRequestBody({
+      method: 'HEAD',
+    }),
+  ).toBeUndefined()
+
+  expect(
+    pruneGetRequestBody({
+      method: 'HEAD',
+      body: new ArrayBuffer(5),
+    }),
+  ).toBeUndefined()
+})
+
+test('ignores requests of the other methods than GET', () => {
+  const body = new TextEncoder().encode('hello world')
+  expect(
+    pruneGetRequestBody({
+      method: 'POST',
+      body,
+    }),
+  ).toEqual(body)
+
+  expect(
+    pruneGetRequestBody({
+      method: 'PUT',
+      body,
+    }),
+  ).toEqual(body)
+})

package/src/browser/utils/pruneGetRequestBody.ts

@@ -0,0 +1,21 @@
+import type { ServiceWorkerIncomingRequest } from '../setupWorker/glossary'
+
+type Input = Pick<ServiceWorkerIncomingRequest, 'method' | 'body'>
+
+/**
+ * Ensures that an empty GET request body is always represented as `undefined`.
+ */
+export function pruneGetRequestBody(
+  request: Input,
+): ServiceWorkerIncomingRequest['body'] {
+  // Force HEAD/GET request body to always be empty.
+  // The worker reads any request's body as ArrayBuffer,
+  // and you cannot re-construct a GET/HEAD Request
+  // with an ArrayBuffer, even if empty. Also note that
+  // "request.body" is always undefined in the worker.
+  if (['HEAD', 'GET'].includes(request.method)) {
+    return undefined
+  }
+
+  return request.body
+}

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))
+  }
+}