karma和jasmine的测试（包括angular测试）

本篇博客主要就是针对现在日新月异的技术和快速开发，测试被很多人忽略，其实在开发中如何保证代码的质量以及逻辑的完整性，测试显得十分重要，本文就是负责karma+jasmine来测试。

1.搭建测试的环境

首先需要确保电脑装有node，低版本的node，在下载karma和jasmine会出现问题，建议低版本下载的包的版本如下：

{
"name": "karma-jsmin",
"version": "1.0.0",
"description": "",
"main": "karma.conf.js",
"directories": {
"test": "test"
},
"dependencies": {
"jasmine-core": "^2.5.2",
"karma": "^0.12.33",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0"
},
"devDependencies": {},
"scripts": {
"test": "node node_modules/karma/bin/karma start"
},
"author": "",
"license": "ISC"
}

将上述的包复制到你要下载的package.json文件中，使用npm install下载，其中script中的test是快捷方式，这里在命令窗口输入npm run test，默认就会执行test对应后面的node node_modules/karma/bin/karma start，可以自定义自己的快捷方式。运行npm run test,看看是否报错，如果报错，去往这个网址照着修改http://www.tuicool.com/articles/ZNbiqeI。

在高版本的node一般不会出现问题，下载jasmine-core，karma，karma-chrome-launcher，karma-coverage（测试代码覆盖率），karma-jasmine，这个时候如果你下载了全局的karma，则在你的文件夹下打开命令窗口输入karma init，就会出现一个配置信息，一路回车就会生成一个karma.conf.js的文件，里面的解释如下：

// Karma configuration
// Generated on Thu Apr 20 2017 10:43:31 GMT+0800 (中国标准时间)

module.exports = function(config) {
config.set({
/**
*如果所有文件处于同样的路径，则可以在这里配置基础的路径,用在files，exclude属性上
*例如 dest/one.js 和 dest/one-test.js 这里配置dest/
*后面的files就可以写成['one.js','one-test.js']*/
basePath: '',

/**
* 测试框架
* 可用的框架：jasmine,mocha...
*/
frameworks: ['jasmine'],

// 需要测试的文件
files: [

// 'need/app.js',
// 'test/app-test.js'
'angular/angular.js',
'angular/angular-mocks.js',
'ng-js/filter.js',
'ng-test-js/filter-test.js'
],

/**
* 排除的文件列表
*/
exclude: ['karma.conf.js'],

//预处理程序，
// preprocessors: {
// 'test/**/*.js': ['webpack', 'coverage'] //新增 coverage为覆盖率测试
// },
preprocessors: {
'ng-js/demo1.js':'coverage'

},

/**
* 使用测试结果报告者
* 可能的值: "dots", "progress"
* 可用的报告者：https://npmjs.org/browse/keyword/karma-reporter
*/
reporters: ['progress','coverage'],

//在coverage目录下生成html文件，用来监测这个测试项目的功能是否完全
coverageReporter:{
type:'html',
dir:'coverage/'
},

// 测试执行会打开一个页面，就是这个页面的端口，可以随意设置
port: 9876,

//启用或禁用输出报告或者日志中的颜色
// 测试命令执行的时候，出错误或者测试不通过显示不同的颜色，否则只有白色，
colors: true,

/**
* 日志等级
* 可能的值：
* config.LOG_DISABLE //不输出信息
* config.LOG_ERROR //只输出错误信息
* config.LOG_WARN //只输出警告信息
* config.LOG_INFO //输出全部信息
* config.LOG_DEBUG //输出调试信息
*/
logLevel: config.LOG_INFO,

// 是否自动监测测试文件的改动并及时重新测试
autoWatch: true,

// 测试执行打开的页面，可以使用火狐，ie，Opera等浏览器
browsers: ['Chrome'],

/**
* 开启或禁用持续集成模式
* 设置为true, Karma将打开浏览器，执行测试并最后退出
*/

singleRun: false
});
};

 

如果没有下在全局的karma，则为了方便执行，在你的package.json里面script里面写入如下的两个属性：

"scripts": {
"test": "node node_modules/karma/bin/karma start",
"init": "node node_modules/karma/bin/karma init"
},

其中test是测试时候执行的，init是生成karma.conf.js配置文件执行的，此时执行npm run init 就会生成karma.conf.js文件配置，一路回车就行。你的文件夹的目录最好是下面这样的，

js文件是你写的js代码（待测试），test文件夹是你针对js文件夹里面每个文件写的测试代码。

2.下面就来写第一个测试代码吧，在js下面创建one.js，里面的是一个函数，如下：

function add(x,y){
　　return x+y;
}

然后在你的test文件夹下面创建one-test.js文件，里面的测试代码如下：

describe("测试加法", function () {//describe就是对这次测试的整体描述，如：加法测试

   it("3+5=8", function () {//it是对个测试的描述，如：3+5应该等于8

     expect(add(3, 5)).toEqual(8);//期待add（3,5）的结果等于8

   });

});

