add test for [ENTER] key in edit mode to SAVE revised todo item title #60

Author: nelsonic

Diff for: edit-todo.md

@@ -369,7 +369,7 @@ Let's work on the `case` (_handler_) for **`signal('EDIT', item.id)`**
 which will handle the "double-click" event and set `model.editing`.
 
 
-#### 5.2 Double-Click item `<label>` to Edit
+### 5.2 Double-Click item `<label>` to Edit
 
 The TodoMVC ***spec*** for item
 https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
@@ -560,3 +560,45 @@ time between clicks works; clicks spaced more than 300ms will not count
 as "double-click".
 
 ![edit-item-not-double-click](https://user-images.githubusercontent.com/194400/45184155-ff310b00-b21d-11e8-8f6c-ef6d699861cf.png)
+
+
+### 5.3 `'SAVE'` a Revised Todo Item Title after Editing it
+
+
+
+
+
+### 5.3 `'SAVE' update case` _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // 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!"
+  // 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.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)

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

@@ -103,11 +103,6 @@ function update(action, model, data) {
   return new_model;
 }
 
-function edit_item (item, model, signal) {
-  return [
-    ,
-  ]
-}
 
 
 /**
@@ -291,7 +286,6 @@ function subscriptions (signal) {
       case ENTER_KEY:
         var editing = document.getElementsByClassName('editing');
         if (editing && editing.length > 0) {
-          console.log('editing:', editing);
           signal('SAVE')(); // invoke singal inner callback
         }
 
@@ -302,9 +296,9 @@ function subscriptions (signal) {
           document.getElementById('new-todo').focus();
         }
         break;
-      case ESCAPE_KEY:
-
-        break;
+      // case ESCAPE_KEY: // COMING SOON!
+      //
+      //   break;
     }
   });
 }

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

@@ -395,7 +395,7 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
 });
 
 
-test('5. Editing: > Render an item in "editing mode"', function (t) {
+test('5.1 Editing: > Render an item in "editing mode"', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {
@@ -474,28 +474,27 @@ test('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
 });
 
 
-test.skip('5.1 Double-click an item <label> to edit it', function (t) {
+test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
-      { id: 0, title: "Make something people want.", done: false }
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
     ],
-    hash: '#/' // the "route" to display
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
   };
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // const todo_count = ;
-  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
-
-  const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
-  // DELETE the item by clicking on the <button class="destroy">:
-  const button = item.querySelectorAll('button.destroy')[0];
-  button.click()
-  // confirm that there is no loger a <button class="destroy">
-  t.equal(document.querySelectorAll('button.destroy').length, 0,
-    'there is no loger a <button class="destroy"> as the only item was DELETEd')
-  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
+  // change the
+  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.end();
 });