See Styled Header Component

Story: As a user, I want my Header component to be styled.

Should be styled correctly

It should have header styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index c340f53..1d65e89 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -79,5 +79,13 @@ describe('Header component', () => {
       input.simulate('change');
       expect(props.actions.toggleCompleteAllTodos.called).to.be.true
     })
+  });
+
+  describe('Should be styled correctly', () => {
+    it('Should have header styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+
+      expect(component.find({style: {height: 110}})).to.have.length(1);
+    })
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      1) Should have header styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  52 passing (229ms)
  1 failing

  1) Header component Should be styled correctly Should have header styling applied in accordance with the design specs:

      AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      + expected - actual

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:88:62)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index 76c56a4..8e8804b 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -2,14 +2,22 @@

 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
+import Radium from 'radium'

 import TodoTextInput from './TodoTextInput'

+@Radium
 export default class Header extends Component {
   static propTypes = {
     actions: PropTypes.object.isRequired
   };

+  styles = {
+    header: {
+      height: 110
+    }
+  };
+
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -32,7 +40,7 @@ export default class Header extends Component {

   render() {
     return (
-      <header>
+      <header style={this.styles.header}>
         <h1>todos</h1>
         <TodoTextInput placeholder="What needs to be done?" isNew onSave={this.handleSave.bind(this)}/>
         <input type="checkbox" name="all_completed" checked={this.state.all_completed}
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  53 passing (226ms)

Commit changes.

$ git add .
$ git commit -m 'Header header styling applied'

It should have h1 styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index 1d65e89..736bfae 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -86,6 +86,22 @@ describe('Header component', () => {
       const {component} = setup();

       expect(component.find({style: {height: 110}})).to.have.length(1);
+    });
+
+    it('Should have h1 styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const h1 = component.children('h1');
+
+      expect(h1.find({style: {position: 'absolute'}})).to.have.length(1);
+      expect(h1.find({style: {top: -140}})).to.have.length(1);
+      expect(h1.find({style: {width: '100%'}})).to.have.length(1);
+      expect(h1.find({style: {fontSize: 100}})).to.have.length(1);
+      expect(h1.find({style: {fontWeight: 100}})).to.have.length(1);
+      expect(h1.find({style: {textAlign: 'center'}})).to.have.length(1);
+      expect(h1.find({style: {color: 'rgba(175, 47, 47, 0.15)'}})).to.have.length(1);
+      expect(h1.find({style: {WebkitTextRendering: 'optimizeLegibility'}})).to.have.length(1);
+      expect(h1.find({style: {MozTextRendering: 'optimizeLegibility'}})).to.have.length(1);
+      expect(h1.find({style: {textRendering: 'optimizeLegibility'}})).to.have.length(1);
     })
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      1) Should have h1 styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  53 passing (230ms)
  1 failing

  1) Header component Should be styled correctly Should have h1 styling applied in accordance with the design specs:

      AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      + expected - actual

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:95:64)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index 8e8804b..e84e601 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -15,6 +15,19 @@ export default class Header extends Component {
   styles = {
     header: {
       height: 110
+    },
+
+    h1: {
+      position: 'absolute',
+      top: -140,
+      width: '100%',
+      fontSize: 100,
+      fontWeight: 100,
+      textAlign: 'center',
+      color: 'rgba(175, 47, 47, 0.15)',
+      WebkitTextRendering: 'optimizeLegibility',
+      MozTextRendering: 'optimizeLegibility',
+      textRendering: 'optimizeLegibility',
     }
   };

@@ -41,7 +54,7 @@ export default class Header extends Component {
   render() {
     return (
       <header style={this.styles.header}>
-        <h1>todos</h1>
+        <h1 style={this.styles.h1}>todos</h1>
         <TodoTextInput placeholder="What needs to be done?" isNew onSave={this.handleSave.bind(this)}/>
         <input type="checkbox" name="all_completed" checked={this.state.all_completed}
                onChange={ this.handleToggleCompletedAll.bind(this) }/>toggle &quot;completed&quot; status for all todos (checked = completed)
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  54 passing (227ms)

Commit changes.

$ git add .
$ git commit -m 'Header h1 styling applied'

It should have checkbox styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index 736bfae..98c7bd8 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -102,6 +102,19 @@ describe('Header component', () => {
       expect(h1.find({style: {WebkitTextRendering: 'optimizeLegibility'}})).to.have.length(1);
       expect(h1.find({style: {MozTextRendering: 'optimizeLegibility'}})).to.have.length(1);
       expect(h1.find({style: {textRendering: 'optimizeLegibility'}})).to.have.length(1);
+    });
+
+    it('Should have checkbox styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const checkbox = component.children('input');
+
+      expect(checkbox.find({style: {position: 'relative'}})).to.have.length(1);
+      expect(checkbox.find({style: {top: 10}})).to.have.length(1);
+      expect(checkbox.find({style: {width: 14}})).to.have.length(1);
+      expect(checkbox.find({style: {height: 14}})).to.have.length(1);
+      expect(checkbox.find({style: {margin: '8 8 8 20'}})).to.have.length(1);
+      expect(checkbox.find({style: {verticalAlign: 'middle'}})).to.have.length(1);
+      expect(checkbox.find({style: {cursor: 'pointer'}})).to.have.length(1);
     })
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs
      1) Should have checkbox styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  54 passing (239ms)
  1 failing

  1) Header component Should be styled correctly Should have checkbox styling applied in accordance with the design specs:

      AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      + expected - actual

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:111:70)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index e84e601..17d2718 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -28,6 +28,16 @@ export default class Header extends Component {
       WebkitTextRendering: 'optimizeLegibility',
       MozTextRendering: 'optimizeLegibility',
       textRendering: 'optimizeLegibility',
+    },
+
+    toggleAll: {
+      position: 'relative',
+      top: 10,
+      width: 14,
+      height: 14,
+      margin: '8 8 8 20',
+      verticalAlign: 'middle',
+      cursor: 'pointer'
     }
   };

@@ -56,7 +66,10 @@ export default class Header extends Component {
       <header style={this.styles.header}>
         <h1 style={this.styles.h1}>todos</h1>
         <TodoTextInput placeholder="What needs to be done?" isNew onSave={this.handleSave.bind(this)}/>
-        <input type="checkbox" name="all_completed" checked={this.state.all_completed}
+        <input type="checkbox"
+               name="all_completed"
+               checked={this.state.all_completed}
+               style={this.styles.toggleAll}
                onChange={ this.handleToggleCompletedAll.bind(this) }/>toggle &quot;completed&quot; status for all todos (checked = completed)
       </header>
     )
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs
      ✓ Should have checkbox styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  55 passing (233ms)

Commit changes.

$ git add .
$ git commit -m 'Header checkbox styling applied'

In order to be able to style the text following the checkbox, let's wrap it in span tag.

Should render correctly

It should have a toggle all complete status span

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index 98c7bd8..85ca6ae 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -58,6 +58,13 @@ describe('Header component', () => {
       expect(checkbox).to.have.length(1);
       expect(checkbox.props().type).to.equal('checkbox');
       expect(checkbox.props().name).to.equal('all_completed')
+    });
+
+    it('Should have a toggle all complete status span', () => {
+      const {component} = setup();
+      const span = component.children('span');
+
+      expect(span).to.have.length(1);
     })
   });

(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
      1) Should have a toggle all complete status span
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs
      ✓ Should have checkbox styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  55 passing (272ms)
  1 failing

  1) Header component Should render correctly Should have a toggle all complete status span:

      AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      + expected - actual

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:67:28)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index 17d2718..57dcc62 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -70,7 +70,8 @@ export default class Header extends Component {
                name="all_completed"
                checked={this.state.all_completed}
                style={this.styles.toggleAll}
-               onChange={ this.handleToggleCompletedAll.bind(this) }/>toggle "completed" status for all todos (checked = completed)
+               onChange={this.handleToggleCompletedAll.bind(this)}/>
+        <span>toggle &quot;completed&quot; status for all todos (checked = completed)</span>
       </header>
     )
   }
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
      ✓ Should have a toggle all complete status span
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs
      ✓ Should have checkbox styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  56 passing (259ms)

Commit changes.

$ git add .
$ git commit -m 'have a toggle all complete status span'

Should be styled correctly

It should have span styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index 85ca6ae..2774dfe 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -122,6 +122,14 @@ describe('Header component', () => {
       expect(checkbox.find({style: {margin: '8 8 8 20'}})).to.have.length(1);
       expect(checkbox.find({style: {verticalAlign: 'middle'}})).to.have.length(1);
       expect(checkbox.find({style: {cursor: 'pointer'}})).to.have.length(1);
+    });
+
+    it('Should have span styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const checkbox = component.children('span');
+
+      expect(checkbox.find({style: {position: 'relative'}})).to.have.length(1);
+      expect(checkbox.find({style: {top: 10}})).to.have.length(1);
     })
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
      ✓ Should have a toggle all complete status span
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs
      ✓ Should have checkbox styling applied in accordance with the design specs
      1) Should have span styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  56 passing (268ms)
  1 failing

  1) Header component Should be styled correctly Should have span styling applied in accordance with the design specs:

      AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      + expected - actual

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:131:70)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index 57dcc62..93d6330 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -38,6 +38,11 @@ export default class Header extends Component {
       margin: '8 8 8 20',
       verticalAlign: 'middle',
       cursor: 'pointer'
+    },
+
+    span: {
+      position: 'relative',
+      top: 10
     }
   };

@@ -71,7 +76,7 @@ export default class Header extends Component {
                checked={this.state.all_completed}
                style={this.styles.toggleAll}
                onChange={ this.handleToggleCompletedAll.bind(this) }/>
-        <span>toggle &quot;completed&quot; status for all todos (checked = completed)</span>
+        <span style={this.styles.span}>toggle &quot;completed&quot; status for all todos (checked = completed)</span>
       </header>
     )
   }
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed
    ✓ Should create an action to delete all completed todos

  Footer component
    Should render correctly
      ✓ Should be a Footer
      ✓ Should have a todo counter
      ✓ Should display 'No todos left' when active count is 0
      ✓ Should display '1 todo left' when active count is 1
      ✓ Should display '5 todos left' when active count is 5
    Should behave correctly
      ✓ Should not show 'delete completed' button when there are no completed todos
      ✓ Should show 'delete completed' button when there is at least one completed todo
      ✓ Should call deleteCompletedTodos() when the delete completed button is clicked

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
      ✓ Should have a toggle all complete status span
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
    Should be styled correctly
      ✓ Should have header styling applied in accordance with the design specs
      ✓ Should have h1 styling applied in accordance with the design specs
      ✓ Should have checkbox styling applied in accordance with the design specs
      ✓ Should have span styling applied in accordance with the design specs

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos
      ✓ Should include a Footer component
      ✓ Should include a completed radio-button filter
    Should behave correctly
      ✓ Should show the filtered list of Todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo
    ✓ Should handle DELETE_COMPLETED todo


  57 passing (255ms)

Commit changes.

$ git add .
$ git commit -m 'Header span styling applied'