update dependencies

fix package name

move todomvc-app-css to dep

add missing dep

fix description and move dep

add enzyme tests

examples/todomvc/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "redux-todos-example",
+  "name": "redux-todomvc-example",
   "version": "0.0.0",
-  "description": "Redux Todos example",
+  "description": "Redux TodoMVC example",
   "scripts": {
     "start": "node server.js",
-    "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js",
+    "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register",
     "test:watch": "npm test -- --watch"
   },
   "repository": {
@@ -18,11 +18,13 @@
   "homepage": "http://redux.js.org",
   "dependencies": {
     "babel-polyfill": "^6.3.14",
+    "classnames": "^2.2.3",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "react-redux": "^4.1.2",
-    "redux": "^3.1.2",
-    "reselect": "^2.1.0"
+    "react-redux": "^4.4.0",
+    "redux": "^3.3.1",
+    "reselect": "^2.1.0",
+    "todomvc-app-css": "^2.0.4"
   },
   "devDependencies": {
     "babel-core": "^6.3.15",
@@ -31,19 +33,18 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-register": "^6.3.13",
-    "classnames": "^2.2.3",
     "cross-env": "^1.0.7",
-    "expect": "^1.8.0",
+    "enzyme": "^2.0.0",
+    "expect": "^1.14.0",
     "express": "^4.13.3",
-    "jsdom": "^5.6.1",
+    "jsdom": "^8.1.0",
     "mocha": "^2.2.5",
     "node-libs-browser": "^0.5.2",
     "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^0.14.7",
     "style-loader": "^0.13.0",
-    "todomvc-app-css": "^2.0.4",
     "webpack": "^1.9.11",
-    "webpack-dev-middleware": "^1.2.0",
+    "webpack-dev-middleware": "^1.5.1",
     "webpack-hot-middleware": "^2.9.1"
   }
 }

examples/todomvc/test/components/Footer.js

@@ -0,0 +1,90 @@
+import expect from 'expect'
+import React from 'react'
+import { shallow } from 'enzyme'
+import Footer from '../../components/Footer'
+import * as TodoFilters from '../../constants/TodoFilters'
+
+function setup(activeCount, completedCount, visibilityFilter) {
+  const actions = {
+    onClearCompleted: expect.createSpy(),
+    onShow: expect.createSpy()
+  }
+
+  const component = shallow(
+    <Footer activeCount={activeCount}
+            completedCount={completedCount}
+            visibilityFilter={visibilityFilter}
+            {...actions} />
+  )
+
+  return {
+    component: component,
+    actions: actions,
+    todoCount: component.find('.todo-count'),
+    filters: component.find('.filters'),
+    clearCompleted: component.find('.clear-completed')
+  }
+}
+
+describe('<Footer />', () => { 
+  it('should render a todo count for items not done', () => {
+    const { todoCount } = setup(2, 0, TodoFilters.SHOW_ALL)
+    expect(todoCount.text()).toMatch(/^2 items left/)
+  })
+
+  it('should render a todo count for items done', () => {
+    const { todoCount } = setup(0, 2, TodoFilters.SHOW_ALL)
+    expect(todoCount.text()).toMatch(/^No items left/)
+  })
+
+  it('should render three Link components', () => {
+    const { filters } = setup(2, 0, TodoFilters.SHOW_ALL)
+    expect(filters.find('Link').length).toEqual(3)
+  })
+
+  it('should render an all Link', () => {
+    const { filters } = setup(2, 0, TodoFilters.SHOW_ALL)
+    const Link = filters.find('Link').at(0).render()
+    expect(Link.text()).toMatch(/^All/)
+  })
+
+  it('should render an active Link', () => {
+    const { filters } = setup(2, 0, TodoFilters.SHOW_ALL)
+    const Link = filters.find('Link').at(1).render()
+    expect(Link.text()).toMatch(/^Active/)
+  })
+
+  it('should render a completed Link', () => {
+    const { filters } = setup(2, 0, TodoFilters.SHOW_ALL)
+    const Link = filters.find('Link').at(2).render()
+    expect(Link.text()).toMatch(/^Completed/)
+  })
+
+  it('should call onShow on click of each Link', () => {
+    const { filters, actions } = setup(2, 0, TodoFilters.SHOW_ALL)
+    filters.find('Link').at(0).simulate('click')
+    expect(actions.onShow).toHaveBeenCalled()
+  })
+
+  it('should not show a clear completed button if todos are completed', () => {
+    const { clearCompleted } = setup(2, 0, TodoFilters.SHOW_ALL)
+    expect(clearCompleted.length).toEqual(0)
+  })
+
+  it('should show a clear completed button if todos are completed', () => {
+    const { clearCompleted } = setup(2, 2, TodoFilters.SHOW_ALL)
+    expect(clearCompleted.length).toEqual(1)
+  })
+
+  it('should render clear completed button with Clear Completed text', () => {
+    const { clearCompleted } = setup(2, 2, TodoFilters.SHOW_ALL)
+    expect(clearCompleted.text()).toEqual('Clear completed')
+  })
+
+  it('should call onClearCompleted with clear completed button clicked', () => {
+    const { clearCompleted, actions } = setup(2, 2, TodoFilters.SHOW_ALL)
+    clearCompleted.simulate('click')
+    expect(actions.onClearCompleted).toHaveBeenCalled()
+  })
+
+})

examples/todomvc/test/components/Link.js

@@ -0,0 +1,51 @@
+import expect from 'expect'
+import React from 'react'
+import { shallow } from 'enzyme'
+import Link from '../../components/Link'
+
+function setup(active, displayName) {
+  const actions = {
+    onClick: expect.createSpy()
+  }
+
+  const component = shallow(
+    <Link active={active} {...actions}>
+      {displayName}
+    </Link>
+  )
+
+  return {
+    component: component,
+    actions: actions,
+    listItem: component.find('li'),
+    anchor: component.find('a')
+  }
+}
+
+describe('<Link />', () => {
+  it('should render a list item', () => {
+    const { listItem } = setup(true, 'All')
+    expect(listItem.length).toEqual(1)
+  })
+
+  it('should render the specified text for the text', () => {
+    const { anchor } = setup(true, 'All')
+    expect(anchor.text()).toEqual('All')
+  })
+
+  it('should render selected class if was passed active as true', () => {
+    const { listItem } = setup(true, 'All')
+    expect(listItem.find('.selected').length).toEqual(1)
+  })
+
+  it('should not render selected class if was passed active as false', () => {
+    const { listItem } = setup(false, 'All')
+    expect(listItem.find('.selected').length).toEqual(0)
+  })
+
+  it('should call onClick when clicked', () => {
+    const { actions, anchor } = setup(true, 'All')
+    anchor.props().onClick({ preventDefault: () => {}, target: { value: '' } })
+    expect(actions.onClick).toHaveBeenCalled()
+  })
+})

examples/todomvc/test/components/Todo.js

@@ -0,0 +1,77 @@
+import expect from 'expect'
+import React from 'react'
+import { shallow } from 'enzyme'
+import Todo from '../../components/Todo'
+
+function setup() {
+  const actions = {
+    editTodo: expect.createSpy(),
+    deleteTodo: expect.createSpy(),
+    completeTodo: expect.createSpy()
+  }
+
+  const todo = {
+    id: 0, 
+    text: 'Use Redux', 
+    complete: false 
+  }
+
+  const component = shallow(
+    <Todo todo={todo} {...actions} />
+  )
+
+  return {
+    component: component,
+    actions: actions,
+    listItem: component.find('li')
+  }
+}
+
+describe('<Todo />', () => {
+  it('should render a list item', () => {
+    const { listItem } = setup()
+    expect(listItem.length).toEqual(1)
+  })
+
+  it('should render a view class when not editing', () => {
+    const { component } = setup()
+    component.setState({ editing: false })
+    const view = component.find('.view')
+    const todoTextInput = component.find('TodoTextInput')
+    expect(view.length).toEqual(1)
+    expect(todoTextInput.length).toEqual(0)
+  })
+
+  it('should render a TodoTextInput when editing', () => {
+    const { component } = setup()
+    component.setState({ editing: true })
+    const todoTextInput = component.find('TodoTextInput')
+    const view = component.find('.view')
+    expect(todoTextInput.length).toEqual(1)
+    expect(view.length).toEqual(0)
+  })
+
+  it('should render a complete todo checkbox', () => {
+    const { component } = setup()
+    component.setState({ editing: false })
+    const completeCheckbox = component.find('.toggle')
+    expect(completeCheckbox.length).toEqual(1)
+  })
+
+  it('should call completeTodo when todo checkbox toggled', () => {
+    const { actions, component } = setup()
+    component.setState({ editing: false })
+    const completeCheckbox = component.find('.toggle')
+    completeCheckbox.simulate('change')
+    expect(actions.completeTodo).toHaveBeenCalled()
+  })
+
+  it('should call deleteTodo on click on delete button', () => {
+    const { actions, component } = setup()
+    component.setState({ editing: false })
+    const deleteButton = component.find('.destroy')
+    deleteButton.simulate('click')
+    expect(actions.deleteTodo).toHaveBeenCalled()
+  })
+
+})

examples/todomvc/test/components/TodoList.js

@@ -0,0 +1,55 @@
+import expect from 'expect'
+import React from 'react'
+import { shallow } from 'enzyme'
+import TodoList from '../../components/TodoList'
+
+function setup() {
+  const actions = {
+    editTodo: expect.createSpy(),
+    deleteTodo: expect.createSpy(),
+    completeTodo: expect.createSpy(),
+    completeAll: expect.createSpy()
+  }
+
+  const todos = [
+    {
+      id: 0, 
+      text: 'Use Redux', 
+      completed: false 
+    }
+  ]
+
+  const component = shallow(
+    <TodoList todos={todos} completedCount={0} {...actions} />
+  )
+
+  return {
+    component: component,
+    actions: actions,
+    toggleAll: component.find('.toggle-all'),
+    todoList: component.find('.todo-list')
+  }
+}
+
+describe('<TodoList />', () => {
+  it('should render a toggle all input', () => {
+    const { toggleAll } = setup()
+    expect(toggleAll.length).toEqual(1)
+  })
+
+  it('should call completeAll when toggle all input changed', () => {
+    const { actions, toggleAll } = setup()
+    toggleAll.simulate('change')
+    expect(actions.completeAll).toHaveBeenCalled()
+  })
+
+  it('should render a todo list', () => {
+    const { todoList } = setup()
+    expect(todoList.length).toEqual(1)
+  })
+
+  it('should render a list of todos', () => {
+    const { todoList } = setup()
+    expect(todoList.find('Todo').at(0).length).toEqual(1)
+  })
+})