Last active
June 1, 2016 09:36
-
-
Save baurine/d5627fd00bd5b6d9084dd78b04dc4dfa to your computer and use it in GitHub Desktop.
redux_test
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<script type="text/javascript" src="https://wzrd.in/standalone/expect@latest"></script> | |
<script type="text/javascript" src="https://wzrd.in/standalone/deep-freeze@latest"></script> | |
</head> | |
<body> | |
<div id="root"></div> | |
</body> | |
</html> |
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
// works in http://jsbin.com | |
const addCounter = (list) => { | |
// not work | |
// list.push(0); | |
// return list; | |
// works | |
// return list.concat(0); | |
return [...list, 0]; | |
} | |
const removeCounter = (list, index) => { | |
return [ | |
...list.slice(0,index), | |
...list.slice(index+1) | |
]; | |
} | |
const incrementCounter = (list, index) => { | |
return [ | |
...list.slice(0,index), | |
list[index]+1, | |
...list.slice(index+1) | |
]; | |
} | |
const testAddCounter = () => { | |
const listBefore = []; | |
const listAfter = [0]; | |
deepFreeze(listBefore); | |
expect( | |
addCounter(listBefore) | |
).toEqual(listAfter); | |
} | |
const testRemoveCounter = () => { | |
const listBefore = [1,2,3]; | |
const listAfter = [1,3]; | |
deepFreeze(listBefore); | |
expect( | |
removeCounter(listBefore,1) | |
).toEqual(listAfter); | |
} | |
const testIncrementCounter = () => { | |
const listBefore = [1,2,3]; | |
const listAfter = [1,2,4]; | |
deepFreeze(listBefore); | |
expect( | |
incrementCounter(listBefore,2) | |
).toEqual(listAfter); | |
} | |
testAddCounter(); | |
testRemoveCounter(); | |
testIncrementCounter(); | |
console.log("1 Test Passed"); | |
/////////////////////////////////// | |
const toggleTodo = (todo) => { | |
// kind 1 | |
/* | |
return Object.assign({}, todo, { | |
completed: !todo.completed | |
}); | |
*/ | |
// kind 2, both work! | |
return { | |
...todo, | |
completed: !todo.completed | |
}; | |
} | |
const testToggleTodo = () => { | |
const todoBefore = { | |
id: 1, | |
text: 'Learn Redux', | |
completed: false, | |
}; | |
const todoAfter = { | |
id: 1, | |
text: 'Learn Redux', | |
completed: true, | |
} | |
deepFreeze(todoBefore); | |
expect( | |
toggleTodo(todoBefore) | |
).toEqual(todoAfter); | |
} | |
testToggleTodo(); | |
console.log("2 Test Passed"); | |
/////////////////////////////////// | |
// demo reducer composition with arrays | |
/* | |
const todo = (state, action) => { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return { | |
id: action.id, | |
text: action.text, | |
completed: false | |
}; | |
case 'TOGGLE_TODO': | |
return (state.id != action.id) ? | |
state : | |
{ | |
...state, | |
completed: !state.completed | |
}; | |
default: | |
return state; | |
} | |
} | |
const todos = (state=[], action) => { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [ | |
...state, | |
todo(undefined, action) | |
]; | |
case 'TOGGLE_TODO': | |
return state.map((t)=>todo(t, action)); | |
default: | |
return state; | |
} | |
} | |
*/ | |
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; | |
} | |
} | |
const testAddTodos = () => { | |
const todosBefore = []; | |
const action = { | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}; | |
const todosAfter = [ | |
{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
} | |
]; | |
deepFreeze(todosBefore); | |
deepFreeze(action); | |
expect( | |
todos(todosBefore, action) | |
).toEqual(todosAfter); | |
} | |
const testToggleTodos = () => { | |
const todosBefore = [ | |
{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
}, | |
{ | |
id: 1, | |
text: 'Go Shopping', | |
completed: false | |
} | |
]; | |
const action = { | |
type: 'TOGGLE_TODO', | |
id: 1 | |
}; | |
const todosAfter = [ | |
{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
}, | |
{ | |
id: 1, | |
text: 'Go Shopping', | |
completed: true | |
} | |
]; | |
deepFreeze(todosBefore); | |
deepFreeze(action); | |
expect( | |
todos(todosBefore, action) | |
).toEqual(todosAfter); | |
} | |
testAddTodos(); | |
testToggleTodos(); | |
console.log("3 Test Passed"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment