Use websockets to stub large XHR response bodies instead of headers

packages/driver/src/cy/commands/xhr.coffee

@@ -87,6 +87,9 @@ startXhrServer = (cy, state, config) ->
     xhrUrl: config("xhrUrl")
     stripOrigin: stripOrigin
 
+    emitIncoming: (id, route) ->
+      Cypress.backend('incoming:xhr', id, route)
+
     ## shouldnt these stubs be called routes?
     ## rename everything related to stubs => routes
     onSend: (xhr, stack, route) =>
@@ -256,7 +259,7 @@ module.exports = (Commands, Cypress, cy, state, config) ->
     ## window such as if the last test ended
     ## with a cross origin window
     try
-      server = startXhrServer(cy, state, config)
+      server = startXhrServer(cy, state, config, Cypress)
     catch err
       ## in this case, just don't bind to the server
       server = null

packages/driver/src/cypress/server.coffee

@@ -10,11 +10,8 @@ props                    = "onreadystatechange onload onerror".split(" ")
 
 restoreFn = null
 
-setHeader = (xhr, key, val, transformer) ->
+setHeader = (xhr, key, val) ->
   if val?
-    if transformer
-      val = transformer(val)
-
     key = "X-Cypress-" + _.capitalize(key)
     xhr.setRequestHeader(key, encodeURI(val))
 
@@ -176,18 +173,30 @@ create = (options = {}) ->
       hasEnabledStubs and route and route.response?
 
     applyStubProperties: (xhr, route) ->
-      responser = if _.isObject(route.response) then JSON.stringify else null
-
-      ## add header properties for the xhr's id
-      ## and the testId
-      setHeader(xhr, "id", xhr.id)
-      # setHeader(xhr, "testId", options.testId)
-
-      setHeader(xhr, "status",   route.status)
-      setHeader(xhr, "response", route.response, responser)
-      setHeader(xhr, "matched",  route.url + "")
-      setHeader(xhr, "delay",    route.delay)
-      setHeader(xhr, "headers",  route.headers, transformHeaders)
+      responseToString = =>
+        if not _.isString(route.response)
+          return JSON.stringify(route.response)
+
+        route.response
+
+      response = responseToString()
+
+      headers = {
+        "id": xhr.id
+        "status": route.status
+        "matched": route.url + ""
+        "delay": route.delay
+        "headers": transformHeaders(route.headers)
+      }
+
+      if response.length > 4096
+        options.emitIncoming(xhr.id, response)
+        headers.responseDeferred = true
+      else
+        headers.response = response
+
+      _.map headers, (v, k) =>
+        setHeader(xhr, k, v)
 
     route: (attrs = {}) ->
       warnOnStubDeprecation(attrs, "route")

packages/runner/src/lib/event-manager.js

@@ -296,6 +296,10 @@ const eventManager = {
       })
     })
 
+    Cypress.on('test:before:run:async', () => {
+      Cypress.backend('reset:xhr:server')
+    })
+
     Cypress.on('script:error', (err) => {
       Cypress.stop()
       localBus.emit('script:error', err)

packages/server/__snapshots__/4_xhr_spec.coffee.js

@@ -23,20 +23,21 @@ exports['e2e xhr / passes'] = `
     ✓ does not inject into json's contents from http server even requesting text/html
     ✓ does not inject into json's contents from file server even requesting text/html
     ✓ works prior to visit
+    ✓ can stub a 100kb response
     server with 1 visit
       ✓ response body
       ✓ request body
       ✓ aborts
 
 
-  8 passing
+  9 passing
 
 
   (Results)
 
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ Tests:        8                                                                                │
-  │ Passing:      8                                                                                │
+  │ Tests:        9                                                                                │
+  │ Passing:      9                                                                                │
   │ Failing:      0                                                                                │
   │ Pending:      0                                                                                │
   │ Skipped:      0                                                                                │
@@ -60,9 +61,9 @@ exports['e2e xhr / passes'] = `
 
        Spec                                              Tests  Passing  Failing  Pending  Skipped  
   ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
-  │ ✔  xhr_spec.coffee                          XX:XX        8        8        -        -        - │
+  │ ✔  xhr_spec.coffee                          XX:XX        9        9        -        -        - │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
-    ✔  All specs passed!                        XX:XX        8        8        -        -        -  
+    ✔  All specs passed!                        XX:XX        9        9        -        -        -  
 
 
 `

packages/server/lib/controllers/xhrs.coffee

@@ -18,7 +18,7 @@ isValidJSON = (text) ->
   return false
 
 module.exports = {
-  handle: (req, res, config, next) ->
+  handle: (req, res, getDeferredResponse, config, next) ->
     get = (val, def) ->
       decodeURI(req.get(val) ? def)
 
@@ -27,6 +27,10 @@ module.exports = {
     headers  = get("x-cypress-headers", null)
     response = get("x-cypress-response", "")
 
+    if get("x-cypress-responsedeferred", "")
+      id = get("x-cypress-id")
+      response = getDeferredResponse(id)
+
     respond = =>
       ## figure out the stream interface and pipe these
       ## chunks to the response
@@ -79,10 +83,13 @@ module.exports = {
       {data: bytes, encoding: encoding}
 
   getResponse: (resp, config) ->
+    if resp.then
+      return resp
+
     if fixturesRe.test(resp)
-      @_get(resp, config)
-    else
-      Promise.resolve({data: resp})
+      return @_get(resp, config)
+
+    Promise.resolve({data: resp})
 
   parseContentType: (response) ->
     ret = (type) ->

packages/server/lib/routes.coffee

@@ -15,7 +15,7 @@ files       = require("./controllers/files")
 proxy       = require("./controllers/proxy")
 staticCtrl  = require("./controllers/static")
 
-module.exports = (app, config, request, getRemoteState, project, nodeProxy) ->
+module.exports = (app, config, request, getRemoteState, getDeferredResponse, project, nodeProxy) ->
   ## routing for the actual specs which are processed automatically
   ## this could be just a regular .js file or a .coffee file
   app.get "/__cypress/tests", (req, res, next) ->
@@ -45,7 +45,7 @@ module.exports = (app, config, request, getRemoteState, project, nodeProxy) ->
     files.handleIframe(req, res, config, getRemoteState)
 
   app.all "/__cypress/xhrs/*", (req, res, next) ->
-    xhrs.handle(req, res, config, next)
+    xhrs.handle(req, res, getDeferredResponse, config, next)
 
   app.get "/__root/*", (req, res, next) ->
     file = path.join(config.projectRoot, req.params[0])

packages/server/lib/server.coffee

@@ -31,6 +31,7 @@ logger       = require("./logger")
 Socket       = require("./socket")
 Request      = require("./request")
 fileServer   = require("./file_server")
+XhrServer    = require("./xhr_ws_server")
 
 DEFAULT_DOMAIN_NAME    = "localhost"
 fullyQualifiedRe       = /^https?:\/\//
@@ -145,12 +146,13 @@ class Server
       ## and set the responseTimeout
       @_request = Request({timeout: config.responseTimeout})
       @_nodeProxy = httpProxy.createProxyServer()
+      @_xhrServer = XhrServer.create()
 
       getRemoteState = => @_getRemoteState()
 
       @createHosts(config.hosts)
 
-      @createRoutes(app, config, @_request, getRemoteState, project, @_nodeProxy)
+      @createRoutes(app, config, @_request, getRemoteState, @_xhrServer.getDeferredResponse, project, @_nodeProxy)
 
       @createServer(app, config, project, @_request, onWarning)
 
@@ -702,10 +704,11 @@ class Server
   startWebsockets: (automation, config, options = {}) ->
     options.onResolveUrl = @_onResolveUrl.bind(@)
     options.onRequest    = @_onRequest.bind(@)
+    options.onIncomingXhr = @_xhrServer.onIncomingXhr
+    options.onResetXhrServer = @_xhrServer.reset
 
     @_socket = Socket(config)
     @_socket.startListening(@_server, automation, config, options)
     @_normalizeReqUrl(@_server)
-    # handleListeners(@_server)
 
 module.exports = Server

packages/server/lib/socket.coffee

@@ -132,6 +132,8 @@ class Socket
 
     _.defaults options,
       socketId: null
+      onBeforeTestRun: ->
+      onIncomingXhr: ->
       onSetRunnables: ->
       onMocha: ->
       onConnect: ->
@@ -298,6 +300,10 @@ class Socket
               options.onResolveUrl(url, headers, automationRequest, resolveOpts)
             when "http:request"
               options.onRequest(headers, automationRequest, args[0])
+            when "reset:xhr:server"
+              options.onResetXhrServer()
+            when "incoming:xhr"
+              options.onIncomingXhr(args[0], args[1])
             when "get:fixture"
               fixture.get(config.fixturesFolder, args[0], args[1])
             when "read:file"
@@ -335,6 +341,8 @@ class Socket
       socket.on "external:open", (url) ->
         require("electron").shell.openExternal(url)
 
+      socket.on "test:before:run:async", options.onBeforeTestRun
+
       reporterEvents.forEach (event) =>
         socket.on event, (data) =>
           @toRunner(event, data)
@@ -343,6 +351,7 @@ class Socket
         socket.on event, (data) =>
           @toReporter(event, data)
 
+
   end: ->
     @ended = true
 

packages/server/lib/xhr_ws_server.ts

@@ -0,0 +1,70 @@
+import _ from 'lodash'
+import Bluebird from 'bluebird'
+import debugModule from 'debug'
+
+const debug = debugModule('cypress:server:xhr_ws_server')
+
+function trunc (str) {
+  return _.truncate(str, {
+    length: 100,
+    omission: '... [truncated to 100 chars]',
+  })
+}
+
+export function create () {
+  let incomingXhrs: any = {}
+
+  function onIncomingXhr (id, data) {
+    debug('onIncomingXhr %o', { id, res: trunc(data) })
+    const deferred = incomingXhrs[id]
+
+    if (deferred) {
+      return deferred.resolve({
+        data,
+      })
+    }
+
+    incomingXhrs[id] = data
+  }
+
+  function getDeferredResponse (id) {
+    debug('getDeferredResponse %o', { id })
+    // if we already have it, send it
+    const res = incomingXhrs[id]
+
+    if (res) {
+      if (res.then) {
+        debug('returning existing deferred promise for %o', { id })
+      }
+
+      debug('already have deferred response %o', { id, res: trunc(res) })
+      delete incomingXhrs[id]
+
+      return res
+    }
+
+    return new Bluebird((resolve, reject) => {
+      debug('do not have response, waiting %o', { id })
+      incomingXhrs[id] = { resolve, reject }
+    })
+    .tap((res) => {
+      debug('deferred response found %o', { id, res: trunc(res) })
+    })
+  }
+
+  function reset () {
+    debug('resetting incomingXhrs %o', { length: incomingXhrs.length })
+
+    _.forEach(incomingXhrs, ({ reject }) => {
+      reject(new Error('This stubbed XHR was pending on a stub response object from the driver, but the test ended before that happened.'))
+    })
+
+    incomingXhrs = {}
+  }
+
+  return {
+    onIncomingXhr,
+    getDeferredResponse,
+    reset,
+  }
+}

packages/server/test/support/fixtures/projects/e2e/cypress/integration/xhr_spec.coffee

@@ -76,6 +76,33 @@ describe "xhrs", ->
   it "works prior to visit", ->
     cy.server()
 
+  ## https://github.com/cypress-io/cypress/issues/5431
+  it "can stub a 100kb response", (done) ->
+    body = 'X'.repeat(100 * 1024)
+
+    cy.server()
+    cy.route({
+      method: 'POST'
+      url: '/foo'
+      response: {
+        'bar': body
+      }
+    })
+
+    cy.visit("/index.html")
+    .then (win) ->
+      xhr = new win.XMLHttpRequest
+      xhr.open("POST", "/foo")
+      xhr.send()
+
+      finish = ->
+        expect(xhr.status).to.eq(200)
+        expect(xhr.responseText).to.include(body)
+        done()
+
+      xhr.onload = finish
+      xhr.onerror = finish
+
   describe "server with 1 visit", ->
     before ->
       cy.visit("/xhr.html")

packages/server/test/unit/xhr_ws_server_spec.ts

@@ -0,0 +1,36 @@
+import chai, { expect } from 'chai'
+import chaiAsPromised from 'chai-as-promised'
+import * as XhrServer from '../../lib/xhr_ws_server'
+
+chai.use(chaiAsPromised)
+
+describe('lib/xhr_ws_server', function () {
+  context('#create', function () {
+    let xhrServer
+
+    beforeEach(function () {
+      xhrServer = XhrServer.create()
+    })
+
+    it('resolves a response when incomingXhr is received before request', function () {
+      xhrServer.onIncomingXhr('foo', 'bar')
+      expect(xhrServer.getDeferredResponse('foo')).to.eq('bar')
+    })
+
+    it('resolves a response when incomingXhr is received after request', function () {
+      const p = xhrServer.getDeferredResponse('foo')
+
+      xhrServer.onIncomingXhr('foo', 'bar')
+
+      return expect(p).to.eventually.deep.eq({ data: 'bar' })
+    })
+
+    it('rejects a response when incomingXhr is received and test gets reset', function () {
+      const p = xhrServer.getDeferredResponse('foo')
+
+      xhrServer.reset()
+
+      return expect(p).to.be.rejectedWith('This stubbed XHR was pending')
+    })
+  })
+})