REACT COMPONENT         IN USER

CENTRIC WAY

ABOUT ME

ABHINAV SHARMA

  • Software Developer at Zendrive.

  • PASSIONATE ABOUT Javascript, React, Testing and Data Structures.

https://github.com/sharmaabhinav/

https://www.linkedin.com/in/abhinav-sharma-0425854b/

AGENDA

What, How and Why?

  1. Types of testing
  2. Our Current testing approach in dashboard
  3. Talk is cheap. Show me the code
  4. Issues in the current testing approach
  5. What is user-centric testing?
  6. Why should I care about user-centric testing? 
  7. Talk is cheap. Show me the code again
  8. 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.
0
 Advanced issue found
▲
 

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
 

https://github.com/sharmaabhinav/testing-demos

Made with Slides.com