category: 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....

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....