feat: Add Angular CT Schematic

npm/cypress-schematic/README.md

@@ -31,7 +31,7 @@
 
 ## Requirements
 
-- Angular 13+
+- Angular 14+
 
 ## Usage ⏯
 
@@ -49,6 +49,8 @@ To install the schematic via cli arguments (installs both e2e and component test
 ng add @cypress/schematic --e2e --component
 ```
 
+The installation will add this schematic to the [default schematic collections](https://angular.io/guide/workspace-config#angular-cli-configuration-options). This allows you to execute the CLI commands without prefixing them with the package name.
+
 To run Cypress in `open` mode within your project: 
 
 ```shell script
@@ -78,37 +80,43 @@ ng run {project-name}:ct
 To generate a new e2e spec file:
 
 ```shell script
-ng generate @cypress/schematic:spec 
+ng generate spec 
 ```
 
 or (without cli prompt)
 
 ```shell script
-ng generate @cypress/schematic:spec {name}
+ng generate spec {name}
 ```
 
 To generate a new component spec file:
 
 ```shell script
-ng generate @cypress/schematic:spec --component
+ng generate spec --component
 ```
 
 or (without cli prompt)
 
 ```shell script
-ng generate @cypress/schematic:spec {component name} --component
+ng generate spec {component name} --component
 ```
 
 To generate a new component spec file in a specific folder:
 
 ```shell script
-ng generate @cypress/schematic:spec {component name} --component --path {path relative to project root}
+ng generate spec {component name} --component --path {path relative to project root}
 ```
 
 To generate new component spec files alongside all component files in a project:
 
 ```shell script
-ng generate @cypress/schematic:specs-ct
+ng generate specs-ct
+```
+
+To generate a new, generic component definition with a component spec file in the given or default project. This wraps the [Angular CLI Component Generator](https://angular.io/cli/generate#component) and supports the same arguments.
+
+```shell script
+ng generate component {component name}
 ```
 
 ## Builder Options 🛠

npm/cypress-schematic/package.json

@@ -10,16 +10,16 @@
     "lint": "eslint --ext .ts,.json, ."
   },
   "dependencies": {
-    "@angular-devkit/architect": "^0.1402.1",
-    "@angular-devkit/core": "^14.2.1",
-    "@angular-devkit/schematics": "^14.2.1",
-    "@schematics/angular": "^14.2.1",
     "jsonc-parser": "^3.0.0",
     "rxjs": "~6.6.0"
   },
   "devDependencies": {
+    "@angular-devkit/architect": "^0.1402.1",
+    "@angular-devkit/core": "^14.2.1",
+    "@angular-devkit/schematics": "^14.2.1",
     "@angular-devkit/schematics-cli": "^14.2.1",
     "@angular/cli": "^14.2.1",
+    "@schematics/angular": "^14.2.1",
     "@types/chai-enzyme": "0.6.7",
     "@types/mocha": "8.0.3",
     "@types/node": "^18.0.6",
@@ -28,8 +28,8 @@
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "@angular/cli": ">=12",
-    "@angular/core": ">=12"
+    "@angular/cli": ">=14",
+    "@angular/core": ">=14"
   },
   "license": "MIT",
   "repository": {

npm/cypress-schematic/src/ct.spec.ts

@@ -35,7 +35,7 @@ const copyAngularMount = async (projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-13', 'angular-14']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-14', 'angular-15']
 
 describe('ng add @cypress/schematic / e2e and ct', function () {
   this.timeout(1000 * 60 * 5)
@@ -49,5 +49,15 @@ describe('ng add @cypress/schematic / e2e and ct', function () {
       await copyAngularMount(projectPath)
       await runCommandInProject('yarn ng run angular:ct --watch false --spec src/app/app.component.cy.ts', projectPath)
     })
+
+    it('should generate component alongside component spec', async () => {
+      const projectPath = await scaffoldAngularProject(project)
+
+      await runCommandInProject(`yarn add @cypress/schematic@file:${cypressSchematicPackagePath}`, projectPath)
+      await runCommandInProject('yarn ng add @cypress/schematic --e2e --component', projectPath)
+      await copyAngularMount(projectPath)
+      await runCommandInProject('yarn ng generate c foo', projectPath)
+      await runCommandInProject('yarn ng run angular:ct --watch false --spec src/app/foo/foo.component.cy.ts', projectPath)
+    })
   }
 })

npm/cypress-schematic/src/e2e.spec.ts

@@ -24,7 +24,7 @@ const runCommandInProject = (command: string, projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-13', 'angular-14']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-14', 'angular-15']
 
 describe('ng add @cypress/schematic / only e2e', function () {
   this.timeout(1000 * 60 * 5)

npm/cypress-schematic/src/schematics/collection.json

@@ -15,6 +15,14 @@
       "description": "Create spec files for all Angular components in a project",
       "factory": "./ng-generate/cypress-ct-tests/index",
       "schema": "./ng-generate/cypress-ct-tests/schema.json"
+    },
+    "component": {
+      "description": "Creates a new, generic component definition in the given or default project.",
+      "aliases": [
+        "c"
+      ],
+      "factory": "./ng-generate/component/index",
+      "schema": "./ng-generate/component/schema.json"
     }
   }
 }

