Testing angularjs directive for attribute

Question

I have the following directive which works fine and now I need to unit test it,

(() => { angular .module('app.utilities') .directive('allowPattern', allowPatternDirective); function allowPatternDirective () { return { restrict: 'A', compile () { return (scope, element, attrs) => { element.bind('keypress', (event) => { const keyCode = event.which || event.keyCode; // get the keyCode pressed from the event. const keyCodeChar = String.fromCharCode(keyCode); // determine the char from the keyCode. // keyCode char does not match the allowed Regex Pattern, then don't allow the input into the field. if (!keyCodeChar.match(new RegExp(attrs.allowPattern, 'i'))) { event.preventDefault(); return false; } return true; }); }; }, }; } })(); 

Now following is the unit test I am running and it fails,

ngDescribe({ name: 'allow-pattern', modules: ['app.utilities'], inject: ['$compile'], tests (deps) { let scope; let element; function compileDirective () { scope = deps.$rootScope.$new(); element = deps.$compile('<input allow-pattern="[0-9]">')(scope); scope.$digest(); return element; } function triggerhandler (eventCode) { element.triggerHandler({ type: 'keypress', which: eventCode }); } it.only('sets value if it matches the pattern', () => { compileDirective(); triggerhandler(57); // keycode for 5 scope.$digest(); console.log(element.val()); }); }, }); 

Now whenever I run this test I am expecting that the value for element.val() should be 5 but instead it returns me empty string. I am not able to understand what is going wrong. Can anybody please point out the issue?

I am using karma along with phantomjs.

Thanks in advance.

Answer 1

Well i figured it that I was testing the wrong test case. All i wanted to test is if my regex matches then event.preventDefault() should be called. Which i did and it passed flawlessly. I used sinon.spy to spy on prevent default and it worked.