add force404 solution using cy.intercept (#672)

cypress-io · Mar 12, 2021 · f419a75 · f419a75
1 parent 43b57a8
commit f419a75
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 3 deletions.
diff --git a/examples/stubbing-spying__intercept/app.js b/examples/stubbing-spying__intercept/app.js
@@ -17,7 +17,12 @@ function getFavoriteFruits () {
 
   favFruits.innerHTML = '<div class="loader"></div>'
 
-  fetch('/favorite-fruits')
+  fetch('/favorite-fruits', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
   .then((response) => {
     /* eslint-disable-next-line no-console */
     console.log('fetch response', response)
@@ -50,8 +55,19 @@ const loadUsers = (nUsers = 3) => {
       console.log('loading %d users', nUsers)
       document.querySelector('#users').innerText = ''
 
-      fetch(`https://jsonplaceholder.cypress.io/users?_limit=${nUsers}`)
-      .then((r) => r.json())
+      fetch(`https://jsonplaceholder.cypress.io/users?_limit=${nUsers}`, {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+        },
+      })
+      .then((r) => {
+        if (!r.ok) {
+          throw new Error(r.statusText)
+        }
+
+        return r.json()
+      })
       .then((users) => {
         console.table(users)
 

diff --git a/examples/stubbing-spying__intercept/cypress/integration/stub-fetch-spec.js b/examples/stubbing-spying__intercept/cypress/integration/stub-fetch-spec.js
@@ -282,5 +282,63 @@ describe('intercept', () => {
 
       cy.get('#post-user').click()
     })
+
+    it('stubs all non-stubbed Ajax with 404', () => {
+      // similar to the deprecated cy.server({ force:404 })
+      // we want to stub all non-stubbed Ajax calls
+      cy.intercept('/favorite-fruits', { fixture: 'fruits.json' })
+      cy.visit('/')
+      cy.get('.favorite-fruits li').should('have.length', 3)
+
+      // now let's stop all other Ajax application/json requests
+      cy.intercept({
+        headers: {
+          accept: 'application/json',
+        },
+      }, {
+        statusCode: 404,
+      })
+
+      // let's try non-stubbed network call - it should fail
+      cy.get('#load-users').click()
+      cy.contains('#users', 'Not Found').should('be.visible')
+      // but we can still fetch fruits
+      cy.reload()
+      cy.get('.favorite-fruits li').should('have.length', 3)
+      // yet another fetch is blocked
+      cy.get('#load-five-users').click()
+      cy.contains('#users', 'Not Found').should('be.visible')
+    })
+
+    it('stubs all Ajax but fruits with 404', () => {
+      // similar to the deprecated cy.server({ force:404 })
+      // we want to stub all Ajax calls but GET /favorite-fruits
+      // now let's stop all other Ajax application/json requests
+      cy.intercept('*', (req) => {
+        if (req.method === 'GET' && req.url.endsWith('/favorite-fruits')) {
+          // let the request go to the server
+          return
+        }
+
+        if (req.headers.accept === 'application/json') {
+          req.reply({
+            statusCode: 404,
+          })
+        }
+      })
+
+      cy.visit('/')
+      cy.get('.favorite-fruits li').should('have.length', 5)
+
+      // let's try non-stubbed network call - it should fail
+      cy.get('#load-users').click()
+      cy.contains('#users', 'Not Found').should('be.visible')
+      // but we can still fetch fruits
+      cy.reload()
+      cy.get('.favorite-fruits li').should('have.length', 5)
+      // yet another fetch is blocked
+      cy.get('#load-five-users').click()
+      cy.contains('#users', 'Not Found').should('be.visible')
+    })
   })
 })