Merge branch '10.0-release' into merge-develop-4-12

Author: emilyrohrbough

.github/CODEOWNERS

@@ -34,6 +34,8 @@
 /packages/net-stubbing/  @cypress-io/end-to-end
 /packages/network/  @cypress-io/end-to-end
 /packages/proxy/  @cypress-io/end-to-end
+/packages/data-context/  @tgriesser
+/packages/graphql/  @tgriesser
 /packages/reporter/  @cypress-io/end-to-end
 /packages/resolve-dist/  @cypress-io/end-to-end
 /packages/rewriter/  @cypress-io/end-to-end

cli/types/cypress.d.ts

@@ -3001,11 +3001,11 @@ declare namespace Cypress {
 
   type DevServerConfigObject = {
     bundler: 'webpack'
-    framework: 'react'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'
-    framework: 'react'
+    framework: 'react' | 'vue'
     viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
   }
 

package.json

@@ -67,7 +67,7 @@
     "test-watch": "lerna exec yarn test-watch --ignore \"'@packages/{driver,root,static,web-config}'\"",
     "type-check": "yarn lerna exec yarn type-check --scope @tooling/system-tests && node scripts/type_check",
     "verify:mocha:results": "node ./scripts/verify_mocha_results",
-    "watch": "yarn gulp dev:watch",
+    "watch": "yarn gulp watch",
     "prepare": "husky install"
   },
   "dependencies": {

packages/app/README.md

@@ -4,11 +4,12 @@ This is the front-end for the Cypress App.
 
 ## Development
 
-1. `yarn dev` (inside of `packages/app`)
-2. It will open launchpad
-3. Select Component or E2E Testing
-3. Open chrome (or another browser)
-4. It will show the new Vite powered app 
+1. `yarn watch` (inside of root)
+2. `yarn cypress:open` (inside of `packages/app`)
+3. It will open launchpad
+4. Select Component or E2E Testing
+5. Open chrome (or another browser)
+6. It will show the new Vite powered app
 
 ## How the App works
 

packages/data-context/src/DataContext.ts

@@ -427,7 +427,7 @@ export class DataContext {
       await this.lifecycleManager.initializeRunMode(this.coreData.currentTestingType)
     } else if (this._config.mode === 'open') {
       await this.initializeOpenMode()
-      if (this.coreData.currentTestingType && await this.lifecycleManager.waitForInitializeSuccess()) {
+      if (this.coreData.currentProject && this.coreData.currentTestingType && await this.lifecycleManager.waitForInitializeSuccess()) {
         this.lifecycleManager.setAndLoadCurrentTestingType(this.coreData.currentTestingType)
         this.lifecycleManager.scaffoldFilesIfNecessary()
       }

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

@@ -332,6 +332,10 @@ export class ProjectLifecycleManager {
   }
 
   async waitForInitializeSuccess (): Promise<boolean> {
+    if (!this._configManager) {
+      return false
+    }
+
     if (this._configManager?.isLoadingConfigFile) {
       try {
         await this.initializeConfig()
@@ -516,6 +520,7 @@ export class ProjectLifecycleManager {
       this._configManager = undefined
     }
 
+    this.ctx.coreData.currentProjectGitInfo?.destroy()
     this.ctx.project.destroy()
     this._currentTestingType = null
     this._cachedInitialConfig = undefined

packages/launchpad/README.md

@@ -41,14 +41,25 @@ For the best development experience, you will want to use VS Code with the [Vola
 
 ```bash
 ## from repo root
-yarn dev
+yarn watch
 ```
 
-This starts Vite in watch mode. It also starts the GraphQL Server. You can access it on `http://localhost:52200/graphql`.
+This starts Vite in watch mode, and any code-generation scripts that need to be running in the background to support our environment. 
+
+In a seprate terminal, run:
+
+```bash
+## from repo root
+yarn cypress:open
+```
+
+This starts the GraphQL Server, and opens Cypress. By running this separate from the `yarn watch`, you can kill & respawn the Cypress binary without the overhead of the watch processes you'd see by running `yarn dev`. 
+
+You can access the GraphQL inspector on `http://localhost:52200/graphql`.
 
 ![graphql](../graphql/gql.png)
 
-If you notice your IDE has not updated and is showing errors, even after `yarn watch` has run, you might need to reopen your IDE. With the amount of code generation running, sometimes the IDE does not recognize that the code has changed.
+If you notice your IDE has not updated and is showing errors, even after `yarn watch` has run, you might need to reload your IDE. With the amount of code generation running, sometimes the IDE does not recognize that the code has changed.
 
 ## Testing
 

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

@@ -62,8 +62,8 @@ describe('Launchpad: Global Mode', () => {
   })
 
   describe('when projects have been added', () => {
-    const setupAndValidateProjectsList = (projectList) => {
-      cy.openGlobalMode()
+    const setupAndValidateProjectsList = (projectList, globalModeOptions?: string[] | undefined) => {
+      cy.openGlobalMode(globalModeOptions)
       projectList.forEach((projectName) => {
         cy.addProject(projectName)
       })
@@ -96,6 +96,14 @@ describe('Launchpad: Global Mode', () => {
       cy.get('[data-cy="project-card"]').should('not.exist')
     })
 
+    it('takes the user to the next step when clicking on a project card when passing testing type on the command line', () => {
+      const projectList = ['todos']
+
+      setupAndValidateProjectsList(projectList, ['--e2e'])
+      cy.get('[data-cy="project-card"]').click()
+      cy.get('[data-cy="project-card"]').should('not.exist')
+    })
+
     it('updates most-recently opened project list when returning from next step', () => {
       const projectList = ['todos', 'ids', 'cookies', 'plugin-empty']
 

scripts/gulp/gulpfile.ts

@@ -19,6 +19,7 @@ import { exitAfterAll } from './tasks/gulpRegistry'
 import { execSync } from 'child_process'
 import { webpackRunner } from './tasks/gulpWebpack'
 import { e2eTestScaffold, e2eTestScaffoldWatch } from './tasks/gulpE2ETestScaffold'
+import dedent from 'dedent'
 
 if (process.env.CYPRESS_INTERNAL_VITE_DEV) {
   process.env.CYPRESS_INTERNAL_VITE_APP_PORT ??= '3333'
@@ -60,6 +61,8 @@ gulp.task(
     webpackRunner,
     gulp.series(
       makePathMap,
+      // Before dev, fetch the latest "remote" schema from the Cypress dashboard
+      syncRemoteGraphQL,
       gulp.parallel(
         viteClean,
         e2eTestScaffoldWatch,
@@ -73,13 +76,26 @@ gulp.task(
         viteApp,
         viteLaunchpad,
       ),
-
-      // And we're finally ready for electron, watching for changes in
-      // /graphql to auto-restart the server
     ),
   ),
 )
 
+gulp.task(
+  'watch',
+  gulp.series(
+    'dev:watch',
+    // And we're finally ready for electron, watching for changes in
+    // /graphql to auto-restart the server
+    async function logInfo () {
+      console.log(dedent`
+        "yarn watch" is complete, and is now watching your files for code-generation updates.
+
+        In a separate terminal, run "yarn cypress:open" to start Cypress
+      `)
+    },
+  ),
+)
+
 gulp.task(
   'dev',
   gulp.series(
@@ -88,9 +104,6 @@ gulp.task(
     // And we're finally ready for electron, watching for changes in
     // /graphql to auto-restart the server
     startCypressWatch,
-
-    // Before dev, fetch the latest "remote" schema from the Cypress dashboard
-    syncRemoteGraphQL,
   ),
 )
 

system-tests/project-fixtures/cra/cypress.config.js renamed to system-tests/project-fixtures/cra/cypress.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'cypress'
 
-module.exports = defineConfig({
+export default defineConfig({
   component: {
     devServer: {
       framework: 'create-react-app',