Mocked function not found in AngularUI modal controller unit test - angularjs

Question

I'm using Angular-Bootstrap modals and have a basic controller like so:
.controller('DashboardHelpController', ['$scope', '$uibModal', function ($scope, $uibModal) {
var dhc = this;
dhc.open = function (size, resource) {
var modalInstance = $uibModal.open({
templateUrl: 'resourcePlayModal.html',
controller: 'ModalInstanceCtrl as mic',
size: size,
resolve: {
resource: function () {
return resource;
}
}
});
};
}])
It calls a standard modal instance controller:
.controller('ModalInstanceCtrl', ['$uibModalInstance', 'resource', function ($uibModalInstance, resource) {
this.resource = resource;
this.cancel = function () {
$uibModalInstance.dismiss();
};
}])
And here's my unit test, modeled after another SO post:
describe('Modal controller', function () {
var modalCtrl, scope, modalInstance;
beforeEach(module('MyApp'));
// initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
modalInstance = {
// create a mock object using spies
close: jasmine.createSpy('modalInstance.close'),
dismiss: jasmine.createSpy('modalInstance.dismiss'),
result: {
then: jasmine.createSpy('modalInstance.result.then')
}
};
modalCtrl = $controller('DashboardHelpController', {
$scope: scope,
$uibModalInstance: modalInstance
});
}));
it('should instantiate the mock controller', function () {
expect(modalCtrl).not.toBeUndefined();
});
it('should have called the modal dismiss function', function () {
scope.cancel;
expect(modalInstance.dismiss).toHaveBeenCalled();
});
});
The problem is that the cancel function isn't found on the scope:
Expected spy modalInstance.dismiss to have been called with [ 'cancel'
] but it was never called.
UPDATE: I had originally attempted to call cancel as a function:
it('should have called the modal dismiss function', function () {
scope.cancel();
expect(modalInstance.dismiss).toHaveBeenCalled();
});
That didn't work. My code above is an attempt to solve the original problem:
TypeError: scope.cancel is not a function
Things are complicated a bit my my use of the Controller as syntax, but this should work. Thanks for any help.

Answer 1

scope.cancel is a function, but you aren't invoking it as such.
it('should have called the modal dismiss function', function () {
scope.cancel();
expect(modalInstance.dismiss).toHaveBeenCalledWith();
});
In addition, scope.cancel() is never defined on DashboardHelpController, even though that is the scope that you create for your tests. You need to create a method on your dashboard controller that calls through to the modal instance close method after the modalInstance has been created.
var modalInstance = $uibModal.open({
...
dhc.cancel = function () {
modalInstance.dismiss();
}