feat: add HttpResponse.html() static method (#2140)

Co-authored-by: Artem Zakharchenko <[email protected]>

src/core/HttpResponse.test.ts

@@ -223,6 +223,36 @@ describe('HttpResponse.xml()', () => {
   })
 })
 
+describe('HttpResponse.html()', () => {
+  it('creates an html response', async () => {
+    const response = HttpResponse.html('<p class="author">Jane Doe</p>')
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('<p class="author">Jane Doe</p>')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/html',
+    })
+  })
+
+  it('allows overriding the "Content-Type" response header', async () => {
+    const response = HttpResponse.html('<p class="author">Jane Doe</p>', {
+      headers: {
+        'Content-Type': 'text/html; charset=utf-8',
+      },
+    })
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(response.body).toBeInstanceOf(ReadableStream)
+    expect(await response.text()).toBe('<p class="author">Jane Doe</p>')
+    expect(Object.fromEntries(response.headers.entries())).toEqual({
+      'content-type': 'text/html; charset=utf-8',
+    })
+  })
+})
+
 it('creates an array buffer response', async () => {
   const buffer = new TextEncoder().encode('hello world')
   const response = HttpResponse.arrayBuffer(buffer)

src/core/HttpResponse.ts

@@ -125,6 +125,25 @@ export class HttpResponse extends Response {
     return new HttpResponse(body, responseInit)
   }
 
+  /**
+   * Create a `Response` with a `Content-Type: "text/html"` body.
+   * @example
+   * HttpResponse.html(`<p class="author">Jane Doe</p>`)
+   * HttpResponse.html(`<main id="abc-123">Main text</main>`, { status: 201 })
+   */
+  static html<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/html')
+    }
+
+    return new HttpResponse(body, responseInit)
+  }
+
   /**
    * Create a `Response` with an `ArrayBuffer` body.
    * @example

test/browser/rest-api/response/body/body-html.mocks.ts

@@ -0,0 +1,13 @@
+import { http, HttpResponse } from 'msw'
+import { setupWorker } from 'msw/browser'
+
+const worker = setupWorker(
+  http.get('/user', () => {
+    return HttpResponse.html(`
+<p class="user" id="abc-123">
+  Jane Doe
+</p>`)
+  }),
+)
+
+worker.start()

test/browser/rest-api/response/body/body-html.test.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '../../../playwright.extend'
+
+test('responds with an HTML response body', async ({ loadExample, fetch }) => {
+  await loadExample(require.resolve('./body-html.mocks.ts'))
+
+  const res = await fetch('/user')
+  const status = res.status()
+  const headers = await res.allHeaders()
+  const text = await res.text()
+
+  expect(status).toBe(200)
+  expect(headers['content-type']).toBe('text/html')
+  expect(text).toEqual(`
+<p class="user" id="abc-123">
+  Jane Doe
+</p>`)
+})

test/node/rest-api/response/body-html.node.test.ts

@@ -0,0 +1,34 @@
+/**
+ * @vitest-environment node
+ */
+import { HttpResponse, http } from 'msw'
+import { setupServer } from 'msw/node'
+
+const server = setupServer(
+  http.get('http://localhost/html', () => {
+    return HttpResponse.html(`
+<p class="user" id="abc-123">
+  Jane Doe
+</p>`)
+  }),
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test('responds with an HTML response body', async () => {
+  const res = await fetch('http://localhost/html')
+  const text = await res.text()
+
+  expect(res.status).toBe(200)
+  expect(res.headers.get('content-type')).toBe('text/html')
+  expect(text).toEqual(`
+<p class="user" id="abc-123">
+  Jane Doe
+</p>`)
+})