javascript - How do I trigger a mousemove event in an angularjs unit test - Stack Overflow

admin管理员组

文章数量:1327699

I have implemented an angularjs directive that use mouse event; clicking on ponent and moving mouse up or down it can changes a value. So i need to know how do I trigger a mousemove event in a unit test (i use karma/jasmine); I'd like to have a suggestion to testing this ponent when mouse goes up or down in an unit test.

Component template is something like that:

<div class="rotativeContent">
    <p class="rotativeLabel">{{label}}</p>
    <pie class="zero"></pie>
    <p class="rotativeValue">{{ngModel}}</p>
    <input type="hidden" ng-model="ngModel"/>
</div>

and javascript code is:

var Component = angular.module('Components', []);

Components.directive('rotative', ['$document', function($document){
    return {
    require : '?ngModel',
    restrict: 'E',
    replace: true,
    templateUrl: "templates/rotative.html",
    scope: {label: "@", ngModel: "="},
    link: function(scope, element, attr, ngModel) {
        var value = 0;
        function bindElementMove() {
            element.bind('mousedown', function (event) {
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
            });
        }

        bindElementMove();

        function mousemove(event) {
            // code on mouse move
            // to track vertical mouse position
            var prevY = element.attr('data-prevY');
            if (event.pageY < prevY) {
                // do something if mouse goes down
                // ...
                value++;
            } else {
                // do something if mouse goes up
                // ...
                value--;
            } 
            element.attr('data-prevY', event.pageY);
            ngModel.$setViewValue(value);
        }

        function mouseup() {
            $document.off('mousemove', mousemove);
            $document.off('mouseup', mouseup);
        }
    }
};

// ...

Also i need to simulate an variation of event.pageY. How can i do this?

I have implemented an angularjs directive that use mouse event; clicking on ponent and moving mouse up or down it can changes a value. So i need to know how do I trigger a mousemove event in a unit test (i use karma/jasmine); I'd like to have a suggestion to testing this ponent when mouse goes up or down in an unit test.

Component template is something like that:

<div class="rotativeContent">
    <p class="rotativeLabel">{{label}}</p>
    <pie class="zero"></pie>
    <p class="rotativeValue">{{ngModel}}</p>
    <input type="hidden" ng-model="ngModel"/>
</div>

and javascript code is:

var Component = angular.module('Components', []);

Components.directive('rotative', ['$document', function($document){
    return {
    require : '?ngModel',
    restrict: 'E',
    replace: true,
    templateUrl: "templates/rotative.html",
    scope: {label: "@", ngModel: "="},
    link: function(scope, element, attr, ngModel) {
        var value = 0;
        function bindElementMove() {
            element.bind('mousedown', function (event) {
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
            });
        }

        bindElementMove();

        function mousemove(event) {
            // code on mouse move
            // to track vertical mouse position
            var prevY = element.attr('data-prevY');
            if (event.pageY < prevY) {
                // do something if mouse goes down
                // ...
                value++;
            } else {
                // do something if mouse goes up
                // ...
                value--;
            } 
            element.attr('data-prevY', event.pageY);
            ngModel.$setViewValue(value);
        }

        function mouseup() {
            $document.off('mousemove', mousemove);
            $document.off('mouseup', mouseup);
        }
    }
};

// ...

Also i need to simulate an variation of event.pageY. How can i do this?

• javascript
• angularjs
• unit-testing
• bdd
• karma-jasmine

Share Improve this question Follow edited Feb 17, 2015 at 11:12 sergioska asked Feb 17, 2015 at 5:32 sergioskasergioska 34511 gold badge55 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This blog article shows an example using jqLite's triggerHandler().

Triggering Events in Angular JS Directive Tests

EDIT: Okay, I made a Plunker quickly to demonstrate how you can pass parameters too: link. Check the console output to see the parameters on the event object. You can add anything your implementation might need.

So you can pass data like this for example:

elem.triggerHandler({
    type : "mousemove",
    pageX: 48,
    pageY: 102
});

So you will need to get a handle on your element with angular.element and then use above code to trigger events on it.

本文标签： javascriptHow do I trigger a mousemove event in an angularjs unit testStack Overflow