tests para event listeners

src/controller/store.js

@@ -1,5 +1,5 @@
 // El estado inicial de la aplicación
-const defaultData = {};
+const defaultData = { todos: [] };
 
 // En esta variable vamos a ir guardando los todos
 let data = {};

src/view/Header.js

@@ -6,12 +6,14 @@ export const insertarOnEnter = (evt) => {
   // Es un ENTER ?
   if (evt.keyCode === 13) {
     const label = evt.target.value; // Obtenemos el valor del input
-    const todos = store.get('todos'); // Obtenemos los todos actuales
-    const newTodos = todoInsertar(todos, label); // Insertamos el nuevo todo
-    store.set('todos', newTodos); // Lo guardamos en el store
+    if (label.trim()) { // si el input no esta vacio
+      const todos = store.get('todos'); // Obtenemos los todos actuales
+      const newTodos = todoInsertar(todos, label); // Insertamos el nuevo todo
+      store.set('todos', newTodos); // Lo guardamos en el store
 
-    renderUI(); // Volvemos a pintar la vista para que se reflejen los cambios
-    document.querySelector('.new-todo').focus(); // Y volvemos a hacer foco en el input
+      renderUI(); // Volvemos a pintar la vista para que se reflejen los cambios
+      document.querySelector('.new-todo').focus(); // Y volvemos a hacer foco en el input
+    }
   }
 };
 
@@ -29,7 +31,7 @@ export default () => {
   // Obtenemos el elemento input
   const inputElem = header.querySelector('input');
   // Le asignamos una acccion al evento de 'tecla presionada'
-  inputElem.addEventListener('keyup', insertarOnEnter);
+  inputElem.addEventListener('keypress', insertarOnEnter);
 
   return header;
 };

test/controller/todo.spec.js

@@ -1,5 +1,7 @@
 import { todoInsertar, todoEliminar } from '../../src/controller/todo';
 
+// cargamos el mock de utils
+// https://jestjs.io/docs/es-ES/manual-mocks#mocking-user-modules
 jest.mock('../../src/controller/utils');
 
 describe('todo controller', () => {

test/view/Header.spec.js

@@ -0,0 +1,58 @@
+import store, { createStore } from '../../src/controller/store';
+import Header from '../../src/view/Header';
+
+// cargamos el mock de utils
+// https://jestjs.io/docs/es-ES/manual-mocks#mocking-user-modules
+jest.mock('../../src/controller/utils');
+
+describe(Header, () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>';
+  });
+  it('Ejecuta `todoInsertar` al presionar ENTER', () => {
+    createStore(); // inicializamos el store
+
+    // Chequeamos que los todos comienzan vacios
+    let todos = store.get('todos');
+    expect(todos).toHaveLength(0);
+
+    const headerElem = Header(); // creamos el header
+    const inputElem = headerElem.querySelector('input'); // obtenemos el input
+    inputElem.value = 'todo a insertar'; // lo llenamos con el valor a insertar
+    inputElem.dispatchEvent(new Event('focus')); // hacemos foco en el input
+    // y "presionamos" ENTER
+    inputElem.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 13 }));
+
+    todos = store.get('todos'); // Obtenemos de nuevo los todos
+    // Y chequeamos que se haya insertado
+    expect(todos).toEqual([{ id: 1, label: 'todo a insertar' }]);
+  });
+  it('No inserta si el input esta vacio', () => {
+    createStore(); // inicializamos el store
+
+    const headerElem = Header(); // creamos el header
+    const inputElem = headerElem.querySelector('input'); // obtenemos el input
+    inputElem.value = ''; // lo dejamos vacio
+    inputElem.dispatchEvent(new Event('focus')); // hacemos foco en el input
+    // y "presionamos" ENTER
+    inputElem.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 13 }));
+
+    const todos = store.get('todos'); // Obtenemos de nuevo los todos
+    // Y chequeamos que nada se haya insertado
+    expect(todos).toHaveLength(0);
+  });
+  it('No inserta si se presiona una tecla distinta a ENTER', () => {
+    createStore(); // inicializamos el store
+
+    const headerElem = Header(); // creamos el header
+    const inputElem = headerElem.querySelector('input'); // obtenemos el input
+    inputElem.value = 'todo a insertar'; // lo llenamos con el valor a insertar
+    inputElem.dispatchEvent(new Event('focus')); // hacemos foco en el input
+    // y "presionamos" otra tecla distinta a ENTER
+    inputElem.dispatchEvent(new KeyboardEvent('keypress', { key: 'x' }));
+
+    const todos = store.get('todos'); // Obtenemos de nuevo los todos
+    // Y chequeamos que nada se haya insertado
+    expect(todos).toHaveLength(0);
+  });
+});

test/view/Todos.spec.js

@@ -1,6 +1,10 @@
+import store, { createStore } from '../../src/controller/store';
 import Todos from '../../src/view/Todos';
 
 describe(Todos, () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>';
+  });
   it('Devuelve una lista de los todos', () => {
     const todos = [
       { id: 1, label: 'todo 1' },
@@ -9,4 +13,39 @@ describe(Todos, () => {
     const todosElem = Todos(todos);
     expect(todosElem.querySelectorAll('li')).toHaveLength(2);
   });
+  it('Elimina un todo al apretar el la "X"', () => {
+    // inicializamos el store
+    createStore({
+      todos: [
+        { id: 1, label: 'todo 1' },
+        { id: 2, label: 'todo 2' },
+        { id: 3, label: 'todo 3' },
+      ],
+    });
+
+    let todos = store.get('todos');
+    expect(todos).toHaveLength(3);
+
+    let todosElem = Todos(todos); // creamos la lista de todos
+    // obtenemos el boton eliminar del primer todo, con `id` === 1
+    let buttonElem = todosElem.querySelector('[data-id="1"] button.destroy');
+    buttonElem.dispatchEvent(new Event('click')); // hacemos "click" en el boton
+
+    todos = store.get('todos'); // Obtenemos de nuevo los todos
+    // Y chequeamos que se haya eliminado el primer todo
+    expect(todos).toEqual([
+      { id: 2, label: 'todo 2' },
+      { id: 3, label: 'todo 3' },
+    ]);
+
+    // Y repetimos el proceso para el todo con `id` === 3
+    todosElem = Todos(todos);
+    buttonElem = todosElem.querySelector('[data-id="3"] button.destroy');
+    buttonElem.dispatchEvent(new Event('click'));
+
+    todos = store.get('todos');
+    expect(todos).toEqual([
+      { id: 2, label: 'todo 2' },
+    ]);
+  });
 });

test/view/controller.spec.js

@@ -3,9 +3,7 @@ import { renderUI } from '../../src/view/controller';
 
 describe('View controller', () => {
   beforeEach(() => {
-    document.body.innerHTML = `
-      <div id="root"></div>
-    `;
+    document.body.innerHTML = '<div id="root"></div>';
   });
   it('renderUI inserta app dentro del elemento #root', () => {
     createStore({