add test (passing) for 4. Item (toggle) done #44

Author: nelsonic

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

@@ -19,17 +19,14 @@ var initial_model = {
  */
 function update(action, model, data) {
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  // console.log('> > > > > > > > > > > model', model);
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
       // can you see an "issue" with this way of generating the todo id? Bug...?
       var id = (typeof model.todos !== 'undefined' && model.todos.length > 0) ?
         (model.todos.length + 1) : 1;
       var input = document.getElementById('new-todo');
-      // console.log('new_model.todos', new_model.todos);
       new_model.todos = (new_model.todos && new_model.todos.length > 0)
         ? new_model.todos : [];
-      // console.log('new_model.todos', new_model.todos);
       new_model.todos.push({
         id: id,
         title: data || input.value.trim(),
@@ -44,10 +41,8 @@ function update(action, model, data) {
       });
       // if all todos are done=true then "check" the "toggle-all" checkbox:
       var all_done = new_model.todos.filter(function(item) {
-        // console.log('> > > > > >item.done:', item.done);
         return item.done === false; // only care about items that are NOT done
       }).length;
-      // console.log(' >>>> all_done', all_done);
       new_model.all_done = all_done === 0 ? true : false;
       break;
     case 'TOGGLE_ALL':

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

@@ -306,3 +306,33 @@ test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   localStorage.removeItem('elmish_store');
   t.end();
 });
+
+test.only('4. Item: should allow me to mark items as complete', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // 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 item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // confirm that the todo item is NOT done (done=false):
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item starts out "active" (done=false)');
+
+
+  // click the checkbox to toggle it to done=true
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, true,
+  'Item should allow me to mark items as complete');
+
+  // click the checkbox to toggle it to done=false "undo"
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item should allow me to un-mark items as complete');
+  t.end();
+});

Diff for: todo-list.md

@@ -1382,6 +1382,7 @@ We are going to write each one of these tests and then
 
 #### 1. No Todos, should hide #footer and #main
 
+
 Add the following test to your `test/todo-app.test.js` file:
 ```js
 test.only('1. No Todos, should hide #footer and #main', function (t) {
@@ -1638,6 +1639,73 @@ Try and make this test pass by yourself before consulting the
 sample code:
 [**`examples/todo-list/todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR46)
 
+
+### 4. Item
+
+```
+4. Item
+  ✓ should allow me to mark items as complete (843ms)
+  ✓ should allow me to un-mark items as complete (978ms)
+  ✓ should allow me to edit an item (1155ms)
+  ✓ should show the remove button on hover
+```
+
+Of these requirements, we already have the first two "_covered_"
+because we implemented the `TOGGLE` feature (_above_).
+
+We can add another "proxy" test just for "_completeness_":
+
+```js
+test.only('4. Item: should allow me to mark items as complete', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // 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 item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // confirm that the todo item is NOT done (done=false):
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item starts out "active" (done=false)');
+
+
+  // click the checkbox to toggle it to done=true
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, true,
+  'Item should allow me to mark items as complete');
+
+  // click the checkbox to toggle it to done=false "undo"
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item should allow me to un-mark items as complete');
+  t.end();
+});
+```
+You should not need to write any additional code
+in order to make this test pass; just run it and move on.
+
+![toggle-todo-tests-passing](https://user-images.githubusercontent.com/194400/43992979-a4d00ab6-9d7e-11e8-891b-9f699f474dd5.png)
+
+
+
+#### 4.2 `EDIT` an Item
+
+```
+should allow me to edit an item
+```
+
+#### 4.1 `DELETE` an Item
+
+```
+should show the remove button on hover
+```
+
+
 <!--
 
 ## What _Next_?