See Styled MainSection Component

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

MainSection

In order to apply the desired MainSection styling we'll need change the structure of the markup. Let's wrap the section in div tag and pull Footer out of it.

diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index 3af371f..2faa626 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -39,31 +39,34 @@ export default class MainSection extends Component {
     const {todos, actions} = this.props;

     return (
-      <section>
-        <ul>
-          {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
-            <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
-        </ul>
-        <input id="id_show_all"
-               type="radio"
-               value="show_all"
-               name="complete_status"
-               checked={this.state.show_all}
-               onChange={this.setVisibility.bind(this)}/> show all
-        <input id="id_show_completed"
-               type="radio"
-               value="show_completed"
-               name="complete_status"
-               checked={this.state.show_completed}
-               onChange={this.setVisibility.bind(this)}/> show completed
-        <input id="id_show_not_completed"
-               type="radio"
-               value="show_not_completed"
-               name="complete_status"
-               checked={this.state.show_not_completed}
-               onChange={this.setVisibility.bind(this)}/> show not completed
+      <div>
+        <div/>
+        <section>
+          <ul>
+            {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
+              <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
+          </ul>
+          <input id="id_show_all"
+                 type="radio"
+                 value="show_all"
+                 name="complete_status"
+                 checked={this.state.show_all}
+                 onChange={this.setVisibility.bind(this)}/> show all
+          <input id="id_show_completed"
+                 type="radio"
+                 value="show_completed"
+                 name="complete_status"
+                 checked={this.state.show_completed}
+                 onChange={this.setVisibility.bind(this)}/> show completed
+          <input id="id_show_not_completed"
+                 type="radio"
+                 value="show_not_completed"
+                 name="complete_status"
+                 checked={this.state.show_not_completed}
+                 onChange={this.setVisibility.bind(this)}/> show not completed
+        </section>
         <Footer todos={todos} deleteCompletedTodos={actions.deleteCompletedTodos}/>
-      </section>
+      </div>
     )
   }
 }
(END)

Check how this effected our existing tests.

  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
      1) Should be a MainSection component
      2) Should include a list of todos
      ✓ Should include a Footer component
      3) Should include a completed radio-button filter
    Should behave correctly
      4) 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
    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


  55 passing (255ms)
  4 failing

  1) MainSection component Should render correctly Should be a MainSection component:

      AssertionError: expected 'div' to equal 'section'
      + expected - actual

      -div
      +section

      at Context.<anonymous> (tests/todomvc/components/MainSection.spec.js:45:35)

  2) MainSection component Should render correctly Should include a list of todos:

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

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/MainSection.spec.js:53:26)

  3) MainSection component Should render correctly Should include a completed radio-button filter:

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

      -0
      +3

      at Context.<anonymous> (tests/todomvc/components/MainSection.spec.js:72:37)

  4) MainSection component Should behave correctly Should show the filtered list of Todos:

      AssertionError: expected [] to have a length of 5 but got 0
      + expected - actual

      -0
      +5

      at Context.<anonymous> (tests/todomvc/components/MainSection.spec.js:91:29)

This was expected! Let's update our tests to reflect the changed structure.

diff --git a/tests/todomvc/components/MainSection.spec.js b/tests/todomvc/components/MainSection.spec.js
index 5c790ee..2e44804 100644
--- a/tests/todomvc/components/MainSection.spec.js
+++ b/tests/todomvc/components/MainSection.spec.js
@@ -41,13 +41,15 @@ describe('MainSection component', () => {
   describe('Should render correctly', () => {
     it('Should be a MainSection component', () => {
       const {component} = setup();
+      expect(component.type()).to.equal('div');

-      expect(component.type()).to.equal('section')
+      const mainSection = component.find('section');
+      expect(mainSection.length).to.equal(1)
     });

     it('Should include a list of todos', () => {
       const {component, props} = setup();
-      const ul = component.children('ul');
+      const ul = component.find('ul');
       const items = ul.children();

       expect(ul).to.have.length(1);
@@ -67,7 +69,7 @@ describe('MainSection component', () => {

     it('Should include a completed radio-button filter', () => {
       const {component} = setup();
-      const radio_buttons = component.children('input');
+      const radio_buttons = component.find('input');

       expect(radio_buttons).to.have.length(3);
       radio_buttons.map(radio_button => expect(radio_button.props().type).to.equal('radio'));
@@ -81,7 +83,7 @@ describe('MainSection component', () => {
   describe('Should behave correctly', () => {
     it('Should show the filtered list of Todos', () => {
       const {component} = setup();
-      let todos = component.children('ul').children().nodes;
+      let todos = component.find('ul').children().nodes;
       const radio_button_all = component.find('#id_show_all');
       const radio_button_completed = component.find('#id_show_completed');
       const radio_button_not_completed = component.find('#id_show_not_completed');
@@ -98,19 +100,19 @@ describe('MainSection component', () => {
       expect(or_result).to.equal(true);

       radio_button_completed.simulate('change', {target: {value: 'show_completed'}});
-      todos = component.children('ul').children().nodes;
+      todos = component.find('ul').children().nodes;
       expect(todos).to.have.length(2);
       todos.map(todo => expect([true]).to.include(todo.props.todo.get('completed')));

       radio_button_not_completed.simulate('change', {target: {value: 'show_not_completed'}});
-      todos = component.children('ul').children().nodes;
+      todos = component.find('ul').children().nodes;
       expect(todos).to.have.length(3);
       todos.map(todo => expect([false]).to.include(todo.props.todo.get('completed')));

       and_result = true;
       or_result = false;
       radio_button_all.simulate('change', {target: {value: 'show_all'}});
-      todos = component.children('ul').children().nodes;
+      todos = component.find('ul').children().nodes;
       expect(todos).to.have.length(5);
       todos.map(todo => {
         expect([true, false]).to.include(todo.props.todo.get('completed'));
(END)

Run tests and watch them 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
    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


  59 passing (238ms)

Commit changes.

$ git add .
$ git commit -m 'MainSection structure updated'

Now let's address our styling process.

Should be styled correctly

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

Write the test.

diff --git a/tests/todomvc/components/MainSection.spec.js b/tests/todomvc/components/MainSection.spec.js
index 2e44804..ccb369f 100644
--- a/tests/todomvc/components/MainSection.spec.js
+++ b/tests/todomvc/components/MainSection.spec.js
@@ -122,5 +122,20 @@ describe('MainSection component', () => {
       expect(and_result).to.equal(false);
       expect(or_result).to.equal(true)
     })
+  });
+
+  describe('Should be styled correctly', () => {
+    it('Should have styling decoration applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const div = component.find('div');
+
+      expect(div.find({style: {position: 'absolute'}})).to.have.length(1);
+      expect(div.find({style: {right: 0}})).to.have.length(1);
+      expect(div.find({style: {bottom: 0}})).to.have.length(1);
+      expect(div.find({style: {left: 0}})).to.have.length(1);
+      expect(div.find({style: {height: 50}})).to.have.length(1);
+      expect(div.find({style: {overflow: 'hidden'}})).to.have.length(1);
+      expect(div.find({style: {boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)'}})).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
      ✓ 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
      1) Should have styling decoration 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

  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


  59 passing (251ms)
  1 failing

  1) MainSection component Should be styled correctly Should have styling decoration 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/MainSection.spec.js:132:65)

Write the code to make the test pass.

diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index 2faa626..7c1a6be 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -2,16 +2,30 @@

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

 import TodoItem from './TodoItem'
 import Footer from "./Footer";

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

+  styles = {
+    mainSectionDecoration: {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      left: 0,
+      height: 50,
+      overflow: 'hidden',
+      boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)'
+    }
+  };
+
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -40,7 +54,7 @@ export default class MainSection extends Component {

     return (
       <div>
-        <div/>
+        <div style={this.styles.mainSectionDecoration}/>
         <section>
           <ul>
             {todos.map(todo => this.showTodo.bind(this)(todo.get('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 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

  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
    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


  60 passing (251ms)

Commit changes.

$ git add .
$ git commit -m 'MainSection styling decoration applied'

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

Write the test.

diff --git a/tests/todomvc/components/MainSection.spec.js b/tests/todomvc/components/MainSection.spec.js
index ccb369f..dc03cfc 100644
--- a/tests/todomvc/components/MainSection.spec.js
+++ b/tests/todomvc/components/MainSection.spec.js
@@ -136,6 +136,16 @@ describe('MainSection component', () => {
       expect(div.find({style: {height: 50}})).to.have.length(1);
       expect(div.find({style: {overflow: 'hidden'}})).to.have.length(1);
       expect(div.find({style: {boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)'}})).to.have.length(1);
+    });
+
+    it('Should have section styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const mainSection = component.find('section');
+
+      expect(mainSection.find({style: {borderTop: '1px solid #e6e6e6'}})).to.have.length(1);
+      expect(mainSection.find({style: {width: '98%'}})).to.have.length(1);
+      expect(mainSection.find({style: {margin: '0 auto'}})).to.have.length(1);
+      expect(mainSection.find({style: {paddingBottom: 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
      ✓ 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
      1) Should have section 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

  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


  60 passing (265ms)
  1 failing

  1) MainSection component Should be styled correctly Should have section 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/MainSection.spec.js:145:83)

Write the code to make the test pass.

diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index 7c1a6be..39feb94 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -23,6 +23,13 @@ export default class MainSection extends Component {
       height: 50,
       overflow: 'hidden',
       boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)'
+    },
+
+    mainSection: {
+      borderTop: '1px solid #e6e6e6',
+      width: '98%',
+      margin: '0 auto',
+      paddingBottom: 10
     }
   };

@@ -55,7 +62,7 @@ export default class MainSection extends Component {
     return (
       <div>
         <div style={this.styles.mainSectionDecoration}/>
-        <section>
+        <section style={this.styles.mainSection}>
           <ul>
             {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
               <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
(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
    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

  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
    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


  61 passing (258ms)

Commit changes.

$ git add .
$ git commit -m 'MainSection section styling applied'

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

Write the test.

diff --git a/tests/todomvc/components/MainSection.spec.js b/tests/todomvc/components/MainSection.spec.js
index dc03cfc..e22bf3b 100644
--- a/tests/todomvc/components/MainSection.spec.js
+++ b/tests/todomvc/components/MainSection.spec.js
@@ -146,6 +146,15 @@ describe('MainSection component', () => {
       expect(mainSection.find({style: {width: '98%'}})).to.have.length(1);
       expect(mainSection.find({style: {margin: '0 auto'}})).to.have.length(1);
       expect(mainSection.find({style: {paddingBottom: 10}})).to.have.length(1);
+    });
+
+    it('Should have ul styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const mainSection = component.find('ul');
+
+      expect(mainSection.find({style: {margin: '0 0 10 0'}})).to.have.length(1);
+      expect(mainSection.find({style: {padding: 0}})).to.have.length(1);
+      expect(mainSection.find({style: {listStyle: 'none'}})).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
      ✓ 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
      1) Should have ul 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

  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


  61 passing (268ms)
  1 failing

  1) MainSection component Should be styled correctly Should have ul 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/MainSection.spec.js:155:71)

Write the code to make the test pass.

diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index 39feb94..ca3f753 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -30,6 +30,12 @@ export default class MainSection extends Component {
       width: '98%',
       margin: '0 auto',
       paddingBottom: 10
+    },
+
+    todosList: {
+      margin: '0 0 10 0',
+      padding: 0,
+      listStyle: 'none'
     }
   };

@@ -63,7 +69,7 @@ export default class MainSection extends Component {
       <div>
         <div style={this.styles.mainSectionDecoration}/>
         <section style={this.styles.mainSection}>
-          <ul>
+          <ul style={this.styles.todosList}>
             {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
               <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
           </ul>
(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
    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

  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
    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


  62 passing (257ms)

Commit changes.

$ git add .
$ git commit -m 'MainSection radiobuttons styling applied'

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

Write the test.

diff --git a/tests/todomvc/components/MainSection.spec.js b/tests/todomvc/components/MainSection.spec.js
index e22bf3b..75a4905 100644
--- a/tests/todomvc/components/MainSection.spec.js
+++ b/tests/todomvc/components/MainSection.spec.js
@@ -155,6 +155,14 @@ describe('MainSection component', () => {
       expect(mainSection.find({style: {margin: '0 0 10 0'}})).to.have.length(1);
       expect(mainSection.find({style: {padding: 0}})).to.have.length(1);
       expect(mainSection.find({style: {listStyle: 'none'}})).to.have.length(1);
+    });
+
+    it('Should have radiobuttons styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const mainSection = component.find('input');
+
+      expect(mainSection.find({style: {marginLeft: 30}})).to.have.length(3);
+      expect(mainSection.find({style: {verticalAlign: 'top'}})).to.have.length(3);
     })
   })
 });
(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
      ✓ 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
      1) 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

  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


  62 passing (267ms)
  1 failing

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

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

      -0
      +3

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

Write the code to make the test pass.

diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index ca3f753..3e2e7e0 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -36,6 +36,11 @@ export default class MainSection extends Component {
       margin: '0 0 10 0',
       padding: 0,
       listStyle: 'none'
+    },
+
+    radioButton: {
+      marginLeft: 30,
+      verticalAlign: 'top'
     }
   };

@@ -78,18 +83,21 @@ export default class MainSection extends Component {
                  value="show_all"
                  name="complete_status"
                  checked={this.state.show_all}
+                 style={this.styles.radioButton}
                  onChange={this.setVisibility.bind(this)}/> show all
           <input id="id_show_completed"
                  type="radio"
                  value="show_completed"
                  name="complete_status"
                  checked={this.state.show_completed}
+                 style={this.styles.radioButton}
                  onChange={this.setVisibility.bind(this)}/> show completed
           <input id="id_show_not_completed"
                  type="radio"
                  value="show_not_completed"
                  name="complete_status"
                  checked={this.state.show_not_completed}
+                 style={this.styles.radioButton}
                  onChange={this.setVisibility.bind(this)}/> show not completed
         </section>
         <Footer todos={todos} deleteCompletedTodos={actions.deleteCompletedTodos}/>
(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
    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

  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


  63 passing (257ms)

Commit changes.

$ git add .
$ git commit -m 'MainSection radiobuttons styling applied'