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

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

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

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即可；

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");
});

});