entering values and triggering events in tests

text entry using runCommand autocompletion click, event listeners, but callback hell refactored callback hell basic usage tested
bevacqua · Jun 2, 2016 · 936d1a1 · 936d1a1
1 parent ea474c8
commit 936d1a1
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 8 deletions.
diff --git a/spec/.index.html.swp b/spec/.index.html.swp
diff --git a/spec/index.html b/spec/index.html
@@ -9,20 +9,23 @@
 
   <link rel="stylesheet" href="../node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.css" type="text/css" media="screen"/>
 
+  <link rel="stylesheet" href="../node_modules/woofmark/dist/woofmark.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="../node_modules/horsey/dist/horsey.css" type="text/css" media="screen"/>
+
   <script src="../node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js" type="text/javascript"></script>
   <script src="../node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js" type="text/javascript"></script>
   <script src="../node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/json2.js" type="text/javascript"></script>
   <script src="../node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/boot.js" type="text/javascript"></script>
 
   <script src="../node_modules/jquery/dist/jquery.min.js"></script>
   <script src="../node_modules/jasmine-jquery/lib/jasmine-jquery.js?body=true" type="text/javascript"></script>
+  <script src="../node_modules/crossvent/dist/crossvent.js"></script>
   <script src="../node_modules/megamark/dist/megamark.js"></script>
   <script src="../node_modules/domador/dist/domador.js"></script>
   <script src="../node_modules/woofmark/dist/woofmark.js"></script>
   <script src="../node_modules/horsey/dist/horsey.js"></script>
 
   <script src="../dist/banksy.js"></script>
-  <script src="../spec/javascripts/banksy_spec.js" type="text/javascript"></script>
 
   <style>
     #woofmark-container {
@@ -36,5 +39,6 @@
   <div id="woofmark-container">
     <textarea id="woofmark"></textarea>
   </div>
+  <script src="../spec/javascripts/banksy_spec.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/spec/javascripts/banksy_spec.js b/spec/javascripts/banksy_spec.js
@@ -9,16 +9,10 @@ describe("Banksy", function() {
       parseHTML:     domador
     });
 
-  });
-
-
-  it("initializes", function() {
-
     var horse = horsey(editor.editable, {
       anchor: '@',
       suggestions: [
-        '@hodor'
-        //{ value: '@hodor',  text: 'Hodor'   },
+        { value: '@hodor',  text: 'Hodor' }
       ],
       set: function (value) {
         if (wysiwyg.mode === 'wysiwyg') {
@@ -34,7 +28,103 @@ describe("Banksy", function() {
       horse: horse
     });
 
+    enter = function(before, after) {
+
+      before = before || "";
+      after  = after  || "";
+
+      editor.runCommand(function(chunks, mode) {
+        chunks.before = chunks.before + before;
+        chunks.after = after + chunks.after;
+      });
+
+      // trigger the horsey:
+      crossvent.fabricate(editor.editable, "keypress");
+
+    }
+
+  });
+
+
+  it("initializes", function() {
+
     expect($('.sey-list')).not.toBe(null);
+    expect($('.sey-list .sey-item').html()).toBe("Hodor");
+
+  });
+
+
+  it("displays on @ token entry", function(done) {
+
+    editor.value('');
+    editor.setMode('wysiwyg');
+
+    enter('hello');
+    expect($('.sey-list .sey-item:first').is(':visible')).toBe(false);
+
+    enter(' @');
+
+    var onShow = function() {
+
+      expect($('.sey-list .sey-item:first').is(':visible')).toBe(true);
+      expect(editor.value()).toEqual('hello @');
+
+      crossvent.remove(editor.editable, 'horsey-show', onShow);
+      done();
+
+    }
+
+    crossvent.add(editor.editable, 'horsey-show', onShow);
+
+  });
+
+
+  it("autocompletes on selection click", function(done) {
+
+    editor.value('');
+
+    function onHide() {
+
+      expect($('.sey-list .sey-item:first').is(':visible')).toBe(false);
+
+      crossvent.add(editor.editable, 'horsey-show', onShow);
+
+      enter(' @');
+
+    }
+
+    function onShow() {
+
+      // Somehow, dropping priority gives time for this to run; 
+      // possibly for the element to appear and/or move?
+      setTimeout(function() {
+
+        expect($('.sey-list .sey-item:first').is(':visible')).toBe(true); // fails
+        expect(editor.value()).toEqual('hello again @');
+
+        crossvent.add(editor.editable, 'horsey-selected', onSelect);
+
+        crossvent.fabricate($('.sey-list .sey-item:first')[0], "click");
+
+      }, 0);
+
+    }
+
+    function onSelect() {
+
+      expect(editor.value()).toEqual('hello again @hodor'); // fails
+
+      crossvent.remove($('.sey-list .sey-item:first')[0], 'horsey-hide', onHide);
+      crossvent.remove(editor.editable, 'horsey-show', onShow);
+      crossvent.remove($('.sey-list .sey-item:first')[0], 'horsey-hide', onSelect);
+
+      done();
+
+    }
+
+    crossvent.add($('.sey-list .sey-item:first')[0], 'horsey-hide', onHide);
+
+    enter('hello again'); // clear the horsey
 
   });