See Styled TodoTextInput Component

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

Should be styled correctly

It should have new todo styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/TodoTextInput.spec.js b/tests/todomvc/components/TodoTextInput.spec.js
index bbff953..a16b5be 100644
--- a/tests/todomvc/components/TodoTextInput.spec.js
+++ b/tests/todomvc/components/TodoTextInput.spec.js
@@ -78,5 +78,23 @@ describe('TodoTextInput component', () => {
       component.find('input').at(0).simulate('blur', {target: {value: 'new todo'}});
       expect(props.onSave.called).to.be.false;
     })
+  });
+
+  describe('Should be styled correctly', () => {
+    it('Should have new todo styling applied in accordance with the design specs', () => {
+      const {component} = setup({isNew: true});
+      let newTodo = component.find('input');
+
+      expect(newTodo.find({style: {border: 'none'}})).to.have.length(1);
+      expect(newTodo.find({style: {boxShadow: 'inset 0 -2px 1px rgba(0,0,0,0.03)'}})).to.have.length(1);
+      expect(newTodo.find({style: {color: 'inherit'}})).to.have.length(1);
+      expect(newTodo.find({style: {display: 'block'}})).to.have.length(1);
+      expect(newTodo.find({style: {fontSize: 24}})).to.have.length(1);
+      expect(newTodo.find({style: {lineHeight: '1.4em'}})).to.have.length(1);
+      expect(newTodo.find({style: {padding: '16px 16px 16px 60px'}})).to.have.length(1);
+      expect(newTodo.find({style: {width: '100%'}})).to.have.length(1);
+      expect(newTodo.find({style: {WebkitFontSmoothing: 'antialiased'}})).to.have.length(1);
+      expect(newTodo.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

  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
      1) Should have new 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


  57 passing (232ms)
  1 failing

  1) TodoTextInput component Should be styled correctly Should have new todo 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/TodoTextInput.spec.js:88:63)

Write the code to make the test pass.

diff --git a/src/todomvc/components/TodoTextInput.js b/src/todomvc/components/TodoTextInput.js
index 329e70f..61ef45b 100644
--- a/src/todomvc/components/TodoTextInput.js
+++ b/src/todomvc/components/TodoTextInput.js
@@ -2,7 +2,9 @@

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

+@Radium
 export default class TodoTextInput extends Component {
   static propTypes = {
     text: PropTypes.string,
@@ -11,6 +13,21 @@ export default class TodoTextInput extends Component {
     isNew: PropTypes.bool
   };

+  styles = {
+    newTodo: {
+      border: 'none',
+      boxShadow: 'inset 0 -2px 1px rgba(0,0,0,0.03)',
+      color: 'inherit',
+      display: 'block',
+      fontSize: 24,
+      lineHeight: '1.4em',
+      padding: '16px 16px 16px 60px',
+      width: '100%',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale'
+    }
+  };
+
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -42,7 +59,7 @@ export default class TodoTextInput extends Component {
     return (
       <input type="text" placeholder={this.props.placeholder} value={this.state.text}
              onChange={this.handleChange.bind(this)} onKeyDown={this.handleSubmit.bind(this)}
-             onBlur={this.handleBlur.bind(this)}/>
+             onBlur={this.handleBlur.bind(this)} style={this.props.isNew && this.styles.newTodo}/>
     )
   }
 }
(END)

Run the test and watch it pass.

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

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

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

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

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

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

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew
    Should be styled correctly
      ✓ Should have new 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


  58 passing (214ms)

Commit changes.

$ git add .
$ git commit -m 'TodoTextInput new styling applied'

It should have edit todo styling applied in accordance with the design specs

Write the test.

diff --git a/tests/todomvc/components/TodoTextInput.spec.js b/tests/todomvc/components/TodoTextInput.spec.js
index a16b5be..95413c1 100644
--- a/tests/todomvc/components/TodoTextInput.spec.js
+++ b/tests/todomvc/components/TodoTextInput.spec.js
@@ -95,6 +95,23 @@ describe('TodoTextInput component', () => {
       expect(newTodo.find({style: {width: '100%'}})).to.have.length(1);
       expect(newTodo.find({style: {WebkitFontSmoothing: 'antialiased'}})).to.have.length(1);
       expect(newTodo.find({style: {MozOsxFontSmoothing: 'grayscale'}})).to.have.length(1);
+    });
+
+    it('Should have edit todo styling applied in accordance with the design specs', () => {
+      const {component} = setup();
+      let editTodo = component.find('input');
+
+      expect(editTodo.find({style: {border: '1px solid #999'}})).to.have.length(1);
+      expect(editTodo.find({style: {boxShadow: 'inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)'}})).to.have.length(1);
+      expect(editTodo.find({style: {color: 'inherit'}})).to.have.length(1);
+      expect(editTodo.find({style: {display: 'block'}})).to.have.length(1);
+      expect(editTodo.find({style: {fontSize: 24}})).to.have.length(1);
+      expect(editTodo.find({style: {lineHeight: '1.4em'}})).to.have.length(1);
+      expect(editTodo.find({style: {marginLeft: 40}})).to.have.length(1);
+      expect(editTodo.find({style: {padding: '12px 16px'}})).to.have.length(1);
+      expect(editTodo.find({style: {width: 500}})).to.have.length(1);
+      expect(editTodo.find({style: {WebkitFontSmoothing: 'antialiased'}})).to.have.length(1);
+      expect(editTodo.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

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


  58 passing (253ms)
  1 failing

  1) TodoTextInput component Should be styled correctly Should have edit todo 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/TodoTextInput.spec.js:104:74)

Write the code to make the test pass.

diff --git a/src/todomvc/components/TodoTextInput.js b/src/todomvc/components/TodoTextInput.js
index 61ef45b..8bc0573 100644
--- a/src/todomvc/components/TodoTextInput.js
+++ b/src/todomvc/components/TodoTextInput.js
@@ -25,6 +25,20 @@ export default class TodoTextInput extends Component {
       width: '100%',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale'
+    },
+
+    editTodo: {
+      border: '1px solid #999',
+      boxShadow: 'inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)',
+      color: 'inherit',
+      display: 'block',
+      fontSize: 24,
+      lineHeight: '1.4em',
+      marginLeft: 40,
+      padding: '12px 16px',
+      width: 500,
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale'
     }
   };

@@ -59,7 +73,7 @@ export default class TodoTextInput extends Component {
     return (
       <input type="text" placeholder={this.props.placeholder} value={this.state.text}
              onChange={this.handleChange.bind(this)} onKeyDown={this.handleSubmit.bind(this)}
-             onBlur={this.handleBlur.bind(this)} style={this.props.isNew && this.styles.newTodo}/>
+             onBlur={this.handleBlur.bind(this)} style={this.props.isNew ? this.styles.newTodo : this.styles.editTodo}/>
     )
   }
 }
(END)

Run the test and watch it pass.

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

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

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

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

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

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

  TodoTextInput component
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew
      ✓ Should not call onSave() on blur if isNew
    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 (233ms)

Commit changes.

$ git add .
$ git commit -m 'TodoTextInput edit styling applied'