角度模式服务($uibModal)中的单元测试模板
角度模式服务($uibModal)中的单元测试模板
提问于 2017-02-25 07:11:08
我有一个非常简单的service.show()，它基本上通过一些配置调用$uibModal并返回模态实例
function modalService($uibModal) {
return {
show(message) {
return $uibModal.open({
bindToController: true,
controllerAs: '$ctrl',
template: "<div id='message'>{{$ctrl.message}}</div>",
controller: [function() {
this.message = message;
}]
});
}
}
}我想写一个测试来验证实际的模式，如果它包含预期的消息。如下所示：
it('should show correct message', (done) => {
modal = modalService.show('hello');
modal.rendered.then(()=> {
expect($('#message').text()).toBe('hello');
done()
});
});但是rendered promise从来没有解决过。我可以做一些变通方法，比如将expect包装到$timeout中并执行$timeout.flush()，但不确定这种方式是否正确，即使这样，我仍然无法进行清理(afterEach)来关闭模式并准备测试另一条消息。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-25 17:28:40
正确的方法是打开模式窗口，查找消息并将其关闭，由于bootstrap使用ngAnimate作为动画，因此我们必须包含ngAnimateMock模块来刷新挂起的动画。
检查解决方案的以下代码：
var myApp = angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
myApp.factory('modalService', ['$uibModal', function($uibModal) {
return {
show(message) {
return $uibModal.open({
bindToController: true,
controllerAs: '$ctrl',
template: '<div id="message">{{$ctrl.message}}</div>',
controller: [function() {
this.message = message;
}]
});
}
}
}]);
describe('modalService service', function() {
describe('modalService', function() {
var modalService;
var $rootScope;
var $animate;
beforeEach(function() {
module('ngAnimateMock')
module('uib/template/modal/window.html')
module('myApp');
});
beforeEach(inject(function(_$rootScope_, _modalService_, _$animate_) {
$rootScope = _$rootScope_;
modalService = _modalService_;
$animate = _$animate_;
}));
it('should open the dialog with the correct message', () => {
var modal = modalService.show('hello');
$rootScope.$digest();
// Finish the animation.
$animate.flush();
expect($('#message').text()).toEqual('hello');
// Close the dialog.
modal.close();
$rootScope.$digest();
// Finish the animation.
$animate.flush();
});
it('again should show the correct message', () => {
var modal = modalService.show('new message');
$rootScope.$digest();
// Finish the animation.
$animate.flush();
expect($('#message').text()).toEqual('new message');
// Close the dialog.
modal.close();
$rootScope.$digest();
// Finish the animation.
$animate.flush();
});
});
});<body>
<!-- because we are testing our controller and not running we don't need a controller or even a module -->
<!-- so there is no ng-app or ng-controller in the markup -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css">
<!-- the order that these files load is critical, think twice before changing -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-mocks.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<h2>Finished jasmine-unit-test</h2>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42449835
复制相关文章
相似问题
腾讯云开发者
