meetramani / react-crud-tdd-sample

simple react crud app with tdd

React CRUD TDD Sample

Instructions

This repo contains an empty react app. Your job is to implement the following user stories in TDD fashion:

1. Given a browser, when I browse to the site, then I see an "Add Person" button.
2. Given I see the "Add Person" button, when I click it, then I am taken to an Add Person page.
3. 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.
4. Given that I have added a person, when I am on the list page, then I see my people.
5. Given that I see people in the list, when I click a person, I am taken to a Person Edit page.
6. 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.
7. Given that I have made updates to people, when I am on the list page, I should see the modified information.
8. Given that I am on the edit page, then I see a delete button.
9. Given that I am on the edit page, when I click the delete button, then I am taken back to the list page.
10. 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.

Resources

• Jest assertions
• Shallow rendering with Enzyme
• Shallow docs on GitHub
• Shallow find
• Shallow simulate
• Sinon docs