Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Using fakeKeyboard.js to simulate Keyboard events #2

Merged
merged 2 commits into from

2 participants

@tamizhvendan

Hi Scott,

I am using your p5 as a Kata to improve my javascript skills.

While playing with p5, I've found, that you are using the function $(window).trigger(key()) to simulate the keyboard events in the Qunit tests.

IMHO, its bit verbose, and the trigger function and keydown event function is duplicated for each key press.

So, I've refactored the keyboard simulation to a separate "fakeKeyboard.js" file and it resulted in a cleaner way (In my perspective) to do the same via functions like "fakeKeyboard.pressRightArrow(keyPressCount)".

I've just done this for my learning purpose. Kindly accept this pull request, if it make sense and appropriate to you.

Thanks,
Tamizhvendan S | http://sweettam.blogspot.com

@OdeToCode
Owner

This is beautiful work, thank you! Accepting ASAP.

Thanks Scott :-)

@OdeToCode OdeToCode merged commit 0b511be into OdeToCode:master
@OdeToCode
Owner
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 136 additions and 132 deletions.
  1. +45 −0 tests/fakeKeyboard.js
  2. +1 −0  tests/tests.htm
  3. +90 −132 tests/tests.js
View
45 tests/fakeKeyboard.js
@@ -0,0 +1,45 @@
+var fakeKeyboard = function($){
+
+ var keyDownEvent = new $.Event("keydown"),
+ defaultKeyPressCount = 1;
+
+ function pressKey(keyCodeToBePressed, keyPressCount){
+ var i;
+ keyDownEvent.keyCode = keyCodeToBePressed;
+ keyPressCount = keyPressCount || defaultKeyPressCount;
+ for (i=1; i <= keyPressCount; i++) {
+ $(window).trigger(keyDownEvent);
+ }
+ return this;
+ };
+
+ function pressRightArrow(keyPressCount){
+ return this.pressKey(39, keyPressCount);
+ };
+
+ function pressLeftArrow(keyPressCount){
+ return this.pressKey(37, keyPressCount);
+ };
+
+ function pressEnter(keyPressCount){
+ return this.pressKey(13, keyPressCount);
+ };
+
+ function pressHome(keyPressCount){
+ return this.pressKey(36, keyPressCount);
+ };
+
+ function pressEnd(keyPressCount){
+ return this.pressKey(35, keyPressCount);
+ };
+
+ return {
+ pressRightArrow : pressRightArrow,
+ pressLeftArrow : pressLeftArrow,
+ pressEnter : pressEnter,
+ pressHome : pressHome,
+ pressEnd : pressEnd,
+ pressKey : pressKey
+ };
+
+}(jQuery);
View
1  tests/tests.htm
@@ -9,6 +9,7 @@
<script src="../scripts/p5.js" type="text/javascript"></script>
<script src="../scripts/p5animations.js" type="text/javascript"></script>
<script src="qunit.js" type="text/javascript"></script>
+ <script src="fakeKeyboard.js" type="text/javascript"></script>
<script src="tests.js" type="text/javascript"></script>
</head>
View
222 tests/tests.js
@@ -1,197 +1,155 @@
var testEnvironment = {
- setup: function () {
- $("#qunit-fixture").append("<section id='slide1'></section>" +
- "<section id='slide2'></section>" +
- "<section id='slide3'></section>");
- p5.start();
- },
-
- teardown: function () {
- p5.stop();
- }
+ setup: function () {
+ $("#qunit-fixture").append("<section id='slide1'></section>" +
+ "<section id='slide2'></section>" +
+ "<section id='slide3'></section>");
+ p5.start();
+ },
+
+ teardown: function () {
+ p5.stop();
+ }
};
module("navigation", testEnvironment);
-
+
test("Sets first slide as start slide", function () {
- ok($("#slide1").hasClass("current"));
+ ok($("#slide1").hasClass("current"));
});
test("Moves to next slide on right arrow", function () {
- $(window).trigger(rightArrow());
- ok($("#slide2").hasClass("current"));
+ fakeKeyboard.pressRightArrow();
+ ok($("#slide2").hasClass("current"));
});
test("Moves to next slide on enter", function () {
- $(window).trigger(enter()); ;
- ok($("#slide2").hasClass("current"));
+ fakeKeyboard.pressEnter();
+ ok($("#slide2").hasClass("current"));
});
test("Doesn't move past last slide", function () {
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- ok($("#slide3").hasClass("current"));
+ fakeKeyboard.pressRightArrow(4);
+ ok($("#slide3").hasClass("current"));
});
test("Moves to previous slide on left arrow", function() {
- $(window).trigger(rightArrow());
- $(window).trigger(leftArrow());
- ok($("#slide1").hasClass("current"));
+ fakeKeyboard.pressRightArrow()
+ .pressLeftArrow();
+ ok($("#slide1").hasClass("current"));
});
test("Moves to first slide on home", function() {
- $(window).trigger(rightArrow());
- $(window).trigger(home());
- ok($("#slide1").hasClass("current"));
+ fakeKeyboard.pressRightArrow()
+ .pressHome();
+ ok($("#slide1").hasClass("current"));
});
test("Moves to last slide on end", function () {
- $(window).trigger(end());
- ok($("#slide3").hasClass("current"));
+ fakeKeyboard.pressEnd();
+ ok($("#slide3").hasClass("current"));
});
module("History", testEnvironment);
test("Pushes state on move", function () {
- $(window).trigger(rightArrow());
- strictEqual(lastState.url, "#1");
+ fakeKeyboard.pressRightArrow();
+ strictEqual(lastState.url, "#1");
});
var animTestEnvironment = {
- setup: function () {
- $("#qunit-fixture").append("<section id='slide1'></section>" +
- "<section id='slide2' data-animation='testanimation'></section>" +
- "<section id='slide3'></section>");
- p5.start();
- },
-
- teardown: function () {
- p5.stop();
- }
+ setup: function () {
+ $("#qunit-fixture").append("<section id='slide1'></section>" +
+ "<section id='slide2' data-animation='testanimation'></section>" +
+ "<section id='slide3'></section>");
+ p5.start();
+ },
+
+ teardown: function () {
+ p5.stop();
+ }
};
module("Animation", animTestEnvironment);
test("Steps animation with right arrow", function () {
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- ok(lastAnimation.getState().stepCount == 1);
+ fakeKeyboard.pressRightArrow(2);
+ ok(lastAnimation.getState().stepCount == 1);
});
test("Cancels animation on left arrow", function () {
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(leftArrow());
- ok(lastAnimation.getState().isCancelled);
+ fakeKeyboard.pressRightArrow(2)
+ .pressLeftArrow();
+ ok(lastAnimation.getState().isCancelled);
});
test("Resolved when stepping stops", function () {
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- ok(lastAnimation.getState().isResolved);
+ fakeKeyboard.pressRightArrow(4);
+ ok(lastAnimation.getState().isResolved);
});
test("Moves to next slide when animation complete", function () {
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- $(window).trigger(rightArrow());
- ok($("#slide3").hasClass("current"));
+ fakeKeyboard.pressRightArrow(5);
+ ok($("#slide3").hasClass("current"));
});
module("array remove test");
test("Can remove object reference from Array", function () {
- var o1 = {};
- var o2 = {};
- var o3 = {};
- var array = [o1, o2, o3];
+ var o1 = {};
+ var o2 = {};
+ var o3 = {};
+ var array = [o1, o2, o3];
- array.remove(o2);
- ok(array.length == 2);
+ array.remove(o2);
+ ok(array.length == 2);
});
-var rightArrow = function () {
- var event = new $.Event("keydown");
- event.keyCode = 39;
- return event;
-};
-
-var leftArrow = function() {
- var event = new $.Event("keydown");
- event.keyCode = 37;
- return event;
-};
-
-var enter = function () {
- var event = new $.Event("keydown");
- event.keyCode = 13;
- return event;
-};
-
-var home = function() {
- var event = new $.Event("keydown");
- event.keyCode = 36;
- return event;
-};
-
-var end = function() {
- var event = new $.Event("keydown");
- event.keyCode = 35;
- return event;
-};
-
var lastState = null;
window.history.pushState = function(data, title, url) {
- lastState = {
- data:data,
- title:title,
- url:url
- };
+ lastState = {
+ data:data,
+ title:title,
+ url:url
+ };
};
var lastAnimation = null;
var testAnimation = function () {
- var stepCount = 0;
- var isCancelled = false;
- var deferred = $.Deferred();
-
- var complete = function () {
- $(window).unbind("killAnimations", complete);
- isCancelled = true;
- deferred.resolve();
- };
-
- $(window).bind("killAnimations", complete);
-
- lastAnimation = {
- done: deferred.promise(),
- step: function () {
- stepCount++;
- if (stepCount >= 3) {
- deferred.resolve();
- }
- },
- getState: function () {
- return {
- stepCount: stepCount,
- isCancelled: isCancelled,
- isResolved: deferred.isResolved()
- };
- }
- };
-
- return lastAnimation;
+ var stepCount = 0;
+ var isCancelled = false;
+ var deferred = $.Deferred();
+
+ var complete = function () {
+ $(window).unbind("killAnimations", complete);
+ isCancelled = true;
+ deferred.resolve();
+ };
+
+ $(window).bind("killAnimations", complete);
+
+ lastAnimation = {
+ done: deferred.promise(),
+ step: function () {
+ stepCount++;
+ if (stepCount >= 3) {
+ deferred.resolve();
+ }
+ },
+ getState: function () {
+ return {
+ stepCount: stepCount,
+ isCancelled: isCancelled,
+ isResolved: deferred.isResolved()
+ };
+ }
+ };
+
+ return lastAnimation;
};
p5.registerAnimations({
- testanimation: testAnimation
-});
+ testanimation: testAnimation
+});
Something went wrong with that request. Please try again.