Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Achieving 100% test coverage in your redux apps

Diogo Beda
September 24, 2016

Achieving 100% test coverage in your redux apps

A brief intro for the Redux library followed by my opinions on how to write testable code when using it.

Diogo Beda

September 24, 2016
Tweet

Other Decks in Programming

Transcript

  1. State tree (a big ass object) • single source of

    truth • every data that translates into UI should be in your state
  2. Reducers • should be a pure function • knows how

    to transform the state based on the dispatched action
  3. Updated state tree • the only way to change any

    data in your state is by dispatching an action
  4. Connector • subscribes to changes on the state and selects

    a slice of it based on your UI needs reactjs/react-redux angular-redux/ng2-redux
  5. What’s its job? • return an action that describes a

    change to the state What to test? • make sure it returns the desired action object
  6. What’s its job? • return a new state value, based

    on the state and action passed to it What to test? • test the outputs for all action types it implements
  7. What’s its job? • shape the state to match your

    component’s data needs What to test? • make sure the returned object has the right shape
  8. What’s its job? • dispatch multiple actions representing the states

    of the async side-effect you’re using What to test? • make sure all desired actions representing those states are dispatched
  9. Middlewares • have full control over how/when to dispatch any

    action • the action creators can simply add config properties to the action • put side effects like http requests and cache handling on middlewares