# 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. ```javascript 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. ```bash 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. (tests/todomvc/components/TodoTextInput.spec.js:88:63) ``` Write the code to make the test pass. ```javascript 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 ( + onBlur={this.handleBlur.bind(this)} style={this.props.isNew && this.styles.newTodo}/> ) } } (END) ``` Run the test and watch it pass. ```bash 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. ```bash $ 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. ```javascript 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. ```bash 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. (tests/todomvc/components/TodoTextInput.spec.js:104:74) ``` Write the code to make the test pass. ```javascript 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 ( + onBlur={this.handleBlur.bind(this)} style={this.props.isNew ? this.styles.newTodo : this.styles.editTodo}/> ) } } (END) ``` Run the test and watch it pass. ```bash 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. ```bash $ git add . $ git commit -m 'TodoTextInput edit styling applied' ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://hackerati.gitbook.io/react-tutorial/styling/styling_todotextinput_component.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.