Added test to examples/todomvc

Author: Josema

examples/todomvc/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "description": "dop TodoMVC example",
   "scripts": {
-    "start": "node src/server.js"
+    "start": "node src/server.js",
+    "test": "react-scripts test"
   },
   "repository": {
     "type": "git",
@@ -17,9 +18,10 @@
   "dependencies": {
     "babel-polyfill": "^6.3.14",
     "classnames": "^2.1.2",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7",
-    "dop": "^0.21.0"
+    "dop": "^0.24.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "style-loader": "^0.18.2"
   },
   "devDependencies": {
     "babel-core": "^6.3.15",
@@ -28,16 +30,12 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-register": "^6.3.13",
-    "cross-env": "^1.0.7",
-    "enzyme": "^2.2.0",
-    "expect": "^1.8.0",
+    "enzyme": "^2.9.1",
     "express": "^4.13.3",
-    "jsdom": "^5.6.1",
-    "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.12.3",
+    "react-addons-test-utils": "^0.14.8",
+    "react-scripts": "^1.0.10",
+    "react-test-renderer": "^15.6.1",
     "todomvc-app-css": "^2.0.1",
     "webpack": "^1.9.11",
     "webpack-dev-middleware": "^1.2.0",

examples/todomvc/src/actions.js

@@ -1,16 +1,16 @@
 import { collect } from 'dop';
-import state from './state';
+import store from './store';
 
 export function changeTextNewTodo(text) {
-    state.newTodoText = text;
+    store.newTodoText = text;
 }
 
 let todoIdInc = 1;
 export function addTodo(text) {
     if (text.length > 0) {
         const collector = collect()
         changeTextNewTodo('')
-        state.todos.push({
+        store.todos.push({
             text: text,
             completed: false,
             id: todoIdInc++,
@@ -21,17 +21,17 @@ export function addTodo(text) {
 }
 
 export function deleteTodo(id) {
-    const index = state.todos.findIndex(todo => todo.id === id);
+    const index = store.todos.findIndex(todo => todo.id === id);
     const collector = collect();
-    state.todos.splice(index, 1);
+    store.todos.splice(index, 1);
     collector.emit();
 }
 
 export function editTodo(id, text) {
     if (text.length === 0)
         deleteTodo(id);
     else {
-        const todo = state.todos.filter(todo => todo.id === id)[0];
+        const todo = store.todos.filter(todo => todo.id === id)[0];
         const collector = collect();
         if (text !== todo.text)
             todo.text = text;
@@ -40,33 +40,33 @@ export function editTodo(id, text) {
 }
 
 export function completeTodo(id) {
-    const todo = state.todos.filter(todo => todo.id === id)[0];
+    const todo = store.todos.filter(todo => todo.id === id)[0];
     const collector = collect();
     todo.completed = !todo.completed;
     collector.emit();
 }
 
 export function completeAll() {
     const collector = collect();
-    const areAllMarked = state.todos.every(todo => todo.completed);
-    state.todos.forEach(todo => (todo.completed = !areAllMarked));
+    const areAllMarked = store.todos.every(todo => todo.completed);
+    store.todos.forEach(todo => (todo.completed = !areAllMarked));
     collector.emit();
 }
 
 export function changeFilter(filter) {
-    state.selectedFilter = filter;
+    store.selectedFilter = filter;
 }
 
 export function clearCompleted() {
     const collector = collect();
-    const completeds = state.todos
+    const completeds = store.todos
         .filter(todo => todo.completed === true)
         .map(todo => todo.id)
         .forEach(deleteTodo);
     collector.emit();
 }
 
 export function editingTodo(id) {
-    const todo = state.todos.filter(todo => todo.id === id)[0];
+    const todo = store.todos.filter(todo => todo.id === id)[0];
     todo.editing = !todo.editing;
 }

examples/todomvc/src/components/Footer.js

@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 import classnames from 'classnames';
 import { createObserver } from 'dop';
-import state from '../state';
+import store from '../store';
 import { clearCompleted, changeFilter } from '../actions';
 import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants';
 
@@ -13,12 +13,10 @@ const FILTER_TITLES = {
 
 export default class Footer extends Component {
     componentWillMount() {
-        const observer = createObserver(mutations => {
-            this.forceUpdate();
-        });
-        observer.observe(state, 'itemsLeftCount');
-        observer.observe(state, 'selectedFilter');
-        observer.observe(state, 'completedCount');
+        const observer = createObserver(m => this.forceUpdate());
+        observer.observe(store, 'itemsLeftCount');
+        observer.observe(store, 'selectedFilter');
+        observer.observe(store, 'completedCount');
     }
 
     shouldComponentUpdate() {
@@ -28,9 +26,9 @@ export default class Footer extends Component {
     render() {
         return (
             <FooterTemplate
-                activeCount={state.itemsLeftCount}
-                completedCount={state.completedCount}
-                selectedFilter={state.selectedFilter}
+                activeCount={store.itemsLeftCount}
+                completedCount={store.completedCount}
+                selectedFilter={store.selectedFilter}
                 onChangeFilter={changeFilter}
                 onClearCompleted={clearCompleted}
             />

examples/todomvc/src/components/Footer.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import renderer from 'react-test-renderer';
+import Footer from './Footer'
+import { addTodo, completeTodo } from '../actions'
+
+let component
+test('Checking item lefts', () => {
+  component = renderer.create(
+    <Footer />
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+
+  // No items left
+  expect(tree.children[0].children[2]).toBe('items')
+  expect(tree.children[0].children[0].children[0]).toBe('No')
+
+  // Adding todo manually
+  const labelnewtodo = 'My new todo'
+  addTodo(labelnewtodo)
+  tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+
+  // 1 item left
+  expect(tree.children[0].children[2]).toBe('item')
+  expect(tree.children[0].children[0].children[0]).toBe(1)
+
+  // Adding todo manually
+  addTodo('My new todo 2')
+  tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+
+  // 2 item left
+  expect(tree.children[0].children[2]).toBe('items')
+  expect(tree.children[0].children[0].children[0]).toBe(2)
+
+  // Completing todo manually
+  completeTodo(1)
+  tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+
+  // 1 item left
+  expect(tree.children[0].children[2]).toBe('item')
+  expect(tree.children[0].children[0].children[0]).toBe(1)
+});
+

examples/todomvc/src/components/Header.js

@@ -1,17 +1,15 @@
 import React, { Component, PropTypes } from 'react';
 import { createObserver } from 'dop';
-import state from '../state';
+import store from '../store';
 import { changeTextNewTodo, addTodo, completeAll } from '../actions';
 
 
 export default class Header extends Component {
     componentWillMount() {
-        const observer = createObserver(mutations => {
-            this.forceUpdate();
-        });
-        observer.observe(state.todos, 'length');
-        observer.observe(state, 'newTodoText');
-        observer.observe(state, 'areAllItemsCompleted');
+        const observer = createObserver(m => this.forceUpdate());
+        observer.observe(store.todos, 'length');
+        observer.observe(store, 'newTodoText');
+        observer.observe(store, 'areAllItemsCompleted');
     }
 
     shouldComponentUpdate() {
@@ -30,12 +28,12 @@ export default class Header extends Component {
     render() {
         return (
             <HeaderTemplate
-                value={state.newTodoText}
-                todosLength={state.todos.length}
+                value={store.newTodoText}
+                todosLength={store.todos.length}
                 onChangeText={this.onChangeText}
                 onSave={this.onSave}
                 onCompleteAll={completeAll}
-                areAllItemsCompleted={state.areAllItemsCompleted}
+                areAllItemsCompleted={store.areAllItemsCompleted}
             />
         );
     }

examples/todomvc/src/components/Header.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import renderer from 'react-test-renderer';
+import Header from './Header'
+
+
+test('Adding a new todo', () => {
+  const component = renderer.create(
+    <Header />
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+
+  // manually changed input new todo
+  let newtodotext = "New todo"
+  tree.children[1].props.onChange({target:{value:newtodotext}})
+  // re-rendering
+  tree = component.toJSON();
+  expect( tree.children[1].props.value).toBe(newtodotext)
+
+  // saving new todo manually
+  tree.children[1].props.onKeyDown({which:13,target:{value:newtodotext}})
+  // re-rendering
+  tree = component.toJSON();
+  expect(tree.children[1].props.value).toBe("")
+  expect(tree).toMatchSnapshot();
+});
+

examples/todomvc/src/components/TodoItem.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { createObserver, getObjectPath } from 'dop';
-import state from '../state';
+import store from '../store';
 import { editTodo, completeTodo, deleteTodo, editingTodo } from '../actions';
 
 export default class TodoItem extends Component {
@@ -16,17 +16,15 @@ export default class TodoItem extends Component {
     }
 
     componentWillMount() {
-        this.todo = state.todos[this.props.index]
-        this.observer = createObserver(() => {
-            this.forceUpdate()
-        });
+        this.todo = store.todos[this.props.index]
+        this.observer = createObserver(m => this.forceUpdate());
         this.unobserveTodo = this.observer.observe(this.todo)
     }
 
     shouldComponentUpdate(nextProps) {
         if (nextProps.index !== this.props.index) {
             this.unobserveTodo()
-            this.todo = state.todos[nextProps.index]
+            this.todo = store.todos[nextProps.index]
             this.unobserveTodo = this.observer.observe(this.todo)
         }
         return false;

examples/todomvc/src/components/TodoItem.test.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import renderer from 'react-test-renderer';
+import TodoItem from './TodoItem'
+import { addTodo, editTodo } from '../actions'
+import store from '../store'
+
+let component
+let idtodo = 1
+let indextodo = 0
+test('Adding a new todo', () => {  
+  // Adding todo manually
+  const labelnewtodo = 'My new todo'
+  addTodo(labelnewtodo)
+
+  component = renderer.create(
+    <TodoItem index={indextodo} />
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+  let labelcomponent = tree.children[0].children[1]
+  expect(labelcomponent.type).toBe('label')
+  expect(labelcomponent.children[0]).toBe(labelnewtodo)
+});
+
+
+test('Editing todo', () => {
+  const labelnewtodo = 'Label changed'
+  editTodo(idtodo, 'Label changed')
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+  let labelcomponent = tree.children[0].children[1]
+  expect(labelcomponent.children[0]).toBe(labelnewtodo)
+  tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

examples/todomvc/src/components/Todos.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { createObserver } from 'dop';
-import state from '../state';
+import store from '../store';
 import { completeAll } from '../actions';
 import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants';
 import TodoItem from './TodoItem';
@@ -13,12 +13,10 @@ const TODO_FILTERS = {
 
 export default class Todos extends Component {
     componentWillMount() {
-        const observer = createObserver(mutations => {
-            this.forceUpdate();
-        });
-        observer.observe(state.todos, 'length');
-        observer.observe(state, 'selectedFilter');
-        observer.observe(state, 'itemsLeftCount');
+        const observer = createObserver(m => this.forceUpdate());
+        observer.observe(store.todos, 'length');
+        observer.observe(store, 'selectedFilter');
+        observer.observe(store, 'itemsLeftCount');
     }
 
     shouldComponentUpdate() {
@@ -28,8 +26,8 @@ export default class Todos extends Component {
     render() {
         return (
             <TodosTemplate
-                todos={state.todos}
-                selectedFilter={state.selectedFilter}
+                todos={store.todos}
+                selectedFilter={store.selectedFilter}
                 todoFilters={TODO_FILTERS}
                 onCompleteAll={completeAll}
             />