使用 Karma/Jasmine 对 modalInstance 控制器进行单元测试 [英] Unit testing a modalInstance controller with Karma / Jasmine
问题描述
快速&这篇文章末尾的脏解决方案
我使用的是来自 AngularUI-Bootstrap 的模态窗口，其方式与网站上的解释方式相同，只是我拆分了文件.因此我有:
I am using a modal window from AngularUI-Bootstrap in the same way that it is explained on the website, except that I splitted files. Therefore I have :
调用Controller.js:
$scope.delete = function () {
if ($scope.selected.length > 0) {
// [...]
// preparing data
// [...]
var modalInstance = $modal.open({
templateUrl: 'views/modalView.html',
controller: 'modalCtrl',
resolve: {
itemArray: function () {
return $scope.selected;
}
}
});
modalInstance.result.then(function (confirm) {
if (confirm === true) {
// [...]
// treat
// [...]
}
});
}
};
modalController.js :
myAppControllers.controller('modalCtrl',
function ($scope, $modalInstance, itemArray) {
$scope.accept = function () {
$modalInstance.close(true);
};
$scope.reject = function () {
$modalInstance.close(false);
};
$scope.itemArray = itemArray;
});
当我使用 Karma 测试此代码时(在 karma 配置文件中加载了 ui-bootstrap-tpls.min.js 文件)，我收到以下错误:错误:[$injector:unpr] [http://errors.angularjs.org/1.2.15-build.2389+sha.c5f2f58/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance]1 at Error (native)，意味着jasmine 无法找到 $modalInstance 的提供者.
and when I test this code with Karma (with the ui-bootstrap-tpls.min.js file loaded in the karma configuration file), I get the following error : Error: [$injector:unpr] [http://errors.angularjs.org/1.2.15-build.2389+sha.c5f2f58/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance]1 at Error (native), meaning that jasmine doesn't manage to find the provider for $modalInstance.
我什至没有在这个控制器上测试东西，还没有，但这是我的茉莉花测试文件:
I do not even test stuff on this controller, not yet, but here is my jasmine test file :
testModalController.js :
describe('Controller: modalCtrl', function () {
beforeEach(module('myApp'));
var Ctrl;
var scope;
// Initialize the controller and a mock scope
beforeEach(inject(
function ($controller, $rootScope) {
scope = $rootScope.$new();
Ctrl = $controller('modalCtrl', { $scope: scope });
})
);
describe('Initial state', function () {
it('should instantiate the controller properly', function () {
expect(Ctrl).not.toBeUndefined();
});
it('should initialize its values properly', function () {
});
});
});
你对这个问题有任何线索吗?这不是我使用(和测试)的第一个外部"模块，我做了与其他模块相同的事情，只是这次它不起作用，我不知道为什么.
Have you got any clue about this problem ? It's not the first "external" module that I use (and test), and I did the same stuff than for the others, except that this time it doesn't work and I have no idea why.
==========================================
快速&可能是肮脏的解决方案:
好的，基于 Jasmine 控制器实例化中的作用域模拟方法，我想出了如何解决"我的问题，但这可能很脏，所以如果你找到更好的方法，请随时发表评论我的意图.
Okay, so based on the scope mocking method in the controller instantiation of Jasmine, I figured out how I could "solve" my problem, but it's probably quite dirty, so feel free to comment if you find a better way to do what I intend.
testModalController.js :
describe('Controller: modalCtrl', function () {
beforeEach(module('myApp'));
var Ctrl;
var scope;
var modalInstance;
// Initialize the controller and a mock scope
beforeEach(inject(
function ($controller, $rootScope, _$modal_) {
scope = $rootScope.$new();
modalInstance = _$modal_.open({
templateUrl: 'views/modalView.html'
});
Ctrl = $controller('modalCtrl', {
$scope: scope,
$modalInstance: modalInstance,
itemArray: function () { return ['a', 'b', 'c']; }
});
})
);
describe('Initial state', function () {
it('should instantiate the controller properly', function () {
expect(Ctrl).not.toBeUndefined();
});
it('should initialize its values properly', function () {
});
});
});
这样，Jasmine 不再搜索提供者，因为您已经注入了应该需要这些提供者的项目.它有效，但我相信它可以以更好的方式完成...
This way, Jasmine doesn't search for providers anymore, because you already injected the items that are supposed to be needing those providers. It works, but I believe it could be done in a better way...
推荐答案
我只是通过创建模拟 modal 和 modalInstance 对象并验证它们已被调用来解决这个问题通过我的控制器代码.由于 modal 和 modalInstance 是第三方库的一部分，我们没有责任测试它们是否正常工作 - 相反，我们有责任测试调用图书馆工作正常.
I am solving this by just creating mock modal and modalInstance objects and verifying that they have been called by my controller code. Since modal and modalInstance are part of a third party library, it's not our responsibility to test that they work properly - rather, it's our responsibility to test that our code which calls the library is working ok.
使用您的示例:
describe('Controller: modalCtrl', function () {
beforeEach(module('myApp'));
var Ctrl;
var scope;
var modalInstance;
// Initialize the controller and a mock scope
beforeEach(inject(
function ($controller, $rootScope) { // Don't bother injecting a 'real' modal
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')
}
};
Ctrl = $controller('modalCtrl', {
$scope: scope,
$modalInstance: modalInstance,
itemArray: function () { return ['a', 'b', 'c']; }
});
})
);
describe('Initial state', function () {
it('should instantiate the controller properly', function () {
expect(Ctrl).not.toBeUndefined();
});
it('should close the modal with result "true" when accepted', function () {
scope.accept();
expect(modalInstance.close).toHaveBeenCalledWith(true);
});
it('should close the modal with result "false" when rejected', function () {
scope.reject();
expect(modalInstance.close).toHaveBeenCalledWith(false);
});
});
});
这样，我们就不需要对 Angular-UI 对象有任何依赖，而且我们的单元测试很好且是独立的.
This way, we don't really need any dependency on the Angular-UI objects and our unit tests are nice and isolated.
这篇关于使用 Karma/Jasmine 对 modalInstance 控制器进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
