automatically polyfill window.fetch with XMLHttpRequest

circle.yml

@@ -1273,9 +1273,8 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-recipes
           command: npm run test:ci
-          # https://github.com/cypress-io/cypress-example-recipes/pull/501
-          pull_request_id: 501
-          folder: examples/unit-testing__lit-element
+          pull_request_id: 503
+          folder: examples/stubbing-spying__window-fetch
 
   "test-binary-against-kitchensink":
     <<: *defaults
@@ -1590,11 +1589,11 @@ linux-workflow: &linux-workflow
           - build-binary
           - build-npm-package
     - test-binary-against-recipe-pull-request:
-        name: Shadow DOM recipe
+        name: Test fetch polyfill
         filters:
           branches:
             only:
-              - pull/7469
+              - polyfill-fetch
         requires:
           - build-binary
           - build-npm-package

cli/schema/cypress.schema.json

@@ -238,6 +238,11 @@
       "type": "boolean",
       "default": false,
       "description": "Enables shadow DOM support. Adds the `cy.shadow()` command and the `ignoreShadowBoundaries` option to some DOM commands."
+    },
+    "experimentalFetchPolyfill": {
+      "type": "boolean",
+      "default": false,
+      "description": "Polyfills `window.fetch` to enable Network spying and stubbing"
     }
   }
 }

packages/driver/README.md

