baurine/redux_test.html

## redux_test.html
<!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>

## redux_test.js
// 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");
	<!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>
	// 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");