- Practice TDD workflow to create a simple CRUD app with React
- Use
Enzyme
'sshallow
function to test React components without their child components - Write assertions using
Jest
- Use
sinon
to create stubs/spies
TDD is a requirement in modern software development. The functional nature of React, combined with helpful libraries like enzyme make the React TDD workflow very appealing. However, without practice developers might be tempted to fall back to pre-TDD ways. This exercise gives students practice with the TDD workflow and enzyme.
- Fork this repo.
- Clone your fork.
- Run
yarn install
. - Run
yarn test
and verify existing tests pass. - Run
yarn start
to view app in the browser.
This repo contains an empty react app. Your job is to implement the following user stories in TDD fashion:
- Given a browser, when I browse to the site, then I see an "Add Person" button.
- Given I see the "Add Person" button, when I click it, then I am taken to an Add Person page.
- Given I am on the Add Person page, when I fill in the fields and click "Add", I am taken back to the list page.
- Given that I have added a person, when I am on the list page, then I see my people.
- Given that I see people in the list, when I click a person, I am taken to a Person Edit page.
- Given I am on the person edit page, when I change a persons name and click Save, then I am taken back to the list page.
- Given that I have made updates to people, when I am on the list page, I should see the modified information.
- Given that I am on the edit page, then I see a delete button.
- Given that I am on the edit page, when I click the delete button, then I am taken back to the list page.
- Given that I have deleted a person, when I am on the list page, then I no longer see the deleted people.
Tips:
- Use simulate to simulate text change and click events
- Use sinon to stub the
onEdit()
call - Verify the stub was called with the correct arguments.
- Use controlled components for input.