角模态服务中的单元测试模板（$ uibModal）

Question

我有一个非常简单的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 ）关闭模式，并准备好测试另一条消息。

Answer 1

正确的方法是打开模式窗口以查找消息并关闭消息，并且由于引导程序将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>

角模态服务中的单元测试模板（$ uibModal）

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-02-25 09:28:40

角模态服务中的单元测试模板（$ uibModal）

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-02-25 09:28:40

解决方案1
1 已采纳 2017-02-25 09:28:40