fix(testing): walk all project deps to check if CT project is used in buildTarget (#15252)

e2e/angular-extensions/src/cypress-component-tests.test.ts

@@ -8,6 +8,7 @@ import {
   uniq,
   updateFile,
   updateProjectConfig,
+  removeFile,
 } from '../../utils';
 import { names } from '@nrwl/devkit';
 
@@ -19,154 +20,15 @@ describe('Angular Cypress Component Tests', () => {
 
   beforeAll(async () => {
     projectName = newProject({ name: uniq('cy-ng') });
-    runCLI(`generate @nrwl/angular:app ${appName} --no-interactive`);
-    runCLI(
-      `generate @nrwl/angular:component fancy-component --project=${appName} --no-interactive`
-    );
-    runCLI(`generate @nrwl/angular:lib ${usedInAppLibName} --no-interactive`);
-    runCLI(
-      `generate @nrwl/angular:component btn --project=${usedInAppLibName} --inlineTemplate --inlineStyle --export --no-interactive`
-    );
-    runCLI(
-      `generate @nrwl/angular:component btn-standalone --project=${usedInAppLibName} --inlineTemplate --inlineStyle --export --standalone --no-interactive`
-    );
-    updateFile(
-      `libs/${usedInAppLibName}/src/lib/btn/btn.component.ts`,
-      `
-import { Component, Input } from '@angular/core';
 
-@Component({
+    createApp(appName);
-  selector: '${projectName}-btn',
-  template: '<button class="text-green-500">{{text}}</button>',
-  styles: []
-})
-export class BtnComponent {
-  @Input() text = 'something';
-}
-`
-    );
-    updateFile(
-      `libs/${usedInAppLibName}/src/lib/btn-standalone/btn-standalone.component.ts`,
-      `
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-@Component({
-  selector: '${projectName}-btn-standalone',
-  standalone: true,
-  imports: [CommonModule],
-  template: '<button class="text-green-500">standlone-{{text}}</button>',
-  styles: [],
-})
-export class BtnStandaloneComponent {
-  @Input() text = 'something';
-}
-`
-    );
-    // use lib in the app
-    createFile(
-      `apps/${appName}/src/app/app.component.html`,
-      `
-<${projectName}-btn></${projectName}-btn>
-<${projectName}-btn-standalone></${projectName}-btn-standalone>
-<${projectName}-nx-welcome></${projectName}-nx-welcome>
-`
-    );
-    const btnModuleName = names(usedInAppLibName).className;
-    updateFile(
-      `apps/${appName}/src/app/app.component.scss`,
-      `
-@use 'styleguide' as *;
 
-h1 {
+    createLib(projectName, appName, usedInAppLibName);
-  @include headline;
+    useLibInApp(projectName, appName, usedInAppLibName);
-}`
-    );
-    updateFile(
-      `apps/${appName}/src/app/app.module.ts`,
-      `
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import {${btnModuleName}Module} from "@${projectName}/${usedInAppLibName}";
 
-import { AppComponent } from './app.component';
+    createBuildableLib(projectName, buildableLibName);
-import { NxWelcomeComponent } from './nx-welcome.component';
 
-@NgModule({
+    useWorkspaceAssetsInApp(appName);
-  declarations: [AppComponent, NxWelcomeComponent],
-  imports: [BrowserModule, ${btnModuleName}Module],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-`
-    );
-
-    runCLI(
-      `generate @nrwl/angular:lib ${buildableLibName} --buildable --no-interactive`
-    );
-    runCLI(
-      `generate @nrwl/angular:component input --project=${buildableLibName} --inlineTemplate --inlineStyle --export --no-interactive`
-    );
-    runCLI(
-      `generate @nrwl/angular:component input-standalone --project=${buildableLibName} --inlineTemplate --inlineStyle --export --standalone --no-interactive`
-    );
-    updateFile(
-      `libs/${buildableLibName}/src/lib/input/input.component.ts`,
-      `
-import {Component, Input} from '@angular/core';
-
-@Component({
-  selector: '${projectName}-input',
-  template: \`<label class="text-green-500">Email: <input class="border-blue-500" type="email" [readOnly]="readOnly"></label>\`,
-    styles  : []
-  })
-  export class InputComponent{
-    @Input() readOnly = false;
-  }
-  `
-    );
-    updateFile(
-      `libs/${buildableLibName}/src/lib/input-standalone/input-standalone.component.ts`,
-      `
-import {Component, Input} from '@angular/core';
-import {CommonModule} from '@angular/common';
-@Component({
-  selector: '${projectName}-input-standalone',
-  standalone: true,
-  imports: [CommonModule],
-  template: \`<label class="text-green-500">Email: <input class="border-blue-500" type="email" [readOnly]="readOnly"></label>\`,
-    styles  : []
-  })
-  export class InputStandaloneComponent{
-    @Input() readOnly = false;
-  }
-  `
-    );
-
-    // make sure assets from the workspace root work.
-    createFile('libs/assets/data.json', JSON.stringify({ data: 'data' }));
-    createFile(
-      'assets/styles/styleguide.scss',
-      `
-    @mixin headline {
-    font-weight: bold;
-    color: darkkhaki;
-    background: lightcoral;
-    font-weight: 24px;
-  }
-  `
-    );
-    updateProjectConfig(appName, (config) => {
-      config.targets['build'].options.stylePreprocessorOptions = {
-        includePaths: ['assets/styles'],
-      };
-      config.targets['build'].options.assets.push({
-        glob: '**/*',
-        input: 'libs/assets',
-        output: 'assets',
-      });
-      return config;
-    });
   });
 
   afterAll(() => cleanupProject());
@@ -200,8 +62,225 @@ import {CommonModule} from '@angular/common';
         `generate @nrwl/angular:cypress-component-configuration --project=${buildableLibName} --generate-tests --no-interactive`
       );
     }).toThrow();
-    createFile(
+
+    updateTestToAssertTailwindIsNotApplied(buildableLibName);
+
+    runCLI(
+      `generate @nrwl/angular:cypress-component-configuration --project=${buildableLibName} --generate-tests --build-target=${appName}:build --no-interactive`
+    );
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+    // add tailwind
+    runCLI(
+      `generate @nrwl/angular:setup-tailwind --project=${buildableLibName}`
+    );
+    updateFile(
       `libs/${buildableLibName}/src/lib/input/input.component.cy.ts`,
+      (content) => {
+        // text-green-500 should now apply
+        return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
+      }
+    );
+    updateFile(
+      `libs/${buildableLibName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
+      (content) => {
+        // text-green-500 should now apply
+        return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
+      }
+    );
+
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+      checkFilesDoNotExist(`tmp/libs/${buildableLibName}/ct-styles.css`);
+    }
+  }, 300_000);
+
+  it('should test lib with implicit dep on buildTarget', () => {
+    // creates graph like buildableLib -> lib -> app
+    // updates the apps styles and they should apply to the buildableLib
+    // even though app is not directly connected to buildableLib
+    useBuildableLibInLib(projectName, buildableLibName, usedInAppLibName);
+
+    updateBuilableLibTestsToAssertAppStyles(appName, buildableLibName);
+
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
+});
+
+function createApp(appName: string) {
+  runCLI(`generate @nrwl/angular:app ${appName} --no-interactive`);
+  runCLI(
+    `generate @nrwl/angular:component fancy-component --project=${appName} --no-interactive`
+  );
+}
+
+function createLib(projectName: string, appName: string, libName: string) {
+  runCLI(`generate @nrwl/angular:lib ${libName} --no-interactive`);
+  runCLI(
+    `generate @nrwl/angular:component btn --project=${libName} --inlineTemplate --inlineStyle --export --no-interactive`
+  );
+  runCLI(
+    `generate @nrwl/angular:component btn-standalone --project=${libName} --inlineTemplate --inlineStyle --export --standalone --no-interactive`
+  );
+  updateFile(
+    `libs/${libName}/src/lib/btn/btn.component.ts`,
+    `
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: '${projectName}-btn',
+  template: '<button class="text-green-500">{{text}}</button>',
+  styles: []
+})
+export class BtnComponent {
+  @Input() text = 'something';
+}
+`
+  );
+  updateFile(
+    `libs/${libName}/src/lib/btn-standalone/btn-standalone.component.ts`,
+    `
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+@Component({
+  selector: '${projectName}-btn-standalone',
+  standalone: true,
+  imports: [CommonModule],
+  template: '<button class="text-green-500">standlone-{{text}}</button>',
+  styles: [],
+})
+export class BtnStandaloneComponent {
+  @Input() text = 'something';
+}
+`
+  );
+}
+
+function createBuildableLib(projectName: string, libName: string) {
+  // create lib
+  runCLI(`generate @nrwl/angular:lib ${libName} --buildable --no-interactive`);
+  // create cmp for lib
+  runCLI(
+    `generate @nrwl/angular:component input --project=${libName} --inlineTemplate --inlineStyle --export --no-interactive`
+  );
+  // create standlone cmp for lib
+  runCLI(
+    `generate @nrwl/angular:component input-standalone --project=${libName} --inlineTemplate --inlineStyle --export --standalone --no-interactive`
+  );
+  // update cmp implmentation to use tailwind clasasserting in tests
+  updateFile(
+    `libs/${libName}/src/lib/input/input.component.ts`,
+    `
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: '${projectName}-input',
+  template: \`<label class="text-green-500">Email: <input class="border-blue-500" type="email" [readOnly]="readOnly"></label>\`,
+    styles  : []
+  })
+  export class InputComponent{
+    @Input() readOnly = false;
+  }
+  `
+  );
+  updateFile(
+    `libs/${libName}/src/lib/input-standalone/input-standalone.component.ts`,
+    `
+import {Component, Input} from '@angular/core';
+import {CommonModule} from '@angular/common';
+@Component({
+  selector: '${projectName}-input-standalone',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`<label class="text-green-500">Email: <input class="border-blue-500" type="email" [readOnly]="readOnly"></label>\`,
+    styles  : []
+  })
+  export class InputStandaloneComponent{
+    @Input() readOnly = false;
+  }
+  `
+  );
+}
+
+function useLibInApp(projectName: string, appName: string, libName: string) {
+  createFile(
+    `apps/${appName}/src/app/app.component.html`,
+    `
+<${projectName}-btn></${projectName}-btn>
+<${projectName}-btn-standalone></${projectName}-btn-standalone>
+<${projectName}-nx-welcome></${projectName}-nx-welcome>
+`
+  );
+  const btnModuleName = names(libName).className;
+  updateFile(
+    `apps/${appName}/src/app/app.component.scss`,
+    `
+@use 'styleguide' as *;
+
+h1 {
+  @include headline;
+}`
+  );
+  updateFile(
+    `apps/${appName}/src/app/app.module.ts`,
+    `
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import {${btnModuleName}Module} from "@${projectName}/${libName}";
+
+import { AppComponent } from './app.component';
+import { NxWelcomeComponent } from './nx-welcome.component';
+
+@NgModule({
+  declarations: [AppComponent, NxWelcomeComponent],
+  imports: [BrowserModule, ${btnModuleName}Module],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+`
+  );
+}
+
+function useWorkspaceAssetsInApp(appName: string) {
+  // make sure assets from the workspace root work.
+  createFile('libs/assets/data.json', JSON.stringify({ data: 'data' }));
+  createFile(
+    'assets/styles/styleguide.scss',
+    `
+    @mixin headline {
+    font-weight: bold;
+    color: darkkhaki;
+    background: lightcoral;
+    font-weight: 24px;
+  }
+  `
+  );
+  updateProjectConfig(appName, (config) => {
+    config.targets['build'].options.stylePreprocessorOptions = {
+      includePaths: ['assets/styles'],
+    };
+    config.targets['build'].options.assets.push({
+      glob: '**/*',
+      input: 'libs/assets',
+      output: 'assets',
+    });
+    return config;
+  });
+}
+
+function updateTestToAssertTailwindIsNotApplied(libName: string) {
+  createFile(
+    `libs/${libName}/src/lib/input/input.component.cy.ts`,
     `
 import { MountConfig } from 'cypress/angular';
 import { InputComponent } from './input.component';
@@ -232,7 +311,7 @@ describe(InputComponent.name, () => {
   );
 
   createFile(
-      `libs/${buildableLibName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
+    `libs/${libName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
     `
 import { MountConfig } from 'cypress/angular';
 import { InputStandaloneComponent } from './input-standalone.component';
@@ -261,38 +340,49 @@ describe(InputStandaloneComponent.name, () => {
 });
 `
   );
-
+}
-    runCLI(
+function useBuildableLibInLib(
-      `generate @nrwl/angular:cypress-component-configuration --project=${buildableLibName} --generate-tests --build-target=${appName}:build --no-interactive`
+  projectName: string,
-    );
+  buildableLibName: string,
-    if (runCypressTests()) {
+  libName: string
-      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+) {
-        'All specs passed!'
+  const buildLibNames = names(buildableLibName);
-      );
+  // use the buildable lib in lib so now buildableLib has an indirect dep on app
-    }
-
-    // add tailwind
-    runCLI(
-      `generate @nrwl/angular:setup-tailwind --project=${buildableLibName}`
-    );
   updateFile(
-      `libs/${buildableLibName}/src/lib/input/input.component.cy.ts`,
+    `libs/${libName}/src/lib/btn-standalone/btn-standalone.component.ts`,
-      (content) => {
+    `
-        // text-green-500 should now apply
+import { Component, Input } from '@angular/core';
-        return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
+import { CommonModule } from '@angular/common';
-      }
+import { InputStandaloneComponent } from '@${projectName}/${buildLibNames.fileName}';
+@Component({
+  selector: '${projectName}-btn-standalone',
+  standalone: true,
+  imports: [CommonModule, InputStandaloneComponent],
+  template: '<button class="text-green-500">standlone-{{text}}</button>${projectName} <${projectName}-input-standalone></${projectName}-input-standalone>',
+  styles: [],
+})
+export class BtnStandaloneComponent {
+  @Input() text = 'something';
+}
+`
   );
+}
+
+function updateBuilableLibTestsToAssertAppStyles(
+  appName: string,
+  buildableLibName: string
+) {
+  updateFile(
+    `apps/${appName}/src/styles.css`,
+    `label {color: pink !important;}`
+  );
+
+  removeFile(`libs/${buildableLibName}/src/lib/input/input.component.cy.ts`);
   updateFile(
     `libs/${buildableLibName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
     (content) => {
-        // text-green-500 should now apply
+      // app styles should now apply
-        return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
+      return content.replace('rgb(34, 197, 94)', 'rgb(255, 192, 203)');
     }
   );
-
+}
-    expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
-      'All specs passed!'
-    );
-    checkFilesDoNotExist(`tmp/libs/${buildableLibName}/ct-styles.css`);
-  }, 300_000);
-});

e2e/utils/index.ts

@@ -535,6 +535,10 @@ export function runCypressTests() {
   if (process.env.NX_E2E_RUN_CYPRESS === 'true') {
     ensureCypressInstallation();
     return true;
+  } else {
+    console.warn(
+      'Not running Cypress because NX_E2E_RUN_CYPRESS is not set to true.'
+    );
   }
   return false;
 }

packages/angular/plugins/component-testing.ts

@@ -22,7 +22,7 @@ import {
   workspaceRoot,
 } from '@nrwl/devkit';
 import { existsSync, lstatSync, mkdirSync, writeFileSync } from 'fs';
-import { dirname, join, relative } from 'path';
+import { dirname, join, relative, sep } from 'path';
 import type { BrowserBuilderSchema } from '../src/builders/webpack-browser/webpack-browser.impl';
 
 /**
@@ -168,13 +168,22 @@ function normalizeBuildTargetOptions(
   );
   const buildOptions = withSchemaDefaults(options);
 
+  // polyfill entries might be local files or files that are resolved from node_modules
+  // like zone.js.
+  // prevents error from webpack saying can't find <offset>/zone.js.
+  const handlePolyfillPath = (polyfill: string) => {
+    const maybeFullPath = join(workspaceRoot, polyfill.split('/').join(sep));
+    if (existsSync(maybeFullPath)) {
+      return joinPathFragments(offset, polyfill);
+    }
+    return polyfill;
+  };
   // paths need to be unix paths for angular devkit
   buildOptions.polyfills =
     Array.isArray(buildOptions.polyfills) && buildOptions.polyfills.length > 0
-      ? (buildOptions.polyfills as string[]).map((p) =>
+      ? (buildOptions.polyfills as string[]).map((p) => handlePolyfillPath(p))
-          joinPathFragments(offset, p)
+      : handlePolyfillPath(buildOptions.polyfills as string);
-        )
+
-      : joinPathFragments(offset, buildOptions.polyfills as string);
   buildOptions.main = joinPathFragments(offset, buildOptions.main);
   buildOptions.index =
     typeof buildOptions.index === 'string'
@@ -197,6 +206,7 @@ function normalizeBuildTargetOptions(
   // then we don't want to have the assets/scripts/styles be included to
   // prevent inclusion of unintended stuff like tailwind
   if (
+    buildContext.projectName === ctContext.projectName ||
     isCtProjectUsingBuildProject(
       ctContext.projectGraph,
       buildContext.projectName,

packages/cypress/src/utils/ct-helpers.ts

@@ -39,20 +39,36 @@ export function getTempTailwindPath(context: ExecutorContext) {
 }
 
 /**
- * also returns true if the ct project and build project are the same.
+ * Checks if the childProjectName is a decendent of the parentProjectName
- * i.e. component testing inside an app.
+ * in the project graph
- */
+ **/
 export function isCtProjectUsingBuildProject(
   graph: ProjectGraph,
   parentProjectName: string,
   childProjectName: string
-) {
+): boolean {
-  return (
+  const isProjectDirectDep = graph.dependencies[parentProjectName].some(
-    parentProjectName === childProjectName ||
-    graph.dependencies[parentProjectName].some(
     (p) => p.target === childProjectName
-    )
   );
+  if (isProjectDirectDep) {
+    return true;
+  }
+  const maybeIntermediateProjects = graph.dependencies[
+    parentProjectName
+  ].filter((p) => !graph.externalNodes[p.target]);
+
+  for (const maybeIntermediateProject of maybeIntermediateProjects) {
+    if (
+      isCtProjectUsingBuildProject(
+        graph,
+        maybeIntermediateProject.target,
+        childProjectName
+      )
+    ) {
+      return true;
+    }
+  }
+  return false;
 }
 
 export function getProjectConfigByPath(