我正在为一个 Controller 编写单元测试,该 Controller 触发 $modal
并使用返回的 promise 来执行一些逻辑。我可以测试触发 $modal 的父 Controller ,但我一生都无法弄清楚如何模拟成功的 promise 。
我尝试了多种方法,包括使用 $q
和 $scope.$apply()
来强制解决 promise 。但是,我得到的最接近的是将类似于 this SO post 中的最后一个答案的内容放在一起;
我已经用“旧” $dialog
模态多次看到这个问题。
我找不到太多关于如何使用"new"$dialog
模态来做到这一点的信息。
一些指针将不胜感激。
为了说明这个问题,我使用了 example provided in the UI Bootstrap docs ,并进行了一些小的编辑。
Controller (主要和模态)
'use strict';
angular.module('angularUiModalApp')
.controller('MainCtrl', function($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function() {
$scope.modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function() {
return $scope.items;
}
}
});
$scope.modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
})
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
View (main.html)
<div ng-controller="MainCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I is a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
测试
'use strict';
describe('Controller: MainCtrl', function() {
// load the controller's module
beforeEach(module('angularUiModalApp'));
var MainCtrl,
scope;
var fakeModal = {
open: function() {
return {
result: {
then: function(callback) {
callback("item1");
}
}
};
}
};
beforeEach(inject(function($modal) {
spyOn($modal, 'open').andReturn(fakeModal);
}));
// Initialize the controller and a mock scope
beforeEach(inject(function($controller, $rootScope, _$modal_) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope,
$modal: _$modal_
});
}));
it('should show success when modal login returns success response', function() {
expect(scope.items).toEqual(['item1', 'item2', 'item3']);
// Mock out the modal closing, resolving with a selected item, say 1
scope.open(); // Open the modal
scope.modalInstance.close('item1');
expect(scope.selected).toEqual('item1');
// No dice (scope.selected) is not defined according to Jasmine.
});
});
最佳答案
当你窥探 beforeEach 中的 $modal.open 函数时,
spyOn($modal, 'open').andReturn(fakeModal);
or
spyOn($modal, 'open').and.returnValue(fakeModal); //For Jasmine 2.0+
您需要返回 $modal.open 通常返回的模拟,而不是 $modal 的模拟,它不包括您在
open
模拟中布置的 fakeModal
函数。假模态必须有一个 result
对象,该对象包含一个 then
函数来存储回调(在单击 OK 或 Cancel 按钮时调用)。它还需要一个 close
函数(模拟在模态上单击 OK 按钮)和一个 dismiss
函数(模拟在模态上单击 Cancel 按钮)。 close
和 dismiss
函数在调用时会调用必要的回调函数。将
fakeModal
更改为以下内容,单元测试将通过:var fakeModal = {
result: {
then: function(confirmCallback, cancelCallback) {
//Store the callbacks for later when the user clicks on the OK or Cancel button of the dialog
this.confirmCallBack = confirmCallback;
this.cancelCallback = cancelCallback;
}
},
close: function( item ) {
//The user clicked OK on the modal dialog, call the stored confirm callback with the selected item
this.result.confirmCallBack( item );
},
dismiss: function( type ) {
//The user clicked cancel on the modal dialog, call the stored cancel callback
this.result.cancelCallback( type );
}
};
此外,您可以通过在取消处理程序中添加要测试的属性来测试取消对话框案例,在本例中为
$scope.canceled
:$scope.modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$scope.canceled = true; //Mark the modal as canceled
$log.info('Modal dismissed at: ' + new Date());
});
设置取消标志后,单元测试将如下所示:
it("should cancel the dialog when dismiss is called, and $scope.canceled should be true", function () {
expect( scope.canceled ).toBeUndefined();
scope.open(); // Open the modal
scope.modalInstance.dismiss( "cancel" ); //Call dismiss (simulating clicking the cancel button on the modal)
expect( scope.canceled ).toBe( true );
});
关于unit-testing - 在 AngularJS 单元测试中模拟 $modal,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21214868/