ReactFoo 2017

A conference on React

Isolated react components as a black box with automated UI testing

Submitted by Vivek Jagtap (@vivekjagtap011) on Thursday, 15 June 2017

videocam_off

Technical level

Intermediate

Section

Crisp Talk

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +12

Abstract

Building react components in isolation to fullfil business use case and to acheive Zero coupling.
Automated browser UI testing using JavaScript and webdriver for your react components in isolation & how to avoid test cancer.

Outline

  1. Why - At Housing.com, when we moved to react from BackboneJS, we started gradually, creating components like just home page then list view, and so on. But we soon realised that, components(reusable components) are getting messier, since there are so many components just because everything is component in React. Components started growing like crazy.
  2. Problem - Since we have our mobile website and desktop website separate (though we serve both with housing.com), we had to write same react components in desktop as well as mobile, may be with just styling / css changes, but the logical flow & business use case of a software feature used to remain same.
  3. Solution - Isolating bunch of components as a black box. We started creating npm modules, and including them in a code as a feature. So our isolated react component is not just a dump component, but it takes care of executing entire feature.
  4. Going further and decoupling things - it was easy for us to figure it out, what should be isolated component, what should not be. I will be showing when to make Isolated component and when not to.
  5. Using React storybook to build components in isolation
  6. Redux Store - Since its isolated component, we don’t share data, actions, store. Every isolated component works on its own store.

Speaker bio

I work with Housing.com as part of Front End team

Slides

https://youtu.be/4Mn0qprfZ2A

Comments

  • 1
    Siddharth Kshetrapal (@sidkp) a year ago (edited a year ago)

    Hi,

    This can be a really interesting talk!

    Can you please add more details in your slides and submit a 2 minute video on what are you going to talk about. That would help us a lot.

    - reactfoo team

    • 1
      Vivek Jagtap (@vivekjagtap011) Proposer a year ago

      Hi Siddharth, should do it by EOD

Login with Twitter or Google to leave a comment