testing inflight and delayed network requests (#67)

* investigate the inflight timings

* adding more testing

cypress/e2e/delayed-start.js

@@ -0,0 +1,30 @@
+/// <reference path="../../src/index.d.ts" />
+// @ts-check
+
+import '../../src'
+
+it(
+  'waits for the request that starts later',
+  { viewportHeight: 300, viewportWidth: 500 },
+  () => {
+    cy.visit('/after')
+    cy.get('#fetch-delay').clear().type(String(1000))
+    cy.get('#server-delay').clear().type(String(1000))
+
+    cy.waitForNetworkIdlePrepare({
+      method: 'GET',
+      pattern: '/after/*',
+      alias: 'after',
+    })
+    cy.get('#fetch').click()
+    // by the time we start waiting, the network request is already out
+    cy.waitForNetworkIdle('@after', 1100).then(({ waited, callCount }) => {
+      expect(callCount, 'callCount').to.equal(1)
+      // call starts after 1000ms
+      // call lasts 1000ms
+      // plus idle wait for 1100ms
+      // together between 3100 and 3200ms
+      expect(waited, 'waited').to.be.within(3100, 3500)
+    })
+  },
+)

cypress/e2e/in-flight.js

@@ -4,20 +4,20 @@
 import '../..'
 
 // https://github.com/bahmutov/cypress-network-idle/issues/66
-it.skip(
+it(
   'waits for the inflight request',
   { viewportHeight: 300, viewportWidth: 500 },
   () => {
     cy.visit('/after')
-    cy.get('#fetch-delay').clear().type(String(1000))
+    cy.get('#server-delay').clear().type(String(1000))
 
     cy.waitForNetworkIdlePrepare({
       method: 'GET',
-      pattern: '/after',
+      pattern: '/after/*',
       alias: 'after',
     })
-    cy.get('#fetch').click()
-
+    cy.get('#fetch').click().wait(100)
+    // by the time we start waiting, the network request is already out
     cy.waitForNetworkIdle('@after', 1000).then(({ waited, callCount }) => {
       expect(callCount, 'callCount').to.equal(1)
       expect(waited, 'waited').to.be.within(2000, 2500)

server/after.html

@@ -9,11 +9,19 @@ <h1>cypress-network-idle after</h1>
       Wait for N milliseconds before making the call
       <input type="number" id="fetch-delay" value="0" />
     </p>
+    <p>
+      Make the call last M milliseconds
+      <input type="number" id="server-delay" value="0" />
+    </p>
     <script>
       document.getElementById('fetch').addEventListener('click', () => {
-        const delayEl = document.getElementById('fetch-delay')
-        const delay = delayEl.valueAsNumber || 100
-        fetch('/after/' + delay)
+        const fetchDelay =
+          document.getElementById('fetch-delay').valueAsNumber || 100
+        const serverDelay =
+          document.getElementById('server-delay').valueAsNumber || 100
+        setTimeout(() => {
+          fetch('/after/' + serverDelay)
+        }, fetchDelay)
       })
     </script>
   </body>

src/index.js

@@ -150,6 +150,7 @@ function waitForNetworkIdle(...args) {
       throw new Error(`cypress-network-idle: "${alias}" not found`)
     }
 
+    // console.log({ alias, counters: structuredClone(counters) })
     return waitForIdle(counters, timeLimitMs, timeout, interval)
   }
 
@@ -203,6 +204,7 @@ function waitForNetworkIdlePrepare({ method, pattern, alias, log } = {}) {
     counters.callCount += 1
     counters.currentCallCount += 1
     counters.lastNetworkAt = +new Date()
+    // console.log('called', method, pattern)
 
     // seems using event callbacks allows the other stubs to be called
     // https://github.com/bahmutov/cypress-network-idle/issues/8