diff --git a/packages/angular/src/generators/component-test/component-test.ts b/packages/angular/src/generators/component-test/component-test.ts index b366caf9c0..fb8654a3f8 100644 --- a/packages/angular/src/generators/component-test/component-test.ts +++ b/packages/angular/src/generators/component-test/component-test.ts @@ -11,6 +11,7 @@ import { getArgsDefaultValue, getComponentProps, } from '../utils/storybook-ast/storybook-inputs'; +import { isZonelessApp } from '../../utils/zoneless'; import { ComponentTestSchema } from './schema'; export async function componentTestGenerator( @@ -18,7 +19,8 @@ export async function componentTestGenerator( options: ComponentTestSchema ) { ensurePackage('@nx/cypress', nxVersion); - const { root } = readProjectConfiguration(tree, options.project); + const projectConfig = readProjectConfiguration(tree, options.project); + const { root } = projectConfig; const componentDirPath = joinPathFragments(root, options.componentDir); const componentFilePath = joinPathFragments( componentDirPath, @@ -36,6 +38,7 @@ export async function componentTestGenerator( getArgsDefaultValue, false ); + const zoneless = isZonelessApp(projectConfig); generateFiles( tree, joinPathFragments(__dirname, 'files'), @@ -46,6 +49,7 @@ export async function componentTestGenerator( ? options.componentFileName.slice(2) : options.componentFileName, props: props.filter((p) => typeof p.defaultValue !== 'undefined'), + zoneless, tpl: '', } ); diff --git a/packages/angular/src/generators/component-test/files/__componentFileName__.cy.ts__tpl__ b/packages/angular/src/generators/component-test/files/__componentFileName__.cy.ts__tpl__ index 617757449c..f243c852d9 100644 --- a/packages/angular/src/generators/component-test/files/__componentFileName__.cy.ts__tpl__ +++ b/packages/angular/src/generators/component-test/files/__componentFileName__.cy.ts__tpl__ @@ -1,7 +1,7 @@ -import { TestBed } from '@angular/core/testing'; -import { <%= componentName %> } from './<%= componentFileName %>'; +<% if (!zoneless) { %>import { TestBed } from '@angular/core/testing'; +<% } %>import { <%= componentName %> } from './<%= componentFileName %>'; -describe(<%= componentName %>.name, () => { +describe(<%= componentName %>.name, () => {<% if (!zoneless) { %> beforeEach(() => { TestBed.overrideComponent(<%= componentName %>, { add: { @@ -10,7 +10,7 @@ describe(<%= componentName %>.name, () => { } }); }); - +<% } %> it('renders', () => { cy.mount(<%= componentName %><% if(props.length > 0) { %>, { componentProperties: {<% for (let prop of props) { %> diff --git a/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts index d50a75d00d..a84fa2aadc 100644 --- a/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts +++ b/packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts @@ -1,17 +1,20 @@ import type { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset'; import type { FoundTarget } from '@nx/cypress/src/utils/find-target-options'; import { + addDependenciesToPackageJson, ensurePackage, formatFiles, GeneratorCallback, joinPathFragments, ProjectConfiguration, readProjectConfiguration, + runTasksInSerial, Tree, updateProjectConfiguration, } from '@nx/devkit'; import { relative } from 'path'; import { nxVersion } from '../../utils/versions'; +import { isZonelessApp } from '../../utils/zoneless'; import { componentTestGenerator } from '../component-test/component-test'; import { getComponentsInfo, @@ -20,6 +23,7 @@ import { import { getProjectEntryPoints } from '../utils/storybook-ast/entry-point'; import { getModuleFilePaths } from '../utils/storybook-ast/module-info'; import { updateAppEditorTsConfigExcludedFiles } from '../utils/update-app-editor-tsconfig-excluded-files'; +import { versions } from '../utils/version-utils'; import { CypressComponentConfigSchema } from './schema'; /** @@ -41,6 +45,21 @@ export async function cypressComponentConfiguration( addExplicitTargets: true, }); + const tasks: GeneratorCallback[] = [installTask]; + + // Cypress component testing for Angular requires zone.js, even for zoneless apps + // Install it as a devDependency if the app is zoneless and zone.js is not already installed + const zoneless = isZonelessApp(projectConfig); + if (zoneless) { + const pkgVersions = versions(tree); + const zoneJsTask = addDependenciesToPackageJson( + tree, + {}, + { 'zone.js': pkgVersions.zoneJsVersion } + ); + tasks.push(zoneJsTask); + } + await configureCypressCT(tree, options); await addFiles(tree, projectConfig, options); @@ -52,7 +71,7 @@ export async function cypressComponentConfiguration( await formatFiles(tree); } - return installTask; + return runTasksInSerial(...tasks); } async function addFiles(