tidy up tests in counter-test for #5

README.md

@@ -221,12 +221,17 @@ In the _first_ example we kept everything in one file (`index.html`)
 for simplicity. In order to write tests, we need to _split_ out the
 JavaScript code from the HTML.
 
+For this example there are 3 _separate_ files:
+
+![test-example-files](https://cloud.githubusercontent.com/assets/194400/25785513/768205e8-337a-11e7-826f-887c3ac937b6.png)
 
 
 Let's start by opening the `/examples/counter-basic-test/index.html`
-file in your web browser: <br />
+file in a web browser: <br />
 http://127.0.0.1:8000/examples/counter-basic-test/?coverage
 
+![counter-tests](https://cloud.githubusercontent.com/assets/194400/25776602/9df4b550-32ba-11e7-958b-25baaeeea212.png)
+
 Because all functions are "pure" testing
 the `update` function is _very_ easy:
 
@@ -246,12 +251,11 @@ test('Test Update decrement: update(3, "dec") returns 2', function(assert) {
   assert.equal(result, 0);
 });
 ```
-open: `examples/counter-basic-test/test.js`
-to see these and _other_ tests.
+open: `examples/counter-basic-test/test.js` to see these and _other_ tests.
 
-![counter-tests](https://cloud.githubusercontent.com/assets/194400/25776602/9df4b550-32ba-11e7-958b-25baaeeea212.png)
 
-### 7.1 What is a "_Pure_" Function? (_Quick Learning/Recap_)
+
+### 8. What is a "_Pure_" Function? (_Quick Learning/Recap_)
 
 Pure Functions are functions that **always
 return** the **same output** for a **given input**. <br />
@@ -261,7 +265,7 @@ they just do what they are told; this makes them very predictable/testable.
 Pure functions "transform" data into the desired value,
 they do not "mutate" state.
 
-#### 7.1.1 Example of an _Impure_ Function
+#### 8.1 Example of an _Impure_ Function
 
 The following function is "_impure_" because it "_mutates_"
 i.e. changes the `counter` variable which is _outside_ of the function
@@ -278,7 +282,7 @@ console.log(increment()); // 3
 ```
 see: https://repl.it/FIot/1
 
-#### 7.1.1 Example of an _Pure_ Function
+#### 8.2 Example of an _Pure_ Function
 
 This example is a "pure" function because it will _always_ return
 same result for a given input.
@@ -303,6 +307,9 @@ we _always_ use "Pure" functions in Apps built with the Elm Architecture.
 The moment you use "_impure_" functions you forfeit reliability.
 
 
+### 9. Extend the Counter Example following "TDD"
+
+
 
 
 <br /> <br />

examples/counter-basic-test/counter.js

@@ -40,11 +40,23 @@ function button(text, signal, action) {
   return button;                               // return the DOM node(s)
 } // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
 
+function div(divid, text) {
+  console.log(divid, text)
+  var div = document.createElement('div');
+  div.id = divid;
+  if(text !== undefined) {
+    var txt = document.createTextNode(text);
+    div.appendChild(txt);
+  }
+  console.log(div);
+  return div;
+}
+
 function view(signal, model, root) {
   empty(root);                                 // clear root element before
   return [                                     // Store DOM nodes in an array
     button('+', signal, Inc),                  // then iterate to append them
-    document.createTextNode(model),            // avoids repetition.
+    div('count', model),                      // avoids repetition.
     button('-', signal, Dec)
   ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!

examples/counter-basic-test/index.html

@@ -21,7 +21,7 @@
   <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
   <!-- Load Blanket.js from CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js"></script>
-  <script src="app.js" data-cover></script> <!-- load our getChange method  -->
+  <script src="counter.js" data-cover></script> <!-- load our getChange method  -->
   <script src="test.js"></script>              <!-- load tests after getChange -->
   <script>
   // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node

examples/counter-basic-test/test.js

@@ -1,5 +1,13 @@
 var id = 'test-app'
+
+test('create test div', function(assert) {
+  document.body.appendChild(div(id));
+  var result = document.getElementById(id).innerHtml;
+  assert.equal(result, undefined);
+})
+
 test('Test Update update(0) returns 0 (current state)', function(assert) {
+
   var result = update(0);
   assert.equal(result, 0);
 });
@@ -32,11 +40,12 @@ test('empty test-app should be an empty DOM node', function(assert) {
   var init = {model: 7, update: update, view: view};
   mount(init, id);
   empty(document.getElementById(id));
-  var result = document.getElementById(id).innerHtml;
+  var result = document.getElementById(id).innerHtml
   assert.equal(result, undefined);
 });
 
 test('click on button to re-render state', function(assert) {
+  document.body.appendChild(div(id));
   var init = {model: 7, update: update, view: view};
   mount(init, id);
   document.getElementsByTagName('button')[2].click();