Styling Stories and Test Cases

As a user, I want my application to live in a styled environment

• TodoApp component

As a user, I want my TodoApp component to be styled

• Should be styled correctly

  • Should have div styling applied in accordance with the design specs

As a user, I want my Header component to be styled

• 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 render correctly

  • Should have a toggle all complete status span

• Should be styled correctly

  • Should have span styling applied in accordance with the design specs

As a user, I want my TodoTextInput component to be styled

• 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

As a user, I want my MainSection component to be styled

• MainSection

• 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

As a user, I want my TodoItem component to be styled

• TodoItem

• Should be styled correctly

  • Should have li styling applied in accordance with the design specs

  • 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

• Should behave correctly

  • Should display delete div only when hovering over a todo

As a user, I want my Footer component to be styled

• Should be styled correctly

  • Should have footer styling applied in accordance with the design specs

  • Should have number of not completed todos in bold

  • Should have delete button styling applied in accordance with the design specs

  • Should have delete button hover styling applied in accordance with the design specs