create basic files for "elmish" Todo List #44

examples/todo-list/app.js

@@ -0,0 +1,89 @@
+// 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+
+}
+
+// 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
+    };
+  };
+  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 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);
+  }
+  return div;
+}

examples/todo-list/elmish.js

@@ -0,0 +1,89 @@
+// 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+
+}
+
+// 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
+    };
+  };
+  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 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);
+  }
+  return div;
+}

examples/todo-list/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang=”en-GB”>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport"
+  content="width=device-width, initial-scale=1.0, user-scalable=yes">
+  <title>Elm Architecture in JS - Counter Reset</title>
+  <link rel="shortcut icon"
+  href="https://www.dwyl.io/images/favicon.ico" type="image/x-icon">
+  <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
+  <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="counter.js" data-cover></script> <!-- load counter  -->
+  <script> mount({counters:[0, 1, 2]}, update, view, 'app'); </script>
+  <!-- Below this point is all related to the Tests for the App -->
+  <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
+  <div id="qunit"></div>    <!-- test results are displayed here -->
+  <!-- Load the QUnit CSS file from CDN - require to display our tests -->
+  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
+  <!-- Load the QUnit Testing Framework from CDN - to run the tests -->
+  <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
+  <!-- Load Blanket.js from CDN - for test coverage stats -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
+  </script>
+  <script src="test.js"></script>  <!-- always load test.js last -->
+</body>
+</html>

examples/todo-list/test.js

@@ -0,0 +1,74 @@
+var id = 'test-app';
+
+test('update({counters:[0]}) returns {counters:[0]} (current state unmodified)',
+    function(assert) {
+  var result = update({counters:[0]});
+  assert.equal(result.counters[0], 0);
+});
+
+test('Test Update increment: update(1, "inc") returns 2', function(assert) {
+  var result = update({counters: [1] }, "inc");
+  console.log('result', result);
+  assert.equal(result.counters[0], 2);
+});
+
+
+test('Test Update decrement: update(1, "dec") returns 0', function(assert) {
+  var result = update({counters: [1] }, "dec");
+  assert.equal(result.counters[0], 0);
+});
+
+test('Test negative state: update(-9, "inc") returns -8', function(assert) {
+  var result = update({counters: [-9] }, "inc");
+  assert.equal(result.counters[0], -8);
+});
+
+test('mount({model: 7, update: update, view: view}, "'
+  + id +'") sets initial state to 7', function(assert) {
+  mount({counters:[7]}, update, view, id);
+  var state = document.getElementById(id)
+    .getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 7);
+});
+
+test('empty("test-app") should clear DOM in root node', function(assert) {
+  empty(document.getElementById(id));
+  mount({counters:[7]}, update, view, id);
+  empty(document.getElementById(id));
+  var result = document.getElementById(id).innerHtml
+  assert.equal(result, undefined);
+});
+
+test('click on "+" button to re-render state (increment model by 1)',
+function(assert) {
+  document.body.appendChild(div(id));
+  mount({counters:[7]}, update, view, id);
+  document.getElementById(id).getElementsByClassName('inc')[0].click();
+  var state = document.getElementById(id)
+    .getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 8); // model was incremented successfully
+  empty(document.getElementById(id)); // clean up after tests
+});
+
+// Reset Functionality
+
+test('Test reset counter when model/state is 6 returns 0', function(assert) {
+  var result = update({counters:[7]}, "reset");
+  assert.equal(result.counters[0], 0);
+});
+
+test('reset button should be present on page', function(assert) {
+  var reset = document.getElementsByClassName('reset');
+  assert.equal(reset.length, 3);
+});
+
+test('Click reset button resets state to 0', function(assert) {
+  mount({counters:[7]}, update, view, id);
+  var root = document.getElementById(id);
+  assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state = root.getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 0); // state was successfully reset to 0!
+  empty(root); // clean up after tests
+});