See Styled TodoApp Component

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

Should be styled correctly

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

Write the test.

diff --git a/tests/todomvc/components/TodoApp.spec.js b/tests/todomvc/components/TodoApp.spec.js
index e950657..80465f5 100644
--- a/tests/todomvc/components/TodoApp.spec.js
+++ b/tests/todomvc/components/TodoApp.spec.js
@@ -50,5 +50,17 @@ describe('TodoApp component', () => {

       expect(div.children('MainSection')).to.have.length(1)
     })
+  });
+
+  describe('Should be styled correctly', () => {
+    it('Should have styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      const div = component.find('div');
+
+      expect(div.find({style: {background: '#fff'}})).to.have.length(1);
+      expect(div.find({style: {margin: '130px 0 40px 0'}})).to.have.length(1);
+      expect(div.find({style: {position: 'relative'}})).to.have.length(1);
+      expect(div.find({style: {boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'}})).to.have.length(1);
+    })
   })
 });
(END)

Run the test and watch it fail.

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

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

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed

  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
      1) Should have styling applied in accordance with the design specs

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

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

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


  51 passing (235ms)
  1 failing

  1) TodoApp component Should be styled correctly Should have 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/TodoApp.spec.js:55:63)

Write the code to make the test pass.

diff --git a/src/todomvc/components/TodoApp.js b/src/todomvc/components/TodoApp.js
index e8c7842..dc9a66f 100644
--- a/src/todomvc/components/TodoApp.js
+++ b/src/todomvc/components/TodoApp.js
@@ -82,6 +82,13 @@ class TodoApp extends Component {
           }
         }
       }
+    },
+
+    todoApp: {
+      background: '#fff',
+      margin: '130px 0 40px 0',
+      position: 'relative',
+      boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'
     }
   };

   render() {
@@ -91,7 +99,7 @@ class TodoApp extends Component {
     return (
       <StyleRoot>
         <Style rules={this.styles.root}/>
-        <div>
+        <div style={this.styles.todoApp}>
           <Header actions={actions}/>
           <MainSection todos={todos} actions={actions}/>
         </div>
(END)

Run the test and watch it pass.

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

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

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed

  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
Radium: userAgent should be supplied for server-side rendering. See https://github.com/FormidableLabs/radium/tree/master/docs/api#radium for more information.
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section
    Should be styled correctly
      ✓ Should have styling applied in accordance with the design specs

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

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

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


  52 passing (159ms)

Our test is now passing, but we have introduced a warning coming from Radium that relates to a userAgent configuration. Let's eliminate this warning:

diff --git a/tests/test_helper.js b/tests/test_helper.js
index 2fb9a8f..f601598 100644
--- a/tests/test_helper.js
+++ b/tests/test_helper.js
@@ -1,6 +1,24 @@
 'use strict';

+const {JSDOM} = require('jsdom');
 import chai from 'chai'
 import chaiImmutable from 'chai-immutable'

 chai.use(chaiImmutable);
+
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const {window} = jsdom;
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === 'undefined')
+    .map(prop => Object.getOwnPropertyDescriptor(src, prop));
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+  userAgent: 'node.js',
+};
+copyProps(window, global);
(END)

Run the test and watch it pass without the warning.

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

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

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed

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

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

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

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

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


  52 passing (200ms)

Commit changes.

$ git add .
$ git commit -m 'TodoApp styling applied'