I followed Dev Eds course on creating a todo list, but now I want to write some tests to test the code. I want to use Jest but I'm not sure how to write a test to make sure that a todo is created, and deleted.
I've added the app.js file below (there is are html/css files as well). My attempt at writing a test is under the app.js file.
//Selectors
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');
//Event Listeners
todoButton.addEventListener('click', addTodo);
todoList.addEventListener('click', deleteCheck);
filterOption.addEventListener('change', filterTodo);
//Functions
function addTodo(event){
//console.log(event.target);
// prevent form from submitting
event.preventDefault();
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create LI
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
// Checkmark button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>'
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
// Delete button
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '<i class="fas fa-trash"></i>'
deleteButton.classList.add("delete-btn");
todoDiv.appendChild(deleteButton);
// Append to list
todoList.appendChild(todoDiv);
// clear todo input value
todoInput.value = "";
}
function deleteCheck(e){
//console.log(e.target);
const item = e.target;
if(item.classList[0] === 'delete-btn'){
const todo = item.parentElement;
// animation
todo.classList.add("fall");
todo.addEventListener("transitionend", function() {
todo.remove();
});
}
// check mark
if(item.classList[0] === "complete-btn"){
const todo = item.parentElement;
todo.classList.toggle('completed');
}
}
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
}
});
}
The first test I created was to check if a todo is created
const todo = require('./app')
test('add a todo', () => {
expect(todo("buy milk".toBe("buy milk")))
})
But the test failed.
Aucun commentaire:
Enregistrer un commentaire