React And Test Driven Development

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

With this done they identified 4/ as a requirement to write the test for. So created mapChooser.

import mapChooser from '../mapChooser';

describe("mapChooser", function(){
    it("returns an image based on input given to it", function() {
       let expected = "portland.jpg";
       let actual = mapChooser("portland");
       expect(actual).toEqual(expected);
    });
    it("returns an default image when no input is given", function() {
        let expected = "default.jpg";
        let actual = mapChooser("");
        expect(actual).toEqual(expected);
    });
});

And finally the code.

function mapChooser(locationName){
    if (!locationName) {
        locationName = "default";
    }
    let imageName = locationName + ".jpg";
    return (imageName);
}

export default mapChooser;

This took several iterations where the simplest implementation was to return "portland".

Need for React

Imperative vs. Declarative

For a treasure map

Imperative Is the process to achieve something, Start at the dot, Walk to the Lake, Turn right and continue for 5km, Turn left and walk 2 km.
Declarative Is what it is. Go to X

Virtual DOM

React has two virtual DOMs. A copy of the actual DOM and the new DOM. React calculates what needs to change and applies it appropriately.

React Development Process

Here is how to approach React development

• Create a component hierarchy
• Build a Static Version
• Identify the minimal UI State
• Identify where the state should live
• Add Inverse Data Flow (Passing State upwards)

For lot of information on this go to https://reactjs.org/docs/thinking-in-react.html