add elmish.attributes function to apply HTML attributes to node for #44

Author: nelsonic

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

@@ -36,6 +36,32 @@ function mount(model, update, view, root_element_id) {
   view(signal, model, root);                    // render initial model (once)
 }
 
+
+/**
+* attributes applies the desired attributes to the desired node.
+* Note: this function is "impure" because it "mutates" the node.
+* however it is idempotent; the "side effect" is only applied once.
+* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Object} node DOM node upon which attribute(s) should be applied
+* @example
+* // returns node with attributes applied
+* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+*/
+function attributes(attrlist, node) {
+  attrlist.forEach(function (attr) {
+    var a = attr.split('=');
+    switch(a[0]) {
+      case 'class':
+        node.className = a[1]; // apply CSS classes
+        break;
+      default:
+        break;
+    }
+  });
+  return node;
+}
+
+
 /**
  * init initialises the document (Global) variable for DOM operations.
  * @param  {Object} doc window.document in browser and JSDOM.document in tests.
@@ -51,11 +77,12 @@ function init(doc){
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     // view: view,
-    mount: mount,
+    attributes: attributes,
+    empty: empty,
+    init: init,
+    mount: mount
     // update: update,
     // div: div,
     // button: button,
-    empty: empty,
-    init: init
   }
 } else { init(document); }

Diff for: test/counter-reset.test.js

@@ -13,9 +13,9 @@ const id = 'test-app';
 test('Mount app expect state to be Zero', function (t) {
   // console.log('mount', mount);
   mount(0, update, view, id);
-  console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
+  // console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
   var actual = document.getElementById(id).textContent;
-  console.log('actual:', actual);
+  // console.log('actual:', actual);
   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
   var expected = 0;
   t.equal(actual_stripped, expected, "Inital state set to 0.");
@@ -42,7 +42,7 @@ test('Test Update decrement: update(3, "dec") returns 2', function (t) {
 
 
 test('click on "+" button (increment model by 1)', function (t) {
-  console.log('document', typeof document, document);
+  // console.log('document', typeof document, document);
   document.body.appendChild(div(id));
   mount(7, update, view, id);
 
@@ -53,10 +53,10 @@ test('click on "+" button (increment model by 1)', function (t) {
   var btn = document.getElementById('inc');
 
   btn.addEventListener('click', function() {
-    console.log('increment button CLICKed!!');
+    // console.log('increment button CLICKed!!');
     var state = parseInt( document.getElementById(id)
       .getElementsByClassName('count')[0].innerHTML, 10);
-    console.log('state:', state, 'typeof state:', typeof state);
+    // console.log('state:', state, 'typeof state:', typeof state);
     t.equal(state, 8,
     "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
     t.end();

Diff for: test/elmish.test.js

@@ -8,17 +8,18 @@ require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 elmish.init(document);              // pass JSDOM into elmish for DOM functions
 const id = 'test-app';              // all tests use separate root element
 
-test('empty("root") removes DOM elements from container', function (t) {
+test('elmish.empty("root") removes DOM elements from container', function (t) {
   // setup the test div:
   const text = 'Hello World!'
+  const divid = "mydiv";
   const root = document.getElementById(id);
   const div = document.createElement('div');
-  div.id = 'mydiv';
+  div.id = divid;
   const txt = document.createTextNode(text);
   div.appendChild(txt);
   root.appendChild(div);
   // check text of the div:
-  const actual = document.getElementById('mydiv').textContent;
+  const actual = document.getElementById(divid).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:
@@ -49,8 +50,26 @@ test('elmish.mount app expect state to be Zero', function (t) {
   t.end()
 });
 
-// test('Test Update update(0) returns 0 (current state)', function (t) {
-//   var result = update(0);
-//   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
-//   t.end();
-// });
+
+test('elmish.attributes applies an HTML attribute to a node', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  div = elmish.attributes(["class=apptastic"], div);
+  root.appendChild(div);
+  // test the div has the desired class:
+  const nodes = document.getElementsByClassName('apptastic');
+  t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
+  t.end();
+});
+
+test('test default branch of elmish.attributes (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking the elmish.attributes
+  const clone = div.cloneNode(true);
+  div = elmish.attributes(["unrecognised_attribute=noise"], div);
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});

Diff for: todo-list.md

@@ -184,7 +184,8 @@ please see:
 
 ### `mount` the App
 
-The next function we need for "TEA" is `mount`.
+The `mount` function is the "glue" or "wiring" function that
+connects the `model`, `update` and `view`; we _can_ _generalise_ it.
 
 In the `test/elmish.test.js` file, type the following code:
 ```js
@@ -213,7 +214,7 @@ test('elmish.mount app expect state to be Zero', function (t) {
 > _**Note**: we have "**borrowed**" this test from our previous example.
 see:_ `test/counter-reset.test.js`
 
-The corresponding code for the `mount` function
+The corresponding code with JSDOC for the `mount` function
 in `examples/todo-list/elmish.js` is:
 ```js
 /**
@@ -236,6 +237,36 @@ function mount(model, update, view, root_element_id) {
 }
 ```
 
+### `module.exports`
+
+In order to test the `elmish` functions we need to `export` them.
+Additionally, because we are using JSDOM
+to test our front-end functions using `tape`,
+we need an `init` function to pass in the JSDOM `document`.
+add the following lines to `examples/todo-list/elmish.js`:
+
+```js
+/**
+ * init initialises the document (Global) variable for DOM operations.
+ * @param  {Object} doc window.document in browser and JSDOM.document in tests.
+ * @return {Object} document returns whatever is passed in.
+ */
+function init(doc){
+  document = doc; // this is used for instantiating JSDOM for testing.
+  return document;
+}
+
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    empty: empty,
+    mount: mount,
+    init: init
+  }
+} else { init(document); }
+```
+
 
 Now that we have started creating the `elmish` generic functions,
 we need to know which _other_ functions we need.
@@ -261,6 +292,9 @@ Open your web browser to: http://localhost:8000
 
 ![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
 
+> If you are unable to run the TodoMVC locally, you can always view it online:
+http://todomvc.com/examples/vanillajs
+
 _Play_ with the app by adding a few items,
 checking-off and toggling the views in the footer.
 
@@ -271,9 +305,6 @@ is quite complex and insufficiently documented_
 _so don't expect to **understand** it all the first time without study._
 _Don't worry, we will walk through building each feature in detail._
 
-> If you are unable to run the TodoMVC locally, you can always view it online:
->> Please add direct link here!
-
 
 
 ### Todo List _Basic_ Functionality
@@ -404,6 +435,16 @@ We therefore need a pair of "helper" functions (_one for each argument_).
 
 
 
+#### `attributes`
+
+`attributes(list, node)`
+
+The `attributes` function is "impure" as it "mutates"
+the target DOM `node`, however the application of attributes
+to DOM node(s) is idempotent;
+the attribute will only be applied _once_ to the node
+regardless of how many times the `attributes` function is called.
+see: https://en.wikipedia.org/wiki/Idempotence
 
 
 
@@ -415,15 +456,8 @@ Demo: https://ellie-app.com/LTtNVQjfWVa1
 
 
 
-
-### `mount`
-
-The `mount` function is the "glue" or "wiring" function that
-connects the `model`, `update` and `view`; we _can_ `generalise` it.
-
-
-
-
+The Elm HTML Attributes package is:
+http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes