如何举行angular的单元测试？

angular使用karma进行单元测试.

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

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

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

以上就是如何举行angular的单元测试？的详细内容，更多请关注易知道|edz.cc其它相关文章！