Cypress Angular Schematic
Add Cypress to an Angular CLI project
This schematic will:
- install Cypress, it's dependencies, and new scripts
- add necessary files for Cypress to work with Angular & Typescript
- prompt for removal of Protractor files and configuration
npm install -g @briebug/cypress-schematic
Then in an Angular CLI project run
ng g @briebug/cypress-schematic:add
Optionally run as one command in an Angular CLI app directory. Note this will add the schematic as a dependency to your project.
ng add @briebug/cypress-schematic
Issues with this schematic can be filed here.
Thanks to Kevin Schuchard for setting up the Schematic Sandbox, and writing the Jest schematic which inspired this schematic.
More info on this sandbox approach is detailed in this blog post kevinschuchard.com/blog/2018-11-20-schematic-sandbox/
Also, thank you to Zahid Mahmood for writing this blog post detailing setting up cypress in an Angular project.
⚙ Yarn is required for the scripts. Make sure it's installed on your machine.
⬇ Install the dependencies for the schematic and the sandbox application
yarn && cd sandbox && yarn && cd ..
To execute an example schematic, make sure you've ran the Install and Link steps above. Then run the following and inspect the changed files.
git checkout component-license && yarn build:clean:launch
Execute the schematic against the sandbox. Then run linting, unit & e2e tests and a prod build in the sandbox.
Run the unit tests using Jasmine as a runner and test framework.
Reset the sandbox
Running the schematic locally makes file system changes. The sandbox is version controlled so that viewing a diff of the changes is trivial. After the schematic has run locally, reset the sandbox with the following.
Note: if you're using the
schematics CLI mentioned below, you can execute the schematic in a dry run mode.
Change the Schematic name
- do a global search and replace for
schematicStarterwith the new name.
- change the folder name from
yarn link:schematicto set up local package linking for the sandbox
Optional - Testing with the Schematics CLI
To test locally, install
@angular-devkit/schematics-cli globally and use the
schematics command line tool. That tool acts the same as the
generate command of the Angular CLI but also has a debug mode.
Check the documentation with
To publish, simply do:
npm run build npm publish