fix(testing): app generators should create correct e2e config at gene…

…ration time (#22565)
nrwl · Apr 3, 2024 · 7f00927 · 7f00927
1 parent 2149fa2
commit 7f00927
Show file tree

Hide file tree

Showing 20 changed files with 317 additions and 47 deletions.
diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -287,6 +287,7 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
       "executor": "@nx/web:file-server",
       "options": {
         "buildTarget": "my-dir-my-app:build",
+        "port": 4200,
         "spa": true,
         "staticFilePath": "dist/apps/my-dir/my-app/browser",
       },
@@ -487,6 +488,7 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
       "executor": "@nx/web:file-server",
       "options": {
         "buildTarget": "my-app:build",
+        "port": 4200,
         "spa": true,
         "staticFilePath": "dist/apps/my-app/browser",
       },
@@ -982,6 +984,7 @@ exports[`app nested should create project configs 1`] = `
       "executor": "@nx/web:file-server",
       "options": {
         "buildTarget": "my-app:build",
+        "port": 4200,
         "spa": true,
         "staticFilePath": "dist/my-dir/my-app/browser",
       },
@@ -1095,6 +1098,7 @@ exports[`app not nested should create project configs 1`] = `
       "executor": "@nx/web:file-server",
       "options": {
         "buildTarget": "my-app:build",
+        "port": 4200,
         "spa": true,
         "staticFilePath": "dist/my-app/browser",
       },

diff --git a/packages/angular/src/generators/application/lib/add-e2e.ts b/packages/angular/src/generators/application/lib/add-e2e.ts
@@ -40,8 +40,8 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       linter: options.linter,
       skipPackageJson: options.skipPackageJson,
       skipFormat: true,
-      devServerTarget: `${options.name}:serve:development`,
-      baseUrl: 'http://localhost:4200',
+      devServerTarget: `${options.name}:${options.e2eWebServerTarget}:development`,
+      baseUrl: options.e2eWebServerAddress,
       rootProject: options.rootProject,
       addPlugin,
     });
@@ -64,10 +64,10 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       js: false,
       linter: options.linter,
       setParserOptionsProject: options.setParserOptionsProject,
-      webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
-        options.name
-      }`,
-      webServerAddress: `http://localhost:${options.port ?? 4200}`,
+      webServerCommand: `${getPackageManagerCommand().exec} nx ${
+        options.e2eWebServerTarget
+      } ${options.name}`,
+      webServerAddress: options.e2eWebServerAddress,
       rootProject: options.rootProject,
       addPlugin,
     });
@@ -90,7 +90,7 @@ function addFileServerTarget(
     executor: '@nx/web:file-server',
     options: {
       buildTarget: `${options.name}:build`,
-      port: options.port,
+      port: options.e2ePort,
       staticFilePath: isUsingApplicationBuilder
         ? joinPathFragments(options.outputPath, 'browser')
         : undefined,

diff --git a/packages/angular/src/generators/application/lib/normalize-options.ts b/packages/angular/src/generators/application/lib/normalize-options.ts
@@ -1,4 +1,4 @@
-import { joinPathFragments, type Tree } from '@nx/devkit';
+import { joinPathFragments, readNxJson, type Tree } from '@nx/devkit';
 import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { Linter } from '@nx/eslint';
 import { E2eTestRunner, UnitTestRunner } from '../../../utils/test-runners';
@@ -25,8 +25,22 @@ export async function normalizeOptions(
   options.rootProject = appProjectRoot === '.';
   options.projectNameAndRootFormat = projectNameAndRootFormat;
 
+  const nxJson = readNxJson(host);
+  let e2eWebServerTarget = 'serve';
+  let e2ePort = options.port ?? 4200;
+  if (
+    nxJson.targetDefaults?.[e2eWebServerTarget] &&
+    (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)
+  ) {
+    e2ePort =
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
+  }
+
   const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
   const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+  const e2eWebServerAddress = `http://localhost:${e2ePort}`;
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
@@ -58,6 +72,9 @@ export async function normalizeOptions(
     appProjectSourceRoot: `${appProjectRoot}/src`,
     e2eProjectRoot,
     e2eProjectName,
+    e2eWebServerAddress,
+    e2eWebServerTarget,
+    e2ePort,
     parsedTags,
     bundler,
     outputPath: joinPathFragments(

diff --git a/packages/angular/src/generators/application/lib/normalized-schema.ts b/packages/angular/src/generators/application/lib/normalized-schema.ts
@@ -11,6 +11,9 @@ export interface NormalizedSchema extends Schema {
   appProjectSourceRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  e2eWebServerAddress: string;
+  e2eWebServerTarget: string;
+  e2ePort: number;
   parsedTags: string[];
   outputPath: string;
 }
diff --git a/packages/expo/src/generators/application/lib/add-e2e.ts b/packages/expo/src/generators/application/lib/add-e2e.ts
@@ -16,7 +16,6 @@ export async function addE2e(
   options: NormalizedSchema
 ): Promise<GeneratorCallback> {
   const hasPlugin = hasExpoPlugin(tree);
-  const port = hasPlugin ? 8081 : 4200;
   switch (options.e2eTestRunner) {
     case 'cypress': {
       const hasNxExpoPlugin = hasExpoPlugin(tree);
@@ -47,9 +46,9 @@ export async function addE2e(
         // the name and root are already normalized, instruct the generator to use them as is
         bundler: 'none',
         skipFormat: true,
-        devServerTarget: `${options.projectName}:serve`,
-        port,
-        baseUrl: `http://localhost:${port}`,
+        devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+        port: options.e2ePort,
+        baseUrl: options.e2eWebServerAddress,
         ciWebServerCommand: hasNxExpoPlugin
           ? `nx run ${options.projectName}:serve-static`
           : undefined,
@@ -76,10 +75,10 @@ export async function addE2e(
         js: false,
         linter: options.linter,
         setParserOptionsProject: options.setParserOptionsProject,
-        webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
-          options.name
-        }`,
-        webServerAddress: `http://localhost:${port}`,
+        webServerCommand: `${getPackageManagerCommand().exec} nx ${
+          options.e2eWebServerTarget
+        } ${options.name}`,
+        webServerAddress: options.e2eWebServerAddress,
         rootProject: options.rootProject,
       });
     }

diff --git a/packages/expo/src/generators/application/lib/normalize-options.spec.ts b/packages/expo/src/generators/application/lib/normalize-options.spec.ts
@@ -40,6 +40,9 @@ describe('Normalize Options', () => {
       rootProject: false,
       e2eProjectName: 'my-app-e2e',
       e2eProjectRoot: 'my-app-e2e',
+      e2ePort: 8081,
+      e2eWebServerAddress: 'http://localhost:8081',
+      e2eWebServerTarget: 'serve',
     } as NormalizedSchema);
   });
 
@@ -72,6 +75,9 @@ describe('Normalize Options', () => {
       rootProject: false,
       e2eProjectName: 'myApp-e2e',
       e2eProjectRoot: 'myApp-e2e',
+      e2ePort: 8081,
+      e2eWebServerAddress: 'http://localhost:8081',
+      e2eWebServerTarget: 'serve',
     } as NormalizedSchema);
   });
 
@@ -106,6 +112,9 @@ describe('Normalize Options', () => {
       rootProject: false,
       e2eProjectName: 'my-app-e2e',
       e2eProjectRoot: 'directory-e2e',
+      e2ePort: 8081,
+      e2eWebServerAddress: 'http://localhost:8081',
+      e2eWebServerTarget: 'serve',
     } as NormalizedSchema);
   });
 
@@ -138,6 +147,9 @@ describe('Normalize Options', () => {
       rootProject: false,
       e2eProjectName: 'my-app-e2e',
       e2eProjectRoot: 'directory/my-app-e2e',
+      e2ePort: 8081,
+      e2eWebServerAddress: 'http://localhost:8081',
+      e2eWebServerTarget: 'serve',
     } as NormalizedSchema);
   });
 
@@ -171,6 +183,9 @@ describe('Normalize Options', () => {
       rootProject: false,
       e2eProjectName: 'my-app-e2e',
       e2eProjectRoot: 'my-app-e2e',
+      e2ePort: 8081,
+      e2eWebServerAddress: 'http://localhost:8081',
+      e2eWebServerTarget: 'serve',
     } as NormalizedSchema);
   });
 });
diff --git a/packages/expo/src/generators/application/lib/normalize-options.ts b/packages/expo/src/generators/application/lib/normalize-options.ts
@@ -1,6 +1,7 @@
 import { names, readNxJson, Tree } from '@nx/devkit';
 import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { Schema } from '../schema';
+import { ExpoPluginOptions } from '../../../../plugins/plugin';
 
 export interface NormalizedSchema extends Schema {
   className: string;
@@ -11,6 +12,9 @@ export interface NormalizedSchema extends Schema {
   rootProject: boolean;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  e2eWebServerAddress: string;
+  e2eWebServerTarget: string;
+  e2ePort: number;
 }
 
 export async function normalizeOptions(
@@ -41,8 +45,34 @@ export async function normalizeOptions(
     ? options.tags.split(',').map((s) => s.trim())
     : [];
   const rootProject = appProjectRoot === '.';
+
+  let e2eWebServerTarget = 'serve';
+  if (options.addPlugin) {
+    if (nxJson.plugins) {
+      for (const plugin of nxJson.plugins) {
+        if (
+          typeof plugin === 'object' &&
+          plugin.plugin === '@nx/expo/plugin' &&
+          (plugin.options as ExpoPluginOptions).serveTargetName
+        ) {
+          e2eWebServerTarget = (plugin.options as ExpoPluginOptions)
+            .serveTargetName;
+        }
+      }
+    }
+  }
+
+  let e2ePort = options.addPlugin ? 8081 : 4200;
+  if (
+    nxJson.targetDefaults?.[e2eWebServerTarget] &&
+    nxJson.targetDefaults?.[e2eWebServerTarget].options?.port
+  ) {
+    e2ePort = nxJson.targetDefaults?.[e2eWebServerTarget].options.port;
+  }
+
   const e2eProjectName = rootProject ? 'e2e' : `${appProjectName}-e2e`;
   const e2eProjectRoot = rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+  const e2eWebServerAddress = `http://localhost:${e2ePort}`;
 
   return {
     ...options,
@@ -58,5 +88,8 @@ export async function normalizeOptions(
     rootProject,
     e2eProjectName,
     e2eProjectRoot,
+    e2eWebServerAddress,
+    e2eWebServerTarget,
+    e2ePort,
   };
 }
diff --git a/packages/next/src/generators/application/lib/add-e2e.ts b/packages/next/src/generators/application/lib/add-e2e.ts
@@ -48,14 +48,12 @@ export async function addE2e(host: Tree, options: NormalizedSchema) {
       project: options.e2eProjectName,
       directory: 'src',
       skipFormat: true,
-      devServerTarget: `${options.projectName}:${
-        hasPlugin ? 'start' : 'serve'
-      }`,
-      baseUrl: `http://localhost:${hasPlugin ? '3000' : '4200'}`,
+      devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+      baseUrl: options.e2eWebServerAddress,
       jsx: true,
       webServerCommands: hasPlugin
         ? {
-            default: `nx run ${options.projectName}:start`,
+            default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
           }
         : undefined,
       ciWebServerCommand: hasPlugin
@@ -81,9 +79,9 @@ export async function addE2e(host: Tree, options: NormalizedSchema) {
       js: false,
       linter: options.linter,
       setParserOptionsProject: options.setParserOptionsProject,
-      webServerAddress: `http://127.0.0.1:${hasPlugin ? '3000' : '4200'}`,
+      webServerAddress: `http://127.0.0.1:${options.e2ePort}`,
       webServerCommand: `${getPackageManagerCommand().exec} nx ${
-        hasPlugin ? 'start' : 'serve'
+        options.e2eWebServerTarget
       } ${options.projectName}`,
       addPlugin: options.addPlugin,
     });

diff --git a/packages/next/src/generators/application/lib/add-linting.spec.ts b/packages/next/src/generators/application/lib/add-linting.spec.ts
@@ -21,6 +21,9 @@ describe('updateEslint', () => {
       unitTestRunner: 'jest',
       e2eProjectName: 'my-app-e2e',
       e2eProjectRoot: 'my-app-e2e',
+      e2ePort: 3000,
+      e2eWebServerTarget: 'start',
+      e2eWebServerAddress: 'http://localhost:4200',
       outputPath: 'dist/my-app',
       name: 'my-app',
       parsedTags: [],

diff --git a/packages/next/src/generators/application/lib/normalize-options.ts b/packages/next/src/generators/application/lib/normalize-options.ts
@@ -3,13 +3,17 @@ import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/pr
 import { Linter } from '@nx/eslint';
 import { assertValidStyle } from '@nx/react/src/utils/assertion';
 import { Schema } from '../schema';
+import { NextPluginOptions } from '../../../plugins/plugin';
 
 export interface NormalizedSchema extends Schema {
   projectName: string;
   appProjectRoot: string;
   outputPath: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  e2eWebServerAddress: string;
+  e2eWebServerTarget: string;
+  e2ePort: number;
   parsedTags: string[];
   fileName: string;
   styledModule: null | string;
@@ -42,8 +46,36 @@ export async function normalizeOptions(
 
   options.addPlugin ??= addPlugin;
 
+  let e2eWebServerTarget = options.addPlugin ? 'start' : 'serve';
+  if (options.addPlugin) {
+    if (nxJson.plugins) {
+      for (const plugin of nxJson.plugins) {
+        if (
+          typeof plugin === 'object' &&
+          plugin.plugin === '@nx/next/plugin' &&
+          (plugin.options as NextPluginOptions).startTargetName
+        ) {
+          e2eWebServerTarget = (plugin.options as NextPluginOptions)
+            .startTargetName;
+        }
+      }
+    }
+  }
+
+  let e2ePort = options.addPlugin ? 3000 : 4200;
+  if (
+    nxJson.targetDefaults?.[e2eWebServerTarget] &&
+    (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)
+  ) {
+    e2ePort =
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+      nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
+  }
+
   const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
   const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+  const e2eWebServerAddress = `http://localhost:${e2ePort}`;
 
   const name = names(options.name).fileName;
 
@@ -75,6 +107,9 @@ export async function normalizeOptions(
     appProjectRoot,
     e2eProjectName,
     e2eProjectRoot,
+    e2eWebServerAddress,
+    e2eWebServerTarget,
+    e2ePort,
     e2eTestRunner: options.e2eTestRunner || 'cypress',
     fileName,
     linter: options.linter || Linter.EsLint,