# 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. ```javascript 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 ( -
- - show all - show completed - show not completed +
+
+
+
    + {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) && + )} +
+ show all + show completed + show not completed +
+ ) } } (END) ``` Check how this effected our existing tests. ```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 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. (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. (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. (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. (tests/todomvc/components/MainSection.spec.js:91:29) ``` This was expected! Let's update our tests to reflect the changed structure. ```javascript 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. ```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 (238ms) ``` Commit changes. ```bash $ 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. ```javascript 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. ```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 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. (tests/todomvc/components/MainSection.spec.js:132:65) ``` Write the code to make the test pass. ```javascript 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 (
-
+
    {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) && (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 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. ```bash $ git add . $ git commit -m 'MainSection styling decoration applied' ``` #### It should have section styling applied in accordance with the design specs Write the test. ```javascript 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. ```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 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. (tests/todomvc/components/MainSection.spec.js:145:83) ``` Write the code to make the test pass. ```javascript 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 (
    -
    +
      {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) && )} (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 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. ```bash $ git add . $ git commit -m 'MainSection section styling applied' ``` #### It should have ul styling applied in accordance with the design specs Write the test. ```javascript 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. ```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 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. (tests/todomvc/components/MainSection.spec.js:155:71) ``` Write the code to make the test pass. ```javascript 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 {
      -
        +
          {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) && )}
        (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 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. ```bash $ git add . $ git commit -m 'MainSection radiobuttons styling applied' ``` #### It should have radiobuttons styling applied in accordance with the design specs Write the test. ```javascript 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. ```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 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. (tests/todomvc/components/MainSection.spec.js:164:67) ``` Write the code to make the test pass. ```javascript 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 show completed show not completed