add window.fetch example

README.md

@@ -530,6 +530,7 @@ Spec | Description
 [access-component](cypress/component/advanced/access-component) | Access the mounted component directly from test
 [i18n](cypress/component/advanced/i18n) | Testing component that uses [Vue I18n](https://kazupon.github.io/vue-i18n/) plugin
 [mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party CommonJS modules like `axios`
+[mocking-fetch](cypress/component/advanced/mocking-fetch) | Mocking `window.fetch` to stub responses and test the UI
 [mocking-components](cypress/component/advanced/mocking-components) | Mocking locally registered child components during tests
 [mocking-imports](cypress/component/advanced/mocking-imports) | Stub ES6 imports from the tests
 [render-functions](cypress/component/advanced/render-functions) | Mounting components with a [render function](https://www.tutorialandexample.com/vue-js-render-functions/)

cypress/component/advanced/mocking-fetch/README.md

@@ -0,0 +1,3 @@
+# mocking fetch method
+
+We can directly access the `window` object and mock the `window.fetch` method. See [Users.vue](Users.vue) and [Users.spec.js](Users.spec.js)

cypress/component/advanced/mocking-fetch/Users.spec.js

@@ -0,0 +1,49 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress-vue-unit-test'
+import Users from './Users.vue'
+
+describe('Fetching users', () => {
+  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('renders real data', () => {
+    mount(Users)
+    cy.get('.user').should('have.length', 3)
+  })
+
+  it('can mock window.fetch method', () => {
+    cy.stub(window, 'fetch').resolves({
+      json: cy.stub().resolves(mockUsers),
+    })
+    mount(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 UI while fetch is happening', () => {
+    const mockResponse = {
+      json: cy.stub().resolves(mockUsers),
+    }
+    cy.stub(window, 'fetch').resolves(
+      // resolve promise after a delay
+      Cypress.Promise.resolve(mockResponse).delay(1000),
+    )
+    mount(Users)
+    cy.get('.loading').should('be.visible')
+    cy.get('.loading').should('not.exist')
+
+    cy.get('.user').should('have.length', mockUsers.length)
+    cy.get('.user')
+      .first()
+      .should('have.text', `${mockUsers[0].id} - ${mockUsers[0].name}`)
+  })
+})

cypress/component/advanced/mocking-fetch/Users.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Users</h1>
+    <ul v-if="users && users.length">
+      <li class="user" v-for="user of users" v-bind:key="user.id">
+        <p><strong>{{user.id}}</strong> - {{user.name}}</p>
+      </li>
+    </ul>
+    <p class="loading" v-else>Loading...</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      users: []
+    }
+  },
+
+  created() {
+    fetch('https://jsonplaceholder.cypress.io/users?_limit=3')
+    .then(response => response.json())
+    .then(list => {
+      this.users = list
+    })
+  }
+}
+</script>

cypress/fixtures/users.json

@@ -0,0 +1,7 @@
+[{
+  "id": "101",
+  "name": "Cypress User"
+}, {
+  "id": "102",
+  "name": "Svelte User"
+}]