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
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
- 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.
- 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.
- 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.
- 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.
- Using React storybook to build components in isolation
- 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/4Mn0qprfZ2AComments
-
1Siddharth 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
-
1Vivek Jagtap (@vivekjagtap011) Proposer a year ago
Hi Siddharth, should do it by EOD
-