0

I am trying to write unit test to test my directive. When I invoke keydown event ng-model is not updated. How can I make changes to ng-model from unit test?

My spec file is given below:

describe('validNumber', function () {

       var scope, elem, compiled, html, usageScenarioModel, preventDefault, mockedEvent;


    var triggerKeyDown = function (element, keyCode) {
        mockedEvent = angular.element.Event('keydown');
        mockedEvent.which = keyCode;
        preventDefault = spy(mockedEvent, 'preventDefault');
        element.trigger(mockedEvent);
    };

    beforeEach(function(){
        html = '<input type="number" valid-number ng-model="model.values[0].percentage"/>';

        inject(function($compile, $rootScope, _model_){
            model = _model_;
            scope = $rootScope.$new();
            elem = angular.element(html);
            scope.model = _model_;
            scope.model.values =  [{percentage:0}]};
            compiled = $compile(elem);
            compiled(scope);
            scope.$digest();
        })
    });

     it('should disable user to type non-numerical value into field', function(){
        triggerKeyDown(elem, 76); //76 is l
        verify(preventDefault);
    });

    it('should enable user to type numerical value into field', function(){
        triggerKeyDown(elem, 50); //76 is l
        verify(preventDefault);
    });

});

validNumber directive allows only numbers to be typed into number box.

module.exports = function () {

        function arrayContains(array, value){
            for(var i = 0; i < array.length; i++){
                if(array[i] === value){
                    return i;
                }
            }
            return -1;
        }

        return function(scope, element) {
           var keyCode =   [8,9,37,39,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,110];
           element.bind("keydown", function(event) {
           if(arrayContains(keyCode, event.which) == -1){
               event.preventDefault();
           }
        });
    };
};

UPDATE I updated the test to verify if preventDefault method is called. However this does not work. Both test passes, and the second one is supposed to fail. I also debugged the code and it is executed correctly. Does anybody have idea why method call is not verified as expected?

Sanja
  • 397
  • 2
  • 7
  • 24
  • Not an answer, but this is invalid javascript – Tom May 05 '15 at 20:56
  • @Tom: What am I doing wrong? I am new in AngularJS/Javascript world and I would really appreciate if you can tell me why it is invalid. – Sanja May 05 '15 at 21:03
  • Your edit fixed it, the `it` was outside of the `describe` and you had an extra set of `});` -- probably all just a mistake posting the question – Tom May 05 '15 at 21:41
  • Do you stil have problems ? Can you post the directive you are using here as well ? – themyth92 May 06 '15 at 03:00
  • @themyth92: Yes, still have the same problem. I posted the directive – Sanja May 06 '15 at 07:22
  • If you are using jQuery, you could trigger the `keydown` event by changing `angular.element.Event` to `$.Event`. However, the input value will not be changed and the `ng-model` will not be updated. You can read this [comments](http://stackoverflow.com/questions/14591730/angularjs-unit-test-for-keypress-event#comment-46399835) from stackoverflow to identify it further. – themyth92 May 06 '15 at 10:39
  • @themyth92: Thanks, that helped. I updated my test to verify method call, since preventDefault is only called when user types invalid value, but it seems that verify does not work as expected. – Sanja May 06 '15 at 11:28
  • Not sure if you are using Jasmine or not but here is the [fiddle](http://jsfiddle.net/themyth92/z5vnrw2t/) that is working based on your preferences. Hope it helps. – themyth92 May 06 '15 at 13:00

0 Answers0