Why does my jasmine tests fail on this directive?
<p>I have built an angular directive <code>onInputChange</code> that should fire a callback when the users changes a value of an input by either clicking outside of the input (blur) or hitting <code>ENTER</code>. The directive can be used like:</p>

<pre><code>&lt;input type="number" ng-model="model" on-input-change="callback()"/&gt;
</code></pre>

<p>It uses the following code:</p>

<pre><code>app.directive('onInputChange', [
    "$parse",
    function ($parse) {
        return {
            restrict : "A",
            require : "ngModel",
            link : function ($scope, $element, $attrs) {
                //
                var dirName     = "onInputChange",
                    callback    = $parse($attrs[dirName]),
                    evtNS       = "." + dirName,
                    initial     = undefined;

                //
                if (angular.isFunction(callback)) {
                    $element
                        .on("focus" + evtNS, function () {
                            initial = $(this).val();
                        })
                        .on("blur" + evtNS, function () {
                            if ($(this).val() !== initial) {
                                $scope.$apply(function () {
                                    callback($scope);
                                });
                            }
                        })
                        .on("keyup" + evtNS, function ($evt) {
                            if ($evt.which === 13) {
                                $(this).blur();
                            }
                        });
                }

                //
                $scope.$on("$destroy", function () {
                    $element.off(evtNS);
                });
            }
        };
    }
]);
</code></pre>

<p>The directive works as I would expect in my app. Now I've decided to write some tests to really ensure this is the case:</p>

<pre><code>describe("directive", function () {

    var $compile, $rootScope, $scope, $element;

    beforeEach(function () {
        angular.mock.module("app");
    });

    beforeEach(inject(function ($injector) {

        $compile = $injector.get("$compile");
        $scope = $injector.get("$rootScope").$new();

        $scope.model = 0;

        $scope.onchange = function () {
            console.log("called");
        };

        $element = $compile("&lt;input type='number' ng-model='model' on-input-change='onchange()'&gt;")($scope);
        $scope.$digest();

        spyOn($scope, "onchange");
    }));

    afterEach(function () {
        $scope.$destroy();
    });

    it("has default values", function () {
        expect($scope.model).toBe(0);
        expect($scope.onchange).not.toHaveBeenCalled();
    });

    it("should not fire callback on internal model change", function() {
        $scope.model = 123;
        $scope.$digest();

        expect($scope.model).toBe(123);
        expect($scope.onchange).not.toHaveBeenCalled();
    });

    //this fails
    it("should not fire callback when value has not changed", function () {
        $element.focus();
        $element.blur();

        $scope.$digest();

        expect($scope.model).toBe(0);
        expect($scope.onchange).not.toHaveBeenCalled();
    });

    it("should fire callback when user changes input by clicking away (blur)", function () {
        $element.focus();
        $element.val(456).change();
        $element.blur();

        $scope.$digest();

        expect($scope.model).toBe(456);
        expect($scope.onchange).toHaveBeenCalled();
    });

    //this fails
    it("should fire callback when user changes input by clicking enter", function () {
        $element.focus();
        $element.val(789).change();
        $element.trigger($.Event("keyup", {keyCode:13}));

        $scope.$digest();

        expect($scope.model).toBe(789);
        expect($scope.onchange).toHaveBeenCalled();
    });

});
</code></pre>

<p>Now, my problem is that two of my tests are failing after run with karma:</p>

<p><strong>A:</strong></p>

<blockquote>
  <p><strong>Failed</strong> directive <em>should not fire callback when value has not changed</em>
  <strong>Expected spy onchange not to have been called.</strong></p>
</blockquote>

<p><strong>B:</strong></p>

<blockquote>
  <p><strong>Failed</strong> directive <em>should fire callback when user changes input by clicking enter</em>
  <strong>Expected spy onchange to have been called.</strong></p>
</blockquote>

<hr>

<p>I've created a <a href="https://plnkr.co/edit/njaDOqdNaTuK1JFtqAOC?p=preview" rel="nofollow noreferrer">Plunker</a> where you can try it yourself.</p>

<p><strong>1. Why does my callback gets called even if the value has not changed?</strong></p>

<p><strong>2. How can I simulate the user hitting <code>ENTER</code> on my input? I already tried different ways but none works.</strong></p>

<p>Sorry for the long question. I hope I was able to provide enough information so that maybe someone can help me out on this. Thank you :)</p>

<hr>

<p>Other questions here on SO that I've read regarding my issue:</p>

<ul>
<li><a href="https://stackoverflow.com/questions/18001169/how-do-i-trigger-a-keyup-keydown-event-in-an-angularjs-unit-test">How do I trigger a keyup/keydown event in an angularjs unit test?</a></li>
<li><a href="https://stackoverflow.com/questions/14591730/angularjs-unit-test-for-keypress-event?noredirect=1&amp;lq=1">AngularJS unit test for keypress event</a></li>
</ul>