refactor api intercept function to be a cypress custom command, and use in requests.cy.js

Author: summer-cook

cypress/e2e/requests.cy.js

@@ -1,3 +1,5 @@
+import { scientistApiBaseURL } from '../support/e2e'
+
 describe('Viewing all requests', () => {
   describe('as a logged out user', () => {
     it('should show an error message.', () => {
@@ -10,7 +12,6 @@ describe('Viewing all requests', () => {
   })
 
   describe('as a logged in user', () => {
-    let scientistApiBaseURL = `https://${Cypress.env('NEXT_PUBLIC_PROVIDER_NAME')}.scientist.com/api/v2`
     // declare variables that can be used to change how the response is intercepted.
     let requestList
     let loading
@@ -20,34 +21,23 @@ describe('Viewing all requests', () => {
       // Call the custom cypress command to log in
       cy.login(Cypress.env('TEST_SCIENTIST_USER'), Cypress.env('TEST_SCIENTIST_PW'))
       // Intercept the response from the endpoint to view all requests
-      // TODO(summer-cook): extract out this base url into the config to use as an environment variable. it was not cooperating before
-      cy.intercept('GET', `${scientistApiBaseURL}/quote_groups/mine.json`, (req) => {
-        switch (true) {
-          // reply with an empty response: both data and error will be undefined.
-          case loading: req.reply()
-          break
-
-          // error will be defined
-          case error: req.reply({ statusCode: 500 })
-          break
-
-          case requestList: req.reply({ fixture: 'all-requests/requests.json' })
-          break
-
-          // reply with a request body- default status code is 200
-          case !requestList: req.reply({ fixture: 'all-requests/no-requests.json' })
-          break
-        }
+      cy.customApiIntercept({
+        action: 'GET',
+        alias: 'useAllRequests',
+        requestURL: `/quote_groups/mine.json`,
+        data: requestList,
+        defaultFixture: 'all-requests/requests.json',
+        emptyFixture: 'all-requests/no-requests.json',
+        loading,
+        error
       })
       // Intercept the response from the endpoint that gets the default ware ID
-      cy.intercept('GET', `${scientistApiBaseURL}/wares.json?q=make-a-request`, (req) => {
-        switch (true) {
-          case error: req.reply({ statusCode: 500 })
-          break
-
-          default: req.reply({ fixture: 'all-requests/make-a-request.json' })
-          break
-        }
+      cy.customApiIntercept({
+        action: 'GET',
+        alias: 'useDefaultWare',
+        requestURL: `/wares.json?q=make-a-request`,
+        defaultFixture: 'all-requests/make-a-request.json',
+        error
       })
       cy.visit('/requests')
     })

cypress/support/commands.js

@@ -23,7 +23,7 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
+import { scientistApiBaseURL } from "./e2e";
 
 // add a command to login that uses a session, so the user will remain logged in throughout the test file vs. needing to log in before each example.
 // source: https://github.com/nextauthjs/next-auth/discussions/2053#discussioncomment-1191016
@@ -36,4 +36,32 @@ Cypress.Commands.add('login', (username, password) => {
 	// This cookie also may need to be refreshed intermittently if it expires
 	cy.setCookie("next-auth.session-token", Cypress.env('TEST_SESSION_COOKIE'));
   })
+})
+
+// intercepts requests and creates potential cases for loading, error, data, and empty data
+// required params are action, defaultFixture, requestURL
+// optional params such as data, loading, and error can be passed depending on the creation of test cases that are related to that specific api call
+Cypress.Commands.add('customApiIntercept', ({ action, alias, data, defaultFixture, emptyFixture, error, errorCaseStatusCode, loading, requestURL }) => {
+  cy.intercept(action, scientistApiBaseURL + requestURL, (req) => {
+    switch (true) {
+      // reply with an empty response: both data and error will be undefined.
+      case loading: req.reply()
+      break
+
+      // error will be defined
+      case error: req.reply({ statusCode: errorCaseStatusCode || 500 })
+      break
+
+      // reply with a request body- default status code is 200
+      case data: req.reply({ fixture: defaultFixture })
+      break
+
+      // reply with the empty fixture is there is one, and the default as a backup. Allows us to isolate one api call at a time that may potentially respond with empty data.
+      case !data: req.reply({ fixture: emptyFixture || defaultFixture })
+      break
+
+      default: req.reply({ fixture: defaultFixture })
+      break
+    }
+  }).as(alias || 'customIntercept')
 })

cypress/support/e2e.js

@@ -16,5 +16,4 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+export const scientistApiBaseURL = `https://${Cypress.env('NEXT_PUBLIC_PROVIDER_NAME')}.scientist.com/api/v2`