generated from indigodavid/webpack-first-project
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from indigodavid/testing-part-2
Milestone 7. Add tests for edit tasks, set checkboxes and clear completed functions
- Loading branch information
Showing
6 changed files
with
286 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
}); | ||
}); |