feat: polyfill fetch and example (#167)

Stubbing `fetch` requests by polyfilling them and then using Cypress network control

Author: bahmutov

README.md

@@ -250,6 +250,7 @@ Test | Description
 [styles](cypress/components/styles) | Shows inline, CSS and external stylesheet styles in spec
 [tutorial](cypress/components/tutorial) | A few components and tests from Svelte tutorial
 [mocking-fetch](cypress/components/mocking-fetch) | Mocking `window.fetch` before mounting the component
+[mocking-network](cypress/components/mocking-network) | Polyfills `window.fetch` [automatically](https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/) and tests the component
 <!-- prettier-ignore-end -->
 
 ## Related tools

cypress/components/mocking-network/README.md

@@ -0,0 +1,5 @@
+# mocking network example
+
+In [Users.svelte](Users.svelte) the application is requesting a list of resources using `fetch`. We polyfill the `window.fetch` to fall back to `XMLHttpRequest` that Cypress can observe and stub using [experimentalFetchPolyfill](https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/)
+
+![Loading test](images/loading-test.png)

cypress/components/mocking-network/Users.spec.js

@@ -0,0 +1,47 @@
+/// <reference types="cypress" />
+import Users from './Users.svelte'
+import { mount } from 'cypress-svelte-unit-test'
+
+describe('Mocking network', () => {
+  let mockUsers
+
+  before(() => {
+    // load the mock user list once from cypress/fixtures/users.json
+    cy.fixture('users').then((list) => {
+      expect(list).to.have.length(2)
+      mockUsers = list
+    })
+  })
+
+  it('shows 3 users without mocking', () => {
+    mount(Users)
+    cy.get('.user').should('have.length', 3)
+  })
+
+  it('stubs network request', () => {
+    cy.server()
+    cy.route('/users?_limit=3', 'fixture:users').as('users')
+    mount(Users)
+
+    cy.wait('@users')
+
+    cy.get('.user').should('have.length', mockUsers.length)
+    cy.get('.user')
+      .first()
+      .should('have.text', `${mockUsers[0].id} - ${mockUsers[0].name}`)
+  })
+
+  it('shows loading element', () => {
+    cy.server()
+    cy.route({
+      url: '/users?_limit=3',
+      response: 'fixture:users',
+      delay: 1000,
+    })
+    mount(Users)
+    cy.get('.loading').should('be.visible')
+    // and once the list is loaded, the loading indicator goes away
+    cy.get('.loading').should('not.exist')
+    cy.get('.user').should('not.be.empty')
+  })
+})

cypress/components/mocking-network/Users.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { onMount } from "svelte";
+
+  let users = [];
+
+  onMount(async () => {
+    const res = await fetch('https://jsonplaceholder.cypress.io/users?_limit=3');
+    users = await res.json();
+  });
+</script>
+
+<div>
+    <h1>Users List</h1>
+    {#each users as user}
+      <ul>
+        <li class="user">
+          <span>{user.id} - {user.name}</span>
+        </li>
+    </ul>
+    {:else}
+      <!-- this block renders when users.length === 0 -->
+      <p class="loading">loading...</p>
+    {/each}
+</div>

cypress/components/mocking-network/images/loading-test.png

@@ -2,6 +2,7 @@ import {
   checkMountModeEnabled,
   cleanupStyles,
   injectStylesBeforeElement,
+  polyfillFetchIfNeeded,
 } from './utils'
 
 const rootId = 'cypress-root'
@@ -127,4 +128,8 @@ export function mount(
   })
 }
 
+beforeEach(() => {
+  polyfillFetchIfNeeded()
+})
+
 export default mount

lib/index.ts

@@ -1,4 +1,5 @@
 import { StyleOptions } from '.'
+import unfetch from 'unfetch'
 
 export function checkMountModeEnabled() {
   // @ts-ignore
@@ -141,3 +142,21 @@ export const injectStylesBeforeElement = (
 
   return insertLocalCssFiles(cssFiles, document, el, options.log)
 }
+
+/**
+ * Replaces window.fetch with a polyfill based on XMLHttpRequest
+ * that Cypress can spy on and stub
+ * @see https://www.cypress.io/blog/2020/06/29/experimental-fetch-polyfill/
+ */
+export function polyfillFetchIfNeeded() {
+  // @ts-ignore
+  if (Cypress.config('experimentalFetchPolyfill')) {
+    // @ts-ignore
+    if (!cy.state('fetchPolyfilled')) {
+      delete window.fetch
+      window.fetch = unfetch
+      // @ts-ignore
+      cy.state('fetchPolyfilled', true)
+    }
+  }
+}

lib/utils.ts

@@ -44,7 +44,8 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@bahmutov/cy-rollup": "2.0.0"
+    "@bahmutov/cy-rollup": "2.0.0",
+    "unfetch": "4.1.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.8.1",