fix(angular): do not force explicit targets for separate e2e projects (…

…#21865)
nrwl · Feb 20, 2024 · ca3965f · ca3965f
1 parent fe17fc3
commit ca3965f
Show file tree

Hide file tree

Showing 26 changed files with 83 additions and 203 deletions.
diff --git a/e2e/angular-module-federation/src/module-federation.test.ts b/e2e/angular-module-federation/src/module-federation.test.ts
@@ -4,6 +4,7 @@ import {
   cleanupProject,
   killProcessAndPorts,
   newProject,
+  readFile,
   readJson,
   runCLI,
   runCommandUntil,
@@ -376,10 +377,22 @@ describe('Angular Module Federation', () => {
     const buildRemoteOutput = runCLI(`build ${remote}`);
     expect(buildRemoteOutput).toContain('Successfully ran target build');
 
+    // increase default timeout for the Cypress web server, MF apps can take longer to start
+    const cypressConfig = readFile(`${host}-e2e/cypress.config.ts`);
+    updateFile(
+      `${host}-e2e/cypress.config.ts`,
+      cypressConfig.replace(
+        `nxE2EPreset(__filename, {`,
+        `nxE2EPreset(__filename, {
+          webServerConfig: {
+            timeout: 30000,
+          },`
+      )
+    );
+
     if (runE2ETests('cypress')) {
-      const e2eProcess = await runCommandUntil(
-        `e2e ${host}-e2e --no-watch`,
-        (output) => output.includes('All specs passed!')
+      const e2eProcess = await runCommandUntil(`e2e ${host}-e2e`, (output) =>
+        output.includes('All specs passed!')
       );
       await killProcessAndPorts(e2eProcess.pid, hostPort, hostPort + 1);
     }
@@ -468,10 +481,22 @@ describe('Angular Module Federation', () => {
     const buildRemoteOutput = runCLI(`build ${remote}`);
     expect(buildRemoteOutput).toContain('Successfully ran target build');
 
+    // increase default timeout for the Cypress web server, MF apps can take longer to start
+    const cypressConfig = readFile(`${host}-e2e/cypress.config.ts`);
+    updateFile(
+      `${host}-e2e/cypress.config.ts`,
+      cypressConfig.replace(
+        `nxE2EPreset(__filename, {`,
+        `nxE2EPreset(__filename, {
+          webServerConfig: {
+            timeout: 30000,
+          },`
+      )
+    );
+
     if (runE2ETests('cypress')) {
-      const e2eProcess = await runCommandUntil(
-        `e2e ${host}-e2e --no-watch`,
-        (output) => output.includes('All specs passed!')
+      const e2eProcess = await runCommandUntil(`e2e ${host}-e2e`, (output) =>
+        output.includes('All specs passed!')
       );
       await killProcessAndPorts(e2eProcess.pid, hostPort, hostPort + 1);
     }

diff --git a/packages/angular/src/generators/add-linting/add-linting.spec.ts b/packages/angular/src/generators/add-linting/add-linting.spec.ts
@@ -1,8 +1,8 @@
-import { ProjectConfiguration, readNxJson, Tree } from '@nx/devkit';
 import {
+  ProjectConfiguration,
+  Tree,
   addProjectConfiguration,
   readJson,
-  readProjectConfiguration,
 } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import * as linter from '@nx/eslint';
@@ -32,7 +32,6 @@ describe('addLinting generator', () => {
       projectName: appProjectName,
       projectRoot: appProjectRoot,
       skipFormat: true,
-      addPlugin: true,
     });
 
     expect(linter.lintProjectGenerator).toHaveBeenCalled();
@@ -44,7 +43,6 @@ describe('addLinting generator', () => {
       projectName: appProjectName,
       projectRoot: appProjectRoot,
       skipFormat: true,
-      addPlugin: true,
     });
 
     const { devDependencies } = readJson(tree, 'package.json');
@@ -61,31 +59,9 @@ describe('addLinting generator', () => {
       projectName: appProjectName,
       projectRoot: appProjectRoot,
       skipFormat: true,
-      addPlugin: true,
     });
 
     const eslintConfig = readJson(tree, `${appProjectRoot}/.eslintrc.json`);
     expect(eslintConfig).toMatchSnapshot();
   });
-
-  it('should add @nx/eslint/plugin', async () => {
-    await addLintingGenerator(tree, {
-      prefix: 'myOrg',
-      projectName: appProjectName,
-      projectRoot: appProjectRoot,
-      skipFormat: true,
-      addPlugin: true,
-    });
-
-    const nxJson = readNxJson(tree);
-    expect(
-      nxJson.plugins.find((p) => {
-        if (typeof p === 'string') {
-          return p === '@nx/eslint/plugin';
-        } else {
-          return p.plugin === '@nx/eslint/plugin';
-        }
-      })
-    ).toBeTruthy();
-  });
 });
diff --git a/packages/angular/src/generators/add-linting/add-linting.ts b/packages/angular/src/generators/add-linting/add-linting.ts
@@ -36,7 +36,7 @@ export async function addLintingGenerator(
     setParserOptionsProject: options.setParserOptionsProject,
     skipFormat: true,
     rootProject: rootProject,
-    addPlugin: options.addPlugin,
+    addPlugin: false,
     addExplicitTargets: true,
   });
   tasks.push(lintTask);

diff --git a/packages/angular/src/generators/add-linting/schema.d.ts b/packages/angular/src/generators/add-linting/schema.d.ts
@@ -6,6 +6,4 @@ export interface AddLintingGeneratorSchema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   unitTestRunner?: string;
-  addPlugin?: boolean;
-  addExplicitTargets?: boolean;
 }
diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -314,27 +314,7 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
   "root": "apps/my-dir/my-app-e2e",
   "sourceRoot": "apps/my-dir/my-app-e2e/src",
   "tags": [],
-  "targets": {
-    "e2e": {
-      "configurations": {
-        "ci": {
-          "devServerTarget": "my-dir-my-app:serve-static",
-        },
-        "production": {
-          "devServerTarget": "my-dir-my-app:serve:production",
-        },
-      },
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "apps/my-dir/my-app-e2e/cypress.config.ts",
-        "devServerTarget": "my-dir-my-app:serve:development",
-        "testingType": "e2e",
-      },
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-    },
-  },
+  "targets": {},
 }
 `;
 
@@ -533,27 +513,7 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
   "root": "apps/my-app-e2e",
   "sourceRoot": "apps/my-app-e2e/src",
   "tags": [],
-  "targets": {
-    "e2e": {
-      "configurations": {
-        "ci": {
-          "devServerTarget": "my-app:serve-static",
-        },
-        "production": {
-          "devServerTarget": "my-app:serve:production",
-        },
-      },
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "apps/my-app-e2e/cypress.config.ts",
-        "devServerTarget": "my-app:serve:development",
-        "testingType": "e2e",
-      },
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-    },
-  },
+  "targets": {},
 }
 `;
 
