dwyl / learn-elm-architecture-in-javascript

:unicorn: Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
https://todomvc-app.herokuapp.com
GNU General Public License v2.0
212 stars 19 forks source link

Main Todo List View <section class="main"> #51

Closed nelsonic closed 6 years ago

nelsonic commented 6 years ago

The "Main" view in the Todo List Application displays the actual list. Try it: http://todomvc.com/examples/vanillajs/ todomvc-main-section-todo-list-html

This is the HTML copied directly from the browser:

<section class="main" style="display: block;">
  <input class="toggle-all" type="checkbox">
  <label for="toggle-all">Mark all as complete</label>
  <ul class="todo-list">
    <li data-id="1533501855500" class="completed">
      <div class="view">
        <input class="toggle" type="checkbox">
        <label>Learn Elm Architecture</label>
        <button class="destroy"></button>
      </div>
    </li>
    <li data-id="1533501861171" class="">
      <div class="view">
        <input class="toggle" type="checkbox">
        <label>Build Todo List App</label>
        <button class="destroy"></button>
      </div>
    </li>
    <li data-id="1533501867123" class="">
      <div class="view">
        <input class="toggle" type="checkbox">
        <label>Win the Internet!</label>
        <button class="destroy"></button>
      </div>
    </li>
  </ul>
</section>

Acceptance Criteria

Note: the "toggle-all" (above the "main" list) is a separate issue/feature: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/50

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

nelsonic commented 6 years ago

Test first:

test('render "main" 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 the "main" view and append it to the DOM inside the `test-app` node:
  elmish.append_childnodes(app.render_main(model), document.getElementById(id));
  const done = document.querySelectorAll('.completed')[0].textContent;
  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
  const todo = document.querySelectorAll('.view')[1].textContent;
  t.equal(todo, 'Build Todo List App', 'Todo: Build Todo List App');
  const todos = document.querySelectorAll('.toggle');
  [true, false, false].forEach(function(state, index){
    t.equal(todos.checked, state, "Todo #" + index + " is done=" + state)
  })
  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
  t.end();
});

image

nelsonic commented 6 years ago

Rendering an individual todo list item (<li>) is handled by render_item see: #52