Stories and Test Cases

As a user, I want to add a todo to my todos list

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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