implement DELETE todo item using least possible code. closes #59

nelsonic · nelsonic · commit 39ed37425217 · 2018-09-04T10:03:51.000+01:00
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
@@ -34,7 +34,7 @@ function mount (model, update, view, root_element_id, subscriptions) {
   function signal(action, data, model) { // signal function takes action
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
-      var updatedModel = update(action, model, data); // update model for the action
+      var updatedModel = update(action, model, data); // update model for action
       render(updatedModel, signal, ROOT);
     };
   };
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
@@ -18,8 +18,8 @@ var initial_model = {
  * @return {Object} updated_model - the transformed model.
  */
 function update(action, model, data) {
-  console.log(arguments)
-  console.log(' - - - - - - - - - - - ');
+  // console.log(arguments)
+  // console.log(' - - - - - - - - - - - ');
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
@@ -53,9 +53,12 @@ function update(action, model, data) {
         item.done = new_model.all_done;
       });
       break;
-    // case 'DELETE':
-    //   console.log('DELETE', data)
-    //   break;
+    case 'DELETE':
+      new_model.todos = new_model.todos.filter(function(item) {
+        console.log(item.id, data);
+        return item.id !== data;
+      });
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
@@ -94,7 +97,8 @@ function render_item (item, model, signal) {
           ],
           []), // <input> does not have any nested elements
         label([], [text(item.title)]),
-        button(["class=destroy", ]) // signal('DELETE', 'blah!', model)])
+        button(["class=destroy",
+        typeof signal === 'function' ? signal('DELETE', item.id) : ''])
       ]) // </div>
     ]) // </li>
   )
@@ -231,7 +235,7 @@ function subscriptions (signal) {
 
   document.addEventListener('keyup', function handler (e) {
     var new_todo = document.getElementById('new-todo');
-    console.log('e.keyCode', e);
+    console.log('e.keyCode:', e.keyCode, '| key:', e.key);
     if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
       signal('ADD')(); // invoke singal inner callback
       new_todo.value = ''; // reset <input> so we can add another todo
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
@@ -59,7 +59,36 @@ test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
   t.end();
 });
 
+// this is used for testing view functions which require a signal function
+function mock_signal () {
+  return function inner_function() {
+    console.log('done');
+  }
+}
+
 test('render_item HTML for a single Todo Item', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the ONE todo list item:
+  document.getElementById(id).appendChild(
+    app.render_item(model.todos[0], model, mock_signal),
+  );
+
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
+
+  const checked = document.querySelectorAll('input')[0].checked;
+  t.equal(checked, true, 'Done: ' + model.todos[0].title + " is done=true");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+
+test('render_item HTML without a valid signal function', function (t) {
   const model = {
     todos: [
       { id: 1, title: "Learn Elm Architecture", done: true },
@@ -69,7 +98,7 @@ test('render_item HTML for a single Todo Item', function (t) {
   // render the ONE todo list item:
   document.getElementById(id).appendChild(
     app.render_item(model.todos[0]),
-  )
+  );
 
   const done = document.querySelectorAll('.completed')[0].textContent;
   t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
@@ -91,7 +120,7 @@ test('render_main "main" view using (elmish) HTML DOM functions', function (t) {
     hash: '#/' // the "route" to display
   };
   // render the "main" view and append it to the DOM inside the `test-app` node:
-  document.getElementById(id).appendChild(app.render_main(model));
+  document.getElementById(id).appendChild(app.render_main(model, mock_signal));
   // test that the title text in the model.todos was rendered to <label> nodes:
   document.querySelectorAll('.view').forEach(function (item, index) {
     t.equal(item.textContent, model.todos[index].title,
@@ -339,7 +368,7 @@ test('4. DELETE an item', function (t) {
   t.end();
 });
 
-test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
+test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {
@@ -354,12 +383,13 @@ test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   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 model.');
+  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');
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
@@ -1693,94 +1693,6 @@ in order to make this test pass; just run it and move on.
 
 
 
-
-#### 4.2 `EDIT` an Item
-
-```
-should allow me to edit an item
-```
-
-Editing a Todo List item is (_by far_)
-the most "complex" functionality in the TodoMVC app
-because it involves multiple steps and "dynamic UI".
-
-
-
-+ [ ] Double-click on Item **`<label>title</label>`** to begin editing.
-+ [ ] Render an **`<input class="edit">`** if in "**editing _mode_**"
-(_see screenshot and markup below_)
-+ [ ] Add `case` in `keyup` Event Listener for **`[Enter]`** keyup
-(_see **`subscriptions`** above_) if we are in "**editing _mode_**",
-get the text value from the **`<input class="edit">`**
-_instead_ of **`<input id="new-todo">`**
-so that we _update_ the _existing_ Todo Item title (text).
-+ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
-Dispatch the **`END_EDIT`** action: `signal('END_EDIT')`
-
-![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
-
-Here is the _sample_ HTML in "**editing _mode_**"
-(_copy-pasted_) from the VanillaJS TodoMVC implementation
-the _second_ **`<li>`** is the one being edited (_as per screenshot above_):
-```HTML
-<ul class="todo-list">
-  <li data-id="1533987109280" class="completed ">
-    <div class="view">
-      <input class="toggle" type="checkbox" checked="">
-      <label>hello world</label>
-      <button class="destroy"></button>
-    </div>
-  </li>
-  <li data-id="1534013859716" class="editing">
-    <div class="view"><input class="toggle" type="checkbox">
-      <label>totes editing this todo item</label>
-      <button class="destroy">
-      </button>
-    </div>
-    <input class="edit">
-  </li>
-</ul>
-```
-
-
-
-```js
-
-```
-
-There are _two_ steps to Editing a Todo List item:
-
-+ [ ] Receiving the `singal('EDIT', item.id)` "activates" editing mode.
-
-
-
-
-BEFORE:
-```js
-function render_item (item, signal) {
-  return (
-    li([
-      "data-id=" + item.id,
-      "id=" + item.id,
-      item.done ? "class=completed" : ""
-    ], [
-      div(["class=view"], [
-        input([
-          item.done ? "checked=true" : "",
-          "class=toggle",
-          "type=checkbox",
-          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
-          ],
-          []), // <input> does not have any nested elements
-        label([], [text(item.title)]),
-        button(["class=destroy"])
-      ]) // </div>
-    ]) // </li>
-  )
-}
-```
-
-
 #### 4.1 `DELETE` an Item
 
 ```
@@ -1859,25 +1771,147 @@ test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   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 model.');
+  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');
   t.end();
 });
 ```
 
-If you run the tests `node test/todo-app.test.js` 
+If you run the tests `node test/todo-app.test.js`
 you should now see:
 ![delete-test-one-assertion-failing](https://user-images.githubusercontent.com/194400/44953479-21313300-ae96-11e8-971a-51757702bacc.png)
 
+The first two assertions are _optional_ and _should_ (_always_)
+pass given that they rely on functionality defined previously.
+The second two will only pass once you _make_ them pass!
+
+##### `DELETE` Item _Implementation_
+
+The _first_ step is to add an invocation of `signal('DELETE' ...)`
+to the `render_item` view rendering function. _Specifically_ the
+`button` line:
+
+```js
+button(["class=destroy"])
+```
+Add the `signal` function invocation:
+```js
+button(["class=destroy", signal('DELETE', item.id, model)])
+```
+
+simply adding this function invocation will set it
+as an `onclick` attribute for the `<button>`
+therefore when the _user_ clicks the button it will
+"trigger" the `signal` function with the appropriate arguments.
+
+
+_Second_ we need to add a `case` statement
+to the `update` function.
+You should attempt to "solve" this yourself.
+There is no "right" answer, there are at least
+5 ways of solving this, as always, you should write the code
+that you feel is most _readable_.
+
+
+
+
 
 
 <!--
 
+
+#### 4.2 `EDIT` an Item
+
+```
+should allow me to edit an item
+```
+
+Editing a Todo List item is (_by far_)
+the most "complex" functionality in the TodoMVC app
+because it involves multiple steps and "dynamic UI".
+
+
+
++ [ ] Double-click on Item **`<label>title</label>`** to begin editing.
++ [ ] Render an **`<input class="edit">`** if in "**editing _mode_**"
+(_see screenshot and markup below_)
++ [ ] Add `case` in `keyup` Event Listener for **`[Enter]`** keyup
+(_see **`subscriptions`** above_) if we are in "**editing _mode_**",
+get the text value from the **`<input class="edit">`**
+_instead_ of **`<input id="new-todo">`**
+so that we _update_ the _existing_ Todo Item title (text).
++ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
+Dispatch the **`END_EDIT`** action: `signal('END_EDIT')`
+
+![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
+
+Here is the _sample_ HTML in "**editing _mode_**"
+(_copy-pasted_) from the VanillaJS TodoMVC implementation
+the _second_ **`<li>`** is the one being edited (_as per screenshot above_):
+```HTML
+<ul class="todo-list">
+  <li data-id="1533987109280" class="completed ">
+    <div class="view">
+      <input class="toggle" type="checkbox" checked="">
+      <label>hello world</label>
+      <button class="destroy"></button>
+    </div>
+  </li>
+  <li data-id="1534013859716" class="editing">
+    <div class="view"><input class="toggle" type="checkbox">
+      <label>totes editing this todo item</label>
+      <button class="destroy">
+      </button>
+    </div>
+    <input class="edit">
+  </li>
+</ul>
+```
+
+
+```js
+
+```
+
+There are _two_ steps to Editing a Todo List item:
+
++ [ ] Receiving the `singal('EDIT', item.id)` "activates" editing mode.
+
+
+
+
+BEFORE:
+```js
+function render_item (item, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ],
+          []), // <input> does not have any nested elements
+        label([], [text(item.title)]),
+        button(["class=destroy"])
+      ]) // </div>
+    ]) // </li>
+  )
+}
+```
+
+
 ## What _Next_?
 
 If you feel _confident_ with your "TEA" skills you can _either_:
