tidy-up counter-reset-keyboard example subscrition considerably! #57

nelsonic · nelsonic · commit 0fd18b2f5f01 · 2018-08-10T21:54:02.000+01:00
diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
@@ -15,7 +15,7 @@ function update (action, model) {    // Update function takes the current state
 }
 
 function view(model, signal) {
-  return div([], [
+  return div(['id=wrap'], [
     button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
     div(["class=count", "id=count"], [text(model.toString())]), // count
     button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
@@ -26,24 +26,17 @@ function view(model, signal) {
 function subscriptions (signal, root) {
   var UP_KEY = 38; // increment the counter when [↑] (up) key is pressed
   var DOWN_KEY = 40; // decrement the counter when [↓] (down) key is pressed
-  var called = false; // ensure event hanlder is only called once! #HelpWanted!
 
-  function handler (e) {
-    if (!called) { // had issues with event handler being called multiple!
-      called = true;
-      switch (e.keyCode) {
-        case UP_KEY:
-          signal('inc')(); // invoke the signal.callback function directly
-          break;
-        case DOWN_KEY:
-          signal('dec')();
-          break;
-      }
-    } // only call event handler once!
-  }
-  // event listners were being fired multiple times so, remove before addding:
-  root.removeEventListener('keypress', handler, false); // remove previous
-  root.addEventListener('keypress', handler, false); // add fresh listeners
+  document.addEventListener('keyup', function handler (e) {
+    switch (e.keyCode) {
+      case UP_KEY:
+        signal('inc')(); // invoke the signal > callback function directly
+        break;
+      case DOWN_KEY:
+        signal('dec')();
+        break;
+    }
+  });
 }
 
 /* The code block below ONLY Applies to tests run using Node.js */
diff --git a/examples/counter-reset-keyboard/index.html b/examples/counter-reset-keyboard/index.html
@@ -13,22 +13,14 @@
 </head>
 <body>
   <div id="app"></div>
+
   <script src="counter.js" data-cover></script> <!-- load counter  -->
   <script>
   // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node
-   mount(0, update, view, 'app');
+   mount(0, update, view, 'app', subscriptions);
+   console.log('subs:', subscriptions.toString());
   </script>
 
-  <!-- Below this point is all related to the Tests for the App -->
-  <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
-  <div id="qunit"></div>    <!-- test results are displayed here -->
-  <!-- Load the QUnit CSS file from CDN - require to display our tests -->
-  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
-  <!-- Load the QUnit Testing Framework from CDN - to run the tests -->
-  <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
-  <!-- Load Blanket.js from CDN - for test coverage stats -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
-  </script>
-  <script src="test.js"></script>  <!-- always load test.js last -->
+
 </body>
 </html>
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
@@ -19,29 +19,29 @@ function empty (node) {
  * @param {Function} update how the application state is updated ("controller")
  * @param {Function} view function that renders HTML/DOM elements with model.
  * @param {String} root_element_id root DOM element in which the app is mounted
- * @param {Function} subscriptions any event listeners the application needs
+ * @param {Function} subs any event listeners the application needs
  */
-function mount (model, update, view, root_element_id, subscriptions) {
+function mount (model, update, view, root_element_id, subs) {
   var ROOT = document.getElementById(root_element_id); // root DOM element
   var store_name = 'elmish_' + root_element_id; // test-app !== app
-  console.log('store_name:', store_name);
-  function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
+
+  function render (mod, sig, root) { // DRY rendering code (invoked twice)
     localStorage.setItem(store_name, JSON.stringify(mod)); // save the model!
     empty(root); // clear root element (container) before (re)rendering
     root.appendChild(view(mod, sig)) // render view based on model & signal
-    if (subs && typeof subs === 'function') { subs(sig, root); } // subscription
   }
 
   function signal(action) { // signal function takes action
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
       var updatedModel = update(action, model); // update model for the action
-      render(updatedModel, signal, ROOT, subscriptions);
+      render(updatedModel, signal, ROOT);
     };
   };
 
   model = JSON.parse(localStorage.getItem(store_name)) || model;
-  render(model, signal, ROOT, subscriptions);
+  render(model, signal, ROOT);
+  if (subs && typeof subs === 'function') { subs(signal, ROOT); }
 }
 
 /**
diff --git a/test/elmish.test.js b/test/elmish.test.js
@@ -467,22 +467,22 @@ test('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
     "elmish_store is 0 (as expected). initial state saved to localStorage.");
 
   // trigger the [↑] (up) keyboard key to increment the counter:
-  root.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 38})); // ↑
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 38})); // up
   t.equal(parseInt(document.getElementById('count')
     .textContent, 10), 1, "Up key press increment 0 -> 1");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 1,
     "elmish_store 1 (as expected). incremented state saved to localStorage.");
 
   // trigger the [↓] (down) keyboard key to increment the counter:
-  root.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 40})); // ↓
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 40})); // down
   t.equal(parseInt(document.getElementById('count')
     .textContent, 10), 0, "Up key press dencrement 1 -> 0");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
     "elmish_store 0. keyboard down key decrement state saved to localStorage.");
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42})); //
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42})); //
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // default branch execution:
