如何测试 Service - Angularjs

Service的典型示例 在AngularJS中,Service都是单例的实体,通常会将Service作为向后台交互的数据提供者,所有的需要数据的组件只需要依赖于这个Service即可。 var app = angular.module('MyApp', []); app.factory('SearchSettingService', ['$http', '$q', function($http, $q) { return { setting: function() { var deferred = $q.defer(); $http.get('/settings.json').success(function(result) { deferred.resolve(result); }).error(function(result) { deferred.reject("network error"); }); return deferred.promise; } }; }]); $httpBackend 测试的时候,我们不需要真实的发送HTTP请求来获取数据。如果可以只测试Service的逻辑,当发送请求时,我们将这个请求拦截下来,然后返回一个预定义好的数据即可: it('should have settings from http request', function() { var result; var expected = { "period": "day", "date": "Sat Dec 21 12:56:53 EST 2013", }; httpBackend.expectGET('/settings.json').respond(expected); var promise = settingService.setting(); promise.then(function(data) { result = data; }); httpBackend....

January 4, 2014 · 2 min · 邱俊涛 | Juntao Qiu

如何测试 Controller - Angularjs

AngularJS中的一个典型的Controller 在AngularJS中,Controller主要用于hold一些跟view的有关的状态,以及数据模型,比如界面上某些元素是否展示,以及展示那些内容等。通常来说,Controller会依赖与一个Service来提供数据: app.controller('EventController', ['$scope', 'EventService', function($scope, EventService) { EventService.getEvents().then(function(events) { $scope.events = events; }); }]); 而service本身则需要通过向后台服务发送请求来获取数据: app.factory('EventService', ['$http', '$q', function($http, $q) { return { getEvents: function() { var deferred = $q.defer(); $http.get('/events.json').success(function(result) { deferred.resolve(result); }).error(function(result) { deferred.reject(result); }); return deferred.promise; } }; }]); 通常的做法是返回一个promise对象,然后当数据准备完整之后,controller的then会被执行。 那么对于这种情况(在AngularJS中,算是一个非常典型的场景),我们如何进行单元测试呢? 测试依赖与Service的Controller 通常来讲,在单元级别的测试中,我们肯定不希望Service真正的发送请求,这样就变成了集成测试,而且前端的开发完全依赖与后台的开发进度/稳定程度等。 所以我们需要做一个假的Service,这个假的Service仅仅在测试中存在: var app = angular.module('MyApp'); describe("EventController", function() { var scope, q; var controllerFactory; var mockSerivce = {}; var events = ["Event1", "Event2", "Event3"]; beforeEach(function() { module("MyApp"); inject(function($rootScope, $controller, $q) { controllerFactory = $controller; scope = $rootScope....

December 28, 2013 · 1 min · 邱俊涛 | Juntao Qiu