See Styled TodoItem Component
Story: As a user, I want my TodoItem component to be styled.
TodoItem
In order to apply the desired TodoItem styling we'll need change the structure of the markup. Let's replace checkboxes with .svg images and delete button with a div.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 65c5d42..2b4eb51 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -2,6 +2,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
+
import TodoTextInput from './TodoTextInput'
export default class TodoItem extends Component {
@@ -28,30 +29,48 @@ export default class TodoItem extends Component {
this.setState({editing: false})
}
+ renderButtonUnchecked() {
+ const {todo, toggleCompleteOneTodo} = this.props;
+
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"
+ onClick={() => toggleCompleteOneTodo(todo.get('id'))}>
+ <circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" strokeWidth="3"/>
+ </svg>
+ )
+ }
+
+ renderButtonChecked() {
+ const {todo, toggleCompleteOneTodo} = this.props;
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"
+ onClick={() => toggleCompleteOneTodo(todo.get('id'))}>
+ <circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" strokeWidth="3"/>
+ <path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/>
+ </svg>
+ )
+ }
+
renderTodoListItem() {
- const {todo, deleteTodo, toggleCompleteOneTodo} = this.props;
+ const {todo, deleteTodo} = this.props;
return (
<li>
+ {todo.get('completed') ? this.renderButtonChecked() : this.renderButtonUnchecked()}
<label onDoubleClick={this.handleDoubleClick.bind(this)}>
{todo.get('description')}
</label>
- <input type="checkbox" name="completed" checked={todo.get('completed')}
- onChange={ () => toggleCompleteOneTodo(todo.get('id')) }/>completed
- <button onClick={() => deleteTodo(todo.get('id'))}>delete todo</button>
+ <div onClick={() => deleteTodo(todo.get('id'))}>x</div>
</li>
)
}
renderTodoTextInput() {
- const {todo, deleteTodo, toggleCompleteOneTodo} = this.props;
+ const {todo} = this.props;
return (
<li>
<TodoTextInput text={todo.get('description')} onSave={(text) => this.handleSave(todo.get('id'), text)}/>
- <input type="checkbox" name="completed" checked={todo.get('completed')}
- onChange={ () => toggleCompleteOneTodo(todo.get('id')) }/>completed
- <button onClick={() => deleteTodo(todo.get('id'))}>delete todo</button>
</li>
)
}
(END)Check how this effected our existing tests.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
1) Should have a delete button
2) 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
3) Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
4) 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 (268ms)
4 failing
1) TodoItem component Should render correctly Should have a delete button:
AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
+ expected - actual
-0
+1
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:49:30)
2) TodoItem component Should render correctly Should have a toggle complete status checkbox:
AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
+ expected - actual
-0
+1
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:57:32)
3) TodoItem component Should behave correctly Should call deleteTodo() when the delete button is clicked:
Error: Method “props” is only meant to be run on a single node. 0 found instead.
at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1516:17)
at ShallowWrapper.props (node_modules/enzyme/build/ShallowWrapper.js:867:21)
at ShallowWrapper.prop (node_modules/enzyme/build/ShallowWrapper.js:1075:21)
at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:838:28)
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:96:14)
4) TodoItem component Should behave correctly Should call toggleCompleteOneTodo() when the complete status checkbox is changed:
Error: Method “props” is only meant to be run on a single node. 0 found instead.
at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1516:17)
at ShallowWrapper.props (node_modules/enzyme/build/ShallowWrapper.js:867:21)
at ShallowWrapper.prop (node_modules/enzyme/build/ShallowWrapper.js:1075:21)
at ShallowWrapper.simulate (node_modules/enzyme/build/ShallowWrapper.js:838:28)
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:112:13)Four tests have failed! Let's update our tests to reflect the changed markup.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 4315615..4f32f48 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -44,19 +44,17 @@ describe('TodoItem component', () => {
it('Should have a delete button', () => {
const {component} = setup();
- const button = component.children('button');
+ const div = component.children('div');
- expect(button).to.have.length(1);
- expect(button.children().text()).to.equal('delete todo')
+ expect(div).to.have.length(1);
+ expect(div.children().text()).to.equal('x')
});
it('Should have a toggle complete status checkbox', () => {
const {component} = setup();
- const checkbox = component.children('input');
+ const svg = component.children('svg');
- expect(checkbox).to.have.length(1);
- expect(checkbox.props().type).to.equal('checkbox');
- expect(checkbox.props().name).to.equal('completed')
+ expect(svg).to.have.length(1);
})
});
@@ -91,9 +89,9 @@ describe('TodoItem component', () => {
it('Should call deleteTodo() when the delete button is clicked', () => {
const {component, props} = setup();
- const button = component.find('button');
+ const div = component.find('div');
- button.simulate('click');
+ div.simulate('click');
expect(props.deleteTodo.called).to.be.true
});
@@ -107,9 +105,9 @@ describe('TodoItem component', () => {
it('Should call toggleCompleteOneTodo() when the complete status checkbox is changed', () => {
const {component, props} = setup();
- const input = component.find('input');
+ const svg = component.find('svg');
- input.simulate('change');
+ svg.simulate('click');
expect(props.toggleCompleteOneTodo.called).to.be.true
})
})
(END)Run tests and watch them pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
TodoTextInput component
Should render correctly
✓ Should be a TodoTextInput component
Should behave correctly
✓ Should update value on change
✓ Should call onSave() on return key press
✓ Should reset state on return key press if isNew
✓ Should call onSave() on blur if not isNew
✓ Should not call onSave() on blur if isNew
Should be styled correctly
✓ Should have new todo styling applied in accordance with the design specs
✓ Should have edit todo styling applied in accordance with the design specs
TodoMVC reducer
✓ Should handle initial state
✓ Should handle ADD todo
✓ Should handle EDIT todo
✓ Should handle DELETE todo
✓ Should handle TOGGLE_COMPLETE_ONE todo
✓ Should handle TOGGLE_COMPLETE_ALL todo
✓ Should handle DELETE_COMPLETED todo
63 passing (248ms)Commit changes.
$ git add .
$ git commit -m 'TodoItem markup updated'Now let's address our styling process.
Should be styled correctly
It should have li styling applied in accordance with the design specs
In order to test the styling of the last todo in the list, we'll have to create a MainSection component with several TodoItem elements in our test case. Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 4f32f48..7a8e57d 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -1,12 +1,13 @@
'use strict';
import React from 'react'
-import {Map} from 'immutable'
+import {Map, List} from 'immutable'
import uuid from 'uuid'
import {expect} from 'chai'
-import {shallow} from 'enzyme'
+import {shallow, mount} from 'enzyme'
import sinon from 'sinon'
+import MainSection from '../../../src/todomvc/components/MainSection'
import TodoItem from '../../../src/todomvc/components/TodoItem'
function setup() {
@@ -26,6 +27,26 @@ function setup() {
}
}
+function setupMainSection() {
+ const props = {
+ todos: List([
+ Map({id: uuid.v4(), description: 'Use Redux', completed: false}),
+ Map({id: uuid.v4(), description: 'Use Redux 2', completed: true}),
+ Map({id: uuid.v4(), description: 'Use Redux 3', completed: true})
+ ]),
+ actions: {
+ editTodo: sinon.spy(),
+ deleteTodo: sinon.spy(),
+ toggleCompleteOneTodo: sinon.spy(),
+ deleteCompletedTodos: sinon.spy()
+ }
+ };
+
+ return mount(
+ <MainSection {...props} />
+ )
+}
+
describe('TodoItem component', () => {
describe('Should render correctly', () => {
it('Should be an li', () => {
@@ -110,5 +131,17 @@ describe('TodoItem component', () => {
svg.simulate('click');
expect(props.toggleCompleteOneTodo.called).to.be.true
})
+ });
+
+ describe('Should be styled correctly', () => {
+ it('Should have li styling applied in accordance with the design specs', () => {
+ const componentMainSection = setupMainSection();
+ const items = componentMainSection.find('ul').children();
+
+ expect(items.find({style: {position: 'relative'}})).to.have.length(3);
+ expect(items.find({style: {fontSize: 20}})).to.have.length(3);
+ expect(items.find({style: {borderBottom: '1px solid #ededed'}})).to.have.length(2);
+ expect(items.find({style: {borderBottom: 'none'}})).to.have.length(1);
+ })
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
1) Should have li styling applied in accordance with the design specs
TodoTextInput component
Should render correctly
✓ Should be a TodoTextInput component
Should behave correctly
✓ Should update value on change
✓ Should call onSave() on return key press
✓ Should reset state on return key press if isNew
✓ Should call onSave() on blur if not isNew
✓ Should not call onSave() on blur if isNew
Should be styled correctly
✓ Should have new todo styling applied in accordance with the design specs
✓ Should have edit todo styling applied in accordance with the design specs
TodoMVC reducer
✓ Should handle initial state
✓ Should handle ADD todo
✓ Should handle EDIT todo
✓ Should handle DELETE todo
✓ Should handle TOGGLE_COMPLETE_ONE todo
✓ Should handle TOGGLE_COMPLETE_ALL todo
✓ Should handle DELETE_COMPLETED todo
63 passing (294ms)
1 failing
1) TodoItem component Should be styled correctly Should have li styling applied in accordance with the design specs:
AssertionError: expected { Object (component, root, ...) } to have a length of 3 but got 0
+ expected - actual
-0
+3
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:141:67)Write the code to make the test pass. First, we'll have to pass the information whether the todo is the last in the list. This requires a change to MainSection component:
diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index 1f45953..9687346 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -75,8 +75,8 @@ export default class MainSection extends Component {
<div style={this.styles.mainSectionDecoration}/>
<section style={this.styles.mainSection}>
<ul style={this.styles.todosList}>
- {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
- <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
+ {todos.map((todo, index, arr) => this.showTodo.bind(this)(todo.get('completed')) &&
+ <TodoItem key={todo.get('id')} todo={todo} {...actions} isLast={index === arr.size - 1}/>)}
</ul>
<input id="id_show_all"
type="radio"
(END)Then, we need to change the TodoItem component too. Unlike with previous components we will apply the styling directly on the tag. This is one of the difficulties of styling pseudo-selectors (:last-child in this case) in Radium library. Also, pay attention to :hover pseudo selector... Even though we don't have any special style on the li hover event, we need to add empty :hover style here to tell Radium to track this element's state.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 2b4eb51..67e8125 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -2,15 +2,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
+import Radium from 'radium'
import TodoTextInput from './TodoTextInput'
+@Radium
export default class TodoItem extends Component {
static propTypes = {
todo: PropTypes.object.isRequired,
editTodo: PropTypes.func.isRequired,
deleteTodo: PropTypes.func.isRequired,
- toggleCompleteOneTodo: PropTypes.func.isRequired
+ toggleCompleteOneTodo: PropTypes.func.isRequired,
+ isLast: PropTypes.bool
};
constructor(props, context) {
@@ -52,10 +55,13 @@ export default class TodoItem extends Component {
}
renderTodoListItem() {
- const {todo, deleteTodo} = this.props;
+ const {todo, deleteTodo, isLast} = this.props;
return (
- <li>
+ <li key={todo.get('id')} style={{position: 'relative',
+ fontSize: 20,
+ borderBottom: isLast ? 'none' : '1px solid #ededed',
+ ':hover': {}}}>
{todo.get('completed') ? this.renderButtonChecked() : this.renderButtonUnchecked()}
<label onDoubleClick={this.handleDoubleClick.bind(this)}>
{todo.get('description')}
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (51ms)
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
64 passing (304ms)Commit changes.
$ git add .
$ git commit -m 'li styling applied'It should have ButtonChecked styling applied in accordance with the design specs
Change the way your setup() works and write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 7a8e57d..4976504 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -10,13 +10,14 @@ import sinon from 'sinon'
import MainSection from '../../../src/todomvc/components/MainSection'
import TodoItem from '../../../src/todomvc/components/TodoItem'
-function setup() {
- const props = {
- todo: Map({id: uuid.v4(), description: 'Use Redux', completed: false}),
- editTodo: sinon.spy(),
- deleteTodo: sinon.spy(),
- toggleCompleteOneTodo: sinon.spy()
- };
+const defaultProps = {
+ todo: Map({id: uuid.v4(), description: 'Use Redux', completed: false}),
+ editTodo: sinon.spy(),
+ deleteTodo: sinon.spy(),
+ toggleCompleteOneTodo: sinon.spy()
+};
+
+function setup(props = defaultProps) {
const component = shallow(
<TodoItem {...props} />
);
@@ -142,6 +143,26 @@ describe('TodoItem component', () => {
expect(items.find({style: {fontSize: 20}})).to.have.length(3);
expect(items.find({style: {borderBottom: '1px solid #ededed'}})).to.have.length(2);
expect(items.find({style: {borderBottom: 'none'}})).to.have.length(1);
+ });
+
+ it('Should have ButtonChecked styling applied in accordance with the design specs', () => {
+ const completedProps = {
+ todo: Map({id: uuid.v4(), description: 'Use Redux', completed: true}),
+ editTodo: sinon.spy(),
+ deleteTodo: sinon.spy(),
+ toggleCompleteOneTodo: sinon.spy()
+ };
+
+ const {component} = setup(completedProps);
+ const checkbox = component.children('svg');
+
+ expect(checkbox.find({style: {top: 0}})).to.have.length(1);
+ expect(checkbox.find({style: {bottom: 0}})).to.have.length(1);
+ expect(checkbox.find({style: {height: 'auto'}})).to.have.length(1);
+ expect(checkbox.find({style: {width: 40}})).to.have.length(1);
+ expect(checkbox.find({style: {textAlign: 'center'}})).to.have.length(1);
+ expect(checkbox.find({style: {position: 'absolute'}})).to.have.length(1);
+ expect(checkbox.find({style: {margin: 'auto 0'}})).to.have.length(1);
})
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (43ms)
1) Should have ButtonChecked styling applied in accordance with the design specs
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
64 passing (307ms)
1 failing
1) TodoItem component Should be styled correctly Should have ButtonChecked 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/TodoItem.spec.js:159:56)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 67e8125..46abaf3 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -16,6 +16,18 @@ export default class TodoItem extends Component {
isLast: PropTypes.bool
};
+ styles = {
+ toggle: {
+ top: 0,
+ bottom: 0,
+ height: 'auto',
+ width: 40,
+ textAlign: 'center',
+ position: 'absolute',
+ margin: 'auto 0'
+ }
+ };
+
constructor(props, context) {
super(props, context);
this.state = {
@@ -47,7 +59,7 @@ export default class TodoItem extends Component {
const {todo, toggleCompleteOneTodo} = this.props;
return (
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"
- onClick={() => toggleCompleteOneTodo(todo.get('id'))}>
+ onClick={() => toggleCompleteOneTodo(todo.get('id'))} style={this.styles.toggle}>
<circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" strokeWidth="3"/>
<path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/>
</svg>
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (48ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
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
65 passing (296ms)Commit changes.
$ git add .
$ git commit -m 'ButtonChecked styling applied'It should have ButtonUnchecked styling applied in accordance with the design specs
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 4976504..f43b901 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -163,6 +163,19 @@ describe('TodoItem component', () => {
expect(checkbox.find({style: {textAlign: 'center'}})).to.have.length(1);
expect(checkbox.find({style: {position: 'absolute'}})).to.have.length(1);
expect(checkbox.find({style: {margin: 'auto 0'}})).to.have.length(1);
+ });
+
+ it('Should have ButtonUnchecked styling applied in accordance with the design specs', () => {
+ const {component} = setup();
+ const checkbox = component.children('svg');
+
+ expect(checkbox.find({style: {top: 0}})).to.have.length(1);
+ expect(checkbox.find({style: {bottom: 0}})).to.have.length(1);
+ expect(checkbox.find({style: {height: 'auto'}})).to.have.length(1);
+ expect(checkbox.find({style: {width: 40}})).to.have.length(1);
+ expect(checkbox.find({style: {textAlign: 'center'}})).to.have.length(1);
+ expect(checkbox.find({style: {position: 'absolute'}})).to.have.length(1);
+ expect(checkbox.find({style: {margin: 'auto 0'}})).to.have.length(1);
})
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (47ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
1) Should have ButtonUnchecked styling applied in accordance with the design specs
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
65 passing (322ms)
1 failing
1) TodoItem component Should be styled correctly Should have ButtonUnchecked 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/TodoItem.spec.js:172:56)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 46abaf3..ffefb40 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -49,7 +49,7 @@ export default class TodoItem extends Component {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"
- onClick={() => toggleCompleteOneTodo(todo.get('id'))}>
+ onClick={() => toggleCompleteOneTodo(todo.get('id'))} style={this.styles.toggle}>
<circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" strokeWidth="3"/>
</svg>
)
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (51ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
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
66 passing (302ms)Commit changes.
$ git add .
$ git commit -m 'ButtonUnchecked styling applied'It should have label not completed styling applied in accordance with the design specs
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index f43b901..529fdf1 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -176,6 +176,18 @@ describe('TodoItem component', () => {
expect(checkbox.find({style: {textAlign: 'center'}})).to.have.length(1);
expect(checkbox.find({style: {position: 'absolute'}})).to.have.length(1);
expect(checkbox.find({style: {margin: 'auto 0'}})).to.have.length(1);
+ });
+
+ it('Should have label not completed styling applied in accordance with the design specs', () => {
+ const {component} = setup();
+ const label = component.children('label');
+
+ expect(label.find({style: {wordBreak: 'break-all'}})).to.have.length(1);
+ expect(label.find({style: {padding: '15px 60px 15px 15px'}})).to.have.length(1);
+ expect(label.find({style: {marginLeft: 45}})).to.have.length(1);
+ expect(label.find({style: {display: 'block'}})).to.have.length(1);
+ expect(label.find({style: {lineHeight: 1}})).to.have.length(1);
+ expect(label.find({style: {transition: 'color 0.4s'}})).to.have.length(1);
})
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (48ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
1) Should have label not completed styling applied in accordance with the design specs
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
66 passing (327ms)
1 failing
1) TodoItem component Should be styled correctly Should have label not completed 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/TodoItem.spec.js:185:69)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index ffefb40..f4e4b68 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -25,6 +25,15 @@ export default class TodoItem extends Component {
textAlign: 'center',
position: 'absolute',
margin: 'auto 0'
+ },
+
+ todoLabel: {
+ wordBreak: 'break-all',
+ padding: '15px 60px 15px 15px',
+ marginLeft: 45,
+ display: 'block',
+ lineHeight: 1,
+ transition: 'color 0.4s'
}
};
@@ -75,7 +84,7 @@ export default class TodoItem extends Component {
borderBottom: isLast ? 'none' : '1px solid #ededed',
':hover': {}}}>
{todo.get('completed') ? this.renderButtonChecked() : this.renderButtonUnchecked()}
- <label onDoubleClick={this.handleDoubleClick.bind(this)}>
+ <label onDoubleClick={this.handleDoubleClick.bind(this)} style={this.styles.todoLabel}>
{todo.get('description')}
</label>
<div onClick={() => deleteTodo(todo.get('id'))}>x</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 have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (49ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
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
67 passing (315ms)Commit changes.
$ git add .
$ git commit -m 'label not completed styling applied'It should have label completed styling applied in accordance with the design specs
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 529fdf1..4c1062f 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -17,6 +17,13 @@ const defaultProps = {
toggleCompleteOneTodo: sinon.spy()
};
+const completedProps = {
+ todo: Map({id: uuid.v4(), description: 'Use Redux', completed: true}),
+ editTodo: sinon.spy(),
+ deleteTodo: sinon.spy(),
+ toggleCompleteOneTodo: sinon.spy()
+};
+
function setup(props = defaultProps) {
const component = shallow(
<TodoItem {...props} />
@@ -146,13 +153,6 @@ describe('TodoItem component', () => {
});
it('Should have ButtonChecked styling applied in accordance with the design specs', () => {
- const completedProps = {
- todo: Map({id: uuid.v4(), description: 'Use Redux', completed: true}),
- editTodo: sinon.spy(),
- deleteTodo: sinon.spy(),
- toggleCompleteOneTodo: sinon.spy()
- };
-
const {component} = setup(completedProps);
const checkbox = component.children('svg');
@@ -188,6 +188,20 @@ describe('TodoItem component', () => {
expect(label.find({style: {display: 'block'}})).to.have.length(1);
expect(label.find({style: {lineHeight: 1}})).to.have.length(1);
expect(label.find({style: {transition: 'color 0.4s'}})).to.have.length(1);
+ });
+
+ it('Should have label completed styling applied in accordance with the design specs', () => {
+ const {component} = setup(completedProps);
+ const label = component.children('label');
+
+ expect(label.find({style: {wordBreak: 'break-all'}})).to.have.length(1);
+ expect(label.find({style: {padding: '15px 60px 15px 15px'}})).to.have.length(1);
+ expect(label.find({style: {marginLeft: 45}})).to.have.length(1);
+ expect(label.find({style: {display: 'block'}})).to.have.length(1);
+ expect(label.find({style: {lineHeight: 1}})).to.have.length(1);
+ expect(label.find({style: {transition: 'color 0.4s'}})).to.have.length(1);
+ expect(label.find({style: {color: '#d9d9d9'}})).to.have.length(1);
+ expect(label.find({style: {textDecoration: 'line-through'}})).to.have.length(1);
})
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (51ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
1) Should have label completed styling applied in accordance with the design specs
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
67 passing (335ms)
1 failing
1) TodoItem component Should be styled correctly Should have label completed 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/TodoItem.spec.js:203:63)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index f4e4b68..15bdc3d 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -34,6 +34,17 @@ export default class TodoItem extends Component {
display: 'block',
lineHeight: 1,
transition: 'color 0.4s'
+ },
+
+ todoLabelCompleted: {
+ wordBreak: 'break-all',
+ padding: '15px 60px 15px 15px',
+ marginLeft: 45,
+ display: 'block',
+ lineHeight: 1,
+ transition: 'color 0.4s',
+ color: '#d9d9d9',
+ textDecoration: 'line-through'
}
};
@@ -84,7 +95,8 @@ export default class TodoItem extends Component {
borderBottom: isLast ? 'none' : '1px solid #ededed',
':hover': {}}}>
{todo.get('completed') ? this.renderButtonChecked() : this.renderButtonUnchecked()}
- <label onDoubleClick={this.handleDoubleClick.bind(this)} style={this.styles.todoLabel}>
+ <label onDoubleClick={this.handleDoubleClick.bind(this)}
+ style={todo.get('completed') ? this.styles.todoLabelCompleted : this.styles.todoLabel}>
{todo.get('description')}
</label>
<div onClick={() => deleteTodo(todo.get('id'))}>x</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 have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (53ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
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
68 passing (328ms)Commit changes.
$ git add .
$ git commit -m 'label completed styling applied'It should have delete div styling applied in accordance with the design specs
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 4c1062f..cef7d72 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -202,6 +202,23 @@ describe('TodoItem component', () => {
expect(label.find({style: {transition: 'color 0.4s'}})).to.have.length(1);
expect(label.find({style: {color: '#d9d9d9'}})).to.have.length(1);
expect(label.find({style: {textDecoration: 'line-through'}})).to.have.length(1);
+ });
+
+ it('Should have delete div styling applied in accordance with the design specs', () => {
+ const {component} = setup();
+ const div = component.children('div');
+
+ expect(div.find({style: {position: 'absolute'}})).to.have.length(1);
+ expect(div.find({style: {top: 16}})).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: {width: 40}})).to.have.length(1);
+ expect(div.find({style: {height: 40}})).to.have.length(1);
+ expect(div.find({style: {fontSize: 30}})).to.have.length(1);
+ expect(div.find({style: {color: '#cc9a9a'}})).to.have.length(1);
+ expect(div.find({style: {cursor: 'pointer'}})).to.have.length(1);
+ expect(div.find({style: {margin: 'auto 0'}})).to.have.length(1);
+ expect(div.find({style: {transition: 'color 0.2s ease-out'}})).to.have.length(1);
})
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (50ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
1) Should have delete div styling applied in accordance with the design specs
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
68 passing (340ms)
1 failing
1) TodoItem component Should be styled correctly Should have delete div 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/TodoItem.spec.js:211:65)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 1db7ec9..3f674f0 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -45,6 +45,23 @@ export default class TodoItem extends Component {
transition: 'color 0.4s',
color: '#d9d9d9',
textDecoration: 'line-through'
+ },
+
+ deleteButton: {
+ position: 'absolute',
+ top: 16,
+ right: 0,
+ bottom: 0,
+ width: 40,
+ height: 40,
+ margin: 'auto 0',
+ fontSize: 30,
+ color: '#cc9a9a',
+ transition: 'color 0.2s ease-out',
+ cursor: 'pointer',
+ ':hover': {
+ color: '#af5b5e',
+ }
}
};
@@ -99,7 +116,7 @@ export default class TodoItem extends Component {
style={todo.get('completed') ? this.styles.todoLabelCompleted : this.styles.todoLabel}>
{todo.get('description')}
</label>
- <div onClick={() => deleteTodo(todo.get('id'))}>x</div>
+ <div onClick={() => deleteTodo(todo.get('id'))} style={this.styles.deleteButton}>x</div>
</li>
)
}
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (50ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
✓ Should have delete div styling applied in accordance with the design specs
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
69 passing (341ms)Commit changes.
$ git add .
$ git commit -m 'delete div styling applied'It should not display delete div initially
Create this test as a separate one because it will help the next behavior test. Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index ebac1cf..6f6baa3 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -219,6 +219,24 @@ describe('TodoItem component', () => {
expect(div.find({style: {cursor: 'pointer'}})).to.have.length(1);
expect(div.find({style: {margin: 'auto 0'}})).to.have.length(1);
expect(div.find({style: {transition: 'color 0.2s ease-out'}})).to.have.length(1);
+ });
+
+ it('Should not display delete div initially', () => {
+ const {component} = setup();
+ const div = component.children('div');
+
+ expect(div.find({style: {position: 'absolute'}})).to.have.length(1);
+ expect(div.find({style: {top: 16}})).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: {width: 40}})).to.have.length(1);
+ expect(div.find({style: {height: 40}})).to.have.length(1);
+ expect(div.find({style: {fontSize: 30}})).to.have.length(1);
+ expect(div.find({style: {color: '#cc9a9a'}})).to.have.length(1);
+ expect(div.find({style: {cursor: 'pointer'}})).to.have.length(1);
+ expect(div.find({style: {margin: 'auto 0'}})).to.have.length(1);
+ expect(div.find({style: {transition: 'color 0.2s ease-out'}})).to.have.length(1);
+ expect(div.find({style: {display: 'none'}})).to.have.length(1);
})
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (50ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
✓ Should have delete div styling applied in accordance with the design specs
1) Should not display delete div initially
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
69 passing (385ms)
1 failing
1) TodoItem component Should be styled correctly Should not display delete div initially:
AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
+ expected - actual
-0
+1
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:239:60)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 3f674f0..a02b60e 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -57,6 +57,7 @@ export default class TodoItem extends Component {
margin: 'auto 0',
fontSize: 30,
color: '#cc9a9a',
+ display: 'none',
transition: 'color 0.2s ease-out',
cursor: 'pointer',
':hover': {
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (50ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
✓ Should have delete div styling applied in accordance with the design specs
✓ Should not display delete div initially
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
70 passing (340ms)Commit changes.
$ git add .
$ git commit -m 'initially hide delete div'Should behave correctly
It should display delete div only when hovering over a todo
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 058960e..568b247 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -138,6 +138,29 @@ describe('TodoItem component', () => {
svg.simulate('click');
expect(props.toggleCompleteOneTodo.called).to.be.true
+ });
+
+ it('Should display delete div only when hovering over a todo', () => {
+ const {component} = setup();
+ let div = component.children('div');
+
+ expect(div.find({style: {display: 'none'}})).to.have.length(1);
+ expect(div.find({style: {display: 'initial'}})).to.have.length(0);
+
+ component.simulate('mouseenter');
+ div = component.children('div');
+ expect(div.find({style: {display: 'none'}})).to.have.length(0);
+ expect(div.find({style: {display: 'initial'}})).to.have.length(1);
+
+ component.simulate('mouseleave');
+ div = component.children('div');
+ expect(div.find({style: {display: 'none'}})).to.have.length(1);
+ expect(div.find({style: {display: 'initial'}})).to.have.length(0);
+
+ component.simulate('mouseenter');
+ div = component.children('div');
+ expect(div.find({style: {display: 'none'}})).to.have.length(0);
+ expect(div.find({style: {display: 'initial'}})).to.have.length(1);
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
1) Should display delete div only when hovering over a todo
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (57ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
✓ Should have delete div styling applied in accordance with the design specs
✓ Should not display delete div initially
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
70 passing (364ms)
1 failing
1) TodoItem component Should behave correctly Should display delete div only when hovering over a todo:
AssertionError: expected { Object (root, unrendered, ...) } to have a length of 0 but got 1
+ expected - actual
-1
+0
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:152:60)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index a02b60e..51fc9a1 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -82,6 +82,15 @@ export default class TodoItem extends Component {
this.setState({editing: false})
}
+ handleVisibilityOff() {
+ this.styles.deleteButton.display = 'none';
+ }
+
+ handleVisibilityOn() {
+ this.styles.deleteButton.display = 'initial';
+ }
+
+
renderButtonUnchecked() {
const {todo, toggleCompleteOneTodo} = this.props;
@@ -108,10 +117,12 @@ export default class TodoItem extends Component {
const {todo, deleteTodo, isLast} = this.props;
return (
- <li key={todo.get('id')} style={{position: 'relative',
- fontSize: 20,
- borderBottom: isLast ? 'none' : '1px solid #ededed',
- ':hover': {}}}>
+ <li key={todo.get('id')}
+ style={{position: 'relative',
+ fontSize: 20,
+ borderBottom: isLast ? 'none' : '1px solid #ededed',
+ ':hover': {}}}
+ onMouseEnter={this.handleVisibilityOn.bind(this)} onMouseLeave={this.handleVisibilityOff.bind(this)}>
{todo.get('completed') ? this.renderButtonChecked() : this.renderButtonUnchecked()}
<label onDoubleClick={this.handleDoubleClick.bind(this)}
style={todo.get('completed') ? this.styles.todoLabelCompleted : this.styles.todoLabel}>
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
✓ Should have a toggle all complete status span
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
Should be styled correctly
✓ Should have header styling applied in accordance with the design specs
✓ Should have h1 styling applied in accordance with the design specs
✓ Should have checkbox styling applied in accordance with the design specs
✓ Should have span styling applied in accordance with the design specs
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
Should be styled correctly
✓ Should have styling decoration applied in accordance with the design specs
✓ Should have section styling applied in accordance with the design specs
✓ Should have ul styling applied in accordance with the design specs
✓ Should have radiobuttons styling applied in accordance with the design specs
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
✓ Should display delete div only when hovering over a todo
Should be styled correctly
✓ Should have li styling applied in accordance with the design specs (54ms)
✓ Should have ButtonChecked styling applied in accordance with the design specs
✓ Should have ButtonUnchecked styling applied in accordance with the design specs
✓ Should have label not completed styling applied in accordance with the design specs
✓ Should have label completed styling applied in accordance with the design specs
✓ Should have delete div styling applied in accordance with the design specs
✓ Should not display delete div initially
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
71 passing (349ms)Commit changes.
$ git add .
$ git commit -m 'display div only on hover'Last updated
Was this helpful?