RICHTEN SIE SONARQUBE FÜR DIE ANGULAR-ANWENDUNG LOKAL IN DREI EINFACHEN(!?!)

Dies ist meine persönliche Erfahrung beim Einrichten von Sonarqube für unsere Angular-Anwendung in einer lokalen Entwicklungsumgebung, und es bleibt bei diesem enger werdenden Umfang. Hier geht es nicht darum, was Sonarqube ist oder wie man die Berichte von Sonarqube verwendet.

Bild für Beitrag

Foto von Lindsay Henwood An Unsplash

Es gibt Spezifisch Scanner für verschiedene Build-Tools, aber für Angular(Typescript)-basierte Anwendungen sollten wir das Basispaket Sonar-Scanner npm verwenden. Fügen wir es unserer Angular-Anwendung hinzu.

npm i sonar-scanner --save-dev

Wir sollten dann die unten erwähnte Eigenschaftendatei (sonar-project.properties) im Stammverzeichnis der Anwendung hinzufügen. Dies definiert die Sonarinstanz, den Quelldateipfad, die Testdateierweiterungen und die Berichtsdateien. Die Erklärung für alle möglichen Eigenschaften finden Sie in diesem Verknüpfung .

 sonar.host.url=http://localhost:9000 sonar.login=admin sonar.password=admin sonar.projectKey=my-angular-app sonar.sourceEncoding=UTF-8 sonar.sources=src sonar.tests=src sonar.exclusions=**/node_modules/** sonar.test.inclusions=**/*.spec.ts sonar.typescript.lcov.reportPaths=coverage/lcov.info sonar.testExecutionReportPaths=reports/ut_report.xml

Während die meisten Eigenschaften offensichtlich sind, werden für einige von ihnen einige Details hinzugefügt.

Sonar.Quelle

Dies bezieht sich auf den Pfad, in dem sich unsere Quelldateien befinden.

Sonar.Tests

Dies bezieht sich auf den Pfad, in dem sich unsere Testdateien befinden. Dies hilft beim Scannen von Ausführungsberichten.

Sonar.Test.Einschlüsse

Dies bezieht sich auf das Muster der Dateierweiterung für die Testdateien und stellt sicher, dass unsere Testdateien in die Analyse einbezogen werden. Diese Sonardokumentation Verknüpfung enthält zusätzliche Details zum Targeting der Dateien, die beim Scannen eingeschlossen und ausgeschlossen werden sollen.

sonar.typescript.lcov.reportPaths

Dies bezieht sich auf die lcov.info (Code Coverage Report)-Datei, die von Karma-Plugins von Drittanbietern erstellt wurde. Stellen Sie sicher, dass die folgenden Eigenschaften in karma.conf.js richtig eingerichtet sind, damit der Abdeckungsbericht im Stammverzeichnis der Angular-Anwendung erstellt wird.

dir: require('path').join(__dirname, 'coverage'),

Hinweis: Der Standardwert ist …/coverage, wodurch der Bericht außerhalb des Stammordners der Angular-Anwendung erstellt wird.

sonar.testExecutionReportPaths

Dies bezieht sich auf die Testausführungsberichtsdatei, die von Karma-Plugins von Drittanbietern erneut erstellt wurde. Sonarqube bietet keine direkte Unterstützung für das Scannen des Testausführungsberichts, und dies kann durch die Open-Source-npm-Bibliothek erreicht werden karma-sonarqube-einheit-reporter .

Mit den folgenden kurzen Schritten wird dieser Reporter zu unserer Anwendung hinzugefügt. Beginnen wir mit dem Hinzufügen der npm-Bibliothek zu unserer Anwendung.

npm i karma-sonarqube-unit-reporter --save-dev

Und fahren Sie mit den folgenden Ergänzungen in karma.conf.js fort, um diesen Reporter hinzuzufügen.

 plugins: [ require('karma-sonarqube-unit-reporter') ], sonarQubeUnitReporter: { sonarQubeVersion: 'LATEST', outputFile: 'reports/ut_report.xml', overrideTestDescription: true, testPaths: ['./src'], testFilePattern: '.spec.ts', useBrowserName: false }, reporters: ['sonarqubeUnit'],

Richten Sie Sonarqube für die Angular-Anwendung lokal in drei einfachen(!?!)

codeburst.io