cypress-angular-unit-test

 [![renovate-app badge][renovate-badge]][renovate-app] !cypress version [![ci status][ci image]][ci url] 

Installation

``shell
npm install -D cypress cypress-angular-unit-test
`

Add to your support file

`js
// cypress/support/index.js
// core-js 3.*
require('core-js/es/reflect');
// core-js 2.*
require('core-js/es7/reflect');
require('cypress-angular-unit-test/support');
`

$3

Create a new file webpack.config.ts in cypress/plugins folder.
You can find the file content here :

- Webpack v4.x
- Webpack v5.x or Angular v12

$3

`shell
npm install -D @cypress/webpack-dev-server html-webpack-plugin
`

Enable component testing in cypress.json.

`json
{
"component": {
"componentFolder": "src/app",
"testFiles": "*/cy-spec.ts"
}
}
`

Configure cypress/plugins/index.js to transpile Angular code.

`javascript
import * as webpackConfig from './webpack.config';
const { startDevServer } = require('@cypress/webpack-dev-server');

module.exports = (on, config) => {
on('dev-server:start', (options) =>
startDevServer({
options,
webpackConfig,
}),
);
return config;
};
`

Run npx cypress open-ct

$3

`shell
npm install -D @cypress/webpack-preprocessor
`

Enable experimental component testing mode in cypress.json and point at the spec files. Usually they are alongside your application files in src folder.

`json
{
"experimentalComponentTesting": true,
"componentFolder": "src",
"testFiles": "*/cy-spec.*"
}
`

Configure cypress/plugins/index.js to transpile Angular code.

`javascript
const wp = require('@cypress/webpack-preprocessor');
import * as webpackOptions from './webpack.config';
module.exports = (on, config) => {
const options = {
webpackOptions,
};
on('file:preprocessor', wp(options));
return config;
};
`

Run npx cypress open

Use

`js
import { mount } from 'cypress-angular-unit-test';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
it('shows the input', () => {
// Init Angular stuff
initEnv(AppComponent);
// You can also :
// initEnv({declarations: [AppComponent]});
// initEnv({imports: [MyModule]});

// component + any inputs object
mount(AppComponent, { title: 'World' });
// use any Cypress command afterwards
cy.contains('Welcome to World!');
});
});
`

!Demo

Examples

| Use case | Description |
| ---------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| Input | Test inject @Input() value |
| Output | Test catching @Output() |
| Bootstrap | Bootstrap integration with style : setConfig({ stylesheet: 'https://...}); |
| Add style | Add custom style for testing : setConfig({ style: 'p {background-color: blue;}' }); |
| HTML mount | Mount a component with html, don't forget to call detectChanges() after |
| Image Snapshot | Mount a component and visual asserting |
| Material | Material integration |
| Prime NG | PrimeNG integration |
| OnPush strategy | Component with changeDetection: ChangeDetectionStrategy.OnPush need call detectChanges() |
| Directive | Test directive with mountHtml |
| Pipe | Test pipe with mountHtml |
| Stub service | Stub a service with Observable |
| Only service | Test a service without a component |
| Web Component | Test a custom element with shadow dom |
| Assets | assets folder accessible by Cypress |
| Async | Async test with cy.tick |
| Routing | Test routing link |

Code coverage

$3

- Install ngx-build-plus to extends the Angular CLI's build process and instrument the code

npm i -D ngx-build-plus

- Add webpack coverage config file coverage.webpack.js to cypress folder

`javascript
module.exports = {
module: {
rules: [
{
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
options: { esModules: true },
enforce: 'post',
include: require('path').join(__dirname, '..', 'src'),
exclude: [
/\.(e2e|spec)\.ts$/,
/node_modules/,
/(ngfactory|ngstyle)\.js/,
],
},
],
},
};
`

- Update angular.json to use ngx-build with extra config

`json
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "cypress-angular-coverage-example:build",
"extraWebpackConfig": "./cypress/coverage.webpack.js"
},
}
`

- Instrument JS files with istanbul for code coverage reporting

npm i -D istanbul-instrumenter-loader

- Add cypress code coverage plugin

npm install -D @cypress/code-coverage

- Then add the code below to your supportFile and pluginsFile

`javascript
// cypress/support/index.js
import '@cypress/code-coverage/support';
// cypress/plugins/index.js
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config);
return config;
};
`

source :

$3

- Instrument JS files with istanbul for code coverage reporting

npm i -D istanbul-instrumenter-loader

- In your cypress/plugins/cy-ts-preprocessor.ts add this rule

`javascript
rules: [
{
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
options: { esModules: true },
enforce: 'post',
include: path.join(__dirname, '../..', 'src'),
exclude: [/\.(e2e|spec)\.ts$/, /node_modules/, /(ngfactory|ngstyle)\.js/],
},
];
`

$3

You can find the HTML report at coverage/lcov-report/index.html

Working

I have successfully used this mounting approach to test components in other frameworks.

- cypress-vue-unit-test
- cypress-react-unit-test
- cypress-cycle-unit-test
- cypress-svelte-unit-test
- cypress-angular-unit-test
- cypress-hyperapp-unit-test
- cypress-angularjs-unit-test

Debugging

You can turn on debugging log by setting environment variable :

`bash
// Unix
export DEBUG="cypress-angular-unit-test,cypress:webpack:stats"

// PowerShell
$env:DEBUG="cypress-angular-unit-test,cypress:webpack:stats"
`

Development

This project only transpiles the library, to see it in action:

- Install dependencies npm i
- Compile the library npm run build
- Open Cypress with npx cypress open`

Pick any component test spec file to run

[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/
[ci image]: https://github.com/bahmutov/cypress-angular-unit-test/workflows/ci/badge.svg?branch=master
[ci url]: https://github.com/bahmutov/cypress-angular-unit-test/actions