👨🏾‍⚕️ 🎍 👩🏽‍🤝‍👨🏻 Leitura de cobertura de código com cipreste 🧑🏼‍🤝‍🧑🏻 🔚 🌒

Olá a todos, quero dizer a vocês como adicionar cobertura de código a um projeto angular / react. Na net você pode encontrar algumas opções de como fazer isso, e por experiência própria devo notar que às vezes com o angular não é tão fácil. Vamos ver como adicionar cobertura de código à versão 11 do angular (se você tiver 7/8 ... este exemplo pode não funcionar, melhor atualizar)

Angular

Instale todas as dependências

npm i -D ngx-build-plus
npm i -D istanbul-instrumenter-loader
npm install -D @cypress/code-coverage

Mudando de transferidor para cipreste

ng add @briebug/cypress-schematic

Crie um arquivo cypress / cobertura.webpack.js

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/
        ]
      }
    ]
  }
};

Vamos atualizar nosso angular.jso

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

Adicione a cypress / support / index.js

import '@cypress/code-coverage/support';

Adicionar a cypress / plugins / index.js

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}

Vamos executar o aplicativo, o console deve ter uma variável window .__ Cover__

Depois de iniciar o aplicativo, tudo o que resta é executar os testes npm run cy: open / cy: run

"cy:open": "cypress open",
"cy:run": "cypress run",

Assim que os testes forem aprovados, uma pasta de cobertura será criada na raiz do aplicativo.

Você pode ver o resultado abrindo o arquivo cobertura / lcov-report / index.html

Ao clicar nos componentes, você pode ver qual código foi executado e quantas vezes, e qual ainda não foi coberto pelos testes

O projeto em si pode ser baixado aqui: https://github.com/NikolayKozub/angular-coverage-cypress

Reagir

Instale todas as dependências

npm i -D nyc
babel-plugin-istanbul
istanbul-lib-coverage
@cypress/code-coverage
@cypress/instrument-cra

Adicionar a cypress / plugins / index.js

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  
  return config
}

Adicione a cypress / support / index.js

import '@cypress/code-coverage/support'

Adicionar scripts a package.json

"start": "react-scripts start",
"start:coverage": "react-scripts -r @cypress/instrument-cra start",

Adicione .babelrc à raiz do projeto

{
  "plugins": ["istanbul"]
}

Fazemos testes e vemos o relatório

Você pode ler mais aqui

Leitura de cobertura de código com cipreste

Angular

Reagir

More articles: