Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

render_footer renders the <footer> element of Todo App #53

Closed
17 tasks done
nelsonic opened this issue Aug 7, 2018 · 3 comments
Closed
17 tasks done

render_footer renders the <footer> element of Todo App #53

nelsonic opened this issue Aug 7, 2018 · 3 comments

Comments

@nelsonic
Copy link
Member

nelsonic commented Aug 7, 2018

Todo App <footer> Element

Referring to the rendered HTML on http://todomvc.com/examples/vanillajs as our "guide":
image
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)

todo-list-mvc-

Copy-paste the rendered HTML

I "copy-pasted" of the rendered HTML from the Dev Tools:
todo-list-mvc-copy-html

<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 nelsonic changed the title render_footer renders the <footer> element of the Todo List App render_footer renders the <footer> element of Todo App Aug 7, 2018
@nelsonic nelsonic mentioned this issue Aug 7, 2018
21 tasks
@nelsonic nelsonic self-assigned this Aug 7, 2018
@nelsonic
Copy link
Member Author

nelsonic commented Aug 7, 2018

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();
});

image

@nelsonic
Copy link
Member Author

nelsonic commented Aug 7, 2018

render_footer-tests-passing-coverage-100percent

@nelsonic nelsonic removed their assignment Aug 7, 2018
@nelsonic
Copy link
Member Author

nelsonic commented Sep 6, 2018

counter-test-passing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant