I have a controller that calls $uibModal.open to pop a ui-bootstrap modal. The controller looks like this:
(function () {
'use strict';
angular
.module('app')
.controller('MyCtrl', myCtrl);
function myCtrl($uibModal) {
var vm = this;
vm.showModal = showModal;
vm.results = [];
function showModal() {
var modalInstance = $uibModal.open({
templateUrl: '/mymodal.html',
controller: 'ModalCtrl ',
controllerAs: 'modalCtrl',
});
modalInstance.result.then(function (myResult) {
// I want to test that my code here gets called and behaves as expected. shortened for brevity
vm.results.push(myResult);
});
}
}
})();
I have successfully tested opening the modal with correct config options. But I would like to test the result of the modal as some logic is executed when this happens but I can't seem to figure out how I can hook into the result or get it to even execute in my tests
Tests with some setup code omitted
(function() {
'use strict';
describe('myPageWithModal', function() {
//mock edit modal
var mockModalInstance = {
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 );
}
}
var mockModalOptions = {
controller: 'ModalCtrl ',
controllerAs: 'modalCtrl',
templateUrl: '/mymodal.html',
}
describe('myModal', function() {
var actualModalOptions;
beforeEach(function() {
ctrl = //omitted
//set up a spy to listen for when modal dialogs are opened and return our mock modal
spyOn($uibModal, 'open').and.callFake(function(options) {
actualModalOptions = options;
return mockModalInstance;
});
});
it('should open edit modal with options', function() {
ctrl.showModal();
expect($uibModal.open).toHaveBeenCalledWith(mockModalOptions);
});
it('should close modal and execute the modalInstance.result logic', function() {
});
});
});
})();
Considering that $uibModal.open
was mocked in current spec to return mockModalInstance
, mockModalInstance
should be freshly defined for each spec where it is used, and mockModalInstance.result
should be a promise:
var modalResult = {};
var mockModalInstance = { result: $q.resolve(modalResult) };
spyOn(mockModalInstance.result, 'then').and.callThrough();
spyOn($uibModal, 'open').and.returnValue(mockModalInstance);
ctrl.showModal();
$rootScope.$digest();
expect(mockModalInstance.result.then).toHaveBeenCalledWith(jasmine.any(Function));
expect(ctrl.results.length).toBe(1);
expect(ctrl.results[0]).toBe(modalResult);