add screenshot of 2. New Todo tests passing #57

Author: nelsonic

Diff for: elmish.md

@@ -1862,7 +1862,7 @@ If you get "stuck", checkout:
 
 <br />
 
-### `subscriptions` for event listeners
+### `subscriptions` for Event Listeners
 
 In Elm, when we want to "listen" for an event or "external input"
 we use `subscriptions`. <br />
@@ -1988,6 +1988,8 @@ so the last assertion always passes.
 (_this will not be the case
   once you have the [Up] arrow event listener working_).
 
+Recommended reading: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically
+
 #### `subscriptions`_Implementation_: Keyboard Keys Increment/Decrement Counter!
 
 Once again, try to _think_ of how you would implement
@@ -2006,7 +2008,7 @@ Your tests should pass:
 
 ![counter-reset-keyboard-subscriptions-tests-passing](https://user-images.githubusercontent.com/194400/43981911-b6413dda-9ceb-11e8-8514-44fc1f88c3fe.png)
 
-Well done! 
+Well done!
 
 <br />
 

Diff for: examples/counter-reset-keyboard/index.html

@@ -18,8 +18,7 @@
   <script>
   // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node
    mount(0, update, view, 'app', subscriptions);
-   console.log('subs:', subscriptions.toString());
   </script>
-  
+
 </body>
 </html>

Diff for: examples/todo-list/elmish.js

@@ -31,10 +31,10 @@ function mount (model, update, view, root_element_id, subscriptions) {
     root.appendChild(view(mod, sig)) // render view based on model & signal
   }
 
-  function signal(action) { // signal function takes action
+  function signal(action, data) { // 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
+      var updatedModel = update(action, model, data); // update model for the action
       render(updatedModel, signal, ROOT);
     };
   };

Diff for: examples/todo-list/todo-app.js

@@ -197,7 +197,7 @@ function subscriptions (signal) {
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
   var new_todo = document.getElementById('new-todo');
 
-  new_todo.addEventListener('keypress', function (e) {
+  new_todo.addEventListener('keyup', function (e) {
     if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
       signal('ADD')(); // invoke the singal function and inner callback
       new_todo.value = ''; // reset <input> so we can add another todo

Diff for: test/todo-app.test.js

@@ -220,7 +220,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
   new_todo.value = todo_text;
   // trigger the [Enter] keyboard key to ADD the new todo:
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
   t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
@@ -229,7 +229,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42}));
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // check that the <input id="new-todo"> was reset after the new item was added

Diff for: todo-list.md

@@ -1473,7 +1473,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
   new_todo.value = todo_text;
   // trigger the [Enter] keyboard key to ADD the new todo:
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
 
   t.equal(items.length, 1, "should allow me to add todo items");
@@ -1483,7 +1483,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42}));
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // check that the <input id="new-todo"> was reset after the new item was added
@@ -1510,7 +1510,28 @@ You should see the following output:
 
 ![test-failing](https://user-images.githubusercontent.com/194400/43929259-1880b41e-9c2c-11e8-9615-1372928c905d.png)
 
-Reading: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically
+
+#### Todo List `subscriptions`
+
+So far in the Todo List App
+we have not implemented any **`subscriptions`**,
+however, in order to "listen" for the **`[Enter]`** key "event"
+(_to add a Todo List item_), we need to dive into event listeners.
+
+Thankfully, we touched upon this while building `Elm`(_ish_),
+if you need a recap, see:
+[**elmish.md#subscriptions-for-event-listeners**](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md#subscriptions-for-event-listeners)
+
+Try to make the "**2. New Todo**" batch of tests _pass_
+by creating (_and exporting_) a **`subscriptions`** function
+in your **`examples/todo-list/todo-app.js`** file.
+
+If you get "_stuck_", checkout the sample code:
+[**`todo-app.js > subscriptions`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR189)
+
+0nce you see the tests passing:
+
+![add-todo-tests-passing](https://user-images.githubusercontent.com/194400/43982691-08d81eee-9cef-11e8-92c3-341433884092.png)
 
 
 <!--