angularjsでのbootstrap-uiダイアログ要素の作成を単体テストするためにジャスミンを使用する方法を理解するのに苦労しています。コントローラ：
MyModule.controller('BaseCtrl', ['$scope', '$routeParams', '$location', '$http', '$filter', '$data', '$locationParse', '$dialog', function ($scope, $routeParams, $location, $http, $filter, $data, $locationParse, $dialog) {
//[...Loads of other stuff...]
//method in question:
$scope.delete = function() {
var boxResult;
if ($scope.record._id) {
var msgBox = $dialog.messageBox('Delete Item', 'Are you sure you want to delete this record?', [{
label: 'Yes',
result: 'yes'
}, {
label: 'No',
result: 'no'
}]);
msgBox.open()
.then(function(result) {
if (result === 'yes') {
$http.delete('api/' + $scope.modelName + '/' + $scope.id).success(function() {
if (typeof $scope.dataEventFunctions.onAfterDelete === "function") {
$scope.dataEventFunctions.onAfterDelete(master);
}
$location.path('/' + $scope.modelName);
});
}
if (result === 'no') {
boxResult = result;
};
});
//can't close the msxBox from within itself as it breaks it. OK for now. TODO Refactor.
if (boxResult === 'no') {
msgBox.close();
}
}
}
}]);
テスト済み:
describe('"BaseCtrl"', function(){
var $httpBackend;
beforeEach(function() {
angular.mock.module('MyModule');
});
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
describe('deletion confirmation modal', function() {
var $scope, ctrl, $dialog, fakeDialog;
beforeEach(function() {
inject(function(_$httpBackend_, $rootScope, $routeParams, $controller, $location, _$dialog_){
$dialog = _$dialog_;
fakeDialog = function (title, msg, btns) {
return {
open: function () {
return {
then: function (callback) {
callback('ok'); // 'ok' will be set to param result
}
}
}
}
};
$httpBackend = _$httpBackend_;
$httpBackend.whenGET('api/schema/collection').respond({"email":{"enumValues":[],"regExp":null,"path":"email","instance":"String","validators":[],"setters":[],"getters":[],"options":{"form":{"directive":"email-field"}},"_index":null,"$conditionalHandlers":{}}});
$location.$$path = '/collection/new';
$scope = $rootScope.$new();
ctrl = $controller("BaseCtrl", {$scope: $scope, $dialog: $dialog});
$httpBackend.flush();
spyOn($dialog, 'messageBox').andReturn(fakeDialog);
});
});
it('should inject bootstrap-ui dialog controller', function() {
expect($dialog).toBeDefined();
});
it('should be displayed when $scope.delete() is called', function() {
$scope.record._id = 1;
$scope.delete();
// console.log(dialog.messageBox);
// expect(dialog.open).toHaveBeenCalled();
});
});
});
エラーが発生します：
PhantomJS 1.9 (Mac) "BaseCtrl" deletion confirmation modal should be displayed when $scope.delete() is called FAILED
TypeError: 'undefined' is not a function (evaluating 'msgBox.open()')
at /Users/steveclements/work/live/forms-angular/app/js/controllers/base.js:632
at /Users/steveclements/work/live/forms-angular/test/unit/baseControllerSpec.js:735
fakeDialog メソッド (およびその他の関連するテスト コード) を削除すると、エラーが発生します。
PhantomJS 1.9 (Mac) "BaseCtrl" deletion confirmation modal should be displayed when $scope.delete() is called FAILED
TypeError: 'undefined' is not an object (evaluating 'msgBox.open')
at /Users/steveclements/work/live/forms-angular/app/js/controllers/base.js:632
at /Users/steveclements/work/live/forms-angular/test/unit/baseControllerSpec.js:735
「msgBox.open」と「msgBox.open()」の違いなので、モックが問題だとは思いません。これに関連する他のSOの回答についてかなり読んだことがありますが、どこが間違っているのかわかりません。