Complete action and reducer test

Author: howardyclo

todomvc/app/__tests__/actions/todo-test.js

@@ -0,0 +1,40 @@
+jest.dontMock('../../actions/todo');
+
+const Todo = require('../../actions/todo');
+
+describe('todo actions', () => {
+
+	it('addTodo should create a ADD_TODO action', () => {
+		expect(Todo.addTodo('This is a new todo')).toEqual({
+			type: Todo.Action.ADD_TODO,
+			payload: { text: 'This is a new todo' }
+		})
+	})
+
+	it('editTodo should creat a EDIT_TODO action', () => {
+		expect(Todo.editTodo(1, 'This is a edited todo')).toEqual({
+			type: Todo.Action.EDIT_TODO,
+			payload: { todoID: 1, text: 'This is a edited todo' }
+		})
+	})
+
+	it('toggleTodo should creat a TOGGLE_TODO action', () => {
+		expect(Todo.toggleTodo(1)).toEqual({
+			type: Todo.Action.TOGGLE_TODO,
+			payload: { todoID: 1 }
+		})
+	})
+
+	it('deleteTodo should creat a DELETE_TODO action', () => {
+		expect(Todo.deleteTodo(1)).toEqual({
+			type: Todo.Action.DELETE_TODO,
+			payload: { todoID: 1 }
+		})
+	})
+
+	it('deleteCompletedTodos should creat a DELETE_COMPELETED_TODOS action', () => {
+		expect(Todo.deleteCompletedTodos()).toEqual({
+			type: Todo.Action.DELETE_COMPELETED_TODOS
+		})
+	})
+})

todomvc/app/__tests__/actions/visibility-filter-test.js

@@ -0,0 +1,13 @@
+jest.dontMock('../../actions/visibility-filter');
+
+const Filter = require('../../actions/visibility-filter');
+
+describe('visibility filter actions', () => {
+
+	it('setVisibilityFilter should create a SET_VISIBILITY_FILTER action', () => {
+		expect(Filter.setVisibilityFilter(Filter.VisibilityFilter.SHOW_ALL_TODOS)).toEqual({
+			type: Filter.Action.SET_VISIBILITY_FILTER,
+			payload: { filter: Filter.VisibilityFilter.SHOW_ALL_TODOS }
+		})
+	})
+})

todomvc/app/__tests__/reducers/todo-test.js

@@ -1,3 +1,91 @@
-/**
- * Testing for the todo reducer
- */
+jest.dontMock('../../actions/todo');
+jest.dontMock('../../reducers/todo');
+
+const _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+const TodoAction = require('../../actions/todo');
+const todo = _interopRequire(require('../../reducers/todo'));
+
+describe('todo reducers', () => {
+
+	it('should handle initial state', () => {
+
+		expect(todo(undefined, {})).toEqual([]);
+	})
+
+	it('should handle ADD_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.addTodo('todo 2'))).toEqual(newState);
+	})
+
+	it('should handle EDIT_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo edited', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.editTodo(2, 'todo edited'))).toEqual(newState);
+	})
+
+	it('should handle TOGGLE_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: true }
+		]
+
+		expect(todo(prevState, TodoAction.toggleTodo(2))).toEqual(newState);
+	})
+
+	it('should handle DELETE_TODO', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: false }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.deleteTodo(2))).toEqual(newState);
+	})
+
+	it('should handle DELETE_COMPELETED_TODOS', () => {
+
+		const prevState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 2, text: 'todo 2', completed: true },
+			{ id: 3, text: 'todo 3', completed: false },
+			{ id: 4, text: 'todo 4', completed: true }
+		]
+
+		const newState = [
+			{ id: 1, text: 'todo 1', completed: false },
+			{ id: 3, text: 'todo 3', completed: false }
+		]
+
+		expect(todo(prevState, TodoAction.deleteCompletedTodos())).toEqual(newState);
+	})
+})
+
+

todomvc/app/__tests__/reducers/visibility-filter-test.js

@@ -0,0 +1,23 @@
+jest.dontMock('../../actions/visibility-filter');
+jest.dontMock('../../reducers/visibility-filter');
+
+const _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+const Filter = require('../../actions/visibility-filter');
+const visibilityFilter = _interopRequire(require('../../reducers/visibility-filter'));
+
+describe('visibility filter reducers', () => {
+
+	it('should handle initial state', () => {
+		expect(visibilityFilter(undefined, {})).toEqual(Filter.VisibilityFilter.SHOW_ALL_TODOS);
+	})
+
+	it('should set handle SET_VISIBILITY_FILTER', () => {
+
+		const prevState = Filter.VisibilityFilter.SHOW_ALL_TODOS;
+		const newState =  Filter.VisibilityFilter.SHOW_COMPLETED_TODOS;
+
+		expect(visibilityFilter(prevState, Filter.setVisibilityFilter(Filter.VisibilityFilter.SHOW_COMPLETED_TODOS))).toEqual(newState);
+	})
+})
+
+

todomvc/app/actions/todo.js

@@ -7,7 +7,6 @@ export const Action = {
 	ADD_TODO: 'ADD_TODO', 
 	EDIT_TODO: 'EDIT_TODO',
 	TOGGLE_TODO: 'TOGGLE_TODO',
-	COMPLETE_ALL_TODOS: 'COMPLETE_ALL_TODOS',
 	DELETE_TODO: 'DELETE_TODO',
 	DELETE_COMPELETED_TODOS: 'DELETE_COMPELETED_TODOS'
 }

todomvc/app/reducers/todo.js

@@ -2,7 +2,7 @@
  * Specify how todo list's state changes responsed to actions.
  */
 
-import * as Todo from '../actions/todo'
+import * as Todo from '../actions/todo';
 
 /**
  * Reducer

todomvc/package.json

@@ -4,10 +4,10 @@
   "description": "A practice for building react app using redux design pattern",
   "main": "server.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "BABEL_JEST_STAGE=0 jest",
     "build": "webpack --progress --colors --watch",
     "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
-    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
+    "deploy": "NODE_ENV=production webpack -p"
   },
   "repository": {
     "type": "git",
@@ -34,16 +34,27 @@
   },
   "devDependencies": {
     "babel-core": "^6.3.21",
+    "babel-jest": "^6.0.1",
     "babel-loader": "^6.2.0",
     "babel-plugin-object-assign": "^1.2.1",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^0.9.1",
+    "jest-cli": "^0.8.2",
     "jsx-loader": "^0.13.2",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/node_modules/"
+    ]
   }
 }