Add todos example tests

examples/todos/test/components/App.spec.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import TestUtils from 'react-addons-test-utils'
+import expect from 'expect'
+
+import App from '../../components/App'
+import Footer from '../../components/Footer'
+import AddTodo from '../../containers/AddTodo'
+import VisibleTodoList from '../../containers/VisibleTodoList'
+
+function setup() {
+  const renderer = TestUtils.createRenderer()
+  renderer.render(<App />)
+  return renderer.getRenderOutput()
+}
+
+describe('Components', () => {
+  describe('App', () => {
+    it('Displays correct content', () => {
+      const children = setup().props.children
+      expect(children[0].type).toBe(AddTodo)
+      expect(children[1].type).toBe(VisibleTodoList)
+      expect(children[2].type).toBe(Footer)
+    })
+  })
+})

examples/todos/test/components/Footer.spec.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import TestUtils from 'react-addons-test-utils'
+import expect from 'expect'
+import Footer from '../../components/Footer'
+
+function setup() {
+  const renderer = TestUtils.createRenderer()
+  renderer.render(<Footer />)
+  return renderer.getRenderOutput()
+}
+
+function getTextContent(elem) {
+  const children = Array.isArray(elem.props.children) ?
+    elem.props.children : [ elem.props.children ]
+
+  return children.reduce(function concatText(out, child) {
+    // Children are either elements or text strings
+    return out + (child.props ? getTextContent(child) : child)
+  }, '')
+}
+
+describe('Components', () => {
+  describe('Footer', () => {
+    it('Displays correct content', () => {
+      const output = setup()
+      expect(getTextContent(output)).toBe('Show: All, Active, Completed')
+    })
+  })
+})

examples/todos/test/components/Link.spec.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import TestUtils from 'react-addons-test-utils'
+import expect from 'expect'
+
+import Link from '../../components/Link'
+
+function setup(propsOverride) {
+  const renderer = TestUtils.createRenderer()
+  renderer.render(
+    <Link
+      active={false}
+      onClick={() => {}}
+      {...propsOverride}
+    >
+      Click me!
+    </Link>
+  )
+  return renderer.getRenderOutput()
+}
+
+describe('Components', () => {
+  describe('Link', () => {
+    it('Returns a span with children if active', () => {
+      const output = setup({
+        active: true
+      })
+      expect(output.type).toBe('span')
+      expect(output.props.children).toBe('Click me!')
+    })
+
+    it('Returns a anchor with children if not active', () => {
+      const output = setup()
+      expect(output.type).toBe('a')
+      expect(output.props.children).toBe('Click me!')
+    })
+
+    it('Fires the onClick function that is passed in', () => {
+      let hasFired = false
+      const renderer = TestUtils.createRenderer()
+      renderer.render(
+        <Link
+          active={false}
+          onClick={() => {
+            hasFired = true
+          }}
+        >
+          Test onClick
+        </Link>
+      )
+      const link = renderer.getRenderOutput()
+      // Simulate the onClick event without actually rendering this component into some sort
+      // of DOM, and pass a fake preventDefault function so tests don't explode
+      link.props.onClick({
+        preventDefault() {}
+      })
+
+      expect(hasFired).toBe(true)
+    })
+  })
+})

examples/todos/test/components/Todo.spec.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import TestUtils from 'react-addons-test-utils'
+import expect from 'expect'
+
+import Todo from '../../components/Todo'
+
+function setup(propsOveride) {
+  const renderer = TestUtils.createRenderer()
+  renderer.render(
+    <Todo
+      onClick={() => {}}
+      completed={false}
+      text={'Call Jon Tewksbury'}
+      {...propsOveride}
+    />
+  )
+  return renderer.getRenderOutput()
+}
+
+describe('Components', () => {
+  describe('Todo', () => {
+    it('Displays text passed in', () => {
+      const output = setup()
+      expect(output.props.children).toBe('Call Jon Tewksbury')
+    })
+
+    it('Fires onClick passed in', () => {
+      let hasFired = false
+      const output = setup({
+        onClick() {
+          hasFired = true
+        }
+      })
+      output.props.onClick()
+
+      expect(hasFired).toBe(true)
+    })
+
+    it('Crosses through text when completed', () => {
+      const notCompleted = setup()
+      expect(notCompleted.props.style.textDecoration).toBe('none')
+
+      const completed = setup({
+        completed: true
+      })
+      expect(completed.props.style.textDecoration).toBe('line-through')
+    })
+  })
+})

examples/todos/test/components/TodoList.spec.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import TestUtils from 'react-addons-test-utils'
+import expect from 'expect'
+
+import TodoList from '../../components/TodoList'
+import Todo from '../../components/Todo'
+
+function setup(propsOveride) {
+  const renderer = TestUtils.createRenderer()
+  renderer.render(
+    <TodoList
+      todos={[
+        {
+          id: 1,
+          completed: false,
+          text: 'Request a raise'
+        }
+      ]}
+      onTodoClick={() => {}}
+      {...propsOveride}
+    />
+  )
+  return renderer.getRenderOutput()
+}
+
+describe('Components', () => {
+  describe('TodoList', () => {
+    it('Renders a list of todo items', () => {
+      const output = setup()
+      expect(output.type).toBe('ul')
+
+      const children = output.props.children
+      expect(children[0].type).toBe(Todo)
+    })
+
+    it('Passes onTodoClick to each child', () => {
+      let hasFired = false
+      const output = setup({
+        onTodoClick() {
+          hasFired = true
+        }
+      })
+
+      const children = output.props.children
+      children[0].props.onClick()
+      expect(hasFired).toBe(true)
+    })
+  })
+})