Hallo allerseits, ich möchte Ihnen sagen, wie Sie einem Winkel- / Reaktionsprojekt Codeabdeckung hinzufügen können. Im Internet finden Sie einige Möglichkeiten, wie dies zu tun ist, und aus meiner Erfahrung muss ich feststellen, dass es manchmal mit Winkel nicht so einfach ist. Mal sehen, wie man der Version 11 von Angular Code Coverage hinzufügt (wenn Sie 7/8 haben ... dieses Beispiel funktioniert möglicherweise nicht, besser aktualisieren)
Winkelig
Installieren Sie alle Abhängigkeiten
npm i -D ngx-build-plus
npm i -D istanbul-instrumenter-loader
npm install -D @cypress/code-coverage
Übergang vom Winkelmesser zur Zypresse
ng add @briebug/cypress-schematic
Erstellen Sie eine Cypress / Coverage.webpack.js-Datei
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/
]
}
]
}
};
Lassen Sie uns unsere angle.jso aktualisieren
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "angular-registration-login-example:build",
"extraWebpackConfig": "./cypress/coverage.webpack.js"
}
},
Zu cypress / support / index.js hinzufügen
import '@cypress/code-coverage/support';
Zu cypress / plugins / index.js hinzufügen
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
}
Lassen Sie uns die Anwendung ausführen. Die Konsole sollte eine Fenstervariable .__ Coverage__ haben
Nach dem Starten der Anwendung müssen nur noch die Tests npm run cy: open / cy: run ausgeführt werden
"cy:open": "cypress open",
"cy:run": "cypress run",
Sobald die Tests bestanden sind, wird im Anwendungsstamm ein Coverage-Ordner erstellt
Sie können das Ergebnis sehen, indem Sie die Datei Coverage / lcov-report / index.html öffnen
Durch Klicken auf die Komponenten können Sie sehen, welcher Code wie oft ausgeführt wurde und welcher noch nicht durch Tests abgedeckt wurde
Das Projekt selbst kann hier heruntergeladen werden: https://github.com/NikolayKozub/angular-coverage-cypress
Reagieren
Installieren Sie alle Abhängigkeiten
npm i -D nyc
babel-plugin-istanbul
istanbul-lib-coverage
@cypress/code-coverage
@cypress/instrument-cra
Zu cypress / plugins / index.js hinzufügen
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config)
return config
}
Zu cypress / support / index.js hinzufügen
import '@cypress/code-coverage/support'
Fügen Sie Skripte zu package.json hinzu
"start": "react-scripts start",
"start:coverage": "react-scripts -r @cypress/instrument-cra start",
Fügen Sie .babelrc zum Projektstamm hinzu
{
"plugins": ["istanbul"]
}
Wir führen Tests durch und sehen den Bericht