Question

为了轻松创建modal，我想要一个只需要一个模板的指令，然后创建一个按钮，打开一个以模板为内容的模态。

<script type="text/ng-template" id="myTemplate.html">
<h1>hello world</h1>
</script>
<div my-modal="myTemplate.html"></div>

现在，我在我的模块中创建一个新的angularJS指令，它只返回一个ng-click的模板，然后打开模态：

angular.module('myApp.directives').directive('myModal', ['$modal',
  function($modal) {
    return {
      link: function(scope, elem, attrs) {
        scope.modalController = function ($scope, $modalInstance) {
        };

        scope.openModal = function() {
          var modalInstance = $modal.open({
          templateUrl: attrs.myModal,
          controller: scope.modalController
        });

        modalInstance.result.then(function () {}, function () {});

        return modalInstance;
      };
    },

    restrict: 'A',
    scope: {
      myModal: '='
    },
    transclude: false,
    template: '<button ng-click="openModal()">open</button>'
  };
}]);

这适用于我的应用。你可以看到plunkr here。

问题是我无法让测试工作。它尝试了jasmine.clock和$ timeout方法，但它似乎仍然无法正常工作。

这是我的测试：

(function () {
  "use strict";

  describe('my-modal', function() {
    var element,
        scope,
    apply,
    triggerClick,
    $timeout;

        beforeEach(module('myApp.services'));
        beforeEach(module('myApp.directives'));
        beforeEach(module('pascalprecht.translate'));
        beforeEach(module('ui.bootstrap'));

        describe('directive', function() {

          beforeEach(function(){
            jasmine.Clock.useMock();
          });

          beforeEach(inject(function($injector,$compile) {
            var $rootScope = $injector.get('$rootScope');
            scope = $rootScope.$new();
            $timeout = $injector.get('$timeout');
            apply = function () {
              /* This is a workaround because. Read up on it here: http://tinyurl.com/ng8zzub */
            if(!scope.$$phase) {
              scope.$apply();
            }
          };

          triggerClick = function(element){
            $(element).trigger('click');
            apply();
          };

          var html =
            '<html><body>' +
              '<h1>PETER?</h1>' +
              '<script type="text/ng-template" id="myModalTemplate.html">' +
               '<h1>Hallo Peter</h1>' +
                '<p>Was geht?</p>' +
              '</script>' +
              '<div my-modal="myModalTemplate.html"></div>'
            '</body></html>';

          element = $compile(html)(scope);
          scope.$digest();
        }));

        it('should open uppon click on directive element', function() {
          triggerClick($(element).find('button'));
          jasmine.Clock.tick(9000);
          $timeout.flush();
          apply();
          expect($(element).find('.modal').length > 0).toBeTruthy();
        });
      });
    });
  }());

可悲的是，测试失败了。

在ui-bootstrap本身用来证明它的模态组件正常工作的unit-tests中，他们直接检查$文档，这对我来说不是一个选项。

所以有一个奇怪的事情是，当我使用console.log()查看element是否发生了变化时，我发现html和body标记已被删除。但是modal使用body来为它添加元素。

Answer 1

所以问题是ui-bootstrap.modal使用$ document来附加它的html，而不是使用将其称为refference的指令。

因此，为了测试天气，指令调用模态，我们必须在$ document中搜索它。我在beforeEach的测试中注入了它：

var $document;
beforeEach(inject(function(_$document_) {
  $document = _$document_;
}));

然后在我的实际测试中，我用它来找到像这样的模态元素：

it('should open uppon click on directive element', function() {
  expect($document.find('.modal-open').length > 0).toBeFalsy();
  expect($document.find('.modal').length > 0).toBeFalsy();
  triggerClick(element.find('button'));
  expect($document.find('.modal-open').length > 0).toBeTruthy();
  expect($document.find('.modal').length > 0).toBeTruthy();
}

有效！

karma / jasmine / angularJS：单元测试我自己的模态指令

1 个答案: