如何在 AngularJS 中对控制器进行单元测试

开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量，从而确保更稳定的研发，即使需要重构时也更有信心。

测试驱动开发流程图

AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试实例就能说明。就像AngularJS这样的项目虽然都说单元测试 很简单但真正做好却不容易。即使官方文档中以提供了详尽的实例，但在我的实际应用中却还是很有挑战。这里我就简单示范一下我是怎么操作的吧.

Instant Karma

Karma是来Angular团队针对JavaScript开发的一个测试运行框架。它很方便的实现了自动执行测试任务从而替代了繁琐的手工操作（好比回归测试集或是加载目标测试的依赖关系）Karma 和Angular的协作就好比花生酱和果冻.

只需要在Karma中定义好配置文件启动它，接下来它就会在预期的测试环境下的自动执行测试用例。你可以在配置文件中制定相关的测试环境。angular-seed,是我强烈推荐的可以快速实施的方案。在我近期的项目中Karma 的配置如下：

module.exports = function(config) { 


    config.set({ 


        basePath: '../', 


 


        files: [ 


            'app/lib/angular/angular.js', 


            'app/lib/angular/angular-*.js', 


            'app/js/**/*.js', 


            'test/lib/recaptcha/recaptcha_ajax.js', 


            'test/lib/angular/angular-mocks.js', 


            'test/unit/**/*.js' 


        ], 


 


        exclude: [ 


            'app/lib/angular/angular-loader.js', 


            'app/lib/angular/*.min.js', 


            'app/lib/angular/angular-scenario.js' 


        ], 


 


        autoWatch: true, 


 


        frameworks: ['jasmine'], 


 


        browsers: ['PhantomJS'], 


 


        plugins: [ 


            'karma-junit-reporter', 


            'karma-chrome-launcher', 


            'karma-firefox-launcher', 


            'karma-jasmine', 


            'karma-phantomjs-launcher' 


        ], 


 


        junitReporter: { 


            outputFile: 'test_out/unit.xml', 


            suite: 'unit' 


        } 


 


    }) 


} 

这个跟angular-seed的默认配置类似只不过有以下几点不同：

• 需要更改浏览器从Chrome 转到PhantomJS, 这样每次跳转时无需再打开新的浏览器窗口，但在OSX系统会有窗口延迟。所以这个插件还有浏览器设置都做了更改。

• 由于我的应用需要引用Google的Recaptcha服务因此添加了依赖的recaptcha_ajax.js小文件。这个小配置就像在Karma的配置文件中添加一行代码那么简单。

autoWatch确实是个很酷的设置，它会让Karma在有文件更改时自动回归你的测试用例。你可以这样安装Karma：

npm install karma 

angular-seed 提供了一个简单的脚本inscripts/test.sh去触发Karma的测试。

用Jasmine设计测试用例

当使用Jasmine----一种行为驱动开发模式的JavaScript测试框架为Angular设计单元测试用例时大部分的资源都已可获取。

这也就是我接下来要说的话题。

如果你要对AngularJS controller做单元测试可以利用Angular的依赖注入dependency injection 功能导入测试场景中controller需要的服务版本还能同时检查预期的结果是否正确。例如，我定义了这个controller去高亮需要导航去的那个页签：

app.controller('NavCtrl', function($scope, $location) { 


    $scope.isActive = function(route) { 


        return route === $location.path(); 


    }; 


}) 

如果想要测试isActive方法，我会怎么做呢？我将 检查$locationservice 变量是否返回了预期值，方法返回的是否预期值。因此在我们的测试说明中我们会定义好局部变量保存测试过程中需要的controlled版本并在需要时注入 到对应的controller当中。然后在实际的测试用例中我们会加入断言来验证实际的结果是否正确。整个过程如下：

describe('NavCtrl', function() { 


    var $scope, $location, $rootScope, createController; 


 


    beforeEach(inject(function($injector) { 


        $location = $injector.get('$location'); 


        $rootScope = $injector.get('$rootScope'); 


        $scope = $rootScope.$new(); 


 


        var $controller = $injector.get('$controller'); 


 


        createController = function() { 


            return $controller('NavCtrl', { 


                '$scope': $scope 


            }); 


        }; 


    })); 


 


    it('should have a method to check if the path is active', function() { 


        var controller = createController(); 


        $location.path('/about'); 


        expect($location.path()).toBe('/about'); 


        expect($scope.isActive('/about')).toBe(true); 


        expect($scope.isActive('/contact')).toBe(false); 


    }); 


}); 

使用整个基本的结构，你就能设计各种类型的测试。由于我们的测试场景使用了本地的环境来调用controller,你也可以多加上一些属性接着执行一个方法清除这些属性，然后再验证一下属性到底有没有被清除。

$httpBackendIs Cool

那么要是你在调用$httpservice请求或是发送数据到服务端呢？还好，Angular提供了一种

$httpBackend的mock方法。这样的话，你就能自定义服务端的响应内容，又或是确保服务端的响应结果能和单元测试中的预期保持一致。

具体细节如下：

describe('MainCtrl', function() { 


    var $scope, $rootScope, $httpBackend, $timeout, createController; 


    beforeEach(inject(function($injector) { 


        $timeout = $injector.get('$timeout'); 


        $httpBackend = $injector.get('$httpBackend'); 


        $rootScope = $injector.get('$rootScope'); 


        $scope = $rootScope.$new(); 


 


 


        var $controller = $injector.get('$controller'); 


 


        createController = function() { 


            return $controller('MainCtrl', { 


                '$scope': $scope 


            }); 


        }; 


    })); 


 


    afterEach(function() { 


        $httpBackend.verifyNoOutstandingExpectation(); 


        $httpBackend.verifyNoOutstandingRequest(); 


    }); 


 


    it('should run the Test to get the link data from the go backend', function() { 


        var controller = createController(); 


        $scope.urlToScrape = 'success.com'; 


 


        $httpBackend.expect('GET', '/slurp?urlToScrape=http:%2F%2Fsuccess.com') 


            .respond({ 


                "success": true, 


                "links": ["http://www.google.com", "http://angularjs.org", "http://amazon.com"] 


            }); 


 


        // have to use $apply to trigger the $digest which will 


        // take care of the HTTP request 


        $scope.$apply(function() { 


            $scope.runTest(); 


        }); 


 


        expect($scope.parseOriginalUrlStatus).toEqual('calling'); 


 


        $httpBackend.flush(); 


 


        expect($scope.retrievedUrls).toEqual(["http://www.google.com", "http://angularjs.org", "http://amazon.com"]); 


        expect($scope.parseOriginalUrlStatus).toEqual('waiting'); 


        expect($scope.doneScrapingOriginalUrl).toEqual(true); 


    }); 


});