@@ -44,6 +44,13 @@ In the browser
 localStorage.debug = "cypress:driver"
 ```
 
+## Patches
+
+- `sinon`
+- `unfetch` to polyfill `fetch`. Added constructor function to point XMLHttpRequest to the application under test window.
+
+Note: when creating a patch, make sure there is no `package-lock.json` file! Also rename the patch to have ".dev.patch" extension.
+
 <!-- ## Catalog of Events
 
 TODO: this data is accurate but also somewhat out of date.

packages/driver/package.json

@@ -65,6 +65,7 @@
     "text-mask-addons": "3.8.0",
     "underscore": "1.9.1",
     "underscore.string": "3.3.5",
+    "unfetch": "4.1.0",
     "url-parse": "1.4.7",
     "vanilla-text-mask": "5.1.1",
     "wait-on": "3.3.0",

packages/driver/src/cypress/cy.js

@@ -31,6 +31,8 @@ const $CommandQueue = require('./command_queue')
 const $VideoRecorder = require('../cy/video-recorder')
 const $TestConfigOverrides = require('../cy/testConfigOverrides')
 
+const { registerFetch } = require('unfetch')
+
 const privateProps = {
   props: { name: 'state', url: true },
   privates: { name: 'state', url: false },
@@ -258,6 +260,14 @@ const create = function (specWindow, Cypress, Cookies, state, config, log) {
 
       contentWindow.CSSStyleSheet.prototype.insertRule = _.wrap(insertRule, cssModificationSpy)
       contentWindow.CSSStyleSheet.prototype.deleteRule = _.wrap(deleteRule, cssModificationSpy)
+
+      if (config('experimentalFetchPolyfill')) {
+        // drop "fetch" polyfill that replaces it with XMLHttpRequest
+        // from the app iframe that we wrap for network stubbing
+        contentWindow.fetch = registerFetch(contentWindow)
+        // flag the polyfill to test this experimental feature easier
+        state('fetchPolyfilled', true)
+      }
     } catch (error) {} // eslint-disable-line no-empty
   }
 

packages/server/lib/config.js

@@ -104,7 +104,13 @@ browsers\
 // Know experimental flags / values
 // each should start with "experimental" and be camel cased
 // example: experimentalComponentTesting
-const experimentalConfigKeys = ['experimentalGetCookiesSameSite', 'experimentalSourceRewriting', 'experimentalComponentTesting', 'experimentalShadowDomSupport']
+const experimentalConfigKeys = toWords(`\
+experimentalGetCookiesSameSite
+experimentalSourceRewriting
+experimentalComponentTesting
+experimentalShadowDomSupport
+experimentalFetchPolyfill\
+`)
 
 const CONFIG_DEFAULTS = {
   port: null,
@@ -171,6 +177,7 @@ const CONFIG_DEFAULTS = {
   experimentalGetCookiesSameSite: false,
   experimentalSourceRewriting: false,
   experimentalShadowDomSupport: false,
+  experimentalFetchPolyfill: false,
 }
 
 const validationRules = {
@@ -218,6 +225,7 @@ const validationRules = {
   experimentalGetCookiesSameSite: v.isBoolean,
   experimentalSourceRewriting: v.isBoolean,
   experimentalShadowDomSupport: v.isBoolean,
+  experimentalFetchPolyfill: v.isBoolean,
 }
 
 const convertRelativeToAbsolutePaths = (projectRoot, obj, defaults = {}) => {

packages/server/lib/experiments.ts

@@ -55,6 +55,7 @@ const _summaries: StringValues = {
   experimentalSourceRewriting: 'Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.',
   experimentalGetCookiesSameSite: 'Adds `sameSite` values to the objects yielded from `cy.setCookie()`, `cy.getCookie()`, and `cy.getCookies()`. This will become the default behavior in Cypress 5.0.',
   experimentalShadowDomSupport: 'Enables support for shadow DOM traversal, introduces the `shadow()` command and the `ignoreShadowBoundaries` option to traversal commands.',
+  experimentalFetchPolyfill: 'Polyfills `window.fetch` to enable Network spying and stubbing',
 }
 
 /**
@@ -72,6 +73,7 @@ const _names: StringValues = {
   experimentalSourceRewriting: 'Improved source rewriting',
   experimentalGetCookiesSameSite: 'Set `sameSite` property when retrieving cookies',
   experimentalShadowDomSupport: 'Shadow DOM Support',
+  experimentalFetchPolyfill: 'Fetch polyfill',
 }
 
 /**

packages/server/test/e2e/8_fetch_polyfill_spec.js

@@ -0,0 +1,162 @@
+const e2e = require('../support/helpers/e2e').default
+const { stripIndent } = require('common-tags')
+const bodyParser = require('body-parser')
+
+const onServer = function (app) {
+  app.use(bodyParser.json({ extended: false }))
+
+  app.get('/get-json', (req, res) => {
+    return res.json([1, 2, 3])
+  })
+
+  app.get('/get-text', (req, res) => {
+    return res.send('pong')
+  })
+
+  app.post('/add', (req, res) => {
+    if (req.body.method !== 'add') {
+      throw new Error('wrong body method')
+    }
+
+    return res.json({ answer: req.body.a + req.body.b })
+  })
+
+  // page posts a JSON object
+  app.get('/addition', (req, res) => {
+    return res.send(stripIndent`
+      <body>
+        <div id="result"></div>
+        <script>
+          const data = {
+            method: 'add',
+            a: 2,
+            b: 15
+          }
+          fetch('/add', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+          }).then((response) => {
+            if (!response) {
+              throw new Error('no response')
+            }
+            if (!response.ok) {
+              throw new Error('response is not ok')
+            }
+            return response.json()
+          }).then(j => {
+            // either answer from the server
+            // or from the network stub
+            if (j.answer !== 17 && j.answer !== 193) {
+              throw new Error('wrong answer')
+            }
+            document.getElementById('result').innerText = 'answer: ' + j.answer
+          })
+        </script>
+      </body>
+    `)
+  })
+
+  // page fetches JSON array
+  app.get('/first', (req, res) => {
+    return res.send(stripIndent`
+      <body>
+        <script>
+          fetch('/get-json')
+          .then((response) => {
+            if (!response) {
+              throw new Error('no response')
+            }
+            if (!response.ok) {
+              throw new Error('response is not ok')
+            }
+            return response.json()
+          })
+          .then((list) => {
+            if (list.length !== 3) {
+              throw new Error('Wrong number of items')
+            }
+            if (list[0] !== 1) {
+              throw new Error('Wrong first item')
+            }
+            if (list[1] !== 2) {
+              throw new Error('Wrong second item')
+            }
+            if (list[2] !== 3) {
+              throw new Error('Wrong third item')
+            }
+          })
+        </script>
+        <a href="/second">second</a>
+      </body>
+    `)
+  })
+
+  // page fetches text
+  app.get('/second', (req, res) => {
+    return res.send(stripIndent`
+      <body>
+        <div id="result"></div>
+        <script>
+          fetch('/get-text')
+          .then((response) => {
+            if (!response) {
+              throw new Error('no response')
+            }
+            if (!response.ok) {
+              throw new Error('response is not ok')
+            }
+            if (response.status !== 200) {
+              throw new Error('response status not 200')
+            }
+            return response.text()
+          })
+          .then((text) => {
+            // allow response from the server
+            // or stub response
+            if (text !== 'pong' && text !== 'mock pong') {
+              throw new Error('Wrong text response')
+            }
+            document.getElementById('result').innerText = 'text: ' + text
+          })
+        </script>
+      </body>
+    `)
+  })
+}
+
+describe('e2e fetch polyfill', () => {
+  e2e.setup({
+    servers: {
+      port: 1818,
+      onServer,
+    },
+  })
+
+  e2e.it('passes', {
+    spec: 'fetch_spec.coffee',
+    snapshot: false,
+    config: {
+      experimentalFetchPolyfill: true,
+    },
+  })
+})
+
+describe('e2e no fetch polyfill', () => {
+  e2e.setup({
+    servers: {
+      port: 1818,
+      onServer,
+    },
+  })
+
+  e2e.it('passes', {
+    spec: 'fetch_no_polyfill_spec.coffee',
+    snapshot: false,
+    config: {
+      experimentalFetchPolyfill: false,
+    },
+  })
+})

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

@@ -0,0 +1,5 @@
+describe "without fetch polyfill", ->
+  it "does not set polyfilled state", ->
+    cy.visit("http://localhost:1818/first")
+      .then ->
+        expect(cy.state("fetchPolyfilled")).to.be.undefined

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

@@ -0,0 +1,44 @@
+describe "fetch works", ->
+  it "sets polyfilled state", ->
+    cy.visit("http://localhost:1818/first")
+      .then ->
+        expect(cy.state("fetchPolyfilled")).to.be.true
+
+  it "spies on fetch requests", ->
+    cy.server()
+    cy.route("/get-json").as("get-json")
+    cy.visit("http://localhost:1818/first")
+    cy.wait("@get-json")
+
+  it "spies on fetch requests from second page", ->
+    cy.server()
+    cy.route("/get-text").as("get-text")
+    cy.visit("http://localhost:1818/first")
+    cy.contains("a", "second").click()
+    cy.wait("@get-text")
+    # confirm the real response from the server is shown
+    cy.contains("text: pong").should("be.visible")
+
+  it "stubs GET fetch text", ->
+    cy.server()
+    cy.route("/get-text", "mock pong")
+    cy.visit("http://localhost:1818/second")
+    # confirm the stub response is shown
+    cy.contains("text: mock pong").should("be.visible")
+
+  it "spies on fetch POST", ->
+    cy.server()
+    cy.route("POST", "/add").as("add")
+    cy.visit("http://localhost:1818/addition")
+    cy.wait("@add")
+    # confirm the response from the server is displayed
+    cy.contains("answer: 17").should('be.visible')
+
+  it "stubs fetch POST", ->
+    cy.server()
+    cy.route("POST", "/add", {answer: 193}).as("add")
+    cy.visit("http://localhost:1818/addition")
+    cy.wait("@add")
+    # confirm the stub was used
+    cy.contains("answer: 193").should('be.visible')
+

packages/server/test/unit/config_spec.js

@@ -1137,6 +1137,7 @@ describe('lib/config', () => {
             experimentalComponentTesting: { value: false, from: 'default' },
             componentFolder: { value: 'cypress/component', from: 'default' },
             experimentalShadowDomSupport: { value: false, from: 'default' },
+            experimentalFetchPolyfill: { value: false, from: 'default' },
           })
         })
       })
@@ -1213,6 +1214,7 @@ describe('lib/config', () => {
             experimentalComponentTesting: { value: false, from: 'default' },
             componentFolder: { value: 'cypress/component', from: 'default' },
             experimentalShadowDomSupport: { value: false, from: 'default' },
+            experimentalFetchPolyfill: { value: false, from: 'default' },
             env: {
               foo: {
                 value: 'foo',

yarn.lock

@@ -24682,6 +24682,11 @@ undertaker@^1.2.1:
     object.reduce "^1.0.0"
     undertaker-registry "^1.0.0"
 
+[email protected]:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
+  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"