Can't test multiple instances of a angularjs directive in Jasmine running Karma -


i have uber-edge case here.

i writing wrapper directive around jquery plugin transforms simple html element formal feedback oriented view.

<div my-directive>directivecontent</div> 

since plugin doesn't know it. directive transforms this:

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

at point fire plugin's init function final render. (it creates title element among other things.)

<div my-directve><div class='feedback feedbacksuccess' ng-include>     <h2>title</h2>     content </div></div> 

the rub in jasmine tests in karma, can 1 test. if not work.

here directive:

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 actual child feedback element             feedback.attr("ric:title", title );             feedback.attr("ric:type", type );              cntrl.init(feedback);         }     }; }); 

here 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 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; 

and tests:

   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 1      */     describe("'vanilla'", function(){         it("will instantiated '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 2      */     describe('with attributes', function(){         it("should pass title , type 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);         });     }); }); 

it turns out plugin in question didn't play angular-mocks.

the plugin more of internal library had global initialization function. reason angular-mocks messed after initial call killing future calls.

i able find workaround: internal library had global initialization function buggy. able use more traditional $("#el").pluginname();

case closed.


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -