React And Test Driven Development: Difference between revisions
Jump to navigation
Jump to search
Created page with "=Introduction= ==Requirements== On the course we got requirements *Display map *Select shop *Marker show location *User can search *Detect user location *Get Directions *Scala..." |
|||
| Line 22: | Line 22: | ||
Next they broken down ideas for the prototype requirements above. | Next they broken down ideas for the prototype requirements above. | ||
<syntaxhighlight lang="txt"> | <syntaxhighlight lang="txt"> | ||
There should be a button for each store location | 1/ There should be a button for each store location | ||
Each store button should display the name of the location | 2/ Each store button should display the name of the location | ||
Clicking the button passes the value to the function | 3/ Clicking the button passes the value to the function | ||
A map chooser function returns an image file name based on input given to it | 4/ A map chooser function returns an image file name based on input given to it | ||
When no input is given to the map chooser function it returns a default image file name | 5/ When no input is given to the map chooser function it returns a default image file name | ||
When a bad input is given to the map chooser function, it returns a default image file name | 6/ When a bad input is given to the map chooser function, it returns a default image file name | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 03:24, 11 July 2021
Introduction
Requirements
On the course we got requirements
- Display map
- Select shop
- Marker show location
- User can search
- Detect user location
- Get Directions
- Scalable
Prototype
A prototype was developed on paper which created a web page with buttons for the first two sites.
Introducing TDD
TDD follows the three processes. Test, Code, Refactor. The module demonstrated how to start building the App by create sections of the App to components. E.g. Component Header. They split the containers and components where components were stateless. Tests were written to make sure the components rendered.
Need for TDD
With TDD you write the test and then the supporting code. It walked through what to test which I liked as a list known but nice to be reminded of.
- Does it render
- Does it render correctly
- Does it handle events correctly
- Do conditionals work
- Are edge cases handled.
Next they broken down ideas for the prototype requirements above.
1/ There should be a button for each store location
2/ Each store button should display the name of the location
3/ Clicking the button passes the value to the function
4/ A map chooser function returns an image file name based on input given to it
5/ When no input is given to the map chooser function it returns a default image file name
6/ When a bad input is given to the map chooser function, it returns a default image file name