ReactFoo 2017

A conference on React

Isolated react components as a black box with automated UI testing

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

videocam
Preview video

Technical level

Intermediate

Section

Full Talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +3

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

Preview video

https://youtu.be/ncgwWgq2mSw

Comments

  • 1
    Sandhya Ramesh (@sandhyaramesh) Reviewer a year ago

    Hi Vivek, to evaluate your proposal we need both your slides and a video of you speaking (any other conference or a two minute self recorded video explaining the talk). Please upload a video so that we can proceed with your proposal.

  • 1
    Siddharth Kshetrapal (@siddharthkp) a year ago

    Hey Vivek, The topic sounds very interesting.

    Can you add more details to your slides? That will help us move forward.

    Thanks!

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

      Hi Siddharth, I should update it in a day or two.

Login with Twitter or Google to leave a comment