@@ -1047,27 +1007,7 @@ exports[`app nested should create project configs 2`] = `
   "root": "my-dir/my-app-e2e",
   "sourceRoot": "my-dir/my-app-e2e/src",
   "tags": [],
-  "targets": {
-    "e2e": {
-      "configurations": {
-        "ci": {
-          "devServerTarget": "my-app:serve-static",
-        },
-        "production": {
-          "devServerTarget": "my-app:serve:production",
-        },
-      },
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "my-dir/my-app-e2e/cypress.config.ts",
-        "devServerTarget": "my-app:serve:development",
-        "testingType": "e2e",
-      },
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-    },
-  },
+  "targets": {},
 }
 `;
 
@@ -1179,27 +1119,7 @@ exports[`app not nested should create project configs 2`] = `
   "root": "my-app-e2e",
   "sourceRoot": "my-app-e2e/src",
   "tags": [],
-  "targets": {
-    "e2e": {
-      "configurations": {
-        "ci": {
-          "devServerTarget": "my-app:serve-static",
-        },
-        "production": {
-          "devServerTarget": "my-app:serve:production",
-        },
-      },
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "my-app-e2e/cypress.config.ts",
-        "devServerTarget": "my-app:serve:development",
-        "testingType": "e2e",
-      },
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-    },
-  },
+  "targets": {},
 }
 `;
 

diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts
@@ -24,8 +24,7 @@ import {
 import { generateTestApplication } from '../utils/testing';
 import type { Schema } from './schema';
 
-// need to mock cypress otherwise it'll use the nx installed version from package.json
-//  which is v9 while we are testing for the new v10 version
+// need to mock cypress otherwise it'll use installed version in this repo's package.json
 jest.mock('@nx/cypress/src/utils/cypress-version');
 jest.mock('enquirer');
 jest.mock('@nx/devkit', () => {
@@ -43,7 +42,7 @@ describe('app', () => {
   > = installedCypressVersion as never;
 
   beforeEach(() => {
-    mockedInstalledCypressVersion.mockReturnValue(10);
+    mockedInstalledCypressVersion.mockReturnValue(null);
     // @ts-ignore
     enquirer.prompt = jest
       .fn()
@@ -530,20 +529,48 @@ describe('app', () => {
 
   describe('--linter', () => {
     describe('eslint', () => {
-      it('should add lint target', async () => {
+      it('should add lint target to application', async () => {
         await generateApp(appTree, 'my-app', { linter: Linter.EsLint });
         expect(readProjectConfiguration(appTree, 'my-app').targets.lint)
           .toMatchInlineSnapshot(`
           {
             "executor": "@nx/eslint:lint",
           }
         `);
-        expect(readProjectConfiguration(appTree, 'my-app-e2e').targets.lint)
-          .toMatchInlineSnapshot(`
-          {
-            "executor": "@nx/eslint:lint",
-          }
+      });
+
+      it('should add eslint plugin and no lint target to e2e project', async () => {
+        await generateApp(appTree, 'my-app', { linter: Linter.EsLint });
+
+        expect(readNxJson(appTree).plugins).toMatchInlineSnapshot(`
+          [
+            {
+              "options": {
+                "componentTestingTargetName": "component-test",
+                "targetName": "e2e",
+              },
+              "plugin": "@nx/cypress/plugin",
+            },
+            {
+              "options": {
+                "targetName": "lint",
+              },
+              "plugin": "@nx/eslint/plugin",
+            },
+          ]
         `);
+        expect(
+          readProjectConfiguration(appTree, 'my-app-e2e').targets.lint
+        ).toBeUndefined();
+      });
+
+      it('should not add eslint plugin when no e2e test runner', async () => {
+        await generateApp(appTree, 'my-app', {
+          linter: Linter.EsLint,
+          e2eTestRunner: E2eTestRunner.None,
+        });
+
+        expect(readNxJson(appTree).plugins).toBeUndefined();
       });
 
       it('should add valid eslint JSON configuration which extends from Nx presets', async () => {
@@ -1262,7 +1289,6 @@ async function generateApp(
     unitTestRunner: UnitTestRunner.Jest,
     linter: Linter.EsLint,
     standalone: false,
-    addPlugin: false,
     ...options,
   });
 }
diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts
@@ -34,7 +34,6 @@ export async function applicationGenerator(
 ): Promise<GeneratorCallback> {
   return await applicationGeneratorInternal(tree, {
     projectNameAndRootFormat: 'derived',
-    addPlugin: false,
     ...schema,
   });
 }

diff --git a/packages/angular/src/generators/application/lib/add-e2e.ts b/packages/angular/src/generators/application/lib/add-e2e.ts
@@ -14,6 +14,9 @@ import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
 import type { NormalizedSchema } from './normalized-schema';
 
 export async function addE2e(tree: Tree, options: NormalizedSchema) {
+  // since e2e are separate projects, default to adding plugins
+  const addPlugin = process.env.NX_ADD_PLUGINS !== 'false';
+
   if (options.e2eTestRunner === 'cypress') {
     // TODO: This can call `@nx/web:static-config` generator when ready
     addFileServerTarget(tree, options, 'serve-static');
@@ -34,8 +37,7 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       devServerTarget: `${options.name}:serve:development`,
       baseUrl: 'http://localhost:4200',
       rootProject: options.rootProject,
-      addPlugin: false,
-      addExplicitTargets: false, // since e2e is a separate project, use inferred targets
+      addPlugin,
     });
   } else if (options.e2eTestRunner === 'playwright') {
     const { configurationGenerator: playwrightConfigurationGenerator } =
@@ -63,7 +65,7 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       }`,
       webServerAddress: `http://localhost:${options.port ?? 4200}`,
       rootProject: options.rootProject,
-      addPlugin: false,
+      addPlugin,
     });
   }
 }

diff --git a/packages/angular/src/generators/application/lib/add-linting.ts b/packages/angular/src/generators/application/lib/add-linting.ts
@@ -16,6 +16,5 @@ export async function addLinting(host: Tree, options: NormalizedSchema) {
     skipPackageJson: options.skipPackageJson,
     unitTestRunner: options.unitTestRunner,
     skipFormat: true,
-    addPlugin: false,
   });
 }
diff --git a/packages/angular/src/generators/application/lib/add-unit-test-runner.ts b/packages/angular/src/generators/application/lib/add-unit-test-runner.ts
@@ -10,7 +10,6 @@ export async function addUnitTestRunner(host: Tree, options: NormalizedSchema) {
       projectRoot: options.appProjectRoot,
       skipPackageJson: options.skipPackageJson,
       strict: options.strict,
-      addPlugin: false,
     });
   }
 }
diff --git a/packages/angular/src/generators/application/lib/normalize-options.ts b/packages/angular/src/generators/application/lib/normalize-options.ts
@@ -26,7 +26,6 @@ export async function normalizeOptions(
   });
   options.rootProject = appProjectRoot === '.';
   options.projectNameAndRootFormat = projectNameAndRootFormat;
-  options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
 
   const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
   const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;

diff --git a/packages/angular/src/generators/application/schema.d.ts b/packages/angular/src/generators/application/schema.d.ts
@@ -31,5 +31,4 @@ export interface Schema {
   minimal?: boolean;
   bundler?: 'webpack' | 'esbuild';
   ssr?: boolean;
-  addPlugin?: boolean;
 }