Skip to content

Instantly share code, notes, and snippets.

@sebabouche

sebabouche/index.html

Created February 22, 2017 22:11
Show Gist options
  • Save sebabouche/787a8cab6bd406a932b034194fd586a0 to your computer and use it in GitHub Desktop.
Save sebabouche/787a8cab6bd406a932b034194fd586a0 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Writing a Todo List Reducer (toggling a todo) // source http://jsbin.com/rikozel
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Writing a Todo List Reducer (toggling a todo)">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://wzrd.in/standalone/expect@latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
</head>
<body>
<script id="jsbin-javascript">
console.clear()
console.log('Running...')
const todos = (state = [], action) => {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
case 'TOGGLE_TODO':
return state.map(todo => {
if (todo.id !== action.id) {
return todo
}
return {
...todo,
completed: !todo.completed
}
})
default:
return state
}
}
//// TESTS ////
const testAddTodo = () => {
const stateBefore = []
const action = {
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: "Don't mutate!",
completed: false
}
]
const action = {
type: 'TOGGLE_TODO',
id: 1
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: "Don't mutate!",
completed: true
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
testAddTodo()
testToggleTodo()
console.log('Passed')
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear()
console.log('Running...')
const todos = (state = [], action) => {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
case 'TOGGLE_TODO':
return state.map(todo => {
if (todo.id !== action.id) {
return todo
}
return {
...todo,
completed: !todo.completed
}
})
default:
return state
}
}
//// TESTS ////
const testAddTodo = () => {
const stateBefore = []
const action = {
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: "Don't mutate!",
completed: false
}
]
const action = {
type: 'TOGGLE_TODO',
id: 1
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: "Don't mutate!",
completed: true
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
testAddTodo()
testToggleTodo()
console.log('Passed')</script></body>
</html>
Raw
jsbin.rikozel.js
console.clear()
console.log('Running...')
const todos = (state = [], action) => {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
case 'TOGGLE_TODO':
return state.map(todo => {
if (todo.id !== action.id) {
return todo
}
return {
...todo,
completed: !todo.completed
}
})
default:
return state
}
}
//// TESTS ////
const testAddTodo = () => {
const stateBefore = []
const action = {
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: "Don't mutate!",
completed: false
}
]
const action = {
type: 'TOGGLE_TODO',
id: 1
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: "Don't mutate!",
completed: true
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
testAddTodo()
testToggleTodo()
console.log('Passed')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment