单元测试angular引导模态服务
unit test angular bootstrap modal service
我创建了一个通用的ModalService
,它用于两种不同类型的对话框。CancelDialog
和ErrorDialog
将根据传递给服务的参数弹出。
当功能正常工作时,我们为什么要进行单元测试?
。e这将显示一个ErrorDialog
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
一切都很好,但我坚持单元测试。这是正在工作的PLUNKER。请帮忙覆盖单元测试。
如何为openErrorModal
&openCancelModal
在以下服务
ModalService
// common modal service
validationApp.service('ModalService',
function($uibModal) {
return {
openModal: openModal
};
function openErrorModal(title, message, callback) {
$uibModal.open({
templateUrl: 'ErrorDialog.html',
controller: 'ErrorDialogCtrl',
controllerAs: 'vm',
backdrop: 'static',
size: 'md',
resolve: {
message: function() {
return message;
},
title: function() {
return title;
},
callback: function() {
return callback;
}
}
});
}
function openCancelModal(title, message, callback) {
$uibModal.open({
templateUrl: 'CancelDialog.html',
controller: 'ErrorDialogCtrl',
controllerAs: 'vm',
backdrop: 'static',
size: 'md',
resolve: {
message: function() {
return message;
},
title: function() {
return title;
},
callback: function() {
return callback;
}
}
});
}
function openModal(title, message, modalType, callback) {
if (modalType === "Error") {
openErrorModal(title, message, callback);
} else {
openCancelModal(title, message, callback);
}
}
}
);
如何单元测试onOk
, onContinue
&onDiscard
在以下控制器
DialogController
//controller fot dialog
validationApp.controller('ErrorDialogCtrl',
function($uibModalInstance, message, title, callback) {
alert('from controller');
var vm = this;
vm.message = message;
vm.onOk = onOk;
vm.onContinue = onContinue;
vm.onDiscard = onDiscard;
vm.callback = callback;
vm.title = title;
function onOk() {
$uibModalInstance.close();
}
function onContinue() {
$uibModalInstance.close();
}
function onDiscard() {
vm.callback();
$uibModalInstance.close();
}
});
您需要分别测试服务和控制器。对于控制器,您需要测试在调用控制器方法时是否调用uibModalInstance
的方法。当close
方法被调用时,您实际上不需要测试对话框是否关闭。这是那些实现uibModal的人的任务。
这里是对控制器的测试:
describe('ErrorDialogCtrl', function() {
// inject the module of your controller
beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
it('tests that close method is called on modal dialog', function() {
var $uibModalInstance = {
close: jasmine.createSpy('close')
};
var callback = function() {};
var controller = $controller('PasswordController', { $uibModalInstance: $uibModalInstance, message: {}, callback: callback });
controller.onOk();
expect($uibModalInstance.close).toHaveBeenCalled();
});
});
下面是service的简单测试:
describe('ModalService', function () {
var $injector;
var $uibModal;
// inject the module of your controller
beforeEach(module('app', function($provide) {
$uibModal = {
open: jasmine.createSpy('open')
};
$provide.value('$uibModal', $uibModal);
}));
beforeEach(inject(function (_$injector_) {
$injector = _$injector_;
}));
it('tests that openErrorModal is called', function () {
var modalService = $injector.get('ModalService');
modalService.openModal(null, null, "Error");
expect($uibModal.open).toHaveBeenCalledWith(jasmine.objectContaining({
controller: "ErrorDialogCtrl"
}));
});
});
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 包含数据库中相关信息的开放模态
- bootstrap消除模态并显示另一个模态
- 模态提示-如何重写此代码
- 将数据传递给由服务创建的Ionic模态
- 从 Angular 模态服务中的模态主体模板返回数据
- 角度模态服务未知提供商
- 使用角度模态服务(AngularJS)自定义模态
- AngularJS模态服务停止工作
- 如何在角度模态服务中将输入值传递给控制器
- 角度模态>Ctrl+gt;服务>Ctrl继承不起作用
- 如何从控制器监视服务中的变量以打开模态
- AngularStrap——从一个服务中调用一个模态
- 将当前控制器实例传递给模态服务
- 单元测试angular引导模态服务
- 基于 JavaScript 的模态/弹出服务(如 KissInsights 和 Hello Bar)如何工作