refactor: add comments and moved unused exports

test/cypress/support/commands.ts

@@ -36,7 +36,7 @@ Cypress.Commands.add('login', () => {
         autoEnd: false
     })
 
-    log.snapshot('before')
+    log.snapshot('Connecting to auth0')
 
     cy.session(`auth0-${auth0UserName}`, () => {
         auth0Login()
@@ -49,6 +49,6 @@ Cypress.Commands.add('login', () => {
         cacheAcrossSpecs: true
     })
 
-    log.snapshot('after')
+    log.snapshot('Successfully logged in')
     log.end()
 })

test/cypress/support/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="cypress" />
 
+// https://docs.cypress.io/app/tooling/typescript-support#Types-for-Custom-Commands
 declare namespace Cypress{
     interface Chainable<Subject> {
         login(): Chainable<Subject>

test/cypress/utils.ts

@@ -20,17 +20,40 @@ export const auth0Login = () => {
     cy.url().should('equal', baseUrl)
 }
 
-// https://docs.cypress.io/api/commands/intercept#Interception-lifecycle
-export const requestHandler = (req: IncomingHttpRequest) => {
-    req.on('before:response', res => {
-        // force all API responses to not be cached
-        res.headers['cache-control'] = 'no-store'
-    })
-}
-
-// https://docs.cypress.io/app/guides/network-requests#Working-with-GraphQL
+/**
+ * https://docs.cypress.io/app/guides/network-requests#Working-with-GraphQL
+ *
+ * Set the alias for a request based on the operation name. After setting it we can use cy.wait(@{alias}).
+ *
+ * e.g. operation: query Submissions / cy.wait('@query Submissions')
+ **/
 export const aliasQuery = (req: IncomingHttpRequest, operation: string, responseBody: unknown) => {
-    requestHandler(req)
+    /**
+    * Check if the GraphQL operation is included in the request body
+    **/
+    const hasOperation = (req: IncomingHttpRequest, operation: string): boolean => {
+        const { query } = req.body
+        return query && query.includes(operation)
+    }
+
+    /**
+     * https://docs.cypress.io/api/commands/intercept#Interception-lifecycle
+     *
+     * https://docs.cypress.io/api/commands/intercept#cyintercept-and-request-caching
+     *
+     * Sometimes Cypress.intercept() cannot intercept a request due to the request being cached and not hitting the
+     * network layer (where Cypress.intercept() works).
+     *
+     * To prevent this, we set 'cache-control' to 'no-store', this prevents all the requests to be cached.
+     **/
+    const preventRequestCache = (req: IncomingHttpRequest) => {
+        req.on('before:response', res => {
+            // force all API responses to not be cached
+            res.headers['cache-control'] = 'no-store'
+        })
+    }
+
+    preventRequestCache(req)
 
     if (!hasOperation(req, operation)) {
         req.continue()
@@ -44,8 +67,3 @@ export const aliasQuery = (req: IncomingHttpRequest, operation: string, response
         body: responseBody
     })
 }
-
-export const hasOperation = (req: IncomingHttpRequest, operation) => {
-    const { query } = req.body
-    return query && query.includes(operation)
-}