i trying write unit tests angularjs app using karma/jasmine.
the part i'm hung on testing class added/removed.
the function trying test:
vm.togglemenu = function togglemenu(prev) { if(angular.element('menu').hasclass('hide')) { if(prev) { angular.element('#view').removeclass('col-md-8').addclass('col-md-12'); } else { angular.element('menu').removeclass('hide'); angular.element('#view').removeclass('col-md-12').addclass('col-md-8'); } } else { if(prev) { angular.element('#view').removeclass('col-md-12').addclass('col-md-8'); } else { angular.element('menu').addclass('hide'); angular.element('#view').removeclass('col-md-8').addclass('col-md-12'); } } }; the html:
<div id="view" class="col-md-12" ng-view=""></div> <menu class="col-md-4"></menu> menu custom directive.
my test:
describe('ctrl spec', function() { var controller, vm, scope, menu, compile, view; beforeeach(function(){ module('app'); module('templates'); inject(function($controller, $rootscope, $compile) { controller = $controller; scope = $rootscope; compile = $compile; vm = controller('ctrl', {$scope: scope}); menu = angular.element('<menu></menu>'); view = angular.element('<div id="view" class="col-md-12"></div>'); compile(menu)(scope); spyon(vm, 'togglemenu'); }) }); describe('function', function() { it('view should have class col-md-8', function() { vm.togglemenu(); expect(view.hasclass('col-md-8')).tobe(true); }); }); when console.log view get
log: {0: <div id="view" class="col-md-12 ng-scope"></div>, length: 1} i've tried adding class ng-hide menu in test-spec.js:
menu = angular.element('<menu class="hide"></menu>'); and output:
expected false true. error: expected false true. any on how test class added/removed appreciated!!
i still couldn't let go, had play more. found error.
this line: menu = angular.element('<menu></menu>'); being used wrong.
it needed menu = angular.element('menu');.
angular.element not meant used full tag, classes, id's, or name of element itself.
