测试angular中的controller

本文深入解析AngularJS控制器的核心作用,包括业务逻辑处理、数据模型和页面元素展示,并详细说明如何通过依赖注入服务来实现数据获取和操作。文章还提供了在实际项目中使用AngularJS控制器和相关服务的示例,以及如何进行单元测试以确保服务的正确性和高效性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

angularjs中的controller主要负责业务逻辑的处理、数据模型,页面元素的展示等,通常一个controller会依赖一个或者多个service,通过service从数据库拉数据后保存到controller,controller的简陋的例子如下:

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方法,关于Promise的更多讨论,有兴趣的可以戳 http://hcc0926.blog.51cto.com/172833/1614576 http://hcc0926.blog.51cto.com/172833/1614586 http://hcc0926.blog.51cto.com/172833/1554745

测试依赖service的controller

通常来讲,在单元级别的测试中,我们不希望Service真正的发送请求,只是需要一个模拟的service,这个service只存在于我们要测试的controller中。我们先看一个例子:

var app = angular.module(‘MyApp’);

describe(“EventController”, function() {
var scope, q;
var controllerFactory;
var mockSerivce = {};
var events = [“event1”, “event2”, “event3”];

//注入controller所需要的angular服务,
beforeEach(function() {
module(“MyApp”);
inject(function( rootScope, controller, q) {  
          controllerFactory =
controller;
scope = rootScope. new();
q = $q;
});
});

//mock一个service,通过jasmine的createSpy方法创建一个替代方法,当调用service的相关方法时返//回这个替代方法,数据被包含到promise中,
beforeEach(function() {
var deferred = q.defer();
deferred.resolve(events);
mockSerivce.getEvents = jasmine.createSpy(‘getEvents’);
mockSerivce.getEvents.andReturn(deferred.promise);
});

//通过这个方法实例化controller
function initController() {
return controllerFactory(‘EventController’, {
$scope: scope,
EventService: mockSerivce
});
}

//每次测试controller都要实例化一次controller
it(“should have a events list”, function() {
initController();
scope.$digest();
expect(scope.events.length).toEqual(3);
expect(scope.events).toEqual(events);
});
});
参考:http://icodeit.org/2013/12/how-to-test-controller-in-angularjs/

http://nathanleclaire.com/blog/2013/12/13/how-to-unit-test-controllers-in-angularjs-without-setting-your-hair-on-fire/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值