chore: use require for cookie tests (#24201)

* move utils.js to utils.ts

* move makeRequestToUtils utils

packages/driver/cypress/e2e/e2e/origin/cookie_behavior.cy.ts

@@ -1,34 +1,6 @@
-describe('Cookie Behavior with experimentalSessionAndOrigin=true', { browser: '!webkit' }, () => {
-  const makeRequest = (
-    win: Cypress.AUTWindow,
-    url: string,
-    client: 'fetch' | 'xmlHttpRequest' = 'xmlHttpRequest',
-    credentials: 'same-origin' | 'include' | 'omit' | boolean = false,
-  ) => {
-    if (client === 'fetch') {
-      // if a boolean is specified, make sure the default is applied
-      credentials = Cypress._.isBoolean(credentials) ? 'same-origin' : credentials
-
-      return win.fetch(url, { credentials })
-    }
-
-    return new Promise<void>((resolve, reject) => {
-      let xhr = new XMLHttpRequest()
-
-      xhr.open('GET', url)
-      xhr.withCredentials = Cypress._.isBoolean(credentials) ? credentials : false
-      xhr.onload = function () {
-        resolve(xhr.response)
-      }
-
-      xhr.onerror = function () {
-        reject(xhr.response)
-      }
-
-      xhr.send()
-    })
-  }
+import { makeRequestForCookieBehaviorTests as makeRequest } from '../../../support/utils'
 
+describe('Cookie Behavior with experimentalSessionAndOrigin=true', { browser: '!webkit' }, () => {
   const serverConfig = {
     http: {
       sameOriginPort: 3500,
@@ -59,35 +31,7 @@ describe('Cookie Behavior with experimentalSessionAndOrigin=true', { browser: '!
 
           // add httpClient here globally until Cypress.require PR is merged
           cy.origin(`${scheme}://www.foobar.com:${sameOriginPort}`, () => {
-            const makeRequest = (
-              win: Cypress.AUTWindow,
-              url: string,
-              client: 'fetch' | 'xmlHttpRequest' = 'xmlHttpRequest',
-              credentials: 'same-origin' | 'include' | 'omit' | boolean = false,
-            ) => {
-              if (client === 'fetch') {
-                // if a boolean is specified, make sure the default is applied
-                credentials = Cypress._.isBoolean(credentials) ? 'same-origin' : credentials
-
-                return win.fetch(url, { credentials })
-              }
-
-              return new Promise<void>((resolve, reject) => {
-                let xhr = new XMLHttpRequest()
-
-                xhr.open('GET', url)
-                xhr.withCredentials = Cypress._.isBoolean(credentials) ? credentials : false
-                xhr.onload = function () {
-                  resolve(xhr.response)
-                }
-
-                xhr.onerror = function () {
-                  reject(xhr.response)
-                }
-
-                xhr.send()
-              })
-            }
+            const { makeRequestForCookieBehaviorTests: makeRequest } = require('../../../support/utils')
 
             // @ts-ignore
             window.makeRequest = makeRequest

packages/driver/cypress/support/utils.js → packages/driver/cypress/support/utils.ts

@@ -2,15 +2,15 @@ const { $, _, Promise } = Cypress
 
 export const getCommandLogWithText = (command, type = 'method') => {
   // Open current test if not already open, so we can find the command log
-  cy.$$('.runnable-active .collapsible:not(.is-open) .collapsible-header', top.document).click()
+  cy.$$('.runnable-active .collapsible:not(.is-open) .collapsible-header', top?.document).click()
 
   return cy
-  .$$(`.runnable-active .command-${type}:contains(${command})`, top.document)
+  .$$(`.runnable-active .command-${type}:contains(${command})`, top?.document)
   .closest('.command')
 }
 
 export const findReactInstance = function (dom) {
-  let key = _.keys(dom).find((key) => key.startsWith('__reactInternalInstance$'))
+  let key = _.keys(dom).find((key) => key.startsWith('__reactInternalInstance$')) as string
   let internalInstance = dom[key]
 
   if (internalInstance == null) return null
@@ -37,21 +37,23 @@ export const clickCommandLog = (sel, type) => {
       inner.get(0).click()
 
       // make sure command was pinned, otherwise throw a better error message
-      expect(cy.$$('.runnable-active .command-pin', top.document).length, 'command should be pinned').ok
+      expect(cy.$$('.runnable-active .command-pin', top?.document).length, 'command should be pinned').ok
     })
   })
 }
 
 export const withMutableReporterState = (fn) => {
-  top.UnifiedRunner.MobX.configure({ enforceActions: 'never' })
+  // @ts-ignore
+  top?.UnifiedRunner.MobX.configure({ enforceActions: 'never' })
 
-  const currentTestLog = findReactInstance(cy.$$('.runnable-active', top.document)[0])
+  const currentTestLog = findReactInstance(cy.$$('.runnable-active', top?.document)[0])
 
   currentTestLog.props.model._isOpen = true
 
   return Promise.try(fn)
   .then(() => {
-    top.UnifiedRunner.MobX.configure({ enforceActions: 'always' })
+    // @ts-ignore
+    top?.UnifiedRunner.MobX.configure({ enforceActions: 'always' })
   })
 }
 
@@ -72,7 +74,7 @@ export const assertLogLength = (logs, expectedLength) => {
 }
 
 export const findCrossOriginLogs = (consolePropCommand, logMap, matchingOrigin) => {
-  const matchedLogs = Array.from(logMap.values()).filter((log) => {
+  const matchedLogs = Array.from(logMap.values()).filter((log: any) => {
     const props = log.get()
 
     let consoleProps = _.isFunction(props?.consoleProps) ? props.consoleProps() : props?.consoleProps
@@ -82,7 +84,7 @@ export const findCrossOriginLogs = (consolePropCommand, logMap, matchingOrigin)
 
   // While we'd expect the incoming log order to be deterministic, in practice we've found it fairly
   // flakey. Sorting here eliminates this, resulting in far more reliable tests.
-  const logAttrs = matchedLogs.map((log) => log.get()).sort()
+  const logAttrs = matchedLogs.map((log: any) => log.get()).sort()
 
   return logAttrs.length === 1 ? logAttrs[0] : logAttrs
 }
@@ -104,6 +106,7 @@ const getAllFn = (...aliases) => {
 
   return Promise.all(
     aliases[0].split(' ').map((alias) => {
+      // @ts-ignore
       return cy.now('get', alias)
     }),
   )
@@ -133,10 +136,41 @@ export const trimInnerText = ($el) => {
 export const expectCaret = (start, end) => {
   return ($el) => {
     end = end == null ? start : end
+    // @ts-ignore
     expect(Cypress.dom.getSelectionBounds($el.get(0))).to.deep.eq({ start, end })
   }
 }
 
+export const makeRequestForCookieBehaviorTests = (
+  win: Cypress.AUTWindow,
+  url: string,
+  client: 'fetch' | 'xmlHttpRequest' = 'xmlHttpRequest',
+  credentials: 'same-origin' | 'include' | 'omit' | boolean = false,
+) => {
+  if (client === 'fetch') {
+    // if a boolean is specified, make sure the default is applied
+    credentials = Cypress._.isBoolean(credentials) ? 'same-origin' : credentials
+
+    return win.fetch(url, { credentials })
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    let xhr = new XMLHttpRequest()
+
+    xhr.open('GET', url)
+    xhr.withCredentials = Cypress._.isBoolean(credentials) ? credentials : false
+    xhr.onload = function () {
+      resolve(xhr.response)
+    }
+
+    xhr.onerror = function () {
+      reject(xhr.response)
+    }
+
+    xhr.send()
+  })
+}
+
 Cypress.Commands.add('getAll', getAllFn)
 
 Cypress.Commands.add('shouldWithTimeout', shouldWithTimeout)