feat: add fail on 4xx option (#78)

README.md

@@ -110,10 +110,27 @@ cy.waitForNetworkIdle('@graphql', 1000)
 // the page has finished additional processing
 ```
 
-### fail on 5xx
+### fail on error status code
 
 By default, the network calls might fail and the test happily continues. You can make the idle spy fail if any of the matching network calls return 4xx or 5xx errors. These classes of error status code have their own flag to enable.
 
+### fail on 4xx
+
+```js
+// fail the test if any of the matching calls
+// returns a 4xx status code
+cy.waitForNetworkIdlePrepare({
+  method: '*',
+  alias: 'all',
+  pattern: '**',
+  failOn4xx: true,
+})
+```
+
+![The test fails when one of the calls receives 401 from the server](./images/4xx.png)
+
+### fail on 5xx
+
 ```js
 // fail the test if any of the matching calls
 // returns a 5xx status code

cypress/e2e/fail-on-400.js

@@ -0,0 +1,32 @@
+/// <reference path="../../src/index.d.ts" />
+// @ts-check
+
+import '../../src'
+
+// fails the test on 401 response code
+it('fails the test when a request receives 401 status code', () => {
+  cy.on('fail', (e) => {
+    if (e.message.includes('failed with 401')) {
+      console.log('expected error')
+      return false
+    } else {
+      throw e
+    }
+  })
+
+  // fail the test if any of the matching calls
+  // returns a 4xx status code
+  cy.waitForNetworkIdlePrepare({
+    method: '*',
+    alias: 'all',
+    pattern: '**',
+    failOn4xx: true,
+  })
+
+  cy.visit('/fail-500')
+    .wait(2000)
+    .then(() => {
+      // the network should have caught an 5xx error
+      throw new Error('Should never get here')
+    })
+})

src/index.d.ts

@@ -66,6 +66,11 @@ declare namespace Cypress {
     pattern: string
     alias: string
     log?: boolean
+    /**
+     * Fail the test if any of the matching network calls
+     * returns 4xx status code
+     */
+    failOn4xx?: boolean
     /**
      * Fail the test if any of the matching network calls
      * returns 5xx status code

src/index.js

@@ -182,6 +182,7 @@ function waitForNetworkIdlePrepare({
   alias,
   log,
   failOn5xx,
+  failOn4xx,
 } = {}) {
   if (!alias) {
     throw new Error('cypress-network-idle: alias is required')
@@ -196,7 +197,11 @@ function waitForNetworkIdlePrepare({
   }
 
   let message = `prepared for **@${alias}**`
-  if (failOn5xx) {
+  if (failOn5xx && failOn4xx) {
+    message += ' (will fail on **4xx, 5xx**)'
+  } else if (failOn4xx) {
+    message += ' (will fail on **4xx**)'
+  } else if (failOn5xx) {
     message += ' (will fail on **5xx**)'
   }
   Cypress.log({ name: 'network-idle', message })
@@ -237,6 +242,11 @@ function waitForNetworkIdlePrepare({
       counters.lastNetworkAt = +new Date()
       // console.log('res %s %s', req.method, req.url, counters.lastNetworkAt)
       // console.log(res.body)
+      if (failOn4xx && res.statusCode >= 400 && res.statusCode < 500) {
+        throw new Error(
+          `Network call ${req.method} ${req.url} failed with ${res.statusCode}`,
+        )
+      }
       if (failOn5xx && res.statusCode >= 500) {
         throw new Error(
           `Network call ${req.method} ${req.url} failed with ${res.statusCode}`,