From 8c49d5c655aec3c90f2e57732e4be87624a5c617 Mon Sep 17 00:00:00 2001 From: Will Stern Date: Thu, 25 Aug 2016 21:03:26 -0500 Subject: [PATCH] added mobx testing --- .../__tests__/TodoList.functional.test.js | 40 +++++++++++++++ 6-mobx-react/__tests__/TodoList.unit.test.js | 51 +++++++++++++++++++ 6-mobx-react/__tests__/TodoStore.test.js | 25 +++++++++ 6-mobx-react/package.json | 7 +++ 4 files changed, 123 insertions(+) create mode 100644 6-mobx-react/__tests__/TodoList.functional.test.js create mode 100644 6-mobx-react/__tests__/TodoList.unit.test.js create mode 100644 6-mobx-react/__tests__/TodoStore.test.js diff --git a/6-mobx-react/__tests__/TodoList.functional.test.js b/6-mobx-react/__tests__/TodoList.functional.test.js new file mode 100644 index 00000000..463dc957 --- /dev/null +++ b/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() + + 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() + + 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) + }) +}) diff --git a/6-mobx-react/__tests__/TodoList.unit.test.js b/6-mobx-react/__tests__/TodoList.unit.test.js new file mode 100644 index 00000000..af5aa349 --- /dev/null +++ b/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() + + 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() + + 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() + + wrapper.find("input.filter").at(0) + .simulate('change', {target: {value: 'filter'}}) + + expect(this.store.filter).toBe("filter") + }) + +}) diff --git a/6-mobx-react/__tests__/TodoStore.test.js b/6-mobx-react/__tests__/TodoStore.test.js new file mode 100644 index 00000000..25b5a338 --- /dev/null +++ b/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") + }) +}) diff --git a/6-mobx-react/package.json b/6-mobx-react/package.json index bbb08817..2fe4412c 100644 --- a/6-mobx-react/package.json +++ b/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": "/node_modules/babel-jest" } }