chore: capture versions of relevant dependencies with `x-dependencies…

…` header (#26814)

packages/data-context/src/sources/UtilDataSource.ts

@@ -1,6 +1,6 @@
 import fetch from 'cross-fetch'
 import type { DataContext } from '../DataContext'
-import { isDependencyInstalled } from '@packages/scaffold-config'
+import { isDependencyInstalled, isDependencyInstalledByName } from '@packages/scaffold-config'
 
 // Require rather than import since data-context is stricter than network and there are a fair amount of errors in agent.
 const { agent } = require('@packages/network')
@@ -23,4 +23,8 @@ export class UtilDataSource {
   isDependencyInstalled (dependency: Cypress.CypressComponentDependency, projectPath: string) {
     return isDependencyInstalled(dependency, projectPath)
   }
+
+  isDependencyInstalledByName (packageName: string, projectPath: string) {
+    return isDependencyInstalledByName(packageName, projectPath)
+  }
 }

packages/data-context/src/sources/VersionsDataSource.ts

@@ -3,8 +3,7 @@ import type { DataContext } from '..'
 import type { TestingType } from '@packages/types'
 import { CYPRESS_REMOTE_MANIFEST_URL, NPM_CYPRESS_REGISTRY_URL } from '@packages/types'
 import Debug from 'debug'
-import { WIZARD_DEPENDENCIES } from '@packages/scaffold-config'
-import semver from 'semver'
+import { dependencyNamesToDetect } from '@packages/scaffold-config'
 
 const debug = Debug('cypress:data-context:sources:VersionsDataSource')
 
@@ -161,45 +160,43 @@ export class VersionsDataSource {
       }
     }
 
