first draft of TodoMVC tutorial *complete*!! 🎉

Author: nelsonic

edit-todo.md

@@ -1038,3 +1038,86 @@ The following assertions:
 ✓ should allow me to display all items
 ✓ should highlight the currently applied filter
 ```
+
++ `'SHOW_ALL'` the default view.
++ `'SHOW_ACTIVE'` item.done === false
++ `'SHOW_COMPLETED'` item.done === true
+
+
+#### 9. Routing _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('9. Routing > should allow me to display active/completed/all items',
+ function (t) {
+ elmish.empty(document.getElementById(id));
+ const model = {
+ todos: [
+ { id: 0, title: "Make something people want.", done: false },
+ { id: 1, title: "Bootstrap for as long as you can", done: true },
+ { id: 2, title: "Let's solve our own problem", done: true }
+ ],
+ hash: '#/active' // ONLY ACTIVE items
+ };
+ // render the view and append it to the DOM inside the `test-app` node:
+ elmish.mount(model, app.update, app.view, id, app.subscriptions);
+ t.equal(document.querySelectorAll('.view').length, 1, "one active item");
+ let selected = document.querySelectorAll('.selected')[0]
+ t.equal(selected.id, 'active', "active footer filter is selected");
+
+ // empty:
+ elmish.empty(document.getElementById(id));
+ localStorage.removeItem('todos-elmish_' + id);
+ // show COMPLTED items:
+ model.hash = '#/completed';
+ elmish.mount(model, app.update, app.view, id, app.subscriptions);
+ t.equal(document.querySelectorAll('.view').length, 2,
+ "two completed items");
+ selected = document.querySelectorAll('.selected')[0]
+ t.equal(selected.id, 'completed', "completed footer filter is selected");
+
+ // empty:
+ elmish.empty(document.getElementById(id));
+ localStorage.removeItem('todos-elmish_' + id);
+ // show ALL items:
+ model.hash = '#/';
+ elmish.mount(model, app.update, app.view, id, app.subscriptions);
+ t.equal(document.querySelectorAll('.view').length, 3,
+ "three items total");
+ selected = document.querySelectorAll('.selected')[0]
+ t.equal(selected.id, 'all', "all footer filter is selected");
+
+ elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+ localStorage.removeItem('todos-elmish_' + id);
+ t.end();
+});
+```
+
+
+#### 9. Routing _Implementation_
+
+Since this is the _final_ quest in the TodoMVC/Todo List App,
+the solution is _not_ included here.
+Spend some time trying to make the test assertions pass.
+
+If you get "_stuck_" consult the code in `todo-app.js`.
+
+#### 9.1 Routing _Bonus_
+
+As a _bonus_ level,
+you can add the following event listener to your `subscriptions`
+to make the router work when the url (hash) changes in the browser:
+
+```js
+window.onhashchange = function route () {
+ signal('ROUTE')();
+}
+```
+And the `'ROUTE'` `case` to your `update` function:
+```js
+case 'ROUTE':
+ new_model.hash = (window && window.location && window.location.hash) ?
+ window.location.hash : '#/';
+ break;
+```

test/todo-app.test.js

@@ -279,7 +279,6 @@ test('2. New Todo, should allow me to add todo items', function (t) {
  t.end();
 });
 
-
 test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
  elmish.empty(document.getElementById(id));
  localStorage.removeItem('todos-elmish_' + id);
@@ -395,7 +394,6 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
  t.end();
 });
 
-
 test('5.1 Editing: > Render an item in "editing mode"', function (t) {
  elmish.empty(document.getElementById(id));
  localStorage.removeItem('todos-elmish_' + id);
@@ -633,8 +631,9 @@ test('8. Persistence > should persist its data', function (t) {
  t.end();
 });
 
-test.only('9. Routing > should allow me to display active/completed/all items',
+test('9. Routing > should allow me to display active/completed/all items',
  function (t) {
+ localStorage.removeItem('todos-elmish_' + id);
  elmish.empty(document.getElementById(id));
  const model = {
  todos: [
@@ -646,6 +645,9 @@ test.only('9. Routing > should allow me to display active/completed/all items',
  };
  // render the view and append it to the DOM inside the `test-app` node:
  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+ const mod = app.update('ROUTE', model);
+ // t.equal(mod.hash, '#/', 'default route is #/');
+
  t.equal(document.querySelectorAll('.view').length, 1, "one active item");
  let selected = document.querySelectorAll('.selected')[0]
  t.equal(selected.id, 'active', "active footer filter is selected");