fix: Subscribe to framework detection changes in wizard (#26437)

cli/CHANGELOG.md

@@ -6,7 +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).
+ - 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) and [#26388](https://github.com/cypress-io/cypress/issues/26388).
  - Updated to use the `SEMAPHORE_GIT_WORKING_BRANCH` [Semphore](https://docs.semaphoreci.com) CI environment variable to correctly associate a Cloud run to the current branch. Previously this was incorrectly associating a run to the target branch. Fixes [#26309](https://github.com/cypress-io/cypress/issues/26309).
  - Fix an edge case in Component Testing where a custom `baseUrl` in `tsconfig.json` for Next.js 13.2.0+ is not respected. This was partially fixed in [#26005](https://github.com/cypress-io/cypress/pull/26005), but an edge case was missed. Fixes [#25951](https://github.com/cypress-io/cypress/issues/25951).
  - Fixed an issue where `click` events fired on `.type('{enter}')` did not propagate through shadow roots. Fixes [#26392](https://github.com/cypress-io/cypress/issues/26392).

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

@@ -105,6 +105,14 @@ abstract class DataEmitterEvents {
     this._emit('relevantRunSpecChange', run)
   }
 
+  /**
+   * Emitted when there is a change to the auto-detected framework/bundler
+   * for a CT project
+   */
+  frameworkDetectionChange () {
+    this._emit('frameworkDetectionChange')
+  }
+
   /**
    * When we want to update the cache with known values from the server, without
    * triggering a full refresh, we can send down a specific fragment / data to update

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

@@ -116,6 +116,8 @@ export class WizardActions {
         coreData.wizard.detectedBundler = this.getNullableBundler(detected.bundler || detected.framework.supportedBundlers[0])
         coreData.wizard.chosenBundler = this.getNullableBundler(detected.bundler || detected.framework.supportedBundlers[0])
       })
+
+      this.ctx.emitter.frameworkDetectionChange()
     }
   }
 

packages/graphql/schemas/schema.graphql

@@ -2251,6 +2251,11 @@ type Subscription {
   """Triggered when the base error or warning state changes"""
   errorWarningChange: Query
 
+  """
+  Triggered when there is a change to the automatically-detected framework/bundler for a CT project
+  """
+  frameworkDetectionChange: Wizard
+
   """
   When the git info has refreshed for some or all of the specs, we fire this event with the specs updated
   """

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

@@ -1,6 +1,6 @@
 import type { PushFragmentData } from '@packages/data-context/src/actions'
 import { enumType, idArg, list, nonNull, objectType, stringArg, subscriptionType } from 'nexus'
-import { CurrentProject, DevState, Query } from '.'
+import { CurrentProject, DevState, Query, Wizard } from '.'
 import { Spec } from './gql-Spec'
 import { RelevantRun } from './gql-RelevantRun'
 
@@ -156,5 +156,12 @@ export const Subscription = subscriptionType({
         return root
       },
     })
+
+    t.field('frameworkDetectionChange', {
+      type: Wizard,
+      description: 'Triggered when there is a change to the automatically-detected framework/bundler for a CT project',
+      subscribe: (source, args, ctx) => ctx.emitter.subscribeTo('frameworkDetectionChange', { sendInitial: false }),
+      resolve: (source, args, ctx) => ctx.wizardData,
+    })
   },
 })

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

@@ -112,24 +112,51 @@ describe('Launchpad: Open Mode', () => {
   describe('when launched with --component and not configured', () => {
     beforeEach(() => {
       cy.scaffoldProject('react-vite-ts-unconfigured')
+    })
+
+    it('goes to component test onboarding', () => {
       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.withCtx(async (ctx, o) => {
+        // Mock wizard initialization taking a long time by replacing
+        // implementation with no-op and proceeding
+        o.sinon.stub(ctx.actions.wizard, 'initialize').resolves()
+      })
+
+      cy.openProject('react-vite-ts-unconfigured', ['--component'])
+      cy.visitLaunchpad()
+      cy.skipWelcome()
+
+      cy.get('[data-testid="select-framework"]').as('framework')
+
+      // Validate that UI presents an "empty" state since auto-detection did not fire
+      cy.get('@framework').within(() => {
+        cy.contains('Pick a framework', { timeout: 100 }).should('be.visible')
+      })
+
+      cy.withCtx(async (ctx, o) => {
+        // Trigger actual wizard initialization to occur
+        (ctx.actions.wizard.initialize as SinonStub).wrappedMethod.apply(ctx.actions.wizard)
+      })
+
+      // Verify that auto-detection has fired via the real initialize call and updated data
+      // has flowed through to populate UI
+      cy.get('[data-testid="select-bundler"]').as('bundler')
+
+      cy.get('@framework').within(() => {
         cy.contains('React.js').should('be.visible')
         cy.contains('(detected)').should('be.visible')
       })
 
-      cy.get('[data-testid="select-bundler"]').within(() => {
+      cy.get('@bundler').within(() => {
         cy.contains('Vite').should('be.visible')
         cy.contains('(detected)').should('be.visible')
       })

packages/launchpad/src/setup/EnvironmentSetup.vue

@@ -39,10 +39,11 @@ import type { WizardUpdateInput, EnvironmentSetupFragment } from '../generated/g
 import {
   EnvironmentSetup_ClearTestingTypeDocument,
   EnvironmentSetup_WizardUpdateDocument,
+  EnvironmentSetup_DetectionChangeDocument,
 } from '../generated/graphql'
 
 import { useI18n } from '@cy/i18n'
-import { useMutation } from '@urql/vue'
+import { useMutation, useSubscription } from '@urql/vue'
 import type { FrameworkOption } from './types'
 
 gql`
@@ -85,6 +86,14 @@ fragment EnvironmentSetup on Wizard {
 }
 `
 
+gql`
+subscription EnvironmentSetup_DetectionChange {
+  frameworkDetectionChange {
+    ...EnvironmentSetup
+  }
+}
+`
+
 const props = defineProps<{
   gql: EnvironmentSetupFragment
   nextFn: () => void
@@ -166,4 +175,6 @@ const canNavigateForward = computed(() => {
   return bundler !== null && framework !== null
 })
 
+useSubscription({ query: EnvironmentSetup_DetectionChangeDocument })
+
 </script>

packages/server/lib/modes/interactive.ts

@@ -157,6 +157,10 @@ export = {
   },
 
   async run (options: LaunchArgs, _loading: Promise<void>) {
+    // Note: We do not await the `_loading` promise here since initializing
+    // the data context can significantly delay initial render of the UI
+    // https://github.com/cypress-io/cypress/issues/26388#issuecomment-1492616609
+
     const [, port] = await Promise.all([
       app.whenReady(),
       makeGraphQLServer(),