change todos structure todo.done

Author: jcouyang

examples/todomvc/public/todos.json

@@ -1,9 +1,9 @@
 [{
   "text": "Try React Most",
-  "completed": false,
+  "done": true,
   "id": 0
 },{
   "text": "Give it a Star on Github",
-  "completed": false,
+  "done": false,
   "id": 1
 }]

examples/todomvc/src/components/Footer.jsx

@@ -11,8 +11,8 @@ const FILTER_TITLES = {
 
 export const FILTER_FUNC = {
   'SHOW_ALL': _=>_,
-  'SHOW_ACTIVE': todos=>todos.filter(todo=>!todo.completed),
-  'SHOW_COMPLETED': todos=>todos.filter(todo=>todo.completed),
+  'SHOW_ACTIVE': todos=>todos.filter(todo=>!todo.done),
+  'SHOW_COMPLETED': todos=>todos.filter(todo=>todo.done),
 }
 let Footer = React.createClass({
   renderTodoCount() {
@@ -69,7 +69,7 @@ let Footer = React.createClass({
 
 export default connect((intent$)=>{
   return {
-    clear: Intent.Clear,
+    clear: () => Intent.Clear(),
     filterWith: Intent.Filter,
   }
 })(Footer)

examples/todomvc/src/components/MainSection.jsx

@@ -26,19 +26,19 @@ const MainSection = ({todos,filter}) => {
 
 MainSection.defaultProps = {
   todos: [
-    {id:0, text:'Loading...dadada', completed:false},
+    {id:0, text:'Loading...dadada', done:false},
   ],
   filter: _=>_
 }
 
 export default connect((intent$)=>{
   let lensTodos = r.lensProp('todos')
-  let lensComplete = r.lensProp('completed')
+  let lensComplete = r.lensProp('done')
   let lensTodo = index => r.compose(lensTodos, r.lensIndex(index))
   let lensTodoComplete = index => r.compose(lensTodo(index), lensComplete)
   let sinks$ = intent$.map(Intent.case({
     Edit: (todo,index) => r.set(lensTodo(index), todo),
-    Clear: () => r.over(lensTodos, r.filter(todo=>todo.completed)),
+    Clear: () => r.over(lensTodos, r.filter(todo=>!todo.done)),
     Delete: id => r.over(lensTodos, r.filter(todo=>todo.id!=id)),
     Filter: filter=>state=>({ filter }),
     Done: index=>r.over(lensTodoComplete(index), r.not),

examples/todomvc/src/components/TodoItem.jsx

@@ -8,7 +8,7 @@ const TodoItemView = ({todo, actions, index}) => {
   return <div className="view">
     <input className="toggle"
            type="checkbox"
-           checked={todo.completed}
+           checked={todo.done}
            onChange={()=>actions.done(index)} />
     <label onDoubleClick={()=>actions.editing(todo.id)}>
       {todo.text}
@@ -29,7 +29,7 @@ const TodoItem = props => {
                 />: <TodoItemView index={index} todo={todo} actions={actions}/>
 
   return <li className={classnames({
-    completed: todo.completed,
+    completed: todo.done,
     editing: editing===todo.id
   })}>{element}</li>
 }

examples/todomvc/src/components/__tests__/MainSection-spec.jsx

@@ -4,36 +4,69 @@ import React  from  'react'
 import when  from  'when'
 import Intent  from  '../../todo.action'
 import MainSection  from  '../MainSection.jsx'
-import Footer  from  '../Footer.jsx'
+import Footer, {FILTER_FUNC}  from  '../Footer.jsx'
+import TodoItem  from  '../TodoItem.jsx'
 import Most  from  '../../../../../lib/react-most'
 import {do$, historyStreamOf}  from  '../../../../../lib/test-utils'
 import TestUtils  from  'react-addons-test-utils'
-describe('MainSection', ()=>{
 
-  describe('display', ()=> {
-    it('correct counts on footer', ()=> {
+describe('MainSection', ()=>{
+  const RESPONSE = '[{"text": "Try React Most","done": false,"id": 0},{"text": "Give it a Star on Github","done": false,"id": 1}]'
+  beforeEach(()=>{
+    rest.__return(RESPONSE)
+  })
+  describe('View', ()=> {
+    const defaultTodos = [
+      {id:0, text:'Loading...dadada', done:false},
+      {id:1, text:'dadada', done:false},
+      {id:2, text:'yay', done:true},
+    ]
+    it('should show correct counts on footer', ()=> {
       let mainSection = TestUtils.renderIntoDocument(
         <Most>
           <MainSection
-              todos={[
-                {id:0, text:'Loading...dadada', done:false},
-                {id:1, text:'dadada', done:false},
-              ]}
+              todos={defaultTodos}
               filter={_=>_}
           />
         </Most>
       )
       let footer = TestUtils.findRenderedComponentWithType(mainSection, Footer);
-      expect(footer.props.completedCount).toBe(0)
+      expect(footer.props.completedCount).toBe(1)
       expect(footer.props.activeCount).toBe(2)
     })
+
+    it('should show only active todos', ()=> {
+      let mainSection = TestUtils.renderIntoDocument(
+        <Most>
+          <MainSection
+              todos={defaultTodos}
+              filter={FILTER_FUNC['SHOW_ACTIVE']}
+          />
+        </Most>
+      )
+      let todoItems = TestUtils.scryRenderedComponentsWithType(mainSection, TodoItem);
+      expect(todoItems.map(item=>item.props.todo.id)).toEqual(
+        [0,1])
+    })
+
+    it('should show only done todos', ()=> {
+      let mainSection = TestUtils.renderIntoDocument(
+        <Most>
+          <MainSection
+              todos={defaultTodos}
+              filter={FILTER_FUNC['SHOW_COMPLETED']}
+          />
+        </Most>
+      )
+      let todoItems = TestUtils.scryRenderedComponentsWithType(mainSection, TodoItem);
+      expect(todoItems.map(item=>item.props.todo.id)).toEqual(
+        [2])
+    })
   })
 
-  describe('behavior', ()=> {
+  describe('Behavior', ()=> {
     let mainSectionWrapper, mainSection, send
-    let response = '[{"text": "Try React Most","completed": false,"id": 0},{"text": "Give it a Star on Github","completed": false,"id": 1}]'
     beforeEach(()=>{
-      rest.__return(response)
       mainSectionWrapper = TestUtils.renderIntoDocument(
         <Most>
           <MainSection history={true}/>
@@ -48,30 +81,30 @@ describe('MainSection', ()=>{
           {id:0, text:'Loading...dadada', done:false},
         ])
       })
-      it('should get data  from  rest response to MainSection', ()=>{
-        return historyStreamOf(mainSection).take$(1).then(state=>expect(state.todos).toEqual(JSON.parse(response)))
+      it('should get data from  rest response to MainSection', ()=>{
+        return historyStreamOf(mainSection).take$(1).then(state=>expect(state.todos).toEqual(JSON.parse(RESPONSE)))
       })
     });
 
-    describe('edit sink', ()=>{
-      it('should update todo 0 item text', ()=>{
+    describe('edit', ()=>{
+      it('should update todo id 0 item text', ()=>{
         do$([
-          ()=>send(Intent.Edit({id:0, text:'hehedayo'})),
+          ()=>send(Intent.Edit({id:0, text:'hehedayo'}, 0)),
         ])
         return historyStreamOf(mainSection).take$(2).then(state=>expect(state.todos[0]).toEqual({"id": 0, "text": "hehedayo"}))
       })
     });
 
-    describe('clear sink', ()=> {
+    describe('clear', ()=> {
       it('should remove all done todos', ()=>{
         do$([
-          ()=>send(Intent.Edit({id:0,text:'done',completed:true})),
+          ()=>send(Intent.Edit({id:0,text:'done',done:true}, 0)),
           ()=>send(Intent.Clear()),
         ])
         return historyStreamOf(mainSection)
           .take$(3)
           .then(state=>{
-            expect(state.todos).toEqual([{"completed": false, "id": 1, "text": "Give it a Star on Github"}])
+            expect(state.todos).toEqual([{"done": false, "id": 1, "text": "Give it a Star on Github"}])
           })
       })
     })