add empty function with JSDOC & test for #44

Author: nelsonic

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

@@ -1,89 +1,51 @@
-// Define the Component's Actions:
-var Inc = 'inc';                     // increment the counter
-var Dec = 'dec';                     // decrement the counter
-var Res = 'reset';                   // reset counter: git.io/v9KJk
 
-function update(model, action) {     // Update function takes the current state
-  var parts = action ? action.split('-') : []; // e.g: inc-0 where 0 is the counter "id"
-  var act = parts[0];
-  var index = parts[1] || 0;
-  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  switch(act) {                   // and an action (String) runs a switch
-    case Inc:
-      new_model.counters[index] = model.counters[index] + 1;
-      break;
-    case Dec:
-      new_model.counters[index] = model.counters[index] - 1;
-      break;
-    case Res: // use ES6 Array.fill to create a new array with values set to 0:
-      new_model.counters[index] = 0;
-      break;
-    default: return model; // if action not defined, return curent state.
-  }
-  return new_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+
+
+
+/**
+ * `empty` the contents of a given DOM element "node" (before re-rendering).
+ * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
+ * @param  {Object} node the exact DOM node you want to empty
+ * @return {Boolean} returns true once the DOM node is empty.
+ * @example
+ * // returns true (once the 'app' node is emptied)
+ * const node = document.getElementById('app');
+ * empty(node);
+ */
+function empty(node) {
+  while (node.lastChild) {
+    node.removeChild(node.lastChild);
+  }
+  return true;
 }
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element
 function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {   // signal function takes action
-    return function callback() {     // and returns callback
-      model = update(model, action); // update model according to action
-      view(signal, model, root);     // subsequent re-rendering
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
     };
   };
-  view(signal, model, root);         // render initial model (once)
+  view(signal, model, root);                    // render initial model (once)
 }
 
-// The following are "Helper" Functions which each "Do ONLY One Thing" and are
-// used in the "View" function to render the Model (State) to the Browser DOM:
-
-// empty the contents of a given DOM element "node" (before re-rendering)
-function empty(node) {
-  while (node.firstChild) {
-    node.removeChild(node.firstChild);
-  }
-} // Inspired by: stackoverflow.com/a/3955238/1148249
-
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
-function container(index, elements) {
-  var con = document.createElement('section');
-  con.id = index;
-  con.className = 'counter';
-  elements.forEach(function(el) { con.appendChild(el) });
-  return con;
+function init(doc){
+  document = doc; // this is used for instantiating JSDOM. ignore!
 }
 
-function button(text, signal, action) {
-  var button = document.createElement('button');
-  var text = document.createTextNode(text);    // human-readable button text
-  button.appendChild(text);                    // text goes *inside* not attrib
-  button.className = action.split('-')[0];                   // use action as CSS class
-  button.id = action;
-  // console.log(signal, ' action:', action)
-  button.onclick = signal(action);             // onclick tells how to process
-  return button;                               // return the DOM node(s)
-} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
-
-function div(divid, text) {
-  var div = document.createElement('div');
-  div.id = divid;
-  div.className = divid;
-  if(text !== undefined) { // if text is passed in render it in a "Text Node"
-    var txt = document.createTextNode(text);
-    div.appendChild(txt);
+/* The code block below ONLY Applies to tests run using Node.js */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    // view: view,
+    mount: mount,
+    // update: update,
+    // div: div,
+    // button: button,
+    empty: empty,
+    init: init
   }
-  return div;
-}
+} else { init(document); }

Diff for: test/elmish.test.js

@@ -1,17 +1,36 @@
-const test = require('tape'); // see: https://github.com/dwyl/learn-tape
+const test = require('tape');         // https://github.com/dwyl/learn-tape
 const fs = require('fs');
 const path = require('path');
-const { JSDOM } = require("jsdom"); // https://github.com/jsdom/jsdom
-
-// const html = fs.readFileSync(path.resolve(__dirname,
-//   '../examples/counter-reset/index.html'));
-// const DOM = new JSDOM(html); // create DOM based on HTML
-// const id = 'test-app';
-// const document = DOM.window.document; // shortcut to JSDOM document
-// const counter = require(path.resolve(__dirname,
-//   '../examples/counter-reset/counter.js'));
+require('decache')('jsdom');          // https://github.com/dwyl/decache
+const JSDOM = require("jsdom").JSDOM; // https://github.com/jsdom/jsdom
+const elmish = require(path.resolve(__dirname,
+  '../examples/todo-list/elmish.js'))
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html'));
+const DOM = new JSDOM(html); // create DOM based on HTML
+const id = 'test-app';
+const document = DOM.window.document; // shortcut to JSDOM document
+elmish.init(document); // pass the JSDOM into counter.js
 // const { view, mount, update, div, button, empty, init} = counter;
-// init(document); // pass the JSDOM into counter.js
+
+test('empty("root") removes DOM elements from container', function (t) {
+  // setup the test div:
+  const text = 'Hello World!'
+  const root = document.getElementById(id);
+  const div = document.createElement('div');
+  div.id = 'mydiv';
+  const txt = document.createTextNode(text);
+  div.appendChild(txt);
+  root.appendChild(div);
+  // check text of the div:
+  const actual = document.getElementById('mydiv').textContent;
+  t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
+  t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
+  // empty the root DOM node:
+  elmish.empty(root);
+  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
+  t.end();
+});
 
 // test('Mount app expect state to be Zero', function (t) {
 //   mount(0, update, view, id);