npm/cypress-schematic/src/schematics/ng-add/index.spec.ts

@@ -3,6 +3,7 @@
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
 import { join } from 'path'
 import { expect } from 'chai'
+import { JsonObject } from '@angular-devkit/core'
 
 describe('@cypress/schematic: ng-add', () => {
   const schematicRunner = new SchematicTestRunner(
@@ -16,6 +17,7 @@ describe('@cypress/schematic: ng-add', () => {
     name: 'workspace',
     newProjectRoot: 'projects',
     version: '6.0.0',
+    packageManager: 'yarn',
   }
 
   const appOptions = {
@@ -26,6 +28,10 @@ describe('@cypress/schematic: ng-add', () => {
     skipPackageJson: false,
   }
 
+  const readAngularJson = (tree: UnitTestTree) => {
+    return tree.readJson('/angular.json') as JsonObject
+  }
+
   beforeEach(async () => {
     appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions).toPromise()
     appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
@@ -58,4 +64,35 @@ describe('@cypress/schematic: ng-add', () => {
       expect(files).to.contain('/projects/sandbox/cypress/fixtures/example.json')
     })
   })
+
+  it('should add @cypress/schematic to the schemaCollections array', async () => {
+    const tree = await schematicRunner.runSchematicAsync('ng-add', { 'component': true }, appTree).toPromise()
+    const angularJson = readAngularJson(tree)
+    const cliOptions = angularJson.cli as JsonObject
+
+    expect(cliOptions).to.eql({
+      packageManager: 'yarn',
+      schematicCollections: ['@cypress/schematic', '@schematics/angular'],
+    })
+  })
+
+  it('should not overwrite existing schemaCollections array', async () => {
+    let angularJson = readAngularJson(appTree)
+
+    appTree.overwrite('./angular.json', JSON.stringify({
+      ...angularJson,
+      cli: {
+        schematicCollections: ['@any/schematic'],
+      },
+    }))
+
+    const tree = await schematicRunner.runSchematicAsync('ng-add', { 'component': true }, appTree).toPromise()
+
+    angularJson = readAngularJson(tree)
+    const cliOptions = angularJson.cli as JsonObject
+
+    expect(cliOptions).to.eql({
+      schematicCollections: ['@cypress/schematic', '@any/schematic', '@schematics/angular'],
+    })
+  })
 })

npm/cypress-schematic/src/schematics/ng-add/index.ts

@@ -45,6 +45,7 @@ export default function (_options: any): Rule {
       addCtSpecs(_options),
       addCypressTestScriptsToPackageJson(),
       modifyAngularJson(_options),
+      addDefaultSchematic(),
     ])(tree, _context)
   }
 }
@@ -306,6 +307,33 @@ function modifyAngularJson (options: any): Rule {
   }
 }
 
+function addDefaultSchematic (): Rule {
+  return (tree: Tree, _: SchematicContext) => {
+    if (tree.exists('./angular.json')) {
+      const angularJsonVal = getAngularJsonValue(tree)
+      const angularSchematic = '@schematics/angular'
+      const cli = {
+        ...angularJsonVal.cli,
+        schematicCollections: ['@cypress/schematic', ...angularJsonVal?.cli?.schematicCollections ?? []],
+      }
+
+      if (cli.schematicCollections.indexOf('@schematics/angular') === -1) {
+        cli.schematicCollections.push(angularSchematic)
+      }
+
+      return tree.overwrite(
+        './angular.json',
+        JSON.stringify({
+          ...angularJsonVal,
+          cli,
+        }, null, 2),
+      )
+    }
+
+    throw new SchematicsException('angular.json not found')
+  }
+}
+
 export const getCypressConfigFile = (angularJsonVal: any, projectName: string) => {
   const project = angularJsonVal.projects[projectName]
   const tsConfig = project?.architect?.lint?.options?.tsConfig

npm/cypress-schematic/src/schematics/ng-generate/component/index.spec.ts

@@ -0,0 +1,60 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
+import { expect } from 'chai'
+import { join } from 'path'
+
+describe('ng-generate @cypress/schematic:component', () => {
+  const schematicRunner = new SchematicTestRunner(
+    'schematics',
+    join(__dirname, '../../collection.json'),
+  )
+  let appTree: UnitTestTree
+
+  const workspaceOptions = {
+    name: 'workspace',
+    newProjectRoot: 'projects',
+    version: '12.0.0',
+  }
+
+  const appOptions: Parameters<typeof schematicRunner['runExternalSchematicAsync']>[2] = {
+    name: 'sandbox',
+    inlineTemplate: false,
+    routing: false,
+    skipTests: false,
+    skipPackageJson: false,
+  }
+
+  beforeEach(async () => {
+    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions).toPromise()
+    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
+  })
+
+  it('should create cypress ct alongside the generated component', async () => {
+    const tree = await schematicRunner.runSchematicAsync('component', { name: 'foo', project: 'sandbox' }, appTree).toPromise()
+
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/foo.component.ts')
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/foo.component.html')
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/foo.component.cy.ts')
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/foo.component.css')
+    expect(tree.files).not.to.contain('/projects/sandbox/src/app/foo/foo.component.spec.ts')
+  })
+
+  it('should not generate component which does exist already', async () => {
+    let tree = await schematicRunner.runSchematicAsync('component', { name: 'foo', project: 'sandbox' }, appTree).toPromise()
+
+    tree = await schematicRunner.runSchematicAsync('component', { name: 'foo', project: 'sandbox' }, appTree).toPromise()
+
+    expect(tree.files.filter((f) => f === '/projects/sandbox/src/app/foo/foo.component.ts').length).to.eq(1)
+    expect(tree.files.filter((f) => f === '/projects/sandbox/src/app/foo/foo.component.html').length).to.eq(1)
+    expect(tree.files.filter((f) => f === '/projects/sandbox/src/app/foo/foo.component.cy.ts').length).to.eq(1)
+    expect(tree.files.filter((f) => f === '/projects/sandbox/src/app/foo/foo.component.css').length).to.eq(1)
+  })
+
+  it('should generate component given a component containing a directory', async () => {
+    const tree = await schematicRunner.runSchematicAsync('component', { name: 'foo/bar', project: 'sandbox' }, appTree).toPromise()
+
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/bar/bar.component.ts')
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/bar/bar.component.html')
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/bar/bar.component.cy.ts')
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo/bar/bar.component.css')
+  })
+})

npm/cypress-schematic/src/schematics/ng-generate/component/index.ts

@@ -0,0 +1,27 @@
+import { chain, externalSchematic, noop, Rule, SchematicContext, Tree } from '@angular-devkit/schematics'
+import cypressTest from '../cypress-test'
+import path = require('path');
+
+export default function (options: any): Rule {
+  return (_: Tree, _context: SchematicContext) => {
+    return chain([
+      externalSchematic('@schematics/angular', 'component', {
+        ...options,
+        skipTests: true,
+      }),
+      (tree: Tree, _context: SchematicContext) => {
+        const componentName = path.parse(options.name).name
+        const componentPath = tree.actions.filter((a) => a.path.includes(`${componentName}.component.ts`))
+        .map((a) => path.dirname(a.path))
+        .at(0)
+
+        return componentPath ? cypressTest({
+          ...options,
+          component: true,
+          path: componentPath,
+          name: componentName,
+        }) : noop()
+      },
+    ])
+  }
+}