feat: add ability to wait for multiple routes

Author: wheresrhys

docs/docs/API/route/options.md

@@ -32,8 +32,8 @@ Delays responding for the number of milliseconds specified.
 
 ### waitFor
 
-`{String}`
-Useful for testing race conditions. Use the name of another route, and this route will only respond after that one has. (Note, this does not wait for the body - only the initial response payload).
+`{String|[String]}`
+Useful for testing race conditions. Use the name of another route (or a list of names), and this route will only respond after that one has. (Note, this does not wait for the body - only the initial response payload).
 
 ### sticky
 

packages/fetch-mock/src/Route.ts

@@ -31,7 +31,7 @@ export type UserRouteSpecificConfig = {
 	response?: RouteResponse | RouteResponseFunction;
 	repeat?: number;
 	delay?: number;
-	waitFor?: RouteName;
+	waitFor?: RouteName | RouteName[];
 	sticky?: boolean;
 };
 export type InternalRouteConfig = {
@@ -200,13 +200,18 @@ class Route {
 		}
 	}
 
-	waitFor(awaitedRoute: Route) {
+	waitFor(awaitedRoutes: Route[]) {
 		const { response } = this.config;
-		this.config.response = new Promise((res) =>
-			awaitedRoute.onRespond(() => {
-				res(response);
-			}),
-		);
+		this.config.response = Promise.all(
+			awaitedRoutes.map(
+				(awaitedRoute) =>
+					new Promise((res) =>
+						awaitedRoute.onRespond(() => {
+							res(undefined);
+						}),
+					),
+			),
+		).then(() => response);
 	}
 
 	onRespond(func: () => void) {

packages/fetch-mock/src/Router.ts

@@ -343,18 +343,27 @@ export default class Router {
 			);
 		}
 		if (route.config.waitFor) {
-			const routeToAwait = this.routes.find(
-				({ config: { name: existingName } }) =>
-					route.config.waitFor === existingName,
-			);
+			const routeNamesToWaitFor = Array.isArray(route.config.waitFor)
+				? route.config.waitFor
+				: [route.config.waitFor];
+
+			const routesToAwait: Route[] = [];
 
-			if (!routeToAwait) {
-				throw new Error(
-					`Cannot wait for route \`${route.config.waitFor}\`: route of that name does not exist`,
+			routeNamesToWaitFor.forEach((routeName) => {
+				const routeToAwait = this.routes.find(
+					({ config: { name: existingName } }) => routeName === existingName,
 				);
-			} else {
-				route.waitFor(routeToAwait);
-			}
+
+				if (routeToAwait) {
+					routesToAwait.push(routeToAwait);
+				} else {
+					throw new Error(
+						`Cannot wait for route \`${routeName}\`: route of that name does not exist`,
+					);
+				}
+			});
+
+			route.waitFor(routesToAwait);
 		}
 
 		this.routes.push(route);

packages/fetch-mock/src/__tests__/FetchMock/response-negotiation.test.js

@@ -157,6 +157,32 @@ describe('response negotiation', () => {
 			]);
 			expect(routesCalled).toEqual(['a', 'b', 'c']);
 		});
+
+		it('Can wait for multiple routes', async () => {
+			fm.route('http://a.com', 200, 'route-a')
+				.route('http://b.com', 200, 'route-b')
+				.route('http://c.com', 200, { waitFor: ['route-a', 'route-b'] });
+			let routesCalled = [];
+			await Promise.all([
+				fm.fetchHandler('http://c.com').then(() => routesCalled.push('c')),
+				fm.fetchHandler('http://b.com').then(() => routesCalled.push('b')),
+				fm.fetchHandler('http://a.com').then(() => routesCalled.push('a')),
+			]);
+			expect(routesCalled).toEqual(['b', 'a', 'c']);
+		});
+
+		it('Not error if waited for route responds again', async () => {
+			fm.route('http://a.com', 200, 'route-a').route('http://b.com', 200, {
+				waitFor: 'route-a',
+			});
+			await Promise.all([
+				fm.fetchHandler('http://b.com'),
+				fm.fetchHandler('http://a.com'),
+			]);
+			await expect(fm.fetchHandler('http://a.com')).resolves.toBeInstanceOf(
+				Response,
+			);
+		});
 	});
 	it('Response', async () => {
 		fm.route('http://a.com/', new Response('http://a.com/', { status: 200 }));