-    try {
-      const projectPath = this.ctx.currentProject
-
-      if (projectPath) {
-        const dependenciesToCheck = WIZARD_DEPENDENCIES
-
-        debug('Checking %d dependencies in project', dependenciesToCheck.length)
-        // Check all dependencies of interest in parallel
-        const dependencyResults = await Promise.allSettled(
-          dependenciesToCheck.map(async (dependency) => {
-            const result = await this.ctx.util.isDependencyInstalled(dependency, projectPath)
-
-            // If a dependency isn't satisfied then we are no longer interested in it,
-            // exclude from further processing by rejecting promise
-            if (!result.satisfied) {
-              throw new Error('Unsatisfied dependency')
-            }
-
-            // We only want major version, fallback to `-1` if we couldn't detect version
-            const majorVersion = result.detectedVersion ? semver.major(result.detectedVersion) : -1
-
-            // For any satisfied dependencies, build a `package@version` string
-            return `${result.dependency.package}@${majorVersion}`
-          }),
-        )
-        // Take any dependencies that were found and combine into comma-separated string
-        const headerValue = dependencyResults
-        .filter(this.isFulfilled)
-        .map((result) => result.value)
-        .join(',')
-
-        if (headerValue) {
-          manifestHeaders['x-dependencies'] = headerValue
+    if (this._initialLaunch) {
+      try {
+        const projectPath = this.ctx.currentProject
+
+        if (projectPath) {
+          debug('Checking %d dependencies in project', dependencyNamesToDetect.length)
+          // Check all dependencies of interest in parallel
+          const dependencyResults = await Promise.allSettled(
+            dependencyNamesToDetect.map(async (dependency) => {
+              const result = await this.ctx.util.isDependencyInstalledByName(dependency, projectPath)
+
+              if (!result.detectedVersion) {
+                throw new Error(`Could not resolve dependency version for ${dependency}`)
+              }
+
+              // For any satisfied dependencies, build a `package@version` string
+              return `${result.dependency}@${result.detectedVersion}`
+            }),
+          )
+
+          // Take any dependencies that were found and combine into comma-separated string
+          const headerValue = dependencyResults
+          .filter(this.isFulfilled)
+          .map((result) => result.value)
+          .join(',')
+
+          if (headerValue) {
+            manifestHeaders['x-dependencies'] = headerValue
+          }
+        } else {
+          debug('No project path, skipping dependency check')
         }
-      } else {
-        debug('No project path, skipping dependency check')
+      } catch (err) {
+        debug('Failed to detect project dependencies', err)
       }
-    } catch (err) {
-      debug('Failed to detect project dependencies', err)
+    } else {
+      debug('Not initial launch of Cypress, skipping dependency check')
     }
 
     try {

packages/data-context/test/unit/sources/VersionsDataSource.spec.ts

@@ -14,7 +14,7 @@ describe('VersionsDataSource', () => {
   context('.versions', () => {
     let ctx: DataContext
     let fetchStub: sinon.SinonStub
-    let isDependencyInstalledStub: sinon.SinonStub
+    let isDependencyInstalledByNameStub: sinon.SinonStub
     let mockNow: Date = new Date()
     let versionsDataSource: VersionsDataSource
     let currentCypressVersion: string = pkg.version
@@ -36,12 +36,12 @@ describe('VersionsDataSource', () => {
       ctx.coreData.currentTestingType = 'e2e'
 
       fetchStub = sinon.stub()
-      isDependencyInstalledStub = sinon.stub()
+      isDependencyInstalledByNameStub = sinon.stub()
     })
 
     beforeEach(() => {
       sinon.stub(ctx.util, 'fetch').callsFake(fetchStub)
-      sinon.stub(ctx.util, 'isDependencyInstalled').callsFake(isDependencyInstalledStub)
+      sinon.stub(ctx.util, 'isDependencyInstalledByName').callsFake(isDependencyInstalledByNameStub)
       sinon.stub(os, 'platform').returns('darwin')
       sinon.stub(os, 'arch').returns('x64')
       sinon.useFakeTimers({ now: mockNow })
@@ -194,31 +194,41 @@ describe('VersionsDataSource', () => {
     })
 
     it('generates x-framework, x-bundler, and x-dependencies headers', async () => {
-      isDependencyInstalledStub.callsFake(async (dependency) => {
+      isDependencyInstalledByNameStub.callsFake(async (packageName) => {
         // Should include any resolved dependency with a valid version
-        if (dependency.package === 'react') {
+        if (packageName === 'react') {
           return {
-            dependency,
+            dependency: packageName,
             detectedVersion: '1.2.3',
-            satisfied: true,
           } as Cypress.DependencyToInstall
         }
 
-        // Not satisfied dependency should be excluded
-        if (dependency.package === 'vue') {
+        if (packageName === 'vue') {
           return {
-            dependency,
+            dependency: packageName,
             detectedVersion: '4.5.6',
-            satisfied: false,
           }
         }
 
-        // Satisfied dependency without resolved version should result in -1
-        if (dependency.package === 'typescript') {
+        if (packageName === '@builder.io/qwik') {
           return {
-            dependency,
+            dependency: packageName,
+            detectedVersion: '1.1.4',
+          }
+        }
+
+        if (packageName === '@playwright/experimental-ct-core') {
+          return {
+            dependency: packageName,
+            detectedVersion: '1.33.0',
+          }
+        }
+
+        // Dependency without resolved version should be excluded
+        if (packageName === 'typescript') {
+          return {
+            dependency: packageName,
             detectedVersion: null,
-            satisfied: true,
           }
         }
 
@@ -238,7 +248,7 @@ describe('VersionsDataSource', () => {
           headers: sinon.match({
             'x-framework': 'react',
             'x-dev-server': 'vite',
-            'x-dependencies': 'typescript@-1,react@1',
+            'x-dependencies': 'react@1.2.3,vue@4.5.6,@builder.io/qwik@1.1.4,@playwright/experimental-ct-core@1.33.0',
           }),
         },
       )

packages/launchpad/cypress/e2e/open-mode.cy.ts

@@ -65,7 +65,30 @@ describe('Launchpad: Open Mode', () => {
       cy.openProject('todos', ['--e2e'])
     })
 
-    it('includes `x-framework`, `x-dev-server`, and `x-dependencies` headers, even when launched in e2e mode', () => {
+    it('includes `x-framework`, `x-dev-server`, and `x-dependencies` headers, even when launched in e2e mode if this is the initial launch of Cypress', () => {
+      cy.withCtx((ctx) => {
+        ctx.versions['_initialLaunch'] = true
+      })
+
+      cy.visitLaunchpad()
+      cy.skipWelcome()
+      cy.get('h1').should('contain', 'Choose a browser')
+      cy.withCtx((ctx, o) => {
+        expect(ctx.util.fetch).to.have.been.calledWithMatch('https://download.cypress.io/desktop.json', {
+          headers: {
+            'x-framework': 'react',
+            'x-dev-server': 'webpack',
+            'x-dependencies': 'typescript@4.7.4',
+          },
+        })
+      })
+    })
+
+    it('does not include `x-dependencies` header, if this is not the initial launch of Cypress', () => {
+      cy.withCtx((ctx) => {
+        ctx.versions['_initialLaunch'] = false
+      })
+
       cy.visitLaunchpad()
       cy.skipWelcome()
       cy.get('h1').should('contain', 'Choose a browser')
@@ -74,7 +97,6 @@ describe('Launchpad: Open Mode', () => {
           headers: {
             'x-framework': 'react',
             'x-dev-server': 'webpack',
-            'x-dependencies': 'typescript@4',
           },
         })
       })

packages/scaffold-config/src/dependencies.ts

@@ -175,3 +175,78 @@ export const WIZARD_BUNDLERS = [
   WIZARD_DEPENDENCY_WEBPACK,
   WIZARD_DEPENDENCY_VITE,
 ] as const
+
+const componentDependenciesOfInterest = [
+  '@angular/cli',
+  '@angular-devkit/build-angular',
+  '@angular/core',
+  '@angular/common',
+  '@angular/platform-browser-dynamic',
+  'react',
+  'react-dom',
+  'react-scripts',
+  'vue',
+  '@vue/cli-service',
+  'svelte',
+  'solid-js',
+  'lit',
+  'preact',
+  'preact-cli',
+  'ember',
+  '@stencil/core',
+  '@builder.io/qwik',
+  'alpinejs',
+  '@glimmer/component',
+  'typescript',
+]
+
+const bundlerDependenciesOfInterest = [
+  'vite',
+  'webpack',
+  'parcel',
+  'rollup',
+  'snowpack',
+]
+
+const testingDependenciesOfInterest = [
+  'jest',
+  'jsdom',
+  'jest-preview',
+  'storybook',
+  '@storybook/addon-interactions',
+  '@storybook/addon-a11y',
+  'chromatic',
+  '@testing-library/react',
+  '@testing-library/react-hooks',
+  '@testing-library/dom',
+  '@testing-library/jest-dom',
+  '@testing-library/cypress',
+  '@testing-library/user-event',
+  '@testing-library/vue',
+  '@testing-library/svelte',
+  '@testing-library/preact',
+  'happy-dom',
+  'vitest',
+  'vitest-preview',
+  'selenium-webdriver',
+  'nightwatch',
+  'karma',
+  'playwright',
+  'playwright-core',
+  '@playwright/experimental-ct-core',
+  '@playwright/experimental-ct-react',
+  '@playwright/experimental-ct-svelte',
+  '@playwright/experimental-ct-vue',
+  '@playwright/experimental-ct-vue2',
+  '@playwright/experimental-ct-solid',
+  '@playwright/experimental-ct-react17',
+  'axe-core',
+  'jest-axe',
+  'enzyme',
+]
+
+export const dependencyNamesToDetect = [
+  ...componentDependenciesOfInterest,
+  ...bundlerDependenciesOfInterest,
+  ...testingDependenciesOfInterest,
+]

packages/scaffold-config/src/frameworks.ts

@@ -14,6 +14,37 @@ export type WizardBundler = typeof dependencies.WIZARD_BUNDLERS[number]
 
 export type CodeGenFramework = Cypress.ResolvedComponentFrameworkDefinition['codeGenFramework']
 
+export async function isDependencyInstalledByName (packageName: string, projectPath: string): Promise<{dependency: string, detectedVersion: string | null}> {
+  let detectedVersion: string | null = null
+
+  try {
+    debug('detecting %s in %s', packageName, projectPath)
+
+    const packageFilePath = resolvePackagePath(packageName, projectPath, false)
+
+    if (!packageFilePath) {
+      throw new Error('unable to resolve package file')
+    }
+
+    const pkg = await fs.readJson(packageFilePath) as PkgJson
+
+    debug('found package.json %o', pkg)
+
+    if (!pkg.version) {
+      throw Error(`${pkg.version} for ${packageName} is not a valid semantic version.`)
+    }
+
+    detectedVersion = pkg.version
+  } catch (e) {
+    debug('error when detecting %s: %s', packageName, e.message)
+  }
+
+  return {
+    dependency: packageName,
+    detectedVersion,
+  }
+}
+
 export async function isDependencyInstalled (dependency: Cypress.CypressComponentDependency, projectPath: string): Promise<Cypress.DependencyToInstall> {
   try {
     debug('detecting %s in %s', dependency.package, projectPath)