angularのコントロールをテストする
2684 ワード
Angularjsのcontrollerは主にビジネスロジックの処理、データモデル、ページ要素の展示などを担当しており、通常、1つのcontrollerは1つ以上のサービスに依存し、サービスを通じてデータベースからデータを引いてcontrollerに保存され、controllerの粗末な例は以下の通りである.
実際のプロジェクトのサービスは、次のようになります.
通常は、データのロードが完了した後にcontrollerのthenメソッドを実行するPromiseを返します.Promiseの詳細については、興味のあるスタンプを押すことができます.http://hcc0926.blog.51cto.com/172833/1614576 http://hcc0926.blog.51cto.com/172833/1614586 http://hcc0926.blog.51cto.com/172833/1554745
サービス依存コントローラのテスト
通常、ユニットレベルのテストでは、サービスが本当に要求を送信することを望んでいません.シミュレーションされたサービスが必要です.このサービスは、テストするcontrollerにのみ存在します.まず例を見てみましょう
参照先: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/
app.controller('EventController',['$scope','EventService',function($scope,EventService){ EventService.getEvents().then(function(events){
$scope.events=events;
});
}]);
実際のプロジェクトのサービスは、次のようになります.
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;
}
};
}]);
通常は、データのロードが完了した後にcontrollerのthenメソッドを実行するPromiseを返します.Promiseの詳細については、興味のあるスタンプを押すことができます.http://hcc0926.blog.51cto.com/172833/1614576 http://hcc0926.blog.51cto.com/172833/1614586 http://hcc0926.blog.51cto.com/172833/1554745
サービス依存コントローラのテスト
通常、ユニットレベルのテストでは、サービスが本当に要求を送信することを望んでいません.シミュレーションされたサービスが必要です.このサービスは、テストする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/