render_footer renders the <footer> element of Todo App

[nelsonic]

Todo App <footer> Element

Referring to the rendered HTML on http://todomvc.com/examples/vanillajs as our "guide":

there is:

• a <footer> element with
  • a <span> element which contains
    • a text node with: "{count} item(s) left".
  • a <ul> containing
    • 3 <li> elements each with
    • a link (<a>) which allow the "user" to filter which items appear in the <view>.
  • a <button class="clear-completed"> which will Clear all Completed items when clicked.

Dev Tools > Elements (inspector)

Copy-paste the rendered HTML

I "copy-pasted" of the rendered HTML from the Dev Tools:

<footer class="footer" style="display: block;">
  <span class="todo-count">
    <strong>2</strong> items left
  </span>
  <ul class="filters">
    <li>
      <a href="#/" class="selected">All</a>
    </li>
    <li>
      <a href="#/active">Active</a>
    </li>
    <li>
      <a href="#/completed">Completed</a>
    </li>
  </ul>
  <button class="clear-completed" style="display: block;">
    Clear completed
  </button>
</footer>

Technical Acceptance Criteria

• render_footer returns a <footer> DOM element which can be rendered directly to the document or nested in another DOM element.
• <footer> contains:
  • <span class="todo-count"> which contains
    • a text node with: "{count} item(s) left".
      pseudocode:
      {model.todos.filter(done==false)} item{model.todo.length > 1 ? 's' : '' } left
  • <ul> containing 3 <li> with the following links (<a>):
    • Show All: <a href="#/" class="selected">All</a>
      • class="selected" should only appear on the selected menu/navigation item.
        this should be "driven" by the model.hash property.
    • Show Active: <a href="#/active">Active</a>
    • Show Completed: <a href="#/completed">Completed</a>
  • <button class="clear-completed" style="display: block;"> will Clear all Completed items.
    pseudocode:
    var new_model = model.todos.filter(function(item) { return item.done === false})

This issue is part of the TodoMVC Feature List [Epic] #48

[nelsonic]

render_footer Test

Here is a sample test you can add to your test/todo-app.test.js file:
(if you feel confident in your TDD skills,
you could try to write your own test/assertions...)

test.only('render_footer view using (elmish) HTML DOM functions', function (t) {
  const model = {
    todos: [
      { id: 1, title: "Learn Elm Architecture", done: true },
      { id: 2, title: "Build Todo List App",    done: false },
      { id: 3, title: "Win the Internet!",      done: false }
    ],
    hash: '#/' // the "route" to display
  };
  // render_footer view and append it to the DOM inside the `test-app` node:
  document.getElementById(id).appendChild(app.render_footer(model));

  // todo-count should display 2 items left (still to be done):
  const count = document.querySelectorAll('.todo-count')[0].textContent;
  t.equal(count, "2", "count of items left: " + count);

  // count number of footer <li> items:
  t.equal(document.querySelectorAll('li').length, 3, "3 <li> in <footer>");

  // check footer link text and href:
  const link_text = ['All', 'Active', 'Completed'];
  const hrefs = ['#/', '#/active', '#/completed'];
  document.querySelectorAll('a').forEach(function (a, index) {
    t.equal(item.textContent, model.todos[index].title,
      "index #" + index + " <label> text: " + item.textContent)
  });

  // check for "Clear completed" button in footer:
  const clear = document.querySelectorAll('.clear-completed')[0].textContent;
  t.equal(clear, 'Clear completed', '<button> in <footer> "Clear completed"');

  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
  t.end();
});

[nelsonic]

[nelsonic]