See Styled Footer Component

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

Should be styled correctly

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

Write the test.

diff --git a/tests/todomvc/components/Footer.spec.js b/tests/todomvc/components/Footer.spec.js
index 17fd494..ec2f68a 100644
--- a/tests/todomvc/components/Footer.spec.js
+++ b/tests/todomvc/components/Footer.spec.js
@@ -112,5 +112,16 @@ describe('Footer component', () => {
       button.simulate('click');
       expect(props.deleteCompletedTodos.called).to.be.true
     })
+  });
+
+  describe('Should be styled correctly', () => {
+    it('Should have footer styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+
+      expect(component.find({style: {color: '#777'}})).to.have.length(1);
+      expect(component.find({style: {padding: '10px 15px'}})).to.have.length(1);
+      expect(component.find({style: {height: 20}})).to.have.length(1);
+      expect(component.find({style: {borderTop: '1px solid #e6e6e6'}})).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
    Should be styled correctly
      1) Should have footer styling applied in accordance with the design specs

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (59ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  71 passing (364ms)
  1 failing

  1) Footer component Should be styled correctly Should have footer 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/Footer.spec.js:121:64)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Footer.js b/src/todomvc/components/Footer.js
index cfed381..2ef121e 100644
--- a/src/todomvc/components/Footer.js
+++ b/src/todomvc/components/Footer.js
@@ -2,13 +2,24 @@

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

+@Radium
 export default class Footer extends Component {
   static propTypes = {
     todos: PropTypes.object,
     deleteCompletedTodos: PropTypes.func.isRequired
   };

+  styles = {
+    footer: {
+      color: '#777',
+      padding: '10px 15px',
+      height: 20,
+      borderTop: '1px solid #e6e6e6'
+    }
+  };
+
   static hasCompleted(todos) {
     if (typeof todos === "undefined") return false;
     else return todos.filter(todo => todo.get('completed') === true).count() > 0;
@@ -26,7 +37,7 @@ export default class Footer extends Component {
     const deleteCompletedTodos = this.props.deleteCompletedTodos;

     return (
-      <footer>
+      <footer style={this.styles.footer}>
         <label>The number of todos not completed: {Footer.countNotCompleted(todos)}</label>
         {Footer.hasCompleted(todos) && <button onClick={() => deleteCompletedTodos()}>delete completed</button>}
       </footer>
(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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (54ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  72 passing (348ms)

Commit changes.

$ git add .
$ git commit -m 'Footer footer styling applied'

It should have number of not completed todos in bold

Write the test.

diff --git a/tests/todomvc/components/Footer.spec.js b/tests/todomvc/components/Footer.spec.js
index ec2f68a..537833a 100644
--- a/tests/todomvc/components/Footer.spec.js
+++ b/tests/todomvc/components/Footer.spec.js
@@ -122,6 +122,19 @@ describe('Footer component', () => {
       expect(component.find({style: {padding: '10px 15px'}})).to.have.length(1);
       expect(component.find({style: {height: 20}})).to.have.length(1);
       expect(component.find({style: {borderTop: '1px solid #e6e6e6'}})).to.have.length(1);
+    });
+
+    it('Should have number of not completed todos in bold', () => {
+      const todos = List([
+        Map({id: uuid.v4(), description: 'todo 1', completed: false}),
+        Map({id: uuid.v4(), description: 'todo 2', completed: true}),
+        Map({id: uuid.v4(), description: 'todo 3', completed: false})
+      ]);
+      const {component} = setup(todos);
+      const strong = component.find('strong');
+
+      expect(strong).to.have.length(1);
+      expect(strong.children().text()).to.equal('2 todos left')
     })
   })
 });
(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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs
      1) Should have number of not completed todos in bold

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (54ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  72 passing (363ms)
  1 failing

  1) Footer component Should be styled correctly Should have number of not completed todos in bold:

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

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Footer.spec.js:136:30)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Footer.js b/src/todomvc/components/Footer.js
index 2ef121e..133cd98 100644
--- a/src/todomvc/components/Footer.js
+++ b/src/todomvc/components/Footer.js
@@ -38,7 +38,9 @@ export default class Footer extends Component {

     return (
       <footer style={this.styles.footer}>
-        <label>The number of todos not completed: {Footer.countNotCompleted(todos)}</label>
+        <label>
+          The number of todos not completed: <strong>{Footer.countNotCompleted(todos)}</strong>
+        </label>
         {Footer.hasCompleted(todos) && <button onClick={() => deleteCompletedTodos()}>delete completed</button>}
       </footer>
     )
(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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs
      ✓ Should have number of not completed todos in bold

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (59ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  73 passing (368ms)

Commit changes.

$ git add .
$ git commit -m 'number of non completed todos in bold'

It should have delete button styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/Footer.spec.js b/tests/todomvc/components/Footer.spec.js
index 537833a..0c3a107 100644
--- a/tests/todomvc/components/Footer.spec.js
+++ b/tests/todomvc/components/Footer.spec.js
@@ -135,6 +135,29 @@ describe('Footer component', () => {

       expect(strong).to.have.length(1);
       expect(strong.children().text()).to.equal('2 todos left')
+    });
+
+    it('Should have delete button styling applied in accordance with the design specs', () => {
+      const todos = List([
+        Map({id: uuid.v4(), description: 'todo 1', completed: false}),
+        Map({id: uuid.v4(), description: 'todo 2', completed: true}),
+        Map({id: uuid.v4(), description: 'todo 3', completed: false})
+      ]);
+      const {component} = setup(todos);
+      const button = component.find('button');
+
+      expect(button.find({style: {float: 'right'}})).to.have.length(1);
+      expect(button.find({style: {position: 'relative'}})).to.have.length(1);
+      expect(button.find({style: {marginTop: 2}})).to.have.length(1);
+      expect(button.find({style: {textDecoration: 'none'}})).to.have.length(1);
+      expect(button.find({style: {border: 0}})).to.have.length(1);
+      expect(button.find({style: {background: 'none'}})).to.have.length(1);
+      expect(button.find({style: {fontSize: '100%'}})).to.have.length(1);
+      expect(button.find({style: {color: 'rgba(175, 47, 47, 0.75)'}})).to.have.length(1);
+      expect(button.find({style: {cursor: 'pointer'}})).to.have.length(1);
+      expect(button.find({style: {WebkitAppearance: 'none'}})).to.have.length(1);
+      expect(button.find({style: {WebkitFontSmoothing: 'antialiased'}})).to.have.length(1);
+      expect(button.find({style: {MozOsxFontSmoothing: 'grayscale'}})).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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs
      ✓ Should have number of not completed todos in bold
      1) Should have delete button styling applied in accordance with the design specs

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (54ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  73 passing (366ms)
  1 failing

  1) Footer component Should be styled correctly Should have delete button 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/Footer.spec.js:149:62)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Footer.js b/src/todomvc/components/Footer.js
index 133cd98..a0d668d 100644
--- a/src/todomvc/components/Footer.js
+++ b/src/todomvc/components/Footer.js
@@ -17,6 +17,21 @@ export default class Footer extends Component {
       padding: '10px 15px',
       height: 20,
       borderTop: '1px solid #e6e6e6'
+    },
+
+    deleteCompleted: {
+      position: 'relative',
+      float: 'right',
+      marginTop: 2,
+      border: 0,
+      color: 'rgba(175, 47, 47, 0.75)',
+      background: 'none',
+      textDecoration: 'none',
+      fontSize: '100%',
+      cursor: 'pointer',
+      WebkitAppearance: 'none',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale'
     }
   };

@@ -41,7 +56,8 @@ export default class Footer extends Component {
         <label>
           The number of todos not completed: <strong>{Footer.countNotCompleted(todos)}</strong>
         </label>
-        {Footer.hasCompleted(todos) && <button onClick={() => deleteCompletedTodos()}>delete completed</button>}
+        {Footer.hasCompleted(todos) &&
+        <button style={this.styles.deleteCompleted} onClick={() => deleteCompletedTodos()}>delete completed</button>}
       </footer>
     )
   }
(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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs
      ✓ Should have number of not completed todos in bold
      ✓ Should have delete button styling applied in accordance with the design specs

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (58ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  74 passing (365ms)

Commit changes.

$ git add .
$ git commit -m 'delete button styling applied'

It should have delete button hover styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/Footer.spec.js b/tests/todomvc/components/Footer.spec.js
index 0c3a107..5bf4003 100644
--- a/tests/todomvc/components/Footer.spec.js
+++ b/tests/todomvc/components/Footer.spec.js
@@ -158,6 +158,32 @@ describe('Footer component', () => {
       expect(button.find({style: {WebkitAppearance: 'none'}})).to.have.length(1);
       expect(button.find({style: {WebkitFontSmoothing: 'antialiased'}})).to.have.length(1);
       expect(button.find({style: {MozOsxFontSmoothing: 'grayscale'}})).to.have.length(1);
+    });
+
+    it('Should have delete button hover styling applied in accordance with the design specs', () => {
+      const todos = List([
+        Map({id: uuid.v4(), description: 'todo 1', completed: false}),
+        Map({id: uuid.v4(), description: 'todo 2', completed: true}),
+        Map({id: uuid.v4(), description: 'todo 3', completed: false})
+      ]);
+      const {component} = setup(todos);
+      let button = component.find('button');
+
+      expect(button.find({style: {fontStyle: 'italic'}})).to.have.length(0);
+      expect(button.find({style: {fontWeight: 'bold'}})).to.have.length(0);
+      expect(button.find({style: {color: 'indianred'}})).to.have.length(0);
+
+      button.simulate('mouseenter');
+      button = component.find('button');
+      expect(button.find({style: {fontStyle: 'italic'}})).to.have.length(1);
+      expect(button.find({style: {fontWeight: 'bold'}})).to.have.length(1);
+      expect(button.find({style: {color: 'indianred'}})).to.have.length(1);
+
+      button.simulate('mouseleave');
+      button = component.find('button');
+      expect(button.find({style: {fontStyle: 'italic'}})).to.have.length(0);
+      expect(button.find({style: {fontWeight: 'bold'}})).to.have.length(0);
+      expect(button.find({style: {color: 'indianred'}})).to.have.length(0);
     })
   })
 });
(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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs
      ✓ Should have number of not completed todos in bold
      ✓ Should have delete button styling applied in accordance with the design specs
      1) Should have delete button hover styling applied in accordance with the design specs

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (52ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  74 passing (373ms)
  1 failing

  1) Footer component Should be styled correctly Should have delete button hover 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/Footer.spec.js:178:67)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Footer.js b/src/todomvc/components/Footer.js
index a0d668d..d057783 100644
--- a/src/todomvc/components/Footer.js
+++ b/src/todomvc/components/Footer.js
@@ -31,7 +31,12 @@ export default class Footer extends Component {
       cursor: 'pointer',
       WebkitAppearance: 'none',
       WebkitFontSmoothing: 'antialiased',
-      MozOsxFontSmoothing: 'grayscale'
+      MozOsxFontSmoothing: 'grayscale',
+      ':hover': {
+        fontStyle: 'italic',
+        fontWeight: 'bold',
+        color: 'indianred'
+      },
     }
   };

(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
    Should be styled correctly
      ✓ Should have footer styling applied in accordance with the design specs
      ✓ Should have number of not completed todos in bold
      ✓ Should have delete button styling applied in accordance with the design specs
      ✓ Should have delete button hover styling applied in accordance with the design specs

  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
    Should be styled correctly
      ✓ Should have styling decoration applied in accordance with the design specs
      ✓ Should have section styling applied in accordance with the design specs
      ✓ Should have ul styling applied in accordance with the design specs
      ✓ Should have radiobuttons styling applied in accordance with the design specs

  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
      ✓ Should display delete div only when hovering over a todo
    Should be styled correctly
      ✓ Should have li styling applied in accordance with the design specs (55ms)
      ✓ Should have ButtonChecked styling applied in accordance with the design specs
      ✓ Should have ButtonUnchecked styling applied in accordance with the design specs
      ✓ Should have label not completed styling applied in accordance with the design specs
      ✓ Should have label completed styling applied in accordance with the design specs
      ✓ Should have delete div styling applied in accordance with the design specs
      ✓ Should not display delete div initially

  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
    Should be styled correctly
      ✓ Should have new todo styling applied in accordance with the design specs
      ✓ Should have edit todo styling applied in accordance with the design specs

  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


  75 passing (356ms)

Commit changes.

$ git add .
$ git commit -m 'delete button hover styling applied'