Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added wrapper function for mouseover, mouseenter, and mouseleave #92

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
bower_components*
bower-*.json
.idea/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not needed here

44 changes: 43 additions & 1 deletion mock-interactions.js
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,46 @@
makeMouseEvent('mouseup', xy, node);
}

/**
/**
* Fires a `mouseenter` mouse event on a specific node, at a given set of coordinates.
* This event bubbles and is cancellable. If the (x,y) coordinates are
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mouseenter doesn't bubble and is not cancellable.
Also, it should fire a separate event for each parent up to <body> - see https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter. Do we expect this to be done here or by the user?

* not specified, the middle of the node will be used instead.
*
* @param {!Element} node The node to fire the event on.
* @param {{ x: number, y: number }=} xy Optional. The (x,y) coordinates the mouse event should be fired from.
*/
function mouseenter(node, xy) {
xy = xy || middleOfNode(node);
makeMouseEvent('mouseenter', xy, node);
}

/**
* Fires a `mouseenter` mouse event on a specific node, at a given set of coordinates.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be "Fires a mouseover mouse event" here

* This event bubbles and is cancellable. If the (x,y) coordinates are
* not specified, the middle of the node will be used instead.
*
* @param {!Element} node The node to fire the event on.
* @param {{ x: number, y: number }=} xy Optional. The (x,y) coordinates the mouse event should be fired from.
*/
function mouseover(node, xy) {
xy = xy || middleOfNode(node);
makeMouseEvent('mouseover', xy, node);
}

/**
* Fires a `mouseleave` mouse event on a specific node, at a given set of coordinates.
* This event bubbles and is cancellable. If the (x,y) coordinates are
Copy link
Member

@valdrinkoshi valdrinkoshi Mar 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to mouseenter, mouseleave doesn't bubble and is not cancellable.
Also, it should fire a separate event for each parent up to <body> - see https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave. Do we expect this to be done here or by the user?

* not specified, the middle of the node will be used instead.
*
* @param {!Element} node The node to fire the event on.
* @param {{ x: number, y: number }=} xy Optional. The (x,y) coordinates the mouse event should be fired from.
*/
function mouseleave(node, xy) {
xy = xy || middleOfNode(node);
makeMouseEvent('mouseleave', xy, node);
}

/**
* Generate a click event on a given node, optionally at a given coordinate.
* @param {!Element} node The node to fire the click event on.
* @param {{ x: number, y: number }=} xy Optional. The (x,y) coordinates the mouse event should
Expand Down Expand Up @@ -466,6 +505,9 @@
scope.down = down;
scope.up = up;
scope.downAndUp = downAndUp;
scope.mouseenter = mouseenter;
scope.mouseleave = mouseleave;
scope.mouseover = mouseover;
scope.tap = tap;
scope.move = move;
scope.touchstart = touchstart;
Expand Down
27 changes: 27 additions & 0 deletions test/mock-interactions.html
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,33 @@
});
});
});

suite('simulating mouse events', function() {
test('mouseenter event gets dispatched', function(done) {
button.addEventListener('mouseenter', function(event) {
expect(event).to.exist;
expect(event.type).to.be.eql('mouseenter');
done();
});
MockInteractions.mouseenter(button);
});
test('mouseleave event gets dispatched', function(done) {
button.addEventListener('mouseleave', function(event) {
expect(event).to.exist;
expect(event.type).to.be.eql('mouseleave');
done();
});
MockInteractions.mouseleave(button);
});
test('mouseover event gets dispatched', function(done) {
button.addEventListener('mouseover', function(event) {
expect(event).to.exist;
expect(event.type).to.be.eql('mouseover');
done();
});
MockInteractions.mouseover(button);
});
});
});

</script>
Expand Down