单元测试模板（$ uibModal）

我有一个非常简单的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承诺永远不会解决。我可以做一些解决方法，比如将expect换成$timeout并做$timeout.flush()，但不知道这是否正确，甚至这样我仍然无法清理（afterEach）关闭模式并准备测试另一条消息。

来源

2017-02-24 jonasnas

正确的方法是打开模式窗口查看消息并关闭它，并且当引导程序使用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>

来源

2017-02-25 09:28:40 Gaurav

第一测试通过，但第二个失败，消息'应为“新messagehello”等于“新message'.' 'modal.close（）'不会将模式从dom中删除。你有线索为什么会发生？ – jonasnas

，为什么我需要模块（'uib/template/modal/window.html'）？ – jonasnas

我提供的代码片段，都是测试通过。你可以提供codepen/jsfiddle等，以便我可以查看该内容。关于你的其他问题，你需要包含'module（'uib/template/modal/window.html'）'，因为当你在内部调用'$ uibModal.open（）'调用时，它会获取模板'window.html' 。 – Gaurav

单元测试模板（$ uibModal）

回答

相关问题