無法測試茉莉花運行Karma中的angularjs指令的多個實例

我在這裏有一個超級邊緣的情況。無法測試茉莉花運行Karma中的angularjs指令的多個實例

我正在寫一個包裝指令圍繞一個jQuery插件，它將一個簡單的html元素轉換爲正式的反饋導向視圖。

<div my-directive>DirectiveContent</div>

由於插件不知道如何處理它。我的指令把它轉換爲是這樣的：

<div my-directve><div class='myPlugin' ng-include></div></div>

在這一點我火了插件的初始化函數來完成最後的渲染。（它創建了一個標題元素等）。

<div my-directve><div class='feedback feedbackSuccess' ng-include> 
    <h2>Title</h2> 
    My Content 
</div></div>

這個問題是我在茉莉花業的測試中可以做一個測試。如果我做另一個它不會工作。

這裏是我的指令：

module.directive("feedback", function(){ 
    return { 
     restrict : "EA", 
     replace : false, 
     transclude : true, 
     require : "feedback", 
     template : "<div class='feedback' ng-transclude></div>", 
     controller : function(){ 
      this.init = function(element){ 
       plugin.init(element); 
      } 
     }, 
     link : function(scope, element, attrs, cntrl){ 
      var feedback = element.find(".feedback"); 
      var type = scope.$eval(attrs.type) || ""; 
      var title = scope.$eval(attrs.title) || ""; 

      //route standard ric:xxx to actual child feedback element 
      feedback.attr("ric:title", title); 
      feedback.attr("ric:type", type); 

      cntrl.init(feedback); 
     } 
    }; 
});

這裏是我的karma.conf.js：

basePath = ''; 

files = [ 
    JASMINE, 
    JASMINE_ADAPTER, 
    "path/to/plugin.js", 
    "components/angular-unstable/angular.js", 
    "components/angular-mocks/angular-mocks.js", 
    { 
     "pattern" : "./src/FeedbackDirective.js", 
     "watched" : true, 
     "included" : true, 
     "served" : true 
    }, 
    { 
     "pattern" : "./tests/app.js", 
     "watched" : true, 
     "included" : true, 
     "served" : true 
    }, 
    { 
     "pattern" : "./tests/fixtures/*.html", 
     "watched" : true, 
     "included" : true, 
     "served" : true 
    }, 
    './tests/**/*Spec.js' 
]; 


// list of files to exclude 
exclude = []; 

preprocessors = { 
    './tests/fixtures/*.html': 'html2js' 
}; 

reporters = ['progress']; 

port = 9876; 

runnerPort = 9100; 

colors = true; 

logLevel = LOG_INFO; 

autoWatch = true; 

browsers = ['Chrome']; 

captureTimeout = 60000; 

singleRun = false;

最後我的測試：

describe('Feedback', function(){ 
    var $compile; 
    var $rootScope; 
    var $templateCache; 
    var $timeout; 
    var testWrap; 

    beforeEach(module(
      'app', 
      "tests/fixtures/vanilla.html" 
     )); 

    beforeEach(function(){ 
     inject(function(_$compile_, _$rootScope_, _$templateCache_, _$timeout_){ 
      $compile = _$compile_; 
      $rootScope = _$rootScope_; 
      $templateCache = _$templateCache_; 
      $timeout = _$timeout_; 

      testWrap = angular.element("<div id='test-wrap'></div>"); 
     }); 
    }); 

    afterEach(function(){ 
     $rootScope.$destroy(); 
     testWrap.remove(); 
    }); 
    /** 
    * Test ONE 
    */ 
    describe("'Vanilla'", function(){ 
     it("will be instantiated with a 'feedbackSuccess' class", function(){ 
      var tmpl = angular.element('<div my-feedback>Test Content</div>'); 

      element = $compile(tmpl)($rootScope); 
      testWrap.append(element); 
      $rootScope.$digest(); 
      expect(testWrap.find(".feedback").length).toBe(1); 
      expect(testWrap.find(".feedbackSuccess").length).toBe(1); 
     }); 
    }); 
    /** 
    * Test TWO 
    */ 
    describe('With attributes', function(){ 
     it("should pass the title and type to the child feedback element", function(){ 
      var tmpl = angular.element('<div my-feedback ric:title="\'Static Title\'" ric:type="\'error\'">Test Content</div>'); 

      element = $compile(tmpl)($rootScope); 
      testWrap.append(element); 
      $rootScope.$apply(); 
      expect(testWrap.find(".feedbackError").length).toBe(1); 
     }); 
    }); 
});

來源

2013-07-10 Dean Peterson

原來，插件有問題的角度嘲笑不好。

該插件更多的是具有全局初始化函數的內部庫。出於某種原因，在初始通話之後，角模擬器會與之混淆，從而導致將來的通話中斷。

我能找到解決方法：內部庫有一個全球初始化功能，這是非常錯誤的。我能夠使用更傳統的$("#el").pluginName();

案例關閉。

來源

2013-07-13 19:14:31

無法測試茉莉花運行Karma中的angularjs指令的多個實例

回答

相關問題