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
Post a Comment