See Styled MainSection Component
Story: As a user, I want my MainSection component to be styled.
MainSection
In order to apply the desired MainSection styling we'll need change the structure of the markup. Let's wrap the section in div tag and pull Footer out of it.
diff --git a/src/todomvc/components/MainSection.js b/src/todomvc/components/MainSection.js
index 3af371f..2faa626 100644
--- a/src/todomvc/components/MainSection.js
+++ b/src/todomvc/components/MainSection.js
@@ -39,31 +39,34 @@ export default class MainSection extends Component {
const {todos, actions} = this.props;
return (
- <section>
- <ul>
- {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
- <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
- </ul>
- <input id="id_show_all"
- type="radio"
- value="show_all"
- name="complete_status"
- checked={this.state.show_all}
- onChange={this.setVisibility.bind(this)}/> show all
- <input id="id_show_completed"
- type="radio"
- value="show_completed"
- name="complete_status"
- checked={this.state.show_completed}
- onChange={this.setVisibility.bind(this)}/> show completed
- <input id="id_show_not_completed"
- type="radio"
- value="show_not_completed"
- name="complete_status"
- checked={this.state.show_not_completed}
- onChange={this.setVisibility.bind(this)}/> show not completed
+ <div>
+ <div/>
+ <section>
+ <ul>
+ {todos.map(todo => this.showTodo.bind(this)(todo.get('completed')) &&
+ <TodoItem key={todo.get('id')} todo={todo} {...actions} />)}
+ </ul>
+ <input id="id_show_all"
+ type="radio"
+ value="show_all"
+ name="complete_status"
+ checked={this.state.show_all}
+ onChange={this.setVisibility.bind(this)}/> show all
+ <input id="id_show_completed"
+ type="radio"
+ value="show_completed"
+ name="complete_status"
+ checked={this.state.show_completed}
+ onChange={this.setVisibility.bind(this)}/> show completed
+ <input id="id_show_not_completed"
+ type="radio"
+ value="show_not_completed"
+ name="complete_status"
+ checked={this.state.show_not_completed}
+ onChange={this.setVisibility.bind(this)}/> show not completed
+ </section>
<Footer todos={todos} deleteCompletedTodos={actions.deleteCompletedTodos}/>
- </section>
+ </div>
)
}
}
(END)Check how this effected our existing tests.
This was expected! Let's update our tests to reflect the changed structure.
Run tests and watch them pass.
Commit changes.
Now let's address our styling process.
Should be styled correctly
It should have styling decoration applied in accordance with the design specs
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
It should have section styling applied in accordance with the design specs
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
It should have ul styling applied in accordance with the design specs
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
It should have radiobuttons styling applied in accordance with the design specs
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
Last updated
Was this helpful?