写好上述代码之后，并且在你的karma.conf.js的files里面引入：

files: [
　　"js/one.js",
　　"test/one-test.js"
],

，然后执行npm  run test，命令行不出现红色，并且会自动弹出浏览器代表执行成功。打开浏览器的debug，按下F12查看，可以看到console里面输出：

SUCCESS 测试加法 3+5=8

Skipped 0 tests

3.如何测试angular代码

首先在你的karma.conf.js文件中的files里面引入相应版本的angular和angular-mocks.js（重要）

3.1测试controller:

在js里面创建ng-demo.js:代码如下

var app = angular.module('demoApp', []);
//在测试之前要先引入angular以及对应版本的angular-mock
app.controller('test1Ctrl',function($scope){
　　$scope.name = "app"

　　$scope.num = 0;
　　$scope.incrementNum = function () {
　　　　$scope.num++;
　　}
})

然后在你的test文件夹创建ng-demo-test.js,代码如下：

/*beforeEach 用来做测试前的准备工作，
inject利用angular的依赖注入，将需要的模块,服务插入作用域。真正的测试代码在it函数里，*/

describe('第一个angular测试',function(){
　　var scope;

　　//beforeEach 表示在运行所有测试前的准备工作。
　　//这里生成demoApp 的module
　　beforeEach(module('demoApp'));//模拟我们的demoApp模块并注入我们自己的依赖

　　beforeEach(inject(function($rootScope,$controller){//inject解决依赖关系注入到一个函数。
　　　　//模拟生成scope, $rootScope是angular中的顶级scope，angular中每个controller中的
　　　　//scope都是rootScope new出来的
　　　　scope = $rootScope.$new();//把全局scope等于new出来的scope
　　　　//模拟生成controller并且注入已创建的空的 scope
　　　　$controller('test1Ctrl', {$scope: scope});//把这个全局的scope和测试的angular的controller里面的$scope连通
　　}))

　　it("scope里面的 name 为 app", function () {
　　　　expect(scope.name).toEqual('bpp');
　　})

　　it('incrementNum执行后，scope内的num变成1',function(){
　　　　scope.incrementNum()//执行scope内的incrementNum函数
　　expect(scope.num).toEqual(1);
})

})

在你的karma.conf.js的files引入这个两个文件，执行npm  run test即可；

3.2测试directive

var app = angular.module('demoApp', [])
　　.directive("unorderedList", function () {
　　　　return function (scope, element, attrs) {
　　　　var data = scope[attrs["unorderedList"]];

　　　　if (angular.isArray(data)) {
　　　　　　var listElem = angular.element("<ul>");
　　　　　　element.append(listElem);
　　　　　　for (var i = 0; i < data.length; i++) {
　　　　　　　　listElem.append(angular.element('<li>').text(data[i].name));
　　　　　　}
　　　　}
　　}
})

测试代码如下：

describe('directive的测试',function(){
　　var scope={},
　　compileServer;

　　beforeEach(module("demoApp"));

　　//我们需要一个叫做$compile的服务来完成实际的编译
　　beforeEach(inject(function ($rootScope, $compile) {
　　　　compileService = $compile;

　　　　//模拟scope里面的数据
　　　　scope.data = [
　　　　{ name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
　　　　{ name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
　　　　{ name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }];
　　}));

　　it("创建列表的元素", function () {
　　　　/*在要被测试的scope中，一个directive需要被compiled(也就是下面代码中的$compile(tpl)(scope);这句话在做的事情）*/
　　　　var elem = compileService("<div unordered-list='data'></div>")(scope);//$compile(html)(scope);
　　　　//我们将这个元素编译到一个作用域，它现在就可以被测试了

　　　　// var elem = compileFn(scope);

　　　　expect(elem.children("ul").length).toEqual(1);
　　　　expect(elem.find("li").length).toEqual(3);

　　　　expect(elem.find("li").eq(0).text()).toEqual("Apples");
　　　　expect(elem.find("li").eq(1).text()).toEqual("Bananas");
　　　　expect(elem.find("li").eq(2).text()).toEqual("Pears");
　　});
})

3.3测试filter

var app = angular.module('demoApp', []);

　　app.filter("labelCase", function () {
　　　　return function (value) {
　　　　　　return value.toUpperCase()
　　　　};
　　})

测试代码：

describe("Filter的测试", function () {

　　var filterInstance;

　　beforeEach(module("demoApp"));//模块

　　beforeEach(inject(function (labelCaseFilter) {
　　//引入需要测试的filter
　　　　filterInstance = labelCaseFilter;
　　}));

　　it("test phrase经过过滤器后变成 TEST PHRASE", function () {
　　　　var result = filterInstance("test phrase");
　　　　expect(result).toEqual("TEST PHRASE");
　　});

});