# Stories and Test Cases

## [As a user, I want to add a todo to my todos list](https://hackerati.gitbook.io/react-tutorial/todomvc_app/add_a_todo)

* TodoMVC actions
  * Should create an action to add a todo
* TodoMVC reducer
  * Should handle initial state
  * Should handle ADD todo
* 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
* Header component
  * Should render correctly
    * Should be a Header
    * Should have a title
    * Should have a TodoTextInput field
* TodoApp component
  * Should render correctly

## [As a user, I want to see all of todos in my todos list](https://hackerati.gitbook.io/react-tutorial/todomvc_app/view_a_list_of_todos)

* TodoItem component
  * Should render correctly
    * Should be an li
    * Should have a label
* MainSection component
  * Should render correctly
    * Should be a MainSection component
    * Should include a list of todos

## [As a user, I want to edit a todo in my todos list](https://hackerati.gitbook.io/react-tutorial/todomvc_app/edit_a_todo)

* TodoMVC actions
  * Should create an action to edit a todo
* TodoMVC reducer
  * Should handle EDIT todo
* TodoItem component
  * 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
* MainSection component
  * Add editTodo action to fix required prop warning regression

## [As a user, I want to delete a todo from my todos list](https://hackerati.gitbook.io/react-tutorial/todomvc_app/delete_a_todo)

* TodoMVC actions
  * Should create an action to delete a todo
* TodoMVC reducer
  * Should handle DELETE todo
* TodoItem component
  * Should render correctly
    * Should have a delete button
  * Should behave correctly
    * Should call deleteTodo() when the delete button is clicked
    * Should call deleteTodo() when TodoTextInput onSave is called with no text

## [As a user, I want to toggle a todo in my todos list between completed and not completed](https://hackerati.gitbook.io/react-tutorial/todomvc_app/toggle_a_todo_between_completed_and_not_completed)

* TodoMVC actions
  * Should create an action to toggle a todo between completed and not completed status
* TodoMVC reducer
  * Should handle TOGGLE\_COMPLETE\_ONE todo
* TodoItem component
  * Should render correctly
    * Should have a toggle complete status checkbox
  * Should behave correctly
    * Should call toggleCompleteOneTodo() when the complete status checkbox is changed 

## [As a user, I want to toggle all todos in my todos list between completed and not completed](https://hackerati.gitbook.io/react-tutorial/todomvc_app/toggle_all_todos_between_completed_and_not_completed)

* TodoMVC actions
  * Should create an action to toggle all todos between completed and not completed status
* TodoMVC reducer
  * Should handle TOGGLE\_COMPLETE\_ALL todo
* Header component
  * Should render correctly
    * Should have a toggle all complete status checkbox
  * Should behave correctly
    * Should call toggleCompleteAllTodos() when the toggle button is clicked 

## [As a user, I want to see how many remaining todos I have to complete](https://hackerati.gitbook.io/react-tutorial/todomvc_app/todos_to_complete)

* Footer component
  * Should render correctly
    * Should be a footer
    * Should have a todo counter
  * Should behave correctly
    * 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
* MainSection component
  * Should render correctly
    * Should include a Footer component

## [As a user, I want to be able to filter All, Active, and Completed todos](https://hackerati.gitbook.io/react-tutorial/todomvc_app/filter_by_completed)

* MainSection component
  * Should render correctly
    * Should include a completed radio-button filter
  * Should behave correctly
    * Should show the filtered list of Todos

## [As a user, I want to be able to delete all completed todos from my todos list](https://hackerati.gitbook.io/react-tutorial/todomvc_app/delete_completed)

* TodoMVC actions
  * Should create an action to delete all completed todos
* TodoMVC reducer
  * Should handle DELETE\_COMPLETED todo
* Footer component
  * Should render correctly
    * Should have a 'delete completed' button
  * 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 'delete completed' button is clicked