add Element event tests
adeveria
parent
630b66058d
commit
fd8db10bd3
232
test/element.js
232
test/element.js
|
|
@ -123,8 +123,6 @@ describe("Element methods", function () {
|
||||||
Element.removeData()
|
Element.removeData()
|
||||||
Element.asPX()
|
Element.asPX()
|
||||||
Element.getBBox()
|
Element.getBBox()
|
||||||
|
|
||||||
// TODO:
|
|
||||||
Element.getPointAtLength()
|
Element.getPointAtLength()
|
||||||
Element.getSubpath()
|
Element.getSubpath()
|
||||||
Element.getTotalLength()
|
Element.getTotalLength()
|
||||||
|
|
@ -336,7 +334,7 @@ describe("Element methods", function () {
|
||||||
done();
|
done();
|
||||||
}, 50);
|
}, 50);
|
||||||
});
|
});
|
||||||
it("Element.stop", function() {
|
it("Element.stop", function(done) {
|
||||||
var circle = s.circle(10, 20, 30);
|
var circle = s.circle(10, 20, 30);
|
||||||
circle.animate({r: 50}, 100);
|
circle.animate({r: 50}, 100);
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
|
|
@ -348,6 +346,7 @@ describe("Element methods", function () {
|
||||||
var r = circle.attr("r");
|
var r = circle.attr("r");
|
||||||
expect(r).to.be.lessThan(50);
|
expect(r).to.be.lessThan(50);
|
||||||
expect(result).to.be(circle);
|
expect(result).to.be(circle);
|
||||||
|
done();
|
||||||
}, 50);
|
}, 50);
|
||||||
});
|
});
|
||||||
it("Element.marker", function() {
|
it("Element.marker", function() {
|
||||||
|
|
@ -384,4 +383,231 @@ describe("Element methods", function () {
|
||||||
var use = circle.use();
|
var use = circle.use();
|
||||||
expect(use.node.nodeName).to.be('use');
|
expect(use.node.nodeName).to.be('use');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Event binding & unbinding:
|
||||||
|
|
||||||
|
Element.click()
|
||||||
|
Element.dblclick()
|
||||||
|
Element.mousedown()
|
||||||
|
Element.mousemove()
|
||||||
|
Element.mouseout()
|
||||||
|
Element.mouseover()
|
||||||
|
Element.mouseup()
|
||||||
|
Element.touchcancel()
|
||||||
|
Element.touchend()
|
||||||
|
Element.touchmove()
|
||||||
|
Element.touchstart()
|
||||||
|
Element.unclick()
|
||||||
|
Element.undblclick()
|
||||||
|
Element.unmousedown()
|
||||||
|
Element.unmousemove()
|
||||||
|
Element.unmouseout()
|
||||||
|
Element.unmouseover()
|
||||||
|
Element.unmouseup()
|
||||||
|
Element.untouchcancel()
|
||||||
|
Element.untouchend()
|
||||||
|
Element.untouchmove()
|
||||||
|
Element.untouchstart()
|
||||||
|
|
||||||
|
Element.drag()
|
||||||
|
Element.undrag()
|
||||||
|
Element.hover()
|
||||||
|
Element.unhover()
|
||||||
|
|
||||||
|
TODO:
|
||||||
|
Element.onDragOver()
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Helper function to simulate event triggering
|
||||||
|
var triggerEvent = function(savageEl, eventType) {
|
||||||
|
var event = document.createEvent("HTMLEvents");
|
||||||
|
event.initEvent(eventType, true, true);
|
||||||
|
savageEl.node.dispatchEvent(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Generate tests for all standard DOM events
|
||||||
|
(function() {
|
||||||
|
var elementEvents = [
|
||||||
|
"click",
|
||||||
|
"dblclick",
|
||||||
|
"mousedown",
|
||||||
|
"mousemove",
|
||||||
|
"mouseout",
|
||||||
|
"mouseover",
|
||||||
|
"mouseup",
|
||||||
|
"touchcancel",
|
||||||
|
"touchend",
|
||||||
|
"touchmove",
|
||||||
|
"touchstart"
|
||||||
|
];
|
||||||
|
|
||||||
|
var makeEventTest = function(eventName) {
|
||||||
|
return function() {
|
||||||
|
// Add event, trigger event, remove event, trigger again
|
||||||
|
var circle = s.circle(10, 20, 30);
|
||||||
|
var n = 0;
|
||||||
|
var fn = function() {
|
||||||
|
n++;
|
||||||
|
};
|
||||||
|
var result1 = circle[eventName](fn);
|
||||||
|
expect(n).to.be(0);
|
||||||
|
triggerEvent(circle, eventName);
|
||||||
|
expect(n).to.be(1);
|
||||||
|
var result2 = circle["un" + eventName](fn);
|
||||||
|
triggerEvent(circle, eventName);
|
||||||
|
expect(n).to.be(1);
|
||||||
|
expect(result1).to.be(circle);
|
||||||
|
expect(result2).to.be(circle);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < elementEvents.length; i++) {
|
||||||
|
var eventName = elementEvents[i];
|
||||||
|
var testName = "Element." + eventName + ", Element.un" + eventName;
|
||||||
|
var testFunc = makeEventTest(eventName);
|
||||||
|
it(testName, testFunc);
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
it("Element.drag, Element.undrag - no contexts", function() {
|
||||||
|
var circle = s.circle(10, 20, 30);
|
||||||
|
var moved = 0;
|
||||||
|
var started = 0;
|
||||||
|
var ended = 0;
|
||||||
|
var result1 = circle.drag(function(dx, dy, x, y, event) {
|
||||||
|
moved++;
|
||||||
|
expect(dx).to.be.a('number');
|
||||||
|
expect(dy).to.be.a('number');
|
||||||
|
expect(x).to.be.a('number');
|
||||||
|
expect(y).to.be.a('number');
|
||||||
|
expect(event).to.be.an('object');
|
||||||
|
}, function(x, y, event) {
|
||||||
|
started++;
|
||||||
|
expect(x).to.be.a('number');
|
||||||
|
expect(y).to.be.a('number');
|
||||||
|
expect(event).to.be.an('object');
|
||||||
|
}, function(event) {
|
||||||
|
ended++;
|
||||||
|
expect(event).to.be.an('object');
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(started).to.be(0);
|
||||||
|
triggerEvent(circle, 'mousedown');
|
||||||
|
expect(started).to.be(1);
|
||||||
|
expect(moved).to.be(0);
|
||||||
|
triggerEvent(circle, 'mousemove');
|
||||||
|
expect(moved).to.be(1);
|
||||||
|
expect(ended).to.be(0);
|
||||||
|
triggerEvent(circle, 'mouseup');
|
||||||
|
expect(ended).to.be(1);
|
||||||
|
expect(result1).to.be(circle);
|
||||||
|
|
||||||
|
var result2 = circle.undrag();
|
||||||
|
triggerEvent(circle, 'mousedown');
|
||||||
|
expect(started).to.be(1);
|
||||||
|
triggerEvent(circle, 'mousemove');
|
||||||
|
expect(moved).to.be(1);
|
||||||
|
triggerEvent(circle, 'mouseup');
|
||||||
|
expect(ended).to.be(1);
|
||||||
|
// expect(result2).to.be(circle); // TODO: Make undrag return element
|
||||||
|
});
|
||||||
|
it("Element.drag - with contexts", function() {
|
||||||
|
var circle = s.circle(10, 20, 30);
|
||||||
|
var moved = 0;
|
||||||
|
var started = 0;
|
||||||
|
var ended = 0;
|
||||||
|
var result = circle.drag(function(dx, dy, x, y, event) {
|
||||||
|
moved++;
|
||||||
|
expect(dx).to.be.a('number');
|
||||||
|
expect(dy).to.be.a('number');
|
||||||
|
expect(x).to.be.a('number');
|
||||||
|
expect(y).to.be.a('number');
|
||||||
|
expect(event).to.be.an('object');
|
||||||
|
expect(this.moveContext).to.be(true);
|
||||||
|
}, function(x, y, event) {
|
||||||
|
started++;
|
||||||
|
expect(x).to.be.a('number');
|
||||||
|
expect(y).to.be.a('number');
|
||||||
|
expect(event).to.be.an('object');
|
||||||
|
expect(this.startContext).to.be(true);
|
||||||
|
}, function(event) {
|
||||||
|
ended++;
|
||||||
|
expect(event).to.be.an('object');
|
||||||
|
expect(this.endContext).to.be(true);
|
||||||
|
}, {moveContext: true}, {startContext: true}, {endContext: true});
|
||||||
|
|
||||||
|
expect(started).to.be(0);
|
||||||
|
triggerEvent(circle, 'mousedown');
|
||||||
|
expect(started).to.be(1);
|
||||||
|
expect(moved).to.be(0);
|
||||||
|
triggerEvent(circle, 'mousemove');
|
||||||
|
expect(moved).to.be(1);
|
||||||
|
expect(ended).to.be(0);
|
||||||
|
triggerEvent(circle, 'mouseup');
|
||||||
|
expect(ended).to.be(1);
|
||||||
|
expect(result).to.be(circle);
|
||||||
|
|
||||||
|
var result2 = circle.undrag();
|
||||||
|
triggerEvent(circle, 'mousedown');
|
||||||
|
expect(started).to.be(1);
|
||||||
|
triggerEvent(circle, 'mousemove');
|
||||||
|
expect(moved).to.be(1);
|
||||||
|
triggerEvent(circle, 'mouseup');
|
||||||
|
expect(ended).to.be(1);
|
||||||
|
// expect(result2).to.be(circle); // TODO: Make undrag return element
|
||||||
|
});
|
||||||
|
it("Element.hover, Element.unhover - no contexts", function() {
|
||||||
|
var circle = s.circle(10, 20, 30);
|
||||||
|
var eventIn = 0;
|
||||||
|
var eventOut = 0;
|
||||||
|
var result1 = circle.hover(function() {
|
||||||
|
eventIn++;
|
||||||
|
}, function() {
|
||||||
|
eventOut++;
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(eventIn).to.be(0);
|
||||||
|
triggerEvent(circle, 'mouseover');
|
||||||
|
expect(eventIn).to.be(1);
|
||||||
|
expect(eventOut).to.be(0);
|
||||||
|
triggerEvent(circle, 'mouseout');
|
||||||
|
expect(eventOut).to.be(1);
|
||||||
|
expect(result1).to.be(circle);
|
||||||
|
|
||||||
|
var result2 = circle.unhover();
|
||||||
|
triggerEvent(circle, 'mouseover');
|
||||||
|
expect(eventIn).to.be(1);
|
||||||
|
triggerEvent(circle, 'mouseout');
|
||||||
|
expect(eventOut).to.be(1);
|
||||||
|
// expect(result2).to.be(circle); // TODO: Make unhover return element
|
||||||
|
});
|
||||||
|
it("Element.hover, Element.unhover - with contexts", function() {
|
||||||
|
var circle = s.circle(10, 20, 30);
|
||||||
|
var eventIn = 0;
|
||||||
|
var eventOut = 0;
|
||||||
|
var result1 = circle.hover(function() {
|
||||||
|
eventIn++;
|
||||||
|
expect(this.inContext).to.be(true);
|
||||||
|
}, function() {
|
||||||
|
eventOut++;
|
||||||
|
expect(this.outContext).to.be(true);
|
||||||
|
}, {inContext: true}, {outContext: true});
|
||||||
|
|
||||||
|
expect(eventIn).to.be(0);
|
||||||
|
triggerEvent(circle, 'mouseover');
|
||||||
|
expect(eventIn).to.be(1);
|
||||||
|
expect(eventOut).to.be(0);
|
||||||
|
triggerEvent(circle, 'mouseout');
|
||||||
|
expect(eventOut).to.be(1);
|
||||||
|
expect(result1).to.be(circle);
|
||||||
|
|
||||||
|
var result2 = circle.unhover();
|
||||||
|
triggerEvent(circle, 'mouseover');
|
||||||
|
expect(eventIn).to.be(1);
|
||||||
|
triggerEvent(circle, 'mouseout');
|
||||||
|
expect(eventOut).to.be(1);
|
||||||
|
// expect(result2).to.be(circle); // TODO: Make unhover return element
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue