AngularJS unit test report / coverage report
参考来源： http://www.cnblogs.com/vipyoumay/p/5331787.html
这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告。用到的都是现有的工具，只是一些配置的地方需要注意。
环境前提：
1. nodejs 安装(https://nodejs.org/en/download/)
步骤：
1. npm init 创建一个nodejs工程。
2. 使用以下npm install 命令 下载node modules, 然后在package.json的scripts节点添加start命令如下：
npm install angular -D
npm install angular-mocks -D
npm install jasmine-core -D
npm install karma -D
npm install karma-chrome-launcher -D
npm install karma-coverage -D
npm install karma-html-reporter -D
npm install karma-jasmine -D "scripts": {"test": "karma start karma.conf.js"
},
注： karma-chrome-launcher可以替换成你想要的其他浏览器，每个浏览器都有配套的karma luancher插件（http://karma-runner.github.io/1.0/config/configuration-file.html）
3. 创建一个以Angularjs为框架的demo做为测试的站点，只是为了测试用，不用太复杂。
新建html/index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>index</title> </head>
<body>
<div ng-controller="indexCtrl">
<input type="text" ng-model="a" value="0">
+
<input type="text" ng-model="b" value="0">
=<span id='result'>{{add(a,b)}}</span>
</div>
</body>
</html>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-mocks/angular-mocks.js"></script>
<script src="../js/index.js"></script>
index.html
新建js/index.js
var angular = window.angular
var app = angular.module('app', []);
app.controller('indexCtrl', function($scope) {
$scope.add = function (a, b) {
if(a&&b) {
return Number(a) + Number(b)
}
return 0;
},
$scope.minus = function(a, b) {
if(a&&b) {
return Number(a) - Number(b)
}
return 0;
}
});
index.js
新建单元测试文件unittest/index-test.js
'use strict';
describe('app', function () {
beforeEach(module('app'));
describe('indexCtrl', function () {
it('add 测试', inject(function ($controller) {
var $scope = {};
//spec body
var indexCtrl = $controller('indexCtrl', {$scope: $scope});
expect(indexCtrl).toBeDefined();
expect($scope.add(2, 3)).toEqual(5);
expect($scope.add(null, null)).toEqual(0);
}));
it('minus 测试', inject(function ($controller) {
var $scope = {};
//spec body
var indexCtrl = $controller('indexCtrl', {$scope: $scope});
expect(indexCtrl).toBeDefined();
expect($scope.minus(3, 2)).toEqual(1);
expect($scope.minus(null, null)).toEqual(0);
}));
});
});
index-test.js
4. 新建karma.conf.js文件，然后配置如下：
// Karma configuration
// Generated on Thu Jun 29 2017 13:30:09 GMT+0800 (China Standard Time) module.exports = function(config) {
config.set({ // base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './', // frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'], // list of files / patterns to load in the browser
files: [
'node_modules/angular/angular.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'js/*.js',
'unittest/*.js'
], // list of files to exclude
exclude: [
], // preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
}, // test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'html', 'coverage'], // web server port
port: 9876, // enable / disable colors in the output (reporters and logs)
colors: true, // level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes
autoWatch: true, // start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'], // Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true, // Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity, plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-html-reporter',
'karma-coverage'
], htmlReporter: {
outputDir: 'report/', // where to put the reports
templatePath: null, // set if you moved jasmine_template.html
focusOnFailures: true, // reports show failures on start
namedFiles: false, // name files instead of creating sub-directories
pageTitle: null, // page title for reports; browser info by default
urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
reportName: 'html', // report summary filename; browser info by default }, coverageReporter: {
type: 'html',
dir: 'report/coverage'
}, preprocessors: {'js/*.js': ['coverage']}
})
}
files: 选择浏览器要导入的文件
reporters: 添加'html', 'coverage' 用以生成单元测报告和覆盖率测试报告
singleRun: 设置为ture, karma会在测试结束后自动关闭浏览器
plugins: 导入我们需要的四个插件
htmlReporter: 配置html报告的存放位置
coverageReporter: 配置覆盖率报告的存放位置
preprocessors: 添加要测试的js文件位置以及'coverage'标志。
配置全部完成， 项目目录结构如下：
unitTest
|- html
|-- index.html
|- js
|-- index.js
|- unittest
|-- index-test.js
|- report
|- html //存放单元测试报告
|- coverage //存放覆盖率报告
karma.conf.js
package.json
执行命令npm test就会在report目录下产生html格式的报告了
参考文档： http://karma-runner.github.io/1.0/config/configuration-file.html
AngularJS unit test report / coverage report的更多相关文章
- Quickstart: Embed a Power BI Report Server report using an iFrame in SharePoint Server
In this quickstart you will learn how to embed a Power BI Report Server report by using an iFrame in ...
- coverage report
转载:http://blog.sina.cn/dpool/blog/s/blog_7853c3910102yn77.html VCS仿真可以分成两步法或三步法, 对Mix language, 必须用三 ...
- [Unit Testing] AngularJS Unit Testing - Karma
Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...
- QT unit test code coverage
准备环境: qt-creator5.2.1 , gcov(gcc 默认安装),lcov(gcov 的图形化显示界面),qt_testlib 各环境介绍: 1.gcov gcov 是一个可用于C/C ...
- Jmeter Dash Report(HTML Report)删除Hits Per Second graph的方法
通过命令行 Non GUI的方式执行jmeter的jmx脚本可以生成HTML Report(Dash Report). 这个report默认自带了很多种图表报告,比如statistics,Over t ...
- [AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope
<div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use str ...
- [Angular + Unit] AngularJS Unit testing using Karma
http://social.technet.microsoft.com/wiki/contents/articles/32300.angularjs-unit-testing-using-karma- ...
- [AngularJS Unit tesint] Testing keyboard event
HTML: <div ng-focus="vm.onFocus(month)", aria-focus="{{vm.focus == month}}", ...
- [AngularJS + Unit Testing] Testing a component with requiring ngModel
The component test: describe('The component test', () => { let component, $componentController, $ ...
随机推荐
- 使用browsercookie来管理浏览器cookies
处理cookie是很繁琐的一件事情,稍微有一点处理不对的话,就不能访问网站,最好的办法就是能操作浏览器cookie,这样是最真实的,在Python中有一个第三方库: browsercookie就是来解 ...
- C++第五次作业--运算符重载和函数重载
C++ 运算符重载和函数重载 C++ 允许在同一作用域中的某个函数和运算符指定多个定义,分别称为函数重载和运算符重载. 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是 ...
- [AWS - EC2]如何使用 PuTTY 连接到 Amazon Linux 2 实例。How to Connect Amazon Linux 2 Instance from Windows Using PuTTY
1. 下载 PuTTY 2. 安装到任意目录 3. 打开 PuTTYgen (注意不是 PuTTY), 如图: 选择 RSA , 点击 Load. 找到从 AWS 创建实例的时候生成的 key,要选择 ...
- 网络协议相关面试问题-TCP与IP网络模型
互联网应用的实现主要是通过分层来实现的,每一层有自己相应的功能,上层依赖于下层,具体层次如下图: 下面具体一层层来了解: 物理层 / 实体层: 也就是将电脑通过物理的手段连接起来,其实也就是01电子信 ...
- 【安徽集训】Emerald
Description \(n\) 座城市在数轴上,第 \(i\) 座城市有一条连向第 \(i+1\) 座城市的单向边.每座城市有一个类型 A/B 以及一个非负整数人口,A 类城市的人觉得自己的城市比 ...
- linux内核 概念
内核Kernel只是操作系统的一部分,操作系统本身在内核之上还包含命令行shell和其他种类的用户界面. 通常内核包含: 中断服务程序 进程管理和调度程序 内存管理程序 进程同步方法 IO和设备等 在 ...
- elasticsearch启动时遇到的错误
elasticsearch启动时遇到的错误 问题翻译过来就是:elasticsearch用户拥有的内存权限太小,至少需要262144: 解决: 切换到root用户 执行命令: sysctl -w vm ...
- 解决laydate动态设置初始值的问题
//初始化//注意:我这里是时间范围选择,所以定义了range属性.var timeScope = laydate.render({ elem: '#time_scope', range: '~', ...
- 题解 【NOI2015】软件包管理器
题面 解析 事实上,这应该是道树剖裸题了, 将已安装表示为\(1\), 那么只需要在线段树中记录一下区间中\(1\)的个数就行了. 在询问的时候, 如果是安装,就查询\(x\)到根节点, 卸载的话,就 ...
- word文档在线预览地址
文档网址 http://www.officeweb365.com/Default/Docview 对接 http://ow365.cn/?i=19604&furl=http:://www.ba ...