Closed nelsonic closed 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();
});
Rendering an individual todo list item (<li>
) is handled by render_item
see: #52
The "Main"
view
in the Todo List Application displays the actual list. Try it: http://todomvc.com/examples/vanillajs/This is the HTML copied directly from the browser:
Acceptance Criteria
<li>
in an unordered list<ul>
.<li>
should contain a<div>
with aclass="view"
which "wraps":<input class="toggle" type="checkbox">
- the "checkbox" that people can "Toggle" to change the "state" of the Todo item from "active" to "done" (_which updates the model From:model.todos[id].done=false
To:model.todos[id].done=true
<label>
- the text content of the todo list item<button class="destroy">
- the button the person can click/tap todelete
a Todo item.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