add SAVE todo item title edit implementation for #60

edit-todo.md

@@ -587,18 +587,94 @@ test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
   // change the
-  const updated_title = "Do things that don\'t scale!"
+  const updated_title = "Do things that don\'t scale!  "
   // apply the updated_title to the <input class="edit">:
   document.querySelectorAll('.edit')[0].value = updated_title;
   // trigger the [Enter] keyboard key to ADD the new todo:
   document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
-  // confirm that the todo item title was updated to the updated_title
+  // confirm that the todo item title was updated to the updated_title:
   const label = document.querySelectorAll('.view > label')[1].textContent;
-  t.equal(label, updated_title, "item title updated to:" + updated_title)
+  t.equal(label, updated_title.trim(),
+      "item title updated to:" + updated_title + ' (trimmed)');
   t.end();
 });
 ```
 If you attempt to run this test: `node test/todo-app.test.js`
 you will see output similar to the following:
 
-![edit-double-click-test-failing](https://user-images.githubusercontent.com/194400/45183202-54b7e880-b21b-11e8-84d8-7b3b50162113.png)
+![save-edit-test-fails](https://user-images.githubusercontent.com/194400/45187886-2c83b600-b22a-11e8-8782-6d3fcaa240df.png)
+
+
+### 5.3 `'SAVE' update case` _Implementation_
+
+The _first_ step in the implementation is to create the `'SAVE'` case
+in `update` function:
+
+```js
+case 'SAVE':
+  var edit = document.getElementsByClassName('edit')[0];
+  var value = edit.value;
+  var id = parseInt(edit.id, 10);
+  // End Editing
+  new_model.clicked = false;
+  new_model.editing = false;
+
+  if (!value || value.length === 0) { // delete item if title is blank:
+    return update('DELETE', new_model, id);
+  }
+  // update the value of the item.title that has been edited:
+  new_model.todos = new_model.todos.map(function (item) {
+    if (item.id === id && value && value.length > 0) {
+      item.title = value.trim();
+    }
+    return item; // return all todo items.
+  });
+  break;
+```
+
+The _second_ step is _triggering_ this `case` in the `subscriptions`
+event listener for `keyup`:
+
+_Before_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+  }
+});
+```
+
+
+_After_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var editing = document.getElementsByClassName('editing');
+      if (editing && editing.length > 0) {
+        signal('SAVE')(); // invoke singal inner callback
+      }
+
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+  }
+});
+```
+
+When you run the tests: `node test/todo-app.test.js`
+they should now _pass_:
+![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)

examples/todo-list/todo-app.js

@@ -79,7 +79,7 @@ function update(action, model, data) {
       }
       break;
     case 'SAVE':
-      var edit = document.querySelectorAll('.edit')[0];
+      var edit = document.getElementsByClassName('edit')[0];
       var value = edit.value;
       var id = parseInt(edit.id, 10);
       // End Editing

test/todo-app.test.js

@@ -474,7 +474,7 @@ test('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
 });
 
 
-test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
+test('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {
@@ -488,13 +488,14 @@ test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
   // change the
-  const updated_title = "Do things that don\'t scale!"
+  const updated_title = "Do things that don\'t scale!  "
   // apply the updated_title to the <input class="edit">:
   document.querySelectorAll('.edit')[0].value = updated_title;
   // trigger the [Enter] keyboard key to ADD the new todo:
   document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   // confirm that the todo item title was updated to the updated_title:
   const label = document.querySelectorAll('.view > label')[1].textContent;
-  t.equal(label, updated_title, "item title updated to:" + updated_title)
+  t.equal(label, updated_title.trim(),
+      "item title updated to:" + updated_title + ' (trimmed)');
   t.end();
 });