fix: Detect CT framework when unconfigured project opened with --component

cli/CHANGELOG.md

@@ -6,6 +6,7 @@ _Released 04/11/2023 (PENDING)_
 **Bugfixes:**
 
  - Capture the [Azure](https://azure.microsoft.com/) CI provider's environment variable [`SYSTEM_PULLREQUEST_PULLREQUESTNUMBER`](https://learn.microsoft.com/en-us/azure/devops/pipelines/build/variables?view=azure-devops&tabs=yaml#system-variables-devops-services) to display the linked PR number in the Cloud. Addressed in [#26215](https://github.com/cypress-io/cypress/pull/26215).
+ - Fixed an issue in the onboarding wizard where project framework & bundler would not be auto-detected when opening directly into component testing mode using the `--component` CLI flag. Fixes [#22777](https://github.com/cypress-io/cypress/issues/22777).
 
 **Dependency Updates:**
 

packages/data-context/src/actions/ProjectActions.ts

@@ -130,6 +130,10 @@ export class ProjectActions {
     this.ctx.lifecycleManager.setAndLoadCurrentTestingType(type)
   }
 
+  async initializeProjectSetup (type: TestingType) {
+    await this.ctx.lifecycleManager.initializeProjectSetup(type)
+  }
+
   async setCurrentProject (projectRoot: string) {
     await this.updateProjectList(() => this.api.insertProjectToCache(projectRoot))
 

packages/data-context/src/data/ProjectLifecycleManager.ts

@@ -752,10 +752,27 @@ export class ProjectLifecycleManager {
     if (this._projectRoot && testingType && await this.waitForInitializeSuccess()) {
       this.setAndLoadCurrentTestingType(testingType)
 
-      if (testingType === 'e2e' && !this.ctx.migration.needsCypressJsonMigration() && !this.isTestingTypeConfigured(testingType)) {
-        // E2E doesn't have a wizard, so if we have a testing type on load we just create/update their cypress.config.js.
-        await this.ctx.actions.wizard.scaffoldTestingType()
-      }
+      await this.initializeProjectSetup(testingType)
+    }
+  }
+
+  /**
+   * Prepare the setup process for a project if one exists, otherwise complete setup
+   *
+   * @param testingType
+   * @returns
+   */
+  async initializeProjectSetup (testingType: TestingType) {
+    if (this.isTestingTypeConfigured(testingType)) {
+      return
+    }
+
+    if (testingType === 'e2e' && !this.ctx.migration.needsCypressJsonMigration()) {
+      // E2E doesn't have a wizard, so if we have a testing type on load we just create/update their cypress.config.js.
+      await this.ctx.actions.wizard.scaffoldTestingType()
+    } else if (testingType === 'component') {
+      await this.ctx.actions.wizard.detectFrameworks()
+      await this.ctx.actions.wizard.initialize()
     }
   }
 

packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts

@@ -178,17 +178,7 @@ export const mutation = mutationType({
       resolve: async (source, args, ctx) => {
         ctx.actions.project.setAndLoadCurrentTestingType(args.testingType)
 
-        // if necessary init the wizard for configuration
-        if (ctx.coreData.currentTestingType && !ctx.lifecycleManager.isTestingTypeConfigured(ctx.coreData.currentTestingType)) {
-          // Component Testing has a wizard to help users configure their project
-          if (ctx.coreData.currentTestingType === 'component') {
-            await ctx.actions.wizard.detectFrameworks()
-            await ctx.actions.wizard.initialize()
-          } else {
-            // E2E doesn't have such a wizard, we just create/update their cypress.config.js.
-            await ctx.actions.wizard.scaffoldTestingType()
-          }
-        }
+        await ctx.actions.project.initializeProjectSetup(args.testingType)
 
         return {}
       },

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

@@ -109,14 +109,31 @@ describe('Launchpad: Open Mode', () => {
     })
   })
 
-  it('goes to component test onboarding when launched with --component and not configured', () => {
-    cy.scaffoldProject('launchpad')
-    cy.openProject('launchpad', ['--component'])
-    cy.visitLaunchpad()
-    cy.skipWelcome()
-    cy.get('[data-cy=header-bar-content]').contains('component testing', { matchCase: false })
-    // Component testing is not configured for the todo project
-    cy.get('h1').should('contain', 'Project setup')
+  describe('when launched with --component and not configured', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('react-vite-ts-unconfigured')
+      cy.openProject('react-vite-ts-unconfigured', ['--component'])
+      cy.visitLaunchpad()
+      cy.skipWelcome()
+    })
+
+    it('goes to component test onboarding', () => {
+      cy.get('[data-cy=header-bar-content]').contains('component testing', { matchCase: false })
+      // Component testing is not configured for the todo project
+      cy.get('h1').should('contain', 'Project setup')
+    })
+
+    it('detects CT project framework', () => {
+      cy.get('[data-testid="select-framework"]').within(() => {
+        cy.contains('React.js').should('be.visible')
+        cy.contains('(detected)').should('be.visible')
+      })
+
+      cy.get('[data-testid="select-bundler"]').within(() => {
+        cy.contains('Vite').should('be.visible')
+        cy.contains('(detected)').should('be.visible')
+      })
+    })
   })
 
   // since circle cannot have firefox installed by default,