Network idle watcher for Cypress

packages/cypress/src/network-idle-watcher.test.ts

@@ -0,0 +1,76 @@
+import { NetworkIdleWatcher } from './network-idle-watcher';
+
+jest.useFakeTimers();
+
+it('Resolves when there is no network activity', async () => {
+  const watcher = new NetworkIdleWatcher();
+  await expect(watcher.idle()).resolves.toBeDefined();
+});
+
+it('Resolves when there is a single request and response', async () => {
+  const watcher = new NetworkIdleWatcher();
+
+  watcher.onRequest();
+  watcher.onResponse();
+
+  await expect(watcher.idle()).resolves.toBeDefined();
+});
+
+it('Resolves when there are an equal amount of requests and responses', async () => {
+  const watcher = new NetworkIdleWatcher();
+  // in total 4 requests, and 4 responses
+  watcher.onRequest();
+  watcher.onResponse();
+
+  watcher.onRequest();
+  watcher.onResponse();
+
+  watcher.onRequest();
+  watcher.onRequest();
+
+  watcher.onResponse();
+  watcher.onResponse();
+
+  await expect(watcher.idle()).resolves.toBeDefined();
+});
+
+it('Rejects if response never sent for request', async () => {
+  const watcher = new NetworkIdleWatcher();
+  // fire off request
+  watcher.onRequest();
+  const promise = watcher.idle();
+  jest.runAllTimers();
+  // no response fired off
+  await expect(promise).rejects.toBeDefined();
+});
+
+it("Resolves if response hasn't happened at time of idle(), but comes back before timeout", async () => {
+  const watcher = new NetworkIdleWatcher();
+  // fire off request
+  watcher.onRequest();
+
+  const promise = watcher.idle();
+
+  watcher.onResponse();
+  // makes sure we finish the idle watcher as soon as the reponse comes back, and not waiting the full timeout duration
+  jest.advanceTimersByTime(1);
+
+  await expect(promise).resolves.toBeDefined();
+});
+
+it("Rejects if response hasn't happened at time of idle(), and doesn't come back before timeout", async () => {
+  const watcher = new NetworkIdleWatcher();
+  // fire off request
+  watcher.onRequest();
+
+  const promise = watcher.idle();
+
+  // response returns after idle() has been called, but will take too long
+  setTimeout(() => {
+    watcher.onResponse();
+  }, 10000);
+
+  jest.runAllTimers();
+
+  await expect(promise).rejects.toBeDefined();
+});

packages/cypress/src/network-idle-watcher.ts

@@ -0,0 +1,42 @@
+const TOTAL_TIMEOUT_DURATION = 3000;
+
+// A Cypress equivalent of Playwright's `page.waitForLoadState()` (https://playwright.dev/docs/api/class-page#page-wait-for-load-state).
+// Intentionally simplistic since in Cypress this is just used to make sure there aren't any pending requests hanging around
+// after the test has finished.
+export class NetworkIdleWatcher {
+  private numInFlightRequests = 0;
+
+  private idleTimer: NodeJS.Timeout | null = null;
+
+  private exitIdleOnResponse: () => void | null = null;
+
+  async idle() {
+    return new Promise((resolve, reject) => {
+      if (this.numInFlightRequests === 0) {
+        resolve(true);
+      } else {
+        this.idleTimer = setTimeout(() => {
+          reject(new Error('some responses have not returned'));
+        }, TOTAL_TIMEOUT_DURATION);
+
+        // assign a function that'll be called as soon as responses are all back
+        this.exitIdleOnResponse = () => {
+          resolve(true);
+        };
+      }
+    });
+  }
+
+  onRequest() {
+    this.numInFlightRequests += 1;
+  }
+
+  onResponse() {
+    this.numInFlightRequests -= 1;
+    // resolve immediately if the in-flight request amount is now zero
+    if (this.numInFlightRequests === 0) {
+      clearTimeout(this.idleTimer);
+      this.exitIdleOnResponse?.();
+    }
+  }
+}