See Styled TodoApp Component
Story: As a user, I want my TodoApp component to be styled.
Should be styled correctly
It should have div styling applied in accordance with the design specs
Write the test.
diff --git a/tests/todomvc/components/TodoApp.spec.js b/tests/todomvc/components/TodoApp.spec.js
index e950657..80465f5 100644
--- a/tests/todomvc/components/TodoApp.spec.js
+++ b/tests/todomvc/components/TodoApp.spec.js
@@ -50,5 +50,17 @@ describe('TodoApp component', () => {
expect(div.children('MainSection')).to.have.length(1)
})
+ });
+
+ describe('Should be styled correctly', () => {
+ it('Should have styling applied in accordance with the design specs', () => {
+ const {component} = setup();
+ const div = component.find('div');
+
+ expect(div.find({style: {background: '#fff'}})).to.have.length(1);
+ expect(div.find({style: {margin: '130px 0 40px 0'}})).to.have.length(1);
+ expect(div.find({style: {position: 'relative'}})).to.have.length(1);
+ expect(div.find({style: {boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'}})).to.have.length(1);
+ })
})
});
(END)Run the test and watch it fail.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
1) Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
TodoTextInput component
Should render correctly
✓ Should be a TodoTextInput component
Should behave correctly
✓ Should update value on change
✓ Should call onSave() on return key press
✓ Should reset state on return key press if isNew
✓ Should call onSave() on blur if not isNew
✓ Should not call onSave() on blur if isNew
TodoMVC reducer
✓ Should handle initial state
✓ Should handle ADD todo
✓ Should handle EDIT todo
✓ Should handle DELETE todo
✓ Should handle TOGGLE_COMPLETE_ONE todo
✓ Should handle TOGGLE_COMPLETE_ALL todo
✓ Should handle DELETE_COMPLETED todo
51 passing (235ms)
1 failing
1) TodoApp component Should be styled correctly Should have styling applied in accordance with the design specs:
AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
+ expected - actual
-0
+1
at Context.<anonymous> (tests/todomvc/components/TodoApp.spec.js:55:63)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoApp.js b/src/todomvc/components/TodoApp.js
index e8c7842..dc9a66f 100644
--- a/src/todomvc/components/TodoApp.js
+++ b/src/todomvc/components/TodoApp.js
@@ -82,6 +82,13 @@ class TodoApp extends Component {
}
}
}
+ },
+
+ todoApp: {
+ background: '#fff',
+ margin: '130px 0 40px 0',
+ position: 'relative',
+ boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'
}
};
render() {
@@ -91,7 +99,7 @@ class TodoApp extends Component {
return (
<StyleRoot>
<Style rules={this.styles.root}/>
- <div>
+ <div style={this.styles.todoApp}>
<Header actions={actions}/>
<MainSection todos={todos} actions={actions}/>
</div>
(END)Run the test and watch it pass.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
TodoApp component
Should render correctly
Radium: userAgent should be supplied for server-side rendering. See https://github.com/FormidableLabs/radium/tree/master/docs/api#radium for more information.
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
TodoTextInput component
Should render correctly
✓ Should be a TodoTextInput component
Should behave correctly
✓ Should update value on change
✓ Should call onSave() on return key press
✓ Should reset state on return key press if isNew
✓ Should call onSave() on blur if not isNew
✓ Should not call onSave() on blur if isNew
TodoMVC reducer
✓ Should handle initial state
✓ Should handle ADD todo
✓ Should handle EDIT todo
✓ Should handle DELETE todo
✓ Should handle TOGGLE_COMPLETE_ONE todo
✓ Should handle TOGGLE_COMPLETE_ALL todo
✓ Should handle DELETE_COMPLETED todo
52 passing (159ms)Our test is now passing, but we have introduced a warning coming from Radium that relates to a userAgent configuration. Let's eliminate this warning:
diff --git a/tests/test_helper.js b/tests/test_helper.js
index 2fb9a8f..f601598 100644
--- a/tests/test_helper.js
+++ b/tests/test_helper.js
@@ -1,6 +1,24 @@
'use strict';
+const {JSDOM} = require('jsdom');
import chai from 'chai'
import chaiImmutable from 'chai-immutable'
chai.use(chaiImmutable);
+
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const {window} = jsdom;
+
+function copyProps(src, target) {
+ const props = Object.getOwnPropertyNames(src)
+ .filter(prop => typeof target[prop] === 'undefined')
+ .map(prop => Object.getOwnPropertyDescriptor(src, prop));
+ Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+ userAgent: 'node.js',
+};
+copyProps(window, global);
(END)Run the test and watch it pass without the warning.
TodoMVC actions
✓ Should create an action to add a todo
✓ Should create an action to edit a todo
✓ Should create an action to delete a todo
✓ Should create an action to toggle a todo between completed and not completed
✓ Should create an action to toggle all todos between completed and not completed
✓ Should create an action to delete all completed todos
Footer component
Should render correctly
✓ Should be a Footer
✓ Should have a todo counter
✓ Should display 'No todos left' when active count is 0
✓ Should display '1 todo left' when active count is 1
✓ Should display '5 todos left' when active count is 5
Should behave correctly
✓ Should not show 'delete completed' button when there are no completed todos
✓ Should show 'delete completed' button when there is at least one completed todo
✓ Should call deleteCompletedTodos() when the delete completed button is clicked
Header component
Should render correctly
✓ Should be a Header
✓ Should have a title
✓ Should have a TodoTextInput field
✓ Should have a toggle all complete status checkbox
Should behave correctly
✓ Should call addTodo() if length of text is greater than 0
✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed
MainSection component
Should render correctly
✓ Should be a MainSection component
✓ Should include a list of todos
✓ Should include a Footer component
✓ Should include a completed radio-button filter
Should behave correctly
✓ Should show the filtered list of Todos
TodoApp component
Should render correctly
✓ Should be a TodoApp
✓ Should have a header
✓ Should have a main section
Should be styled correctly
✓ Should have styling applied in accordance with the design specs
TodoItem component
Should render correctly
✓ Should be an li
✓ Should have a label
✓ Should have a delete button
✓ Should have a toggle complete status checkbox
Should behave correctly
✓ Should switch to edit mode when label onDoubleClick is fired
✓ Should call editTodo() when TodoTextInput onSave is called
✓ Should leave edit mode after TodoTextInput onSave
✓ Should call deleteTodo() when the delete button is clicked
✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed
TodoTextInput component
Should render correctly
✓ Should be a TodoTextInput component
Should behave correctly
✓ Should update value on change
✓ Should call onSave() on return key press
✓ Should reset state on return key press if isNew
✓ Should call onSave() on blur if not isNew
✓ Should not call onSave() on blur if isNew
TodoMVC reducer
✓ Should handle initial state
✓ Should handle ADD todo
✓ Should handle EDIT todo
✓ Should handle DELETE todo
✓ Should handle TOGGLE_COMPLETE_ONE todo
✓ Should handle TOGGLE_COMPLETE_ALL todo
✓ Should handle DELETE_COMPLETED todo
52 passing (200ms)Commit changes.
$ git add .
$ git commit -m 'TodoApp styling applied'Last updated
Was this helpful?