Milestone 7. Add tests for edit tasks, set checkboxes and clear completed functions

README.md

@@ -26,14 +26,20 @@ Modern web browser with Javascript enabled
 
 git clone https://github.com/indigodavid/webpack-first-project.git
 
-## Author
+## Authors
 
 👤 **David Vera**
 
 - GitHub: [@indigodavid](https://github.com/indigodavid)
 - Twitter: [@indigo1987](https://twitter.com/indigo1987)
 - LinkedIn: [LinkedIn](https://linkedin.com/in/david-vera-castillo-001b5756/)
 
+👤 **Elson Otake**
+
+- GitHub: [@elsonotake](https://github.com/elsonotake)
+- Twitter: [@elsonotake](https://twitter.com/elsonotake)
+- LinkedIn: [Elson Otake](https://linkedin.com/in/elson-otake-0b5b9138)
+
 ## 🤝 Contributing
 
 Contributions, issues, and feature requests are welcome!

src/modules/__mocks__/localStorage.js

@@ -0,0 +1,26 @@
+function storageMock() {
+  const storage = {};
+
+  return {
+    setItem(key, value) {
+      storage[key] = value || '';
+    },
+    getItem(key) {
+      return key in storage ? storage[key] : null;
+    },
+    removeItem(key) {
+      delete storage[key];
+    },
+    get length() {
+      return Object.keys(storage).length;
+    },
+    key(i) {
+      const keys = Object.keys(storage);
+      return keys[i] || null;
+    },
+  };
+}
+
+const localStorage = storageMock();
+
+exports.localStorage = localStorage;

src/modules/__tests__/clear-completed.test.js

@@ -0,0 +1,80 @@
+import Task from '../task.js';
+import { localStorage } from '../__mocks__/localStorage.js';
+import document from '../__mocks__/domMock.js';
+
+const updateIndexes = () => {
+  const allLis = document.querySelectorAll('.task');
+  const newToDoList = [];
+  allLis.forEach((li, index) => {
+    // Change the li id
+    const newIndex = index + 1;
+    li.setAttribute('id', `task${newIndex}`);
+
+    // Obtain the elements of the current li
+    const checkbox = li.querySelector('.check');
+    const div = li.querySelector('.text');
+    const textInput = li.querySelector('.edit');
+
+    // Change the unique attributes of the elements
+    checkbox.setAttribute('name', `check${newIndex}`);
+    checkbox.setAttribute('id', `check${newIndex}`);
+
+    textInput.setAttribute('name', `text${newIndex}`);
+    textInput.setAttribute('id', `text${newIndex}`);
+
+    newToDoList.push(new Task(div.innerHTML, newIndex, checkbox.checked));
+  });
+  localStorage.setItem('toDoData', JSON.stringify(newToDoList));
+};
+
+const getData = () => {
+  const data = localStorage.getItem('toDoData');
+  if (data) {
+    return JSON.parse(data);
+  }
+  return [];
+};
+
+const removeTask = (target) => {
+  target.parentElement.remove();
+  updateIndexes();
+};
+
+const clearTasks = () => {
+  const tasks = document.querySelectorAll('.task');
+  const tasksToBeRemoved = [...tasks].filter((task) => {
+    const checkbox = task.querySelector('.check');
+    return checkbox.checked;
+  });
+  tasksToBeRemoved.forEach((task) => {
+    const removeButton = task.querySelector('.remove');
+    removeTask(removeButton);
+  });
+};
+
+updateIndexes();
+
+const check3 = document.getElementById('check3');
+const check5 = document.getElementById('check5');
+
+check3.checked = true;
+check5.checked = true;
+
+describe('Clear completed tasks tests', () => {
+  test('Check the number of lis', () => {
+    expect(document.querySelectorAll('.task').length).toBe(5);
+  });
+
+  test('Check the new number of completed tasks', () => {
+    clearTasks();
+    updateIndexes();
+    expect(document.querySelectorAll('.task').length).toBe(3);
+  });
+
+  test('Check updated order in local storage', () => {
+    const toDoTasks = getData();
+    toDoTasks.forEach((task, idx) => {
+      expect(task.index).toBe(idx + 1);
+    });
+  });
+});

src/modules/__tests__/completed.test.js

@@ -0,0 +1,61 @@
+import Task from '../task.js';
+import { localStorage } from '../__mocks__/localStorage.js';
+import document from '../__mocks__/domMock.js';
+
+const updateIndexes = () => {
+  const allLis = document.querySelectorAll('.task');
+  const newToDoList = [];
+  allLis.forEach((li, index) => {
+    // Change the li id
+    const newIndex = index + 1;
+    li.setAttribute('id', `task${newIndex}`);
+
+    // Obtain the elements of the current li
+    const checkbox = li.querySelector('.check');
+    const div = li.querySelector('.text');
+    const textInput = li.querySelector('.edit');
+
+    // Change the unique attributes of the elements
+    checkbox.setAttribute('name', `check${newIndex}`);
+    checkbox.setAttribute('id', `check${newIndex}`);
+
+    textInput.setAttribute('name', `text${newIndex}`);
+    textInput.setAttribute('id', `text${newIndex}`);
+
+    newToDoList.push(new Task(div.innerHTML, newIndex, checkbox.checked));
+  });
+  localStorage.setItem('toDoData', JSON.stringify(newToDoList));
+};
+
+const getData = () => {
+  const data = localStorage.getItem('toDoData');
+  if (data) {
+    return JSON.parse(data);
+  }
+  return [];
+};
+
+const completed = (liId, completed = false) => {
+  const toDoTasks = getData();
+  const index = Number(liId.substring(4));
+  toDoTasks[index - 1].completed = completed;
+  localStorage.setItem('toDoData', JSON.stringify(toDoTasks));
+};
+
+updateIndexes();
+
+const li = document.getElementById('task2');
+const checkbox = document.getElementById('check2');
+
+describe('Edit task tests', () => {
+  test('Check checkbox current value', () => {
+    expect(checkbox.checked).toBeFalsy();
+  });
+
+  test('Completed task after checkbox checked', () => {
+    checkbox.checked = true;
+    completed(li.id, checkbox.checked);
+    const toDoTasks = getData();
+    expect(toDoTasks[1].completed).toBeTruthy();
+  });
+});

src/modules/__tests__/edit-task.test.js

@@ -0,0 +1,66 @@
+import Task from '../task.js';
+import { localStorage } from '../__mocks__/localStorage.js';
+import document from '../__mocks__/domMock.js';
+
+const updateIndexes = () => {
+  const allLis = document.querySelectorAll('.task');
+  const newToDoList = [];
+  allLis.forEach((li, index) => {
+    // Change the li id
+    const newIndex = index + 1;
+    li.setAttribute('id', `task${newIndex}`);
+
+    // Obtain the elements of the current li
+    const checkbox = li.querySelector('.check');
+    const div = li.querySelector('.text');
+    const textInput = li.querySelector('.edit');
+
+    // Change the unique attributes of the elements
+    checkbox.setAttribute('name', `check${newIndex}`);
+    checkbox.setAttribute('id', `check${newIndex}`);
+
+    textInput.setAttribute('name', `text${newIndex}`);
+    textInput.setAttribute('id', `text${newIndex}`);
+
+    newToDoList.push(new Task(div.innerHTML, newIndex, checkbox.checked));
+  });
+  localStorage.setItem('toDoData', JSON.stringify(newToDoList));
+};
+
+const getData = () => {
+  const data = localStorage.getItem('toDoData');
+  if (data) {
+    return JSON.parse(data);
+  }
+  return [];
+};
+
+const editTask = (liId, description = '', completed = false) => {
+  const toDoTasks = getData();
+  const index = Number(liId.substring(4));
+  if (description) {
+    toDoTasks[index - 1].description = description;
+  }
+  toDoTasks[index - 1].completed = completed;
+  localStorage.setItem('toDoData', JSON.stringify(toDoTasks));
+};
+
+updateIndexes();
+
+const textInput = document.getElementById('text2');
+const li = document.getElementById('task2');
+const div = li.querySelector('.text');
+const checkbox = document.getElementById('check2');
+
+describe('Edit task tests', () => {
+  test('Check div current value', () => {
+    expect(div.innerHTML).toBe('Walk dogs');
+  });
+
+  test('Check div value after edit', () => {
+    textInput.value = 'Task edited';
+    div.innerHTML = textInput.value;
+    editTask(li.id, textInput.value, checkbox.checked);
+    expect(div.innerHTML).toBe('Task edited');
+  });
+});