3 files changed, 100 insertions, 0 deletions
diff --git a/lib/mousetrap/plugins/record/tests/index.html b/lib/mousetrap/plugins/record/tests/index.html
new file mode 100644
index 0000000..5608f09
--- /dev/null
+++ b/lib/mousetrap/plugins/record/tests/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Jelly</title>
+        <meta charset=utf-8>
+        <link href="jelly.css" rel="stylesheet">
+    </head>
+
+    <body>
+        <h1>Jelly</h1>
+
+        <h2>For testing the <strong>record</strong> extension</h2>
+
+        <p>Click "Record" to test recording a sequence.</p>
+        <button class="test-record">Record</button>
+        <div class="test-record-result"></div>
+
+        <script type="text/javascript" src="../../../tests/libs/jquery-1.7.2.min.js"></script>
+        <script type="text/javascript" src="../../../mousetrap.js"></script>
+        <script type="text/javascript" src="../mousetrap-record.js"></script>
+        <script type="text/javascript" src="jelly.js"></script>
+
+        <script type="text/javascript">
+            Jelly.spread();
+        </script>
+    </body>
+
+</html>
diff --git a/lib/mousetrap/plugins/record/tests/jelly.css b/lib/mousetrap/plugins/record/tests/jelly.css
new file mode 100644
index 0000000..a071c77
--- /dev/null
+++ b/lib/mousetrap/plugins/record/tests/jelly.css
@@ -0,0 +1,18 @@
+body {
+    font-family: helvetica, arial, sans-serif;
+    line-height: 20px;
+}
+
+kbd {
+    background-color: #ccc;
+    display: inline-block;
+    padding: 0.5ex 1em;
+}
+
+.test-record-result {
+  margin-top: 20px;
+}
+
+.test-record-result span:nth-child(n+2) {
+    margin-left: 10px;
+}
diff --git a/lib/mousetrap/plugins/record/tests/jelly.js b/lib/mousetrap/plugins/record/tests/jelly.js
new file mode 100644
index 0000000..57ff01a
--- /dev/null
+++ b/lib/mousetrap/plugins/record/tests/jelly.js
@@ -0,0 +1,53 @@
+/**
+ * Peanut butter goes great with jelly.
+ *
+ * @author Dan Tao <daniel.tao@gmail.com>
+ */
+var Jelly = (function() {
+    var recordButton = $("button.test-record"),
+        recordResult = $("div.test-record-result");
+
+    function _formatSequenceAsHtml(sequence) {
+        var combos = [],
+            i;
+
+        for (i = 0; i < sequence.length; ++i) {
+            combos.push('<span>' + _formatKeysAsHtml(sequence[i].split('+')) + '</span>');
+        }
+
+        return combos.join(' ');
+    }
+
+    function _formatKeysAsHtml(keys) {
+        var htmlKeys = [],
+            i;
+
+        for (i = 0; i < keys.length; ++i) {
+            htmlKeys.push('<kbd>' + keys[i] + '</kbd>');
+        }
+
+        return htmlKeys.join('+');
+    }
+
+    function _prepareRecordTest() {
+        recordButton.prop('disabled', true);
+        recordButton.text('Recording');
+
+        Mousetrap.record(function(sequence) {
+            recordResult.html(_formatSequenceAsHtml(sequence));
+            recordButton.prop('disabled', false);
+            recordButton.text('Record');
+        });
+
+        // take focus away from the button so that Mousetrap will actually
+        // capture keystrokes
+        recordButton.blur();
+    }
+
+    return {
+        spread: function() {
+            recordButton.click(_prepareRecordTest);
+        }
+    };
+
+})();