feat(testing): add cypress create nodes plugin (#19840)

packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts

@@ -213,10 +213,6 @@ describe('Cypress Component Testing Configuration', () => {
           generateTests: false,
         });
       }).resolves;
-
-      expect(
-        require('@nx/devkit').createProjectGraphAsync
-      ).not.toHaveBeenCalled();
     });
     it('should use own project config', async () => {
       await generateTestApplication(tree, {

packages/angular/src/generators/ng-add/migrators/projects/__snapshots__/e2e.migrator.spec.ts.snap

@@ -15,10 +15,11 @@ export default defineConfig({
 
 exports[`e2e migrator cypress with project root at "" cypress version >=10 should create a cypress.config.ts file when it does not exist 1`] = `
 "import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__filename, { cypressDir: 'src' })
+  e2e: { ...nxE2EPreset(__filename, { cypressDir: 'src' }) },
 });
 "
 `;
@@ -91,10 +92,11 @@ export default defineConfig({
 
 exports[`e2e migrator cypress with project root at "projects/app1" cypress version >=10 should create a cypress.config.ts file when it does not exist 1`] = `
 "import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__filename, { cypressDir: 'src' })
+  e2e: { ...nxE2EPreset(__filename, { cypressDir: 'src' }) },
 });
 "
 `;

packages/angular/src/generators/ng-add/migrators/projects/app.migrator.spec.ts

@@ -1710,7 +1710,6 @@ describe('app migrator', () => {
       ).toStrictEqual([
         'build',
         'lint',
-        'e2e',
         'myCustomTest',
         'myCustomLint',
         'myCustomBuild',
@@ -1742,7 +1741,7 @@ describe('app migrator', () => {
       const { targetDefaults } = readNxJson(tree);
       expect(
         Object.keys(targetDefaults).filter((f) => targetDefaults[f].cache)
-      ).toStrictEqual(['build', 'lint', 'e2e', 'myCustomTest']);
+      ).toStrictEqual(['build', 'lint', 'myCustomTest', 'e2e']);
     });
   });
 });

packages/angular/src/generators/ng-add/migrators/projects/e2e.migrator.spec.ts

@@ -11,7 +11,7 @@ jest.mock('fs', () => {
 });
 
 import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version';
-import type { ProjectConfiguration, Tree } from '@nx/devkit';
+import { formatFiles, ProjectConfiguration, Tree } from '@nx/devkit';
 import {
   joinPathFragments,
   offsetFromRoot,
@@ -826,6 +826,8 @@ describe('e2e migrator', () => {
 
           await migrator.migrate();
 
+          await formatFiles(tree);
+
           expect(tree.exists('apps/app1-e2e/cypress.config.ts')).toBe(true);
           const cypressConfig = tree.read(
             'apps/app1-e2e/cypress.config.ts',

packages/angular/src/generators/ng-add/migrators/projects/lib.migrator.spec.ts

@@ -1280,7 +1280,6 @@ describe('lib migrator', () => {
       ).toStrictEqual([
         'build',
         'lint',
-        'e2e',
         'myCustomBuild',
         'myCustomTest',
         'myCustomLint',
@@ -1306,7 +1305,7 @@ describe('lib migrator', () => {
       const { targetDefaults } = readNxJson(tree);
       expect(
         Object.keys(targetDefaults).filter((f) => targetDefaults[f].cache)
-      ).toStrictEqual(['build', 'lint', 'e2e', 'myCustomTest']);
+      ).toStrictEqual(['build', 'lint', 'myCustomTest']);
     });
   });
 });

packages/cypress/migrations.json

@@ -47,6 +47,16 @@
       "version": "16.8.0-beta.4",
       "description": "Update to Cypress v13. Most noteable change is video recording is off by default. This migration will only update if the workspace is already on Cypress v12. https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-130",
       "implementation": "./src/migrations/update-16-8-0/cypress-13"
+    },
+    "add-nx-metadata": {
+      "version": "17.2.0-beta.0",
+      "description": "Add devServerTargets into cypress.config.ts files for @nx/cypress/plugin",
+      "implementation": "./src/migrations/update-17-2-0/add-dev-server-targets-to-cypress-configs"
+    },
+    "add-nx-cypress-plugin": {
+      "version": "17.2.0-beta.0",
+      "description": "Add the @nx/cypress/plugin to nx.json plugins",
+      "implementation": "./src/migrations/update-17-2-0/add-nx-cypress-plugin"
     }
   },
   "packageJsonUpdates": {

packages/cypress/package.json

@@ -34,13 +34,13 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
+    "@nx/devkit": "file:../devkit",
+    "@nx/eslint": "file:../eslint",
+    "@nx/js": "file:../js",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "detect-port": "^1.5.1",
     "semver": "7.5.3",
-    "tslib": "^2.3.0",
-    "@nx/devkit": "file:../devkit",
-    "@nx/js": "file:../js",
-    "@nx/eslint": "file:../eslint"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "cypress": ">= 3 < 14"

packages/cypress/plugin.ts

@@ -0,0 +1 @@
+export { createNodes } from './src/plugins/plugin';

packages/cypress/plugins/cypress-preset.ts

@@ -1,8 +1,16 @@
-import { workspaceRoot } from '@nx/devkit';
+import {
+  createProjectGraphAsync,
+  logger,
+  parseTargetString,
+  workspaceRoot,
+} from '@nx/devkit';
 import { dirname, join, relative } from 'path';
 import { lstatSync } from 'fs';
 
 import vitePreprocessor from '../src/plugins/preprocessor-vite';
+import { ChildProcess, fork } from 'node:child_process';
+import { createExecutorContext } from '../src/utils/ct-helpers';
+import { startDevServer } from '../src/utils/start-dev-server';
 
 interface BaseCypressPreset {
   videosFolder: string;
@@ -65,29 +73,66 @@ export function nxBaseCypressPreset(
  *   }
  * })
  *
- * @param pathToConfig will be used to construct the output paths for videos and screenshots
  */
 export function nxE2EPreset(
   pathToConfig: string,
   options?: NxCypressE2EPresetOptions
 ) {
   const basePath = options?.cypressDir || 'src';
-  const baseConfig = {
+  const baseConfig: any /** Cypress.EndToEndConfigOptions */ = {
     ...nxBaseCypressPreset(pathToConfig),
     fileServerFolder: '.',
     supportFile: `${basePath}/support/e2e.ts`,
     specPattern: `${basePath}/**/*.cy.{js,jsx,ts,tsx}`,
     fixturesFolder: `${basePath}/fixtures`,
+    env: {
+      devServerTargets: options?.devServerTargets,
+      devServerTargetOptions: {},
+      ciDevServerTarget: options?.ciDevServerTarget,
+    },
+    async setupNodeEvents(on, config) {
+      if (options?.bundler === 'vite') {
+        on('file:preprocessor', vitePreprocessor());
+      }
+      if (!config.env.devServerTargets) {
+        return;
+      }
+      const devServerTarget =
+        config.env.devServerTarget ?? config.env.devServerTargets['default'];
+
+      if (!devServerTarget) {
+        return;
+      }
+      if (!config.baseUrl && devServerTarget) {
+        const graph = await createProjectGraphAsync();
+        const target = parseTargetString(devServerTarget, graph);
+        const context = createExecutorContext(
+          graph,
+          graph.nodes[target.project].data?.targets,
+          target.project,
+          target.target,
+          target.configuration
+        );
+
+        const devServer = startDevServer(
+          {
+            devServerTarget,
+            ...config.env.devServerTargetOptions,
+          },
+          context
+        );
+        on('after:run', () => {
+          devServer.return();
+        });
+        const devServerValue = (await devServer.next()).value;
+        if (!devServerValue) {
+          return;
+        }
+        return { ...config, baseUrl: devServerValue.baseUrl };
+      }
+    },
   };
 
-  if (options?.bundler === 'vite') {
-    return {
-      ...baseConfig,
-      setupNodeEvents(on) {
-        on('file:preprocessor', vitePreprocessor());
-      },
-    };
-  }
   return baseConfig;
 }
 
@@ -99,4 +144,7 @@ export type NxCypressE2EPresetOptions = {
    * default is 'src'
    **/
   cypressDir?: string;
+
+  devServerTargets?: Record<string, string>;
+  ciDevServerTarget?: string;
 };