feat: relaunch browser when switching testing types from app

packages/app/cypress/e2e/sidebar_navigation.cy.ts

@@ -115,7 +115,7 @@ describe('Sidebar Navigation', () => {
         cy.contains('Configured')
       })
 
-      cy.intercept('mutation-SwitchTestingType_ReconfigureProject').as('SwitchTestingType')
+      cy.intercept('mutation-SwitchTestingTypeAndRelaunch').as('SwitchTestingTypeAndRelaunch')
       cy.withCtx((ctx) => {
         ctx.actions.project.reconfigureProject = sinon.stub()
       })
@@ -124,10 +124,14 @@ describe('Sidebar Navigation', () => {
         cy.contains('Not Configured')
       }).click()
 
-      cy.wait('@SwitchTestingType').then((interception) => {
+      cy.wait('@SwitchTestingTypeAndRelaunch').then((interception) => {
         expect(interception.request.body.variables.testingType).eq('component')
       })
 
+      cy.withCtx((ctx) => {
+        expect(ctx.coreData.app.relaunchBrowser).eq(true)
+      })
+
       cy.get('[aria-label="Close"]').click()
       cy.findByText('Choose a testing type').should('not.exist')
 
@@ -199,7 +203,7 @@ describe('Sidebar Navigation', () => {
         cy.contains('Configured')
       })
 
-      cy.intercept('mutation-SwitchTestingType_ReconfigureProject').as('SwitchTestingType')
+      cy.intercept('mutation-SwitchTestingTypeAndRelaunch').as('SwitchTestingTypeAndRelaunch')
       cy.withCtx((ctx) => {
         ctx.actions.project.reconfigureProject = sinon.stub()
       })
@@ -208,7 +212,7 @@ describe('Sidebar Navigation', () => {
         cy.contains('Not Configured')
       }).click()
 
-      cy.wait('@SwitchTestingType').then((interception) => {
+      cy.wait('@SwitchTestingTypeAndRelaunch').then((interception) => {
         expect(interception.request.body.variables.testingType).eq('e2e')
       })
     })

packages/app/src/navigation/SwitchTestingTypeModal.vue

@@ -10,14 +10,14 @@
   >
     <TestingTypePicker
       :gql="props.gql"
-      @pick="reconfigure"
+      @pick="switchAndRelaunchFn"
     />
   </StandardModal>
 </template>
 
 <script lang="ts" setup>
 import { gql, useMutation } from '@urql/vue'
-import { SwitchTestingType_ReconfigureProjectDocument, SwitchTestingTypeModalFragment } from '../generated/graphql'
+import { SwitchTestingTypeAndRelaunchDocument, SwitchTestingTypeModalFragment } from '../generated/graphql'
 import StandardModal from '@cy/components/StandardModal.vue'
 import TestingTypePicker from '@cy/gql-components/TestingTypePicker.vue'
 import { useI18n } from '@cy/i18n'
@@ -31,11 +31,8 @@ fragment SwitchTestingTypeModal on Query {
 `
 
 gql`
-mutation SwitchTestingType_ReconfigureProject($testingType: TestingTypeEnum!) {
-  setCurrentTestingType(testingType: $testingType) {
-    currentTestingType
-  }
-  reconfigureProject
+mutation SwitchTestingTypeAndRelaunch($testingType: TestingTypeEnum!) {
+  switchTestingTypeAndRelaunch(testingType: $testingType)
 }
 `
 
@@ -48,9 +45,9 @@ const emits = defineEmits<{
   (eventName: 'close'): void
 }>()
 
-const openElectron = useMutation(SwitchTestingType_ReconfigureProjectDocument)
+const switchAndRelaunch = useMutation(SwitchTestingTypeAndRelaunchDocument)
 
-function reconfigure (testingType: 'component' | 'e2e') {
-  openElectron.executeMutation({ testingType })
+function switchAndRelaunchFn (testingType: 'component' | 'e2e') {
+  switchAndRelaunch.executeMutation({ testingType })
 }
 </script>

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

@@ -18,7 +18,7 @@ export interface ProjectApiShape {
    *   order for CT to startup
    */
   openProjectCreate(args: InitializeProjectOptions, options: OpenProjectLaunchOptions): Promise<unknown>
-  launchProject(browser: FoundBrowser, spec: Cypress.Spec, options: LaunchOpts): void
+  launchProject(browser: FoundBrowser, spec: Cypress.Spec, options: LaunchOpts): Promise<void>
   insertProjectToCache(projectRoot: string): Promise<void>
   removeProjectFromCache(projectRoot: string): Promise<void>
   getProjectRootsFromCache(): Promise<string[]>
@@ -130,6 +130,12 @@ export class ProjectActions {
       return await this.api.openProjectCreate(allModeOptionsWithLatest, {
         ...options,
         ctx: this.ctx,
+      }).finally(async () => {
+        // When switching testing type, the project should be relaunched in the previously selected browser
+        if (this.ctx.coreData.app.relaunchBrowser) {
+          this.ctx.project.setRelaunchBrowser(false)
+          await this.ctx.actions.project.launchProject(this.ctx.coreData.currentTestingType, {})
+        }
       })
     } catch (e) {
       // TODO(tim): remove / replace with ctx.log.error
@@ -225,7 +231,11 @@ export class ProjectActions {
 
     this.ctx.coreData.currentTestingType = testingType
 
-    return this.api.launchProject(browser, activeSpec ?? emptySpec, options)
+    this.ctx.browser.setBrowserStatus('opening')
+    await this.api.launchProject(browser, activeSpec ?? emptySpec, options)
+    this.ctx.browser.setBrowserStatus('open')
+
+    return
   }
 
   removeProject (projectRoot: string) {
@@ -459,7 +469,7 @@ export class ProjectActions {
 
   async reconfigureProject () {
     // Initialize active project close first the current project
-    await this.initializeActiveProject()
+    await this.ctx.actions.browser.closeBrowser()
     this.ctx.actions.wizard.resetWizard()
     this.ctx.actions.electron.refreshBrowserWindow()
     this.ctx.actions.electron.showBrowserWindow()

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

@@ -1,4 +1,4 @@
-import { BUNDLERS, FoundBrowser, Editor, Warning, AllowedState, AllModeOptions, TestingType, PACKAGE_MANAGERS } from '@packages/types'
+import { BUNDLERS, FoundBrowser, Editor, Warning, AllowedState, AllModeOptions, TestingType, PACKAGE_MANAGERS, BrowserStatus } from '@packages/types'
 import type { NexusGenEnums, NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
 import type { App, BrowserWindow } from 'electron'
 import type { ChildProcess } from 'child_process'
@@ -56,7 +56,8 @@ export interface AppDataShape {
   refreshingBrowsers: Promise<FoundBrowser[]> | null
   refreshingNodePath: Promise<string> | null
   nodePath: Maybe<string>
-  isBrowserOpen: boolean
+  browserStatus: BrowserStatus
+  relaunchBrowser: boolean
 }
 
 export interface WizardDataShape {
@@ -134,7 +135,8 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
       projects: [],
       refreshingNodePath: null,
       nodePath: modeOptions.userNodePath,
-      isBrowserOpen: false,
+      browserStatus: 'closed',
+      relaunchBrowser: false,
     },
     localSettings: {
       availableEditors: [],

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

@@ -1,4 +1,4 @@
-import type { FoundBrowser } from '@packages/types'
+import type { FoundBrowser, BrowserStatus } from '@packages/types'
 import os from 'os'
 import { execSync } from 'child_process'
 import type { DataContext } from '..'
@@ -75,4 +75,9 @@ export class BrowserDataSource {
 
     return false
   }
+
+  setBrowserStatus (browserStatus: BrowserStatus) {
+    this.ctx.coreData.app.browserStatus = browserStatus
+    this.ctx.emitter.toLaunchpad()
+  }
 }

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

@@ -134,6 +134,10 @@ export class ProjectDataSource {
     this._specs = specs
   }
 
+  setRelaunchBrowser (relaunchBrowser: boolean) {
+    this.ctx.coreData.app.relaunchBrowser = relaunchBrowser
+  }
+
   async specPatternsForTestingType (projectRoot: string, testingType: Cypress.TestingType): Promise<{
     specPattern?: string[]
     ignoreSpecPattern?: string[]
@@ -340,8 +344,4 @@ export class ProjectDataSource {
 
     return isEqual(specPattern, [component])
   }
-
-  setIsBrowserOpen (isBrowserOpen: boolean) {
-    this.ctx.coreData.app.isBrowserOpen = isBrowserOpen
-  }
 }

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Mutation.ts

@@ -102,4 +102,7 @@ export const stubMutation: MaybeResolver<Mutation> = {
   closeBrowser (src, args, ctx) {
     return true
   },
+  switchTestingTypeAndRelaunch (src, args, ctx) {
+    return true
+  },
 }

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts

@@ -51,7 +51,7 @@ export const createTestCurrentProject = (title: string, currentProject: Partial<
     currentBrowser: stubBrowsers[0],
     browsers: stubBrowsers,
     isDefaultSpecPattern: true,
-    isBrowserOpen: false,
+    browserStatus: 'closed',
     packageManager: 'yarn',
     ...currentProject,
   }

packages/graphql/schemas/schema.graphql

@@ -31,6 +31,12 @@ enum BrowserFamily {
   firefox
 }
 
+enum BrowserStatus {
+  closed
+  open
+  opening
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -326,6 +332,9 @@ type CurrentProject implements Node & ProjectLike {
   """The current branch of the project"""
   branch: String
 
+  """If the browser is open or not"""
+  browserStatus: BrowserStatus!
+
   """Browsers found that are compatible with Cypress"""
   browsers: [Browser!]
 
@@ -365,9 +374,6 @@ type CurrentProject implements Node & ProjectLike {
   """Relay style Node ID field for the CurrentProject field"""
   id: ID!
 
-  """If the browser is open or not"""
-  isBrowserOpen: Boolean!
-
   """Whether the user configured this project to use Component Testing"""
   isCTConfigured: Boolean
 
@@ -809,6 +815,9 @@ type Mutation {
   """Save the prompt-shown state for this project"""
   setPromptShown(slug: String!): Boolean
 
+  """Switch Testing type and relaunch browser"""
+  switchTestingTypeAndRelaunch(testingType: TestingTypeEnum!): Boolean
+
   """Updates the different fields of the wizard data store"""
   wizardUpdate(input: WizardUpdateInput!): Wizard
 }

packages/graphql/src/schemaTypes/enumTypes/gql-BrowserStatus.ts

@@ -0,0 +1,7 @@
+import { BROWSER_STATUS } from '@packages/types'
+import { enumType } from 'nexus'
+
+export const BrowserStatusEnum = enumType({
+  name: 'BrowserStatus',
+  members: BROWSER_STATUS,
+})

packages/graphql/src/schemaTypes/enumTypes/index.ts

@@ -2,6 +2,7 @@
 // created by autobarrel, do not modify directly
 
 export * from './gql-BrowserFamilyEnum'
+export * from './gql-BrowserStatus'
 export * from './gql-CodeGenTypeEnum'
 export * from './gql-ProjectEnums'
 export * from './gql-SpecEnum'

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

@@ -2,6 +2,7 @@ import { PACKAGE_MANAGERS } from '@packages/types'
 import { enumType, nonNull, objectType, stringArg } from 'nexus'
 import path from 'path'
 import { BaseError } from '.'
+import { BrowserStatusEnum } from '..'
 import { cloudProjectBySlug } from '../../stitching/remoteGraphQLCalls'
 import { TestingTypeEnum } from '../enumTypes/gql-WizardEnums'
 import { Browser } from './gql-Browser'
@@ -191,9 +192,10 @@ export const CurrentProject = objectType({
       resolve: async (source, args, ctx) => ctx.project.getIsDefaultSpecPattern(),
     })
 
-    t.nonNull.boolean('isBrowserOpen', {
+    t.nonNull.field('browserStatus', {
+      type: BrowserStatusEnum,
       description: 'If the browser is open or not',
-      resolve: (source, args, ctx) => ctx.coreData.app.isBrowserOpen,
+      resolve: (source, args, ctx) => ctx.coreData.app.browserStatus,
     })
   },
   sourceType: {

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

@@ -578,5 +578,20 @@ export const mutation = mutationType({
         return true
       },
     })
+
+    t.field('switchTestingTypeAndRelaunch', {
+      description: 'Switch Testing type and relaunch browser',
+      type: 'Boolean',
+      args: {
+        testingType: nonNull(arg({ type: TestingTypeEnum })),
+      },
+      resolve: async (source, args, ctx) => {
+        ctx.project.setRelaunchBrowser(true)
+        ctx.actions.project.setCurrentTestingType(args.testingType)
+        await ctx.actions.project.reconfigureProject()
+
+        return true
+      },
+    })
   },
 })