JSFoo 2020

JSFoo 2020

On JavaScript in the enterprise; JS for advanced developers and architects

abhinav sharma

@abhinavsharma

User-centric testing for frontend applications

Submitted Jun 20, 2020

Components are the building blocks of modern web applications. Unit and Integration tests for these components become heavily dependent on the implementation of components over a period of time. These tests don’t verify user interactions with the component. They sometimes give false positives, test cases fail though the component works correctly and false negatives, test cases pass though the component doesn’t work correctly.

As the application evolves the code also evolves. Developers sometimes fix test cases even if functionality remains the same. This results in poor developer experience as new developers need to know implementation while fixing any broken test cases and software maintainability also becomes difficult.

Learn to mitigate the above-mentioned problems by using the user-centric testing approach. The approach verifies user interactions with the component instead of checking the internal details of the component. This makes tests more readable and better manageable.

Outline

  1. Types of testing
  2. Drawbacks of the traditional testing approach.
  3. Demonstration of the issues in the traditional testing approach.
  4. What is user-centric testing?
  5. How it mitigates the issues in the traditional testing approach?
  6. Demonstration of user-centered testing in react.
  7. How we used user-centric testing to refactor our legacy web application built using react?

Speaker bio

Abhinav works as a Software Engineer at Zendrive where he manages the analytics dashboard and internal front-end applications. He is passionate about React, testing, design patterns, algorithms, and web performance optimizations. Having spoken professionally on some of these topics at local conferences, he also writes blog posts about them.

Slides

https://slides.com/abhinavsharma-5/reactcomponenttesting

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more