added mobx testing

Author: willrstern

6-mobx-react/__tests__/TodoList.functional.test.js

@@ -0,0 +1,40 @@
+import { shallow } from 'enzyme'
+import React from "react"
+
+import TodoList from "../src/js/TodoList"
+import { TodoStore } from "../src/js/TodoStore"
+
+describe("TodoList.functional", () => {
+
+  it("filters todos", () => {
+    const store = new TodoStore
+
+    store.createTodo("todo1")
+    store.createTodo("todo2")
+    store.createTodo("todo3")
+    store.filter = "2"
+
+    const wrapper = shallow(<TodoList store={store} />)
+
+    expect(wrapper.find("li").length).toBe(1)
+    expect(wrapper.find("li span").at(0).text()).toBe("todo2")
+  })
+
+  it("clears completed todos when 'clear completed' is clicked", () => {
+    const store = new TodoStore
+
+    store.createTodo("todo1")
+    store.createTodo("todo2")
+    store.createTodo("todo3")
+    store.todos[0].complete = true
+    store.todos[1].complete = true
+
+    const wrapper = shallow(<TodoList store={store} />)
+
+    wrapper.find("a").simulate("click")
+
+    expect(wrapper.find("li").length).toBe(1)
+    expect(wrapper.find("li span").at(0).text()).toBe("todo3")
+    expect(store.todos.length).toBe(1)
+  })
+})

6-mobx-react/__tests__/TodoList.unit.test.js

@@ -0,0 +1,51 @@
+import { shallow } from 'enzyme'
+import React from "react"
+
+import TodoList from "../src/js/TodoList"
+
+describe("TodoList", function() {
+  //don't use an arrow function...preserve the value of "this"
+  beforeEach(function() {
+    this.store = {
+      filteredTodos: [
+        {value: "todo1", id: 111, complete: false},
+        {value: "todo2", id: 222, complete: false},
+        {value: "todo3", id: 333, complete: false},
+      ],
+      filter: "test",
+      createTodo: (val) => {
+        this.createTodoCalled = true
+        this.todoValue = val
+      },
+    }
+  })
+
+  //don't use an arrow function, preserve the value of "this"
+  it("renders filtered todos", function() {
+    const wrapper = shallow(<TodoList store={this.store} />)
+
+    expect(wrapper.find("li span").at(0).text()).toBe("todo1")
+    expect(wrapper.find("li span").at(1).text()).toBe("todo2")
+    expect(wrapper.find("li span").at(2).text()).toBe("todo3")
+  })
+
+  it("calls createTodo on enter", function() {
+    const wrapper = shallow(<TodoList store={this.store} />)
+
+    wrapper.find("input.new").at(0)
+      .simulate("keypress", {which: 13, target: {value: 'newTodo'}})
+
+    expect(this.createTodoCalled).toBe(true)
+    expect(this.todoValue).toBe("newTodo")
+  })
+
+  it("updates store filter", function() {
+    const wrapper = shallow(<TodoList store={this.store} />)
+
+    wrapper.find("input.filter").at(0)
+      .simulate('change', {target: {value: 'filter'}})
+
+    expect(this.store.filter).toBe("filter")
+  })
+
+})

6-mobx-react/__tests__/TodoStore.test.js

@@ -0,0 +1,25 @@
+import { TodoStore } from "../src/js/TodoStore"
+
+describe("TodoStore", () => {
+  it("creates new todos", () => {
+    const store = new TodoStore
+    store.createTodo("todo1")
+    store.createTodo("todo2")
+    expect(store.todos.length).toBe(2)
+    expect(store.todos[0].value).toBe("todo1")
+    expect(store.todos[1].value).toBe("todo2")
+  })
+
+  it("clears checked todos", () => {
+    const store = new TodoStore
+    store.createTodo("todo1")
+    store.createTodo("todo2")
+    store.createTodo("todo3")
+    store.todos[1].complete = true;
+    store.todos[2].complete = true;
+    store.clearComplete()
+
+    expect(store.todos.length).toBe(1)
+    expect(store.todos[0].value).toBe("todo1")
+  })
+})

6-mobx-react/package.json

@@ -16,15 +16,22 @@
     "react-dom": "^15.3.0"
   },
   "devDependencies": {
+    "babel-jest": "^14.1.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-class-properties": "^6.10.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "css-loader": "^0.23.1",
+    "enzyme": "^2.4.1",
+    "jest": "^14.1.0",
     "react-addons-test-utils": "^15.3.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
+  },
+  "jest": {
+    "automock": false,
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest"
   }
 }