fix(net-stubbing): fix waiting on responses with no-body status codes (#9097)

Author: flotwig

packages/driver/cypress/integration/commands/net_stubbing_spec.ts

@@ -475,6 +475,7 @@ describe('network stubbing', { retries: 2 }, function () {
   context('network handling', function () {
     // @see https://github.com/cypress-io/cypress/issues/8497
     it('can load transfer-encoding: chunked redirects', function () {
+      cy.intercept('*')
       const url4 = 'http://localhost:3501/fixtures/generic.html'
       const url3 = `http://localhost:3501/redirect?href=${encodeURIComponent(url4)}`
       const url2 = `https://localhost:3502/redirect?chunked=1&href=${encodeURIComponent(url3)}`
@@ -1209,10 +1210,10 @@ describe('network stubbing', { retries: 2 }, function () {
 
     context('correctly determines the content-length of an intercepted request', function () {
       it('when body is empty', function (done) {
-        cy.route2('/post-only', function (req) {
+        cy.intercept('/post-only', function (req) {
           req.body = ''
         }).then(function () {
-          cy.route2('/post-only', function (req) {
+          cy.intercept('/post-only', function (req) {
             expect(req.headers['content-length']).to.eq('0')
 
             done()
@@ -1224,10 +1225,10 @@ describe('network stubbing', { retries: 2 }, function () {
       })
 
       it('when body contains ascii', function (done) {
-        cy.route2('/post-only', function (req) {
+        cy.intercept('/post-only', function (req) {
           req.body = 'this is only ascii'
         }).then(function () {
-          cy.route2('/post-only', function (req) {
+          cy.intercept('/post-only', function (req) {
             expect(req.headers['content-length']).to.eq('18')
 
             done()
@@ -1239,10 +1240,10 @@ describe('network stubbing', { retries: 2 }, function () {
       })
 
       it('when body contains unicode', function (done) {
-        cy.route2('/post-only', function (req) {
+        cy.intercept('/post-only', function (req) {
           req.body = '🙃🤔'
         }).then(function () {
-          cy.route2('/post-only', function (req) {
+          cy.intercept('/post-only', function (req) {
             expect(req.headers['content-length']).to.eq('8')
 
             done()
@@ -1288,6 +1289,18 @@ describe('network stubbing', { retries: 2 }, function () {
       .wait('@dest')
     })
 
+    it('can simply wait on redirects without intercepting', function () {
+      const href = `/fixtures/generic.html?t=${Date.now()}`
+      const url = `/redirect?href=${encodeURIComponent(href)}`
+
+      cy.intercept('/redirect')
+      .as('redirect')
+      .intercept('/fixtures/generic.html').as('dest')
+      .then(() => fetch(url))
+      .wait('@redirect')
+      .wait('@dest')
+    })
+
     // @see https://github.com/cypress-io/cypress/issues/7967
     it('can skip redirects via followRedirect', function () {
       const href = `/fixtures/generic.html?t=${Date.now()}`
@@ -1983,6 +1996,36 @@ describe('network stubbing', { retries: 2 }, function () {
       })
     })
 
+    // @see https://github.com/cypress-io/cypress/issues/8999
+    it('can spy on a 204 no body response', function () {
+      cy.intercept('/status-code').as('status')
+      .then(() => {
+        $.get('/status-code?code=204')
+      })
+      .wait('@status').its('response.statusCode').should('eq', 204)
+    })
+
+    // @see https://github.com/cypress-io/cypress/issues/8934
+    it('can spy on a 304 not modified image response', function () {
+      const url = `/fixtures/media/cypress.png?i=${Date.now()}`
+
+      cy.intercept(url).as('image')
+      .then(() => {
+        $.get({ url, cache: true })
+      })
+      .then(() => {
+        if (Cypress.isBrowser('firefox')) {
+          // strangely, Firefox requires some time to be waited before the first image response will be cached
+          cy.wait(1000)
+        }
+      })
+      .then(() => {
+        $.get({ url, cache: true })
+      })
+      .wait('@image').its('response.statusCode').should('eq', 200)
+      .wait('@image').its('response.statusCode').should('eq', 304)
+    })
+
     context('with an intercepted request', function () {
       it('can dynamically alias the request', function () {
         cy.intercept('/foo', (req) => {

packages/driver/cypress/plugins/server.js

@@ -41,13 +41,17 @@ const createApp = (port) => {
     .send('<html><body>hello there</body></html>')
   })
 
-  app.get('/redirect', (req, res) => {
+  app.get('/status-code', (req, res) => {
+    res.sendStatus(req.query.code || 200)
+  })
+
+  app.all('/redirect', (req, res) => {
     if (req.query.chunked) {
       res.setHeader('transfer-encoding', 'chunked')
       res.removeHeader('content-length')
     }
 
-    res.statusCode = 301
+    res.statusCode = Number(req.query.code || 301)
     res.setHeader('Location', req.query.href)
     res.end()
   })

packages/net-stubbing/lib/server/intercept-request.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import concatStream from 'concat-stream'
+import { concatStream } from '@packages/network'
 import Debug from 'debug'
 import url from 'url'
 

packages/net-stubbing/lib/server/intercept-response.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash'
-import concatStream from 'concat-stream'
+import { concatStream, httpUtils } from '@packages/network'
 import Debug from 'debug'
-import { Readable } from 'stream'
+import { Readable, PassThrough } from 'stream'
 
 import {
   ResponseMiddleware,
@@ -65,17 +65,30 @@ export const InterceptResponse: ResponseMiddleware = function () {
 
   this.makeResStreamPlainText()
 
-  this.incomingResStream.pipe(concatStream((resBody) => {
-    res.body = resBody.toString()
+  new Promise((resolve) => {
+    if (httpUtils.responseMustHaveEmptyBody(this.req, this.incomingRes)) {
+      resolve('')
+    } else {
+      this.incomingResStream.pipe(concatStream((resBody) => {
+        resolve(resBody)
+      }))
+    }
+  })
+  .then((body) => {
+    const pt = this.incomingResStream = new PassThrough()
+
+    pt.end(body)
+
+    res.body = String(body)
     emitReceived()
-  }))
 
-  if (!backendRequest.waitForResponseContinue) {
-    this.next()
-  }
+    if (!backendRequest.waitForResponseContinue) {
+      this.next()
+    }
 
-  // this may get set back to `true` by another route
-  backendRequest.waitForResponseContinue = false
+    // this may get set back to `true` by another route
+    backendRequest.waitForResponseContinue = false
+  })
 }
 
 export async function onResponseContinue (state: NetStubbingState, frame: NetEventFrames.HttpResponseContinue) {

packages/net-stubbing/package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@types/mime-types": "2.1.0",
-    "concat-stream": "^2.0.0",
     "is-html": "^2.0.0",
     "lodash": "4.17.15",
     "mime-types": "2.1.27",

packages/network/lib/http-utils.ts

@@ -0,0 +1,11 @@
+import _ from 'lodash'
+import { IncomingMessage } from 'http'
+
+// https://github.com/cypress-io/cypress/issues/4298
+// https://tools.ietf.org/html/rfc7230#section-3.3.3
+// HEAD, 1xx, 204, and 304 responses should never contain anything after headers
+const NO_BODY_STATUS_CODES = [204, 304]
+
+export function responseMustHaveEmptyBody (req: IncomingMessage, res: IncomingMessage) {
+  return _.includes(NO_BODY_STATUS_CODES, res.statusCode) || (req.method && req.method.toLowerCase() === 'head')
+}

packages/network/lib/index.ts

@@ -2,13 +2,15 @@ import agent from './agent'
 import * as blocked from './blocked'
 import * as connect from './connect'
 import * as cors from './cors'
+import * as httpUtils from './http-utils'
 import * as uri from './uri'
 
 export {
   agent,
   blocked,
   connect,
   cors,
+  httpUtils,
   uri,
 }
 

packages/proxy/lib/http/response-middleware.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import charset from 'charset'
 import { CookieOptions } from 'express'
-import { cors, concatStream } from '@packages/network'
+import { cors, concatStream, httpUtils } from '@packages/network'
 import { CypressIncomingRequest, CypressOutgoingResponse } from '@packages/proxy'
 import debugModule from 'debug'
 import { HttpMiddleware } from '.'
@@ -92,15 +92,6 @@ function resIsGzipped (res: IncomingMessage) {
   return (res.headers['content-encoding'] || '').includes('gzip')
 }
 
-// https://github.com/cypress-io/cypress/issues/4298
-// https://tools.ietf.org/html/rfc7230#section-3.3.3
-// HEAD, 1xx, 204, and 304 responses should never contain anything after headers
-const NO_BODY_STATUS_CODES = [204, 304]
-
-function responseMustHaveEmptyBody (req: CypressIncomingRequest, res: IncomingMessage) {
-  return _.some([_.includes(NO_BODY_STATUS_CODES, res.statusCode), _.invoke(req.method, 'toLowerCase') === 'head'])
-}
-
 function setCookie (res: CypressOutgoingResponse, k: string, v: string, domain: string) {
   let opts: CookieOptions = { domain }
 
@@ -367,7 +358,7 @@ const ClearCyInitialCookie: ResponseMiddleware = function () {
 }
 
 const MaybeEndWithEmptyBody: ResponseMiddleware = function () {
-  if (responseMustHaveEmptyBody(this.req, this.incomingRes)) {
+  if (httpUtils.responseMustHaveEmptyBody(this.req, this.incomingRes)) {
     this.res.end()
 
     return this.end()