Add Angular CT Schematic

What would you like?

Part 1

It would be great for users of Angular Component Testing to be able to use the angular CLI to generate component tests for them. We do something similar with the Cypress Angular Schematic for e2e:

ng generate @cypress/schematic:e2e

I would like to propose the same functionality but for component testing:

ng generate @cypress/schematic:ct button

This would essentially generate a file named button.component.cy.ts that looks like the following:

import { ButtonComponent } from './button.component'

describe('ButtonComponent', () => {
  it('can mount', () => {
    cy.mount(ButtonComponent)
  })
})

Part 2

By having this, we could then also wrap the current Angular CLI component generator to also call @cypress/schematic:ct as well. This way users who use the angular CLI to generate a component would get the following files

ng generate component button

Scaffolded Files:

• button.component.ts
• button.component.css
• button.component.cy.ts

This would also require a schematic that would also setup your Angular CLI project to use this schematic. Something that would look like the following:

ng add cypress-angular-ct

To increase adoption of Angular CT support we could also throw this as a prompt at the end of the Cypress Launchpad to ask users if they want to add this schematic or something like that

Why is this needed?

This will improve the developer experience for users by making the generating of CT specs super simple and ultimately an after thought if we wrap around the ng generate component schematic. By implementing this we will increase users adoption of Angular CT and improve over DX by doing all the boilerplate work for developers.

Other

No response

[jordanpowell88]

@d-koppenhagen yes this is mostly implemented but we still need to add this as part of the setup

[jordanpowell88]

@w0wka91 Go for it!