REACT COMPONENT IN USER
CENTRIC WAY
ABOUT ME
ABHINAV SHARMA
-
Software Developer at Zendrive.
-
PASSIONATE ABOUT Javascript, React, Testing and Data Structures.
AGENDA
What, How and Why?
-
Types of testing -
Our Current testing approach in dashboard -
Talk is cheap. Show me the code -
Issues in the current testing approach -
What is user-centric testing? -
Why should I care about user-centric testing? -
Talk is cheap. Show me the code again -
Why we have used it in our legacy developer portal?
types of testing
Unit testing
Testing of an individual software component or module.
Integration testing
Testing of several components to ensure that they work together as expected.
End to End testing
Behave like a user to click around the app and verify that it functions correctly.
Our CURRENT approach OF TESTING in dashbOArd
APPROACH OF TESTING
-
Coupled with component internal details. -
React Component internal state check on the mounting of component. -
Calling internal callback methods passed as props to child Components and validating the state change.
Background
-
Built using React 16. -
The testing setup uses Jest + Enzyme.
talk is cheap. show me the code
Issues in the current testinG approach
-
Changing the structure of the state will fail the tests even if functionality remains the same. -
Tests lack readability. -
Passing tests does not mean the component will work as intended when the user interacts with it.
Guiding principle
Write Tests for your components similar to how a user will interact with them.
What is user-centric testing?
-
Refactoring is possible without breaking the suite if the functionality of components remains the same which gives confidence to the developers. -
Tests serve as documentation. By looking at the tests one can infer what functionality the component provides to the user.
why should we care about user-centric testing ?
talk is cheap. show me the code again
Background
why we have used it in our legacy website
- Built in 2017 with React major version 15.
- Not built using good practices. Direct Access to dom elements instead of using state at lot of places
- Components are not modular. No clear separation between presentational and container components.
- 0 tests with no testing setup.
Now to why part?
-
We wanted to do refactoring of exiting code and mitigate issues as mentioned above and without tests doing so was a nigntmare - We decided to follow write tests the first path so tests should be independent of implementation to help us in refactoring
Icons made by Freepik from www.flaticon.com
React Component Testing in User Centeric Way
By Abhinav Sharma
