前端Javascript代码质量扫描解决方案：Karma + Jasmine + lcov + Sonarqube

最新推荐文章于 2024-07-21 14:22:25 发布

淼叔

最新推荐文章于 2024-07-21 14:22:25 发布

阅读量7.7k

点赞数 1

分类专栏： # 前端 # SonarQube # 自动化工具文章标签： sonarqube karma jasmine 前端代码扫描覆盖率

本文链接：https://blog.csdn.net/liumiaocn/article/details/85242141

版权

本文介绍了如何利用Karma、Jasmine和lcov进行前端JavaScript代码的质量扫描和覆盖率测试，并结合Sonarqube进行结果分析。通过详细步骤展示从环境准备到配置karma.conf.js，再到执行测试和生成覆盖率报告，最后通过Sonarqube查看详细测试覆盖情况的过程。

摘要由CSDN通过智能技术生成

代码质量扫描的流行工具sonarqube，java系的应用开发框架可以使用Maven/Gradle作为构建工具，JUnit作为单体覆盖率测试工具，使用Jacoco可视化提供支撑。而Javascript则可以使用Karma+Jasmine+lcov+Sonarqube进行类似的质量扫描。

环境准备&说明

node版本

事前安装node，本文示例中使用如下版本

liumiaocn:~ liumiao$ npm -v
5.5.1
liumiaocn:~ liumiao$ node -v
v8.9.1
liumiaocn:~ liumiao$

karma安装与介绍

安装karma

使用npm install -g karma进行karma的安装

liumiaocn:~ liumiao$ npm set registry="https://registry.npm.taobao.org/"
liumiaocn:~ liumiao$ npm install -g karma
... 
+ karma@3.1.4
added 328 packages in 13.582s
liumiaocn:~ liumiao$

版本确认

liumiaocn:~ liumiao$ karma --version
Karma version: 3.1.4
liumiaocn:~ liumiao$

karma简介

Karma是google为AngularJS开发的测试工具，当然后面更名的Angular同样在使用。除了Angular的应用之外，普通的Javascript程序也可以使用Karma。Karma在使用的时候通过Karma start启动服务器端应用（缺省使用9876端口），而客户端使用浏览器与之建立连接。服务器端应用会监视源码或测试代码的更新，而无需手动刷新浏览器，通过类似的改进，使用karma可以快速的在不同的浏览器中进行自动化单元测试。

安装浏览器启动器插件

karma在启动服务器的时候，可以同时通过浏览器启动器插件启动浏览器，而这些浏览器和服务器应用建立连接。

浏览器	浏览器启动器名称
FIREFOX	karma-firefox-launcher
CHROME	karma-chrome-launcher

安装启动器插件(chrome)：npm install -g karma-chrome-launcher

liumiaocn:~ liumiao$ npm install -g karma-chrome-launcher
+ karma-chrome-launcher@2.2.0
added 5 packages in 1.546s
liumiaocn:~ liumiao$

通过设定浏览器名称_BIN来进行环境变量的设定

浏览器	环境变量
FIREFOX浏览器	FIREFOX_BIN
CHROME浏览器	CHROME_BIN

安装测试框架适配器

Karma支持Jasmine/Mocha等多种测试框架，比如安装Jasmine适配器：

npm install -g karma-jasmine

liumiaocn:~ liumiao$ npm install -g karma-jasmine
...省略
+ karma-jasmine@2.0.1
added 2 packages in 1.2s
liumiaocn:~ liumiao$

基于BDD（行为驱动开发）的Jasmine是一个JS的测试框架框架。使用Jasmine可以快速地进行测试代码的开发。

安装测试报告插件

通过不同报告插件，比如JUnit格式和HTML格式：

格式	插件名称
JUnit格式	karma-junit-reporter
HTML格式	karma-html-reporter

npm install -g karma-html-reporter
npm install -g karma-junit-reporter

liumiaocn:~ liumiao$ npm install -g karma-html-reporter
...省略
+ karma-html-reporter@0.2.7
added 3 packages in 1.455s
liumiaocn:~ liumiao$ npm install -g karma-junit-reporter
...省略
+ karma-junit-reporter@1.2.0
added 3 packages in 1.349s
liumiaocn:~ liumiao$

安装karma-coverage

liumiaocn:~ liumiao$ npm install -g karma-coverage
+ karma-coverage@1.1.2
added 95 packages in 9.97s
liumiaocn:~ liumiao$

创建karma例程

用karma init生成karma.conf.js

使用karma init创建简单示例用的测试的设定文件karma.conf.js

liumiaocn:~ liumiao$ mkdir karma
liumiaocn:~ liumiao$ cd karma
liumiaocn:karma liumiao$ karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next quest