refactor: makeLegacyContext -> getCtx (#19308)

* refactor: makeLegacyContext -> getCtx

* Fix tests & types

* fix: failing tests

* CI fixes

Author: tgriesser

packages/data-context/src/DataContext.ts

@@ -1,4 +1,4 @@
-import type { LaunchArgs, OpenProjectLaunchOptions, PlatformName } from '@packages/types'
+import type { LaunchArgs, OpenProjectLaunchOptions } from '@packages/types'
 import fsExtra from 'fs-extra'
 import path from 'path'
 
@@ -28,7 +28,7 @@ import type { GraphQLSchema } from 'graphql'
 import type { Server } from 'http'
 import type { AddressInfo } from 'net'
 import EventEmitter from 'events'
-import type { App as ElectronApp } from 'electron'
+import type { App, App as ElectronApp } from 'electron'
 import { VersionsDataSource } from './sources/VersionsDataSource'
 
 const IS_DEV_ENV = process.env.CYPRESS_INTERNAL_ENV !== 'production'
@@ -39,7 +39,6 @@ export interface InternalDataContextOptions {
 
 export interface DataContextConfig {
   schema: GraphQLSchema
-  os: PlatformName
   launchArgs: LaunchArgs
   launchOptions: OpenProjectLaunchOptions
   electronApp?: ElectronApp
@@ -55,13 +54,10 @@ export interface DataContextConfig {
   authApi: AuthApiShape
   projectApi: ProjectApiShape
   electronApi: ElectronApiShape
-  /**
-   * Internal options used for testing purposes
-   */
-  _internalOptions: InternalDataContextOptions
 }
 
 export class DataContext {
+  private _app?: App
   private _rootBus: EventEmitter
   private _coreData: CoreDataShape
   private _gqlServer?: Server
@@ -73,6 +69,10 @@ export class DataContext {
     this._coreData = _config.coreData ?? makeCoreData()
   }
 
+  setElectronApp (app: App) {
+    this._app = app
+  }
+
   get electronApp () {
     return this._config.electronApp
   }
@@ -101,10 +101,8 @@ export class DataContext {
       this.actions.app.refreshNodePath(),
     ]
 
-    if (this._config._internalOptions.loadCachedProjects) {
-      // load projects from cache on start
-      toAwait.push(this.actions.project.loadProjects())
-    }
+    // load projects from cache on start
+    toAwait.push(this.actions.project.loadProjects())
 
     if (this._config.launchArgs.projectRoot) {
       await this.actions.project.setActiveProject(this._config.launchArgs.projectRoot)
@@ -137,10 +135,6 @@ export class DataContext {
     return this._rootBus
   }
 
-  get os () {
-    return this._config.os
-  }
-
   get launchArgs () {
     return this._config.launchArgs
   }

packages/data-context/src/index.ts

@@ -1,7 +1,55 @@
+import type { DataContext } from './DataContext'
+
 export {
   DataContext,
 } from './DataContext'
 
 export type {
   DataContextConfig,
 } from './DataContext'
+
+let ctx: DataContext | null = null
+
+// globalPubSub.on('cleanup', clearCtx)
+
+/**
+ * Shouldn't ever be called from runtime code, primarily for test situations where we need to
+ */
+export function clearCtx () {
+  ctx = null
+}
+
+/**
+ * Gets the current DataContext, used in situations where it's too much work
+ * to inject it deeply through the class hierearchy in legacy server code, but we
+ * need to reference it anyway, and for the time being we can assume
+ * there's only one for the lifecycle of the Electron app.
+ */
+export function getCtx () {
+  if (!ctx) {
+    throw new Error(`
+      Expected DataContext to already have been set via setCtx. If this is a 
+      testing context, make sure you are calling "setCtx" in a before hook,
+      otherwise check the application flow.
+    `)
+  }
+
+  return ctx
+}
+
+/**
+ * Sets the current DataContext - happens at runtime when we startup Cypress
+ * in "open" / "run" mode, or during testing in a beforeEach, when we clear the context
+ */
+export function setCtx (_ctx: DataContext) {
+  if (ctx) {
+    throw new Error(`
+      The context has already been set. If this is occurring in a testing context, 
+      make sure you are clearing the context. Otherwise 
+    `)
+  }
+
+  ctx = _ctx
+
+  return _ctx
+}

packages/data-context/src/util/urqlCacheKeys.ts

@@ -13,6 +13,7 @@ export const urqlCacheKeys: Partial<CacheExchangeOpts> = {
     App: (data) => data.__typename,
     DevState: (data) => data.__typename,
     Wizard: (data) => data.__typename,
+    CloudRunCommitInfo: () => null,
     GitInfo: () => null,
     BaseError: () => null,
     ProjectPreferences: (data) => data.__typename,

packages/driver/src/cypress/proxy-logging.ts

@@ -392,7 +392,10 @@ export default class ProxyLogging {
     const proxyRequest = new ProxyRequest(preRequest)
     const logConfig = getRequestLogConfig(proxyRequest as Omit<ProxyRequest, 'log'>)
 
-    proxyRequest.log = this.Cypress.log(logConfig).snapshot('request')
+    // TODO: Figure out what is causing the race condition here
+    if (this.Cypress.log) {
+      proxyRequest.log = this.Cypress.log(logConfig).snapshot('request')
+    }
 
     this.proxyRequests.push(proxyRequest as ProxyRequest)
 

packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts

@@ -2,7 +2,6 @@ import path from 'path'
 import type { RemoteGraphQLInterceptor, WithCtxInjected, WithCtxOptions } from './support/e2eSupport'
 import { e2eProjectDirs } from './support/e2eProjectDirs'
 import type { CloudExecuteRemote } from '@packages/data-context/src/sources'
-import type { DataContext } from '@packages/data-context'
 import * as inspector from 'inspector'
 import sinonChai from '@cypress/sinon-chai'
 import sinon from 'sinon'
@@ -14,6 +13,7 @@ import { Response } from 'cross-fetch'
 
 import { CloudRunQuery } from '../support/mock-graphql/stubgql-CloudTypes'
 import { getOperationName } from '@urql/core'
+import type { DataContext } from '@packages/data-context'
 
 const cloudSchema = buildSchema(fs.readFileSync(path.join(__dirname, '../../../graphql/schemas/cloud.graphql'), 'utf8'))
 
@@ -36,6 +36,7 @@ export async function e2ePluginSetup (projectRoot: string, on: Cypress.PluginEve
   delete process.env.CYPRESS_INTERNAL_VITE_LAUNCHPAD_PORT
   // require'd so we don't import the types from @packages/server which would
   // pollute strict type checking
+  const { clearCtx, makeDataContext, setCtx } = require('../../../server/lib/makeDataContext')
   const { runInternalServer } = require('@packages/server/lib/modes/internal-server')
   const Fixtures = require('@tooling/system-tests/lib/fixtures')
   const tmpDir = path.join(__dirname, '.projects')
@@ -59,6 +60,13 @@ export async function e2ePluginSetup (projectRoot: string, on: Cypress.PluginEve
   let remoteGraphQLIntercept: RemoteGraphQLInterceptor | undefined
 
   on('task', {
+    beforeEach () {
+      clearCtx()
+      setCtx(makeDataContext({}))
+      remoteGraphQLIntercept = undefined
+
+      return null
+    },
     remoteGraphQLIntercept (fn: string) {
       remoteGraphQLIntercept = new Function('console', 'obj', `return (${fn})(obj)`).bind(null, console) as RemoteGraphQLInterceptor
 
@@ -74,7 +82,7 @@ export async function e2ePluginSetup (projectRoot: string, on: Cypress.PluginEve
       if (obj.activeTestId !== currentTestId) {
         await ctx?.destroy()
         currentTestId = obj.activeTestId
-        remoteGraphQLIntercept = undefined
+
         testState = {};
         ({ serverPortPromise, ctx } = runInternalServer({
           projectRoot: null,

packages/frontend-shared/cypress/e2e/support/e2eSupport.ts

@@ -71,6 +71,7 @@ beforeEach(() => {
   // Reset the ports so we know we need to call "setupE2E" before each test
   Cypress.env('e2e_serverPort', undefined)
   Cypress.env('e2e_gqlPort', undefined)
+  cy.task('beforeEach', { log: false })
 })
 
 // function setup
@@ -131,7 +132,7 @@ function visitApp (href?: string) {
   }
 
   return cy.withCtx(async (ctx) => {
-    return JSON.stringify(ctx.html.fetchAppInitialData())
+    return JSON.stringify(await ctx.html.fetchAppInitialData())
   }, { log: false }).then((ssrData) => {
     return cy.visit(`dist-app/index.html?serverPort=${e2e_serverPort}${href || ''}`, {
       onBeforeLoad (win) {

packages/server/lib/config.ts

@@ -17,7 +17,6 @@ import pathHelpers from './util/path_helpers'
 const debug = Debug('cypress:server:config')
 
 import { getProcessEnvVars, CYPRESS_SPECIAL_ENV_VARS } from './util/config'
-import type { DataContext } from '@packages/data-context'
 
 const folders = _(configUtils.options).filter({ isFolder: true }).map('name').value()
 
@@ -130,10 +129,9 @@ export type FullConfig =
 export function get (
   projectRoot,
   options: { configFile?: string | false } = { configFile: undefined },
-  ctx: DataContext,
 ): Promise<FullConfig> {
   return Promise.all([
-    settings.read(projectRoot, options, ctx).then(validateFile(options.configFile ?? 'cypress.config.{ts|js}')),
+    settings.read(projectRoot, options).then(validateFile(options.configFile ?? 'cypress.config.{ts|js}')),
     settings.readEnv(projectRoot).then(validateFile('cypress.env.json')),
   ])
   .spread((settings, envFile) => {
@@ -444,7 +442,10 @@ export function setSupportFileAndFolder (obj, defaults) {
     // /tmp/foo -> /private/tmp/foo
     // which can confuse the rest of the code
     // switch it back to "normal" file
-    obj.supportFile = path.join(sf, path.basename(obj.supportFile))
+    const supportFileName = path.basename(obj.supportFile)
+    const base = sf.endsWith(supportFileName) ? path.dirname(sf) : sf
+
+    obj.supportFile = path.join(base, supportFileName)
 
     return fs.pathExists(obj.supportFile)
     .then((found) => {

packages/server/lib/makeDataContext.ts

@@ -1,63 +1,29 @@
-import { DataContext } from '@packages/data-context'
-import os from 'os'
-import electron, { App } from 'electron'
+import { DataContext, getCtx, setCtx, clearCtx } from '@packages/data-context'
+import electron from 'electron'
 
 import specsUtil from './util/specs'
-import type { AllowedState, FindSpecs, FoundBrowser, LaunchArgs, LaunchOpts, OpenProjectLaunchOptions, PlatformName, Preferences, SettingsOptions } from '@packages/types'
+import type { AllowedState, FindSpecs, FoundBrowser, LaunchArgs, LaunchOpts, OpenProjectLaunchOptions, Preferences, SettingsOptions } from '@packages/types'
 import browserUtils from './browsers/utils'
 import auth from './gui/auth'
 import user from './user'
 import * as config from './config'
-import { EventEmitter } from 'events'
 import { openProject } from './open_project'
 import cache from './cache'
 import errors from './errors'
 import findSystemNode from './util/find_system_node'
 import { graphqlSchema } from '@packages/graphql/src/schema'
-import type { InternalDataContextOptions } from '@packages/data-context/src/DataContext'
 import { openExternal } from '@packages/server/lib/gui/links'
 import { getUserEditor } from './util/editors'
 import * as savedState from './saved_state'
 
 const { getBrowsers, ensureAndGetByNameOrPath } = browserUtils
 
-interface MakeDataContextOptions {
-  electronApp?: App
-  os: PlatformName
-  rootBus: EventEmitter
-  launchArgs: LaunchArgs
-  _internalOptions: InternalDataContextOptions
-}
-
-let legacyDataContext: DataContext | undefined
-
-// For testing
-export async function clearLegacyDataContext () {
-  await legacyDataContext?.destroy()
-  legacyDataContext = undefined
-}
-
-export function makeLegacyDataContext (launchArgs: LaunchArgs = {} as LaunchArgs): DataContext {
-  if (legacyDataContext && process.env.LAUNCHPAD) {
-    throw new Error(`Expected ctx to be passed as an arg, but used legacy data context`)
-  } else if (!legacyDataContext) {
-    legacyDataContext = makeDataContext({
-      rootBus: new EventEmitter,
-      launchArgs,
-      os: os.platform() as PlatformName,
-      _internalOptions: {
-        loadCachedProjects: true,
-      },
-    })
-  }
-
-  return legacyDataContext
-}
+export { getCtx, setCtx, clearCtx }
 
-export function makeDataContext (options: MakeDataContextOptions): DataContext {
+export function makeDataContext (launchArgs: LaunchArgs): DataContext {
   const ctx = new DataContext({
     schema: graphqlSchema,
-    ...options,
+    launchArgs,
     launchOptions: {},
     appApi: {
       getBrowsers,
@@ -79,7 +45,7 @@ export function makeDataContext (options: MakeDataContextOptions): DataContext {
     },
     projectApi: {
       getConfig (projectRoot: string, options?: SettingsOptions) {
-        return config.get(projectRoot, options, ctx)
+        return config.get(projectRoot, options)
       },
       launchProject (browser: FoundBrowser, spec: Cypress.Spec, options?: LaunchOpts) {
         return openProject.launch({ ...browser }, spec, options)

packages/server/lib/modes/index.ts

@@ -1,9 +1,13 @@
-import { makeLegacyDataContext } from '../makeDataContext'
+import { clearCtx, setCtx } from '@packages/data-context'
+import { makeDataContext } from '../makeDataContext'
 
 export = (mode, options) => {
-  if (!process.env.LAUNCHPAD) {
-    makeLegacyDataContext(options)
-  }
+  // When we're in testing mode, this is setup automatically as a beforeEach
+  clearCtx()
+
+  const ctx = makeDataContext(options)
+
+  setCtx(ctx)
 
   if (mode === 'record') {
     return require('./record').run(options)

packages/server/lib/modes/internal-server.ts

@@ -5,20 +5,21 @@ import type { App } from 'electron'
 import { makeDataContext } from '../makeDataContext'
 import { makeGraphQLServer } from '../gui/makeGraphQLServer'
 import { assertValidPlatform } from '@packages/types/src/platform'
+import { DataContext, getCtx, setCtx } from '@packages/data-context'
 
 export function runInternalServer (launchArgs, _internalOptions = { loadCachedProjects: true }, electronApp?: App) {
   const bus = new EventEmitter()
   const platform = os.platform()
 
   assertValidPlatform(platform)
 
-  const ctx = makeDataContext({
-    electronApp,
-    os: platform,
-    rootBus: bus,
-    launchArgs,
-    _internalOptions,
-  })
+  let ctx: DataContext
+
+  try {
+    ctx = getCtx()
+  } catch {
+    ctx = setCtx(makeDataContext(launchArgs))
+  }
 
   // Initializing the data context, loading browsers, etc.
   ctx.initializeData()