add view function implementation to pass tests for #54

Author: nelsonic

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

@@ -132,28 +132,46 @@ function render_footer (model) {
   )
 }
 
-
-// function view(signal, model, root) {
-//   empty(root); // clear root element before re-rendering the App (DOM).
-//   model.counters.map(function(counter, index) {
-//     return container(index, [                // wrap DOM nodes in an "container"
-//       button('+', signal, Inc + '-' + index),    // append index to action
-//       div('count', counter),       // create div w/ count as text
-//       button('-', signal, Dec + '-' + index),    // decrement counter
-//       button('Reset', signal, Res + '-' + index) // reset counter
-//     ]);
-//   }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
-// }
+/**
+ * `view` renders the entire Todo List App
+ * which contains count of items to (still) to be done and a `<ul>` "menu"
+ * with links to filter which todo items appear in the list view.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @return {Object} <section> DOM Tree which containing all other DOM elements.
+ * @example
+ * // returns <section class="todo-app"> DOM element with other DOM els nested:
+ * var DOM = view(model);
+ */
+function view(model) {
+  return (
+    section(["class=todoapp"], [ // array of "child" elements
+      header(["class=header"], [
+        h1([], [
+          text("todos")
+        ]), // </h1>
+        input([
+          "id=new-todo",
+          "class=new-todo",
+          "placeholder=What needs to be done?",
+          "autofocus"
+        ], []) // <input> is "self-closing"
+      ]), // </header>
+      render_main(model),
+      render_footer(model)
+    ]) // <section>
+  );
+}
 
 /* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     model: initial_model,
     update: update,
-    render_item: render_item, // export so that we can unit test
-    render_main: render_main, // export for unit testing
-    render_footer: render_footer // export for unit testing
+    render_item: render_item,     // export so that we can unit test
+    render_main: render_main,     // export for unit testing
+    render_footer: render_footer, // export for unit testing
+    view: view
   }
 }
 

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

@@ -162,19 +162,16 @@ test('render_footer 1 item left (pluarisation test)', function (t) {
   t.end();
 });
 
-test.only('view renders the whole todo app using "partials"', function (t) {
+test('view renders the whole todo app using "partials"', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   document.getElementById(id).appendChild(app.view(app.model)); // initial_model
 
-  t.equal(document.querySelectorAll('h1').textContent, "todos", "<h1>todos");
+  t.equal(document.querySelectorAll('h1')[0].textContent, "todos", "<h1>todos");
   // placeholder:
   const placeholder = document.getElementById('new-todo')
     .getAttribute("placeholder");
   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
 
-  const empty = document.querySelectorAll('.todo-list')
-  console.log('empty', empty);
-
   // todo-count should display 0 items left (based on initial_model):
   const left = document.getElementById('count').innerHTML;
   t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);

Diff for: todo-list.md

@@ -1218,7 +1218,7 @@ Here is a sample JSDOC comment you can add to your **`todo-app.js`** file:
 These should be pretty familiar to you by now.
 If you feel comfortable extending it with more detail, go for it!
 
-#### `view` Tests
+#### `view` _Tests_
 
 A sample test for the `view` function
 you can add to your `test/todo-app.test.js` file:
@@ -1230,15 +1230,12 @@ test.only('view renders the whole todo app using "partials"', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   document.getElementById(id).appendChild(app.view(app.model)); // initial_model
 
-  t.equal(document.querySelectorAll('h1').textContent, "todos", "<h1>todos");
+  t.equal(document.querySelectorAll('h1')[0].textContent, "todos", "<h1>todos");
   // placeholder:
   const placeholder = document.getElementById('new-todo')
     .getAttribute("placeholder");
   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
 
-  const empty = document.querySelectorAll('.todo-list')
-  console.log('empty', empty);
-
   // todo-count should display 0 items left (based on initial_model):
   const left = document.getElementById('count').innerHTML;
   t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);
@@ -1254,7 +1251,15 @@ node test/todo-app.test.js
 ```
 
 you will see something like this ("_Red_"):
+![app.view-not-a-function](https://user-images.githubusercontent.com/194400/43782111-721805c2-9a56-11e8-970b-681b1499b3a8.png)
+
+#### `view` Function _Implementation_
+
+
+
 
+When you run `npm test` you should see something like this:
+![image](https://user-images.githubusercontent.com/194400/43782895-48496f22-9a58-11e8-9fde-dbb5554f43a0.png)
 
 <!--