add test for routing based on clicking links in footer #48

Author: nelsonic

test/todo-app.test.js

@@ -624,11 +624,55 @@ test('8. Persistence > should persist its data', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
   // confirm that the model is saved to localStorage
-  console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
+  // console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
   t.equal(localStorage.getItem('todos-elmish_' + id),
     JSON.stringify(model), "data is persisted to localStorage");
 
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   localStorage.removeItem('todos-elmish_' + id);
   t.end();
 });
+
+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();
+});