使⽤SonarTS创建进⾏typescript代码质量扫描（续）：如何显⽰测试覆盖率
在前⾯的⽂章中介绍了如何使⽤SonarQube进⾏代码质量扫描，这篇⽂章继续介绍如何结合使⽤Karma + Jamsine 在Angular中实现前端单元测试与覆盖率的确认。
事前准备
SonarQube环境搭建
可以使⽤SonarQube的各个版本进⾏验证，此处使⽤SonarQube LTS 7.9.1版本 + Postgresql 12版本。详细环境搭建可以参看：
Angular应⽤+Karma+Jasmine
单元测试覆盖率的获取，事前必须需要⾸先执⾏单元测试，然后SonarQube实际上会分析此结果才能进⾏覆盖率的展⽰。⽽这个过程中则需要多种⼯具包括Karma和Jasmine等，⽽由于Angular CLI创建的应⽤框架中已经默认⼏乎配置完毕，⽽且包含⽰例的测试⽂件，所以只需要如下步骤即可：
步骤1: ng new demo --style=less
步骤2: cd demo && npm install
步骤3: 设定karma的配置⽂件
步骤4: ng test --code-coverage
详细的说明和解释可以参看如下内容：
Sonar-Scanner
liumiaocn:~ liumiao$ sonar-scanner --version
INFO: Scanner configuration file: /usr/local/share/sonar/sonar-scanner-3.2.0.1227-linux/conf/sonar-scanner.properties
INFO: Project root configuration file: NONE
INFO: SonarQube Scanner 3.2.0.1227
INFO: Java 1.8.0_191 Oracle Corporation (64-bit)
INFO: Mac OS X 10.14 x86_64
liumiaocn:~ liumiao$
测试执⾏
修改Karma的设定⽂件如下所⽰
liumiaocn:demo liumiao$ f.js
// Karma configuration file, e link for more information
// karma-runner.github.io/1.0/config/configuration-file.html
config.t({
baPath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: fal // leave Jasmine Spec Runner output visible in browr
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/demo'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
李孝珍reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browrs: ['ChromeHeadless'],
singleRun: true,
restartOnFileChange: true
});
};
liumiaocn:demo liumiao$
实际上事前准备中的ng test --code-coverage命令的执⾏就会⽣成相关的测试覆盖率⽂件，这⾥通过如下执⾏的⽇志⽰例来进⾏确认。
liumiaocn:demo liumiao$ ng test --code-coverage
30% building 11/11 modules 0 active04 11 2019 05:12:06.736:INFO [karma-rver]: Karma v4.1.0 rver started at 0.0.0.0:9876/
04 11 2019 05:12:06.739:INFO [launcher]: Launching browrs ChromeHeadless with concurrency unlimited
04 11 2019 05:12:06.741:INFO [launcher]: Starting browr ChromeHeadless
04 11 2019 05:12:10.116:INFO [HeadlessChrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket sW72hR86pa03j6XjAAAA with id 26423359 HeadlessChrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.345 cs / 0.296 cs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
=============================== Coverage summary ===============================
Statements : 100% ( 6/6 )
Branches : 100% ( 0/0 )
Functions : 100% ( 1/1 )
Lines : 100% ( 5/5 )
================================================================================
liumiaocn:demo liumiao$
测试结果⽂件确认
Java的测试覆盖率⼀般使⽤JaCoCo来实现，⽽前端则使⽤lcov，简单来说测试的结果中会有这样⼀个包含测试⽤例覆盖的代码的⾏号信息，上述执⾏的结果⽂件如下所⽰
liumiaocn:demo liumiao$ cat coverage/demo/lcov.info
TN:
SF:/private/tmp/demo/src/polyfills.ts
FNF:0
FNH:0
LF:0
LH:0
BRF:0
BRH:0
end_of_record
TN:
SF:/private/tmp/demo/src/test.ts
FNF:0
FNH:0
DA:13,1
DA:18,1
DA:20,1
LF:3
LH:3
BRF:0
哈利波特观后感BRH:0
end_of_record
TN:
SF:/private/tmp/demo/src/ponent.ts
FN:3,(anonymous_0)
FNF:1
FNH:1
FNDA:3,(anonymous_0)
DA:8,1
羊脂DA:9,3
LF:2
LH:2
BRF:0
BRH:0
end_of_record
liumiaocn:demo liumiao$
SonarQube显⽰测试覆盖率的⽅法
SonarQube需要通过上述⽂件来实现解析和显⽰覆盖率的状况，传⼊的⽅法则可以通过Sonar-Scanner的portPaths参数来实现。本⽂⽰例的Sonar-Scanner执⾏命令如下所⽰
执⾏⽇志如下所⽰
liumiaocn:demo liumiao$ sonar-scanner -Dsonar.projectKey=coveragetest \
> -Dsonar.sources=src \
> -portPaths=coverage/demo/lcov.info \
> -Dsonar.host.url=192.168.31.242:9001 \
> -Dsonar.login=admin \
> -Dsonar.password=admin
INFO: Scanner configuration file: /usr/local/share/sonar/sonar-scanner-3.2.0.1227-linux/conf/sonar-scanner.properties INFO: Project root configuration file: NONE
INFO: SonarQube Scanner 3.2.0.1227
INFO: Java 1.8.0_191 Oracle Corporation (64-bit)
INFO: Mac OS X 10.14 x86_64
INFO: Ur cache: /Urs/liumiao/.sonar/cache
INFO: SonarQube rver 7.9.1
INFO: Default locale: "en_CN", source code encoding: "UTF-8" (analysis is platform dependent)
奥斯卡影帝
WARN: SonarScanner will require Java 11+ to run starting in SonarQube 8.x
INFO: Load global ttings
INFO: Load global ttings (done) | time=383ms
INFO: Server id: 46AF5D23-AW4QVqQKMR98oZUMGunZ
INFO: Ur cache: /Urs/liumiao/.sonar/cache
INFO: Ur cache: /Urs/liumiao/.sonar/cache
INFO: Load/download plugins
INFO: Load plugins index
INFO: Load plugins index (done) | time=355ms
INFO: Load/download plugins (done) | time=365ms
INFO: Process project properties
INFO: Project key: coveragetest
INFO: Ba dir: /Urs/liumiao/demo
INFO: Working dir: /Urs/liumiao/demo/.scannerwork
INFO: Load project ttings for component key: 'coveragetest'
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=723ms
INFO: Load active rules
INFO: Load active rules (done) | time=834ms
WARN: SCM provider autodetection failed. Plea u "sonar.scm.provider" to define SCM of your project, or disable the SCM Sensor in the project tting s.
INFO:
INFO: Project configuration:
INFO: 14 files indexed
INFO: Quality profile for ts: Sonar way
INFO: ------------- Run nsors on module coveragetest
INFO: Load metrics repository
三角形法INFO: Load metrics repository (done) | time=338ms
INFO: Sensor SonarTS [typescript]
INFO: Load project repositories
实习生管理办法INFO: Load project repositories (done) | time=316ms
INFO: Analyzing 9 typescript file(s) with the following configuration file /Urs/liumiao/demo/tsconfig.json
INFO: 9 files analyzed out of 9
INFO: Sensor SonarTS [typescript] (done) | time=2919ms
INFO: Sensor SonarTS Coverage [typescript]
INFO: Analysing [/Urs/liumiao/demo/coverage/demo/lcov.info]
INFO: Sensor SonarTS Coverage [typescript] (done) | time=6ms
INFO: ------------- Run nsors on project
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=4ms
INFO: No SCM system was detected. You can u the 'sonar.scm.provider' property to explicitly specify it.
INFO: 6 files had no CPD blocks
INFO: Calculating CPD for 3 files
INFO: CPD calculation finished
INFO: Analysis report generated in 46ms, dir size=21 KB
INFO: Analysis report compresd in 38ms, zip size=15 KB
INFO: Analysis report uploaded in 1214ms
INFO: ANALYSIS SUCCESSFUL, you can brow 192.168.31.242:9001/dashboard?id=coveragetest
INFO: Note that you will be able to access the updated dashboard once the rver has procesd the submitted analysis report
INFO: More about the report processing at 192.168.31.242:9001/api/ce/task?id=AW4zHpk0zxaMqkyn8AYu
INFO: Analysis total time: 7.302 s
把玩核桃
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 8.689s
INFO: Final Memory: 12M/198M
INFO: ------------------------------------------------------------------------
liumiaocn:demo liumiao$
SonarQube结果确认
整体概要信息如下所⽰
详细各⽂件的测试覆盖率状况
常见问题
>火腿鲜笋汤
