Merge pull request #4 from iLynette/testing

Testing

.babelrc

@@ -0,0 +1,7 @@
+{
+    "env": {
+      "test": {
+        "plugins": ["@babel/plugin-transform-modules-commonjs"]
+      }
+    }
+  }

.eslintrc.json

@@ -13,6 +13,7 @@
     "rules": {
       "no-shadow": "off",
       "no-use-before-define": "off",
+      "no-unused-vars": "off",
       "no-param-reassign": "off",
       "eol-last": "off",
       "import/extensions": [ 1, {

package.json

@@ -4,7 +4,7 @@
   "description": "![](https://img.shields.io/badge/Microverse-blueviolet)",
   "private": "true",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest --env=jsdom",
     "build": "webpack",
     "start": "webpack serve --open"
   },
@@ -20,13 +20,15 @@
   },
   "homepage": "https://github.com/iLynette/todo-list#readme",
   "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
     "babel-eslint": "^10.1.0",
     "css-loader": "^6.6.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.25.4",
     "hint": "^6.1.9",
     "html-webpack-plugin": "^5.5.0",
+    "jest": "^27.5.1",
     "style-loader": "^3.3.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",

src/index.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'; //eslint-disable-line
 import './style.css';
-import gin from './modules/utils.js';
+import * as gin from './modules/utils.js';
 
-gin();
+gin.genesis();

src/modules/todoList.js

@@ -20,6 +20,7 @@ export default class TodoList {
      this.todos = this.todos.filter((t) => t.id !== id);
      this.sort();
      this.save();
+     return id;
    };
 
    sort= () => {

src/modules/utils.js

@@ -1,10 +1,13 @@
 import TodoList from './todoList.js';
 
-const todo = new TodoList();
+let todo = new TodoList();
 const todoList = document.getElementById('dynamic-list');
 const form = document.getElementById('form');
-const allTasks = () => {
-  todoList.innerHTML = '';
+export const allTasks = (T) => {
+  if (T !== null && T !== undefined) {
+    todo = T;
+  }
+  document.getElementById('dynamic-list').innerHTML = '';
   todo.todos
     .sort((a, b) => a.index - b.index)
     .map((todos) => {
@@ -30,7 +33,7 @@ const allTasks = () => {
       icon.classList.add('fas', 'fa-ellipsis-v');
       button.appendChild(icon);
       todoCard.appendChild(button);
-      todoList.appendChild(todoCard);
+      document.getElementById('dynamic-list').appendChild(todoCard);
 
       return todoCard;
     });
@@ -93,7 +96,7 @@ const addNewToDo = () => {
     allTasks();
   }
 };
-const genesis = () => {
+export const genesis = () => {
   checkDb();
   form.addEventListener('keydown', (e) => {
     if (e.key === 'Enter') {
@@ -105,5 +108,3 @@ const genesis = () => {
     allTasks();
   };
 };
-
-export default genesis;

todoList.test.js

@@ -0,0 +1,63 @@
+import TodoList from './src/modules/todoList.js';
+import * as gin from './src/modules/utils.js';
+
+class LocalStorageMock {
+  constructor() {
+    this.store = {};
+  }
+
+  clear() {
+    this.store = {};
+  }
+
+  getItem(key) {
+    return this.store[key] || null;
+  }
+
+  setItem(key, value) {
+    this.store[key] = String(value);
+  }
+
+  removeItem(key) {
+    delete this.store[key];
+  }
+}
+
+global.localStorage = new LocalStorageMock();
+
+document.body.innerHTML = `<div> +
+   <div id="dynamic-list"></div>
+</div>`;
+const todoList = new TodoList();
+
+describe('Add task', () => {
+  test('Add one task expect tasks length to be 1', () => {
+    todoList.addTodo('go shopping');
+    todoList.addTodo('watch a movie');
+    expect(todoList.todos.length).toBe(2);
+  });
+});
+
+describe('Add the added todo to the DOM', () => {
+  test('One task has been added expect one task element in DOM', () => {
+    gin.allTasks(todoList);
+    const tasksList = document.getElementById('dynamic-list');
+    expect(tasksList.childNodes.length).toBe(2);
+  });
+});
+
+describe('Remove first todo from todoList', () => {
+  test('One task has been remove expect zero', () => {
+    const { id } = todoList.todos[0];
+    const taskCard = document.getElementById(id);
+    taskCard.parentNode.removeChild(taskCard);
+    expect(todoList.delete(id)).toBe(id);
+  });
+});
+
+describe('Check if task card had been removed from DOM', () => {
+  test('One card removed expect node children to be 0', () => {
+    const tasksList = document.getElementById('dynamic-list');
+    expect(tasksList.childNodes.length).toBe(1);
+  });
+});