feat: Add ability to delay generating a response (#28)

* feat: Add ability to delay generating a response

* Fix error message

* Update error message

* Fix delay test

Author: nzakas

docs/src/content/docs/mock-servers/extended-response-patterns.mdx

@@ -12,6 +12,7 @@ The following keys can be used in the response pattern object:
 -   `status` (required) - the HTTP status code to return.
 -   `headers` - HTTP headers to return with the response.
 -   `body` - the body of the response to return. This can be a string, an object (which is treated as JSON), or an `ArrayBuffer`.
+-   `delay` - the number of milliseconds to wait before returning the response.
 
 The response pattern keys are used to create a new `Response` object that is returned when the associated request pattern matches the request.
 
@@ -96,3 +97,20 @@ server.get("/users", {
 ```
 
 This route will respond to any GET request to `/users` with a status code of 200, a `Content-Type` header of `application/json`, and a JSON response body containing an `id` and `name` property.
+
+## Delaying the response
+
+If you'd like to delay the response to a request, you can use the `delay` key in the response pattern object. The `delay` property is the number of milliseconds to wait before returning the response. Here's an example:
+
+```js
+import { MockServer } from "mentoss";
+
+const server = new MockServer("https://api.example.com");
+
+server.get("/users", {
+	status: 200,
+	delay: 1000, // delay the response by 1 second
+});
+```
+
+This route will respond to any GET request to `/users` with a status code of 200, but it will wait for 1 second before returning the response.

src/fetch-mocker.js

@@ -23,7 +23,6 @@ import {
 //-----------------------------------------------------------------------------
 
 /** @typedef {import("./types.js").RequestPattern} RequestPattern */
-/** @typedef {import("./types.js").ResponsePattern} ResponsePattern */
 /** @typedef {import("./mock-server.js").MockServer} MockServer */
 /** @typedef {import("./mock-server.js").Trace} Trace */
 
@@ -176,11 +175,11 @@ export class FetchMocker {
 			// first check to see if the request has been aborted
 			const signal = init?.signal;
 			signal?.throwIfAborted();
-			
-			// assign an event handler to listen for abort events
-			signal?.addEventListener("abort", () => {
-				throw signal?.reason ?? new Error("Fetch aborted");
-			});
+
+			// TODO: For some reason this causes Mocha tests to fail with "multiple done"
+			// signal?.addEventListener("abort", () => {
+			// 	throw new Error("Fetch was aborted.");
+			// });
 
 			// adjust any relative URLs
 			const fixedInput =
@@ -216,11 +215,15 @@ export class FetchMocker {
 				}
 			}
 
+			signal?.throwIfAborted();
+
 			const response = await this.#internalFetch(request, init?.body);
 
 			if (useCors && this.#baseUrl) {
 				assertCorsResponse(response, this.#baseUrl.origin);
 			}
+			
+			signal?.throwIfAborted();
 
 			return response;
 		};

src/mock-server.js

@@ -3,7 +3,7 @@
  * @author Nicholas C. Zakas
  */
 
-/* global Response, FormData */
+/* global Response, FormData, setTimeout */
 
 //-----------------------------------------------------------------------------
 // Imports
@@ -232,6 +232,16 @@ export class Route {
 			},
 		});
 	}
+	
+	/**
+	 * Creates a delay as specified by the route's response pattern.
+	 * @returns {Promise<void>} A promise that resolves when the delay is over.
+	 */
+	async delay() {
+		if (this.#response.delay) {
+			await new Promise(resolve => setTimeout(resolve, this.#response.delay));
+		}
+	}
 
 	/**
 	 * Returns a string representation of the route.
@@ -443,6 +453,8 @@ export class MockServer {
 				 */
 				const response = route.createResponse(PreferredResponse);
 				Object.defineProperty(response, "url", { value: request.url });
+				
+				await route.delay();
 
 				return { response, traces };
 			}

src/types.ts

@@ -17,7 +17,24 @@ export interface RequestPattern {
 export type MethodlessRequestPattern = Omit<RequestPattern, "method">;
 
 export interface ResponsePattern {
+	
+	/**
+	 * The status code of the response.
+	 */
 	status: number;
+	
+	/**
+	 * The headers of the response.
+	 */
 	headers?: Record<string, string>;
+	
+	/**
+	 * The body of the response.
+	 */
 	body?: string | any | ArrayBuffer | null;
+	
+	/**
+	 * The number of milliseconds to delay the response by.
+	 */
+	delay?: number;
 }

tests/fetch-mocker.test.js

@@ -1039,8 +1039,7 @@ describe("FetchMocker", () => {
 			);
 		});
 
-		// need to have delayed responses for this to work
-		it.skip("should throw an abort error when the request is aborted", async () => {
+		it("should throw an abort error when the request is aborted", async () => {
 			const server = new MockServer(BASE_URL);
 			const fetchMocker = new FetchMocker({
 				servers: [server],
@@ -1049,19 +1048,18 @@ describe("FetchMocker", () => {
 			server.get("/hello", {
 				status: 200,
 				body: "Hello world!",
+				delay: 100
 			});
 
 			const controller = new AbortController();
 
 			queueMicrotask(() => controller.abort());
 
-			const request = fetchMocker.fetch(BASE_URL + "/hello", {
-				signal: controller.signal,
-			});
-			
 			await assert.rejects(
-				request,
-				/AbortError/,
+				fetchMocker.fetch(BASE_URL + "/hello", {
+					signal: controller.signal,
+				}),
+				/aborted/,
 			);
 		});
 

tests/mock-server.test.js

@@ -248,6 +248,22 @@ describe("MockServer", () => {
 			const response = await server.receive(request);
 			assert.strictEqual(response.url, `${BASE_URL}/test?foo=bar`);
 		});
+		
+		it("should delay the response by at least 500ms", async () => {
+			server.get("/test", { status: 200, body: "OK", delay: 500 });
+
+			const request = createRequest({
+				method: "GET",
+				url: `${BASE_URL}/test?foo=bar`,
+			});
+
+			const startTime = Date.now();
+			const response = await server.receive(request);
+			const elapsed = Date.now() - startTime;
+			
+			assert.ok(elapsed >= 500, `Response was delayed ${elapsed}ms, expected at least 500ms.`);
+			assert.strictEqual(response.url, `${BASE_URL}/test?foo=bar`);
+		});
 	});
 
 	describe("traceReceive()", () => {