TodoMVC Application

We're going to build the canonical TodoMVC application test-first, one story at a time, one test case at a time.

Description

Components

The TodoMVC application consists of a hierarchy of components inside of a single container, called TodoApp. The TodoApp contains a Header component and a MainSection component.

The Header component contains TodoTextInput component, which is a text input field that allows users to add a new todo to the todos list. From Header users can choose to toggle the complete status of all todos between true and false.

The MainSection component contains a list of TodoItem components and a Footer component. MainSection also allows the user to filter between showing all of them, showing only the active todos, or showing only the completed todos.

A TodoItem can be edited, it can be marked as completed/not completed, or it can be deleted.

The Footer shows the number of active todos in the todo list and allows bulk-deleting all of the completed todos.

State Shape

The TodoMVC application will need to store the list of todos, each having an ID, a text description, and a completed flag

Actions & Reducers

The TodoMVC application will need to include the following actions:

• Add a todo

• Edit a todo

• Delete a todo

• Toggle a todo between completed and not completed

• Toggle all todos between completed and not completed

• Delete all completed todos

For each action, we will need to implement a Reducer case to handle the action.

Project Structure

First, if you haven't done so already, clone the react-app-template repository.

Create a branch for the TodoMVC application:

$ git checkout -b tdd_react_app

Remove the directories for the Counter application that came with the template:

$ rm -r src/counter tests/counter

Commit the changes:

$ git add --all
$ git commit -m 'deleted Counter application'

Create the directories for the TodoMVC application and its tests:

$ mkdir src/todomvc tests/todomvc

Conventions

New source files will be indicated by the commented file name at the top of the code listing:

// src/dummy_directory/dummy_file.js

'use strict';

import * as dummyEntity from './DummyEntities'

export default {dummyEntity}

You can run the diff on your local repository as follows:

$ git diff src/dummy_directory/dummy_file.js

Changes to an existing file will be represented as a diff against the committed version in the repo:

diff --git a/src/dummy_directory/dummy_file.js b/src/dummy_directory/dummy_file.js
index e69de29..6b3f55d 100644
--- a/src/dummy_directory/dummy_file.js
+++ b/src/dummy_directory/dummy_file.js
@@ -0,0 +1,5 @@
+'use strict';
+
+import * as dummyEntity from './DummyEntities'
+
+export default {dummyEntity}
(END)

Shell Commands

$ npm test
$ NODE_ENV='development' npm start
$ git diff

If you're using VIM, you might want to map keys to these commands as you will be using them frequently.

:nmap t :!npm test