Home

Awesome

Cypress-Angular-Coverage-Example

This project was generated with Angular CLI version 8.1.1.

Run development server & cypress

Run npm run dev for a dev server to start and lunch Cypress test runner.

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Running the app in development mode

Run npm start to start the app on http://localhost:4200/

Running cypress test runner only

Run npm run cy:open to execute the end-to-end tests via Cypress.

Get code coverage on an angular clean install

ng new cypress-angular-coverage-example
ng add @briebug/cypress-schematic
npm i -D ngx-build-plus
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/
        ]
      }
    ]
  }
};
"serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "cypress-angular-coverage-example:build",
            "extraWebpackConfig": "./cypress/coverage.webpack.js"
          },
npm i -D istanbul-instrumenter-loader

  npm install -D @cypress/code-coverage
// 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;
};

VoilĂ  !

You got angular coverage for your e2e tests written in cypress with typescript.