[WiP] elmish subscription test FAILING for #57

Author: nelsonic

elmish.md

@@ -1883,6 +1883,18 @@ and consider an alternative User Interaction/Experience: Keyboard!
 
 #### Use-case: Use Up/Down Keyboard (Arrow) Keys to Increment/Decrement Counter
 
+As a user <br />
+I would like to use the keyboard **`[↑]`** (Up) and **`[↓]`** (Down) arrow keys
+to signal the **Increment** and **Decrement** action (_respectively_)
+of the Counter.
+So that I don't have to use a mouse to click a button.
+
+![up-down-arrrow-keys](https://user-images.githubusercontent.com/194400/43962720-4cbfb192-9cb0-11e8-9c45-63e7644f1cf6.png)
+
+Background reading: https://webaim.org/techniques/keyboard
+
+#### Baseline Example Code _Without_ Subscription
+
 Let's start by making a "copy" of the code in `/examples/counter-reset`:
 ```sh
 mkdir examples/counter-reset-keyboard
@@ -1920,8 +1932,8 @@ function view(model, signal) {
     div(["class=count", "id=count"], [text(model.toString())]), // count
     button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
     button(["class=reset", "id=reset", signal('reset')], [text('Reset')])
-  ]); // forEach is ES5 so IE9+
-} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
+  ]);
+}
 
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore else */
@@ -1947,9 +1959,40 @@ should see the Qunit (Broweser) Tests _passing_:
 ![counter-reset-keyboard-broweser-tests-passing](https://user-images.githubusercontent.com/194400/43960760-ed098e80-9caa-11e8-9d8f-08310846dacb.png)
 
 
-
 #### How do We _Test_ for Subscription Events?
 
+As described above in our "use case" we want to create event listeners,
+for the **`[↑]`** (Up) and **`[↓]`** (Down) arrow keyboard keys,
+so the _only_ way to _test_ for these is to "Trigger" the event(s).
+Thankfully, this is _easy_ in JavaScript. Let's write the test!
+
+Add the following _test code_ to your `test/elmish.test.js` file: <br />
+```js
+test here!
+```
+
+Run the test (_watch it fail_!):
+```sh
+node test/elmish.test.js
+```
+![subscriptions-test-failing](https://user-images.githubusercontent.com/194400/43964543-f4a6e520-9cb4-11e8-80f5-ae6bb491b83f.png)
+
+Hopefully it's clear from reading the test _why_ the assertion is _failing_.
+The counter is not being incremented.
+The last assertion passes because
+"_even a broken clock is right twice a day_" ...
+since the counter is never incremented,
+the count is 0 (zero) throughout the test,
+so the last assertion always passes.
+(_this will not be the case
+  once you have the [Up] arrow event listener working_).
+
+#### `subscriptions`_Implementation_: Keyboard Keys Increment/Decrement Counter!
+
+We could spend an hour googling or I can _give_ you the sample code 
+
+
+
 
 
 
@@ -1962,6 +2005,18 @@ for our TodoMVC App!
 
 <br />
 
+
+
+
+
+
+
+
+
+
+
+
+
 ### Why _Not_ use HTML5 `<template>` ??
 
 Templates are an _awesome_ feature in HTML5 which

examples/counter-reset-keyboard/counter.js

@@ -1,8 +1,8 @@
 /* if require is available, it means we are in Node.js Land i.e. testing!
- in the broweser, the "elmish" DOM functions are loaded in a <script> tag*/
+ in the broweser, the "elmish" DOM functions are loaded in a <script> tag */
 /* istanbul ignore next */
 if (typeof require !== 'undefined' && this.window !== this) {
-  var { button, div, empty, h1, mount, text } = require('./elmish.js');
+  var { button, div, empty, mount, text } = require('../todo-list/elmish.js');
 }
 
 function update (action, model) {    // Update function takes the current state
@@ -15,18 +15,39 @@ function update (action, model) {    // Update function takes the current state
 }
 
 function view(model, signal) {
+  console.log('model:', model);
   return div([], [
     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
     button(["class=reset", "id=reset", signal('reset')], [text('Reset')])
-  ]); // forEach is ES5 so IE9+
-} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
+  ]);
+}
+
+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
+  console.log('root', root);
+  root.addEventListener('keyup', function (e) {
+    console.log('e.keyCode', e.keyCode);
+    switch (e.keyCode) {
+      case UP_KEY:
+        signal('inc')(); // invoke the signal.callback function directly
+        break;
+      case DOWN_KEY:
+        signal('dec')();
+        break;
+      default: // do nothing
+        break;
+    }
+  });
+}
 
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore else */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
+    subscriptions: subscriptions,
     view: view,
     update: update,
   }

examples/todo-list/elmish.js

@@ -22,27 +22,27 @@ function empty (node) {
  * @param {Function} subscriptions any event listeners the application needs
  */
 function mount (model, update, view, root_element_id, subscriptions) {
-  var root = document.getElementById(root_element_id); // root DOM element
+  var ROOT = document.getElementById(root_element_id); // root DOM element
   var store_name = 'elmish_' + root_element_id; // test-app !== app
 
   function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
     localStorage.setItem(store_name, JSON.stringify(mod)); // save 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); } // event listeners
+    if (subs && typeof subs === 'function') { subs(sig, root); } // subscription
   }
 
   function signal(action) { // signal function takes action
     return function callback() { // and returns callback
       console.log('signal action:', action);
       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, subscriptions);
     };
   };
 
   model = JSON.parse(localStorage.getItem(store_name)) || model;
-  render(model, signal, root, subscriptions);
+  render(model, signal, ROOT, subscriptions);
 }
 
 /**

test/elmish.test.js

@@ -452,54 +452,37 @@ test('elmish.add_attributes onclick=signal(action) events!', function (t) {
 
 
 test.only('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
-  const { view, update } = require('../examples/counter-reset/counter.js');
-
+  const { view, update, subscriptions } =
+    require('../examples/counter-reset-keyboard/counter.js');
   const root = document.getElementById(id);
-  elmish.mount(0, update, view, id);
-  // the "model" stored in localStorage should be 7 now:
+
+  // mount the counter-reset-keyboard example app WITH subscriptions:
+  elmish.mount(0, update, view, id, subscriptions);
+  // keep a "handle" on the count to reduce test length:
+  const count = document.getElementById('count');
+  // counter starts off at 0 (zero):
+  t.equal(parseInt(count.textContent, 10), 0, "Up key press increment 0 -> 1");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
     "elmish_store is 0 (as expected). initial state saved to localStorage.");
 
-  // trigger the [Enter] keyboard key to ADD the new todo:
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 38})); // ↑
-  const items = document.querySelectorAll('.view');
-
-  // subscription keyCode trigger "branch" test (should NOT fire the signal):
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 40})); // ↓
-  // t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+  // trigger the [↑] (up) keyboard key to increment the counter:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 38})); // ↑
+  t.equal(parseInt(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:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 40})); // ↓
+  t.equal(parseInt(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");
 
-
-  // // test that mount still works as expected (check initial state of counter):
-  // const actual = document.getElementById(id).textContent;
-  // const actual_stripped = parseInt(actual.replace('+', '')
-  //   .replace('-Reset', ''), 10);
-  // const expected = 7;
-  // t.equal(expected, actual_stripped, "Inital state set to 7.");
-  // // attempting to "re-mount" with a different model value should not work
-  // // because mount should retrieve the value from localStorage
-  // elmish.mount(42, update, view, id); // model (42) should be ignored this time!
-  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-  //   "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // // increment the counter
-  // const btn = root.getElementsByClassName("inc")[0]; // click increment button
-  // btn.click(); // Click the Increment button!
-  // const state = parseInt(root.getElementsByClassName('count')[0]
-  //   .textContent, 10);
-  // t.equal(state, 8, "State is 8 after increment.");
-  // // the "model" stored in localStorage should also be 8 now:
-  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-  //   "elmish_store is 8 (as expected).");
-  // elmish.empty(root); // reset the DOM to simulate refreshing a browser window
-  // elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
-  // // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-  //   "elmish_store still 8 from increment (above) saved in localStorage");
   localStorage.removeItem('elmish_store');
+  elmish.empty(root);
   t.end()
 });