Zen and the Art of UI Components Testing

Rate this content
Bookmark

Yes, we do need to test our UI components but... If this rings a bell, and especially if your application has advanced UI functionality, this talk is for you.In this talk, we will cover what are the factors that need to be tested in UI components. We will challenge the testing pyramid when it comes to UI Components testing, and review the different tools that we have nowadays for making UI component testing complete Zen.

This talk has been presented at TestJS Summit 2023, check out the latest edition of this Tech Conference.

FAQ

The original test automation pyramid, introduced in 1990, consists of three levels: Unit, Service, and UI. It places UI tests at the top of the pyramid.

The test automation pyramid has evolved to include three levels: Unit tests, Integration tests, and End-to-End tests. End-to-End tests are often considered synonymous with UI tests.

The principles of UI component testing include isolating components, testing them in a real browser, and ensuring efficient execution of tests.

Tools recommended for UI component testing include Storybook for isolating and showcasing components, and Playwright for browser automation and running tests.

Testing in a real browser is important for UI components because it ensures that the components are rendered correctly, CSS is applied properly, and interactions like gestures and animations function as expected.

Using fake DOMs, such as Jest or HappyDOM, can lead to challenges like not rendering components accurately and missing out on real browser interactions. This can result in a guessing game when testing advanced UI components.

Modern tools like Playwright and Puppeteer use out-of-process browser automation, which allows full access to browser APIs, parallel test execution, and real interactions, making UI component testing more efficient and accurate.

Storybook allows developers to build, render, and test UI components in isolation. It provides a visual interface to ensure components function correctly and can be easily integrated into larger applications.

Playwright enhances the testing process by providing browser automation, parallel execution, and advanced debugging and tracing capabilities. It ensures tests are stable and can be run efficiently on CI/CD pipelines.

End-to-end testing focuses on testing complete user flows with a real backend server, often covering happy paths. Component testing, on the other hand, isolates components, mocks the backend, and focuses on variations and edge cases.

Tally Barak
Tally Barak
21 min
11 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the evolution of test automation from the original test automation pyramid to the testing pyramid. It explores modern approaches to UI component testing, including isolations and testing with a fake DOM. The importance of testing in a real browser and the emergence of tools like Selenium, WebDriver.io, Puppeteer, Cypress, and PlayWrite for browser automation are highlighted. The advantages of out-of-process browser automation are explained, along with the use of Storybook and Playwright for testing components. The distinction between end-to-end testing and component testing is also mentioned.

1. Introduction to Test Automation Pyramid

Short description:

In 1990, testing was not taught in programming boot camps. A book published by Mycom introduced the original test automation pyramid with three levels: unit, service, and UI. Over time, it evolved into the testing pyramid, with unit tests, integration tests, and end-to-end tests.

A short walk down memory lane. This is me. Here I just graduated my programming boot which was in the Israeli Army, the Mammran boot camp. We learned a lot of things. The one thing we did not learn is testing. And this is because the year is 1990. And this is the very same year that this book was published by Mycom. And it's talking about succeeding with Agile. And if you dive into this book, you would find this diagram. This is the original test automation pyramid. It talks about three levels. Unit, service, and UI. And you notice that the UI is at the top. Later on, this is evolved into the testing pyramid, which we all know. And the name changed. We still talk about unit test. But we also talk about integration. And the UI test has become end to end test. And this is actually true, because this is what happened for many years. We would see end to end test as a synonym for UI tests.

2. Modern Approaches to UI Component Testing

Short description:

I want to talk about modern approaches to UI component testing. The first principle is isolations. Components let you split the UI into independent and reusable pieces. You can think about each piece in isolation, build it in isolation, and test it in isolation.

My name is Tali Barak. I work for a company called Ubiq. And I want to talk about modern approaches to UI component testing, and I call this talk Zen and the Art of UI Component Testing. And soon, we will see what is the Zen and how we can achieve it.

And the first thing, the first principle, is I want to talk about isolations. This is a page, what a web page, a web application looked like back in the 1990s. As you can see, it is quite simple and it is just one page. But then, later on, and we're talking here about 2015, sort of like, we started working in a complete different way when building our web application. We started talking about components.

This is AngularJS, as I said, in December 2015. They are talking about understanding components when you develop an Angular application. And this is from June 2016. This is the actual commit that was made into the React readme. And it started talking also about what it means to be component based. It talks about building encapsulated components that manage their own state and then compose them into more complex UIs. And we still look at components as sort of lego bricks. You have a separate component exhibit. Each one with its own functionality and then you go and you build them into larger UI such as ships, houses, or even a search engine rack server that was built from lego.

Today when we talk about the modern framework for building UI such as Angular React, Vue, Solid, Svelte, etc., they are all built on the principle of component-based. And this is what components let you do. They let you to split the UI into independent and reusable pieces and you can think about each piece in isolation. And when you say think, it's not just about thinking, it's also about building it in isolation and testing it in isolation. In this example here, we can see this is a CodeWe app, a demo app that is built in multiple languages and frameworks. You can just find almost any framework you would like. And you can see here that it is actually using the same component of an article preview both on the global feed and on the MyPost. And this actually implies that if I want to test the functionality of this component, I don't need to go to the specific page of the global feed as I would do in end-to-end test or to login and go into MyPost as I would do in the MyPost page. I can actually isolate this component, put it on separately. And such as we see here, this is the same component, but the page only shows this component. This is using Storybook. Storybook is a great tool for demoing and showing and showcasing components in isolation.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Test Effective Development
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
The Art of ‘Humble Views’: Testing React Native Apps the Smart Way
TestJS Summit 2023TestJS Summit 2023
32 min
The Art of ‘Humble Views’: Testing React Native Apps the Smart Way
This Talk discusses the challenges of testing in React and React Native applications, particularly with regards to barcode scanning. It explores the violation of separation of concerns in React and proposes the use of the HumbleObject model to simplify testing and improve code cleanliness. The MVP model is also introduced as a way to separate UI state and logic from the component. The importance of following patterns, standardization, and teaching principles is emphasized, along with the benefits of using custom hooks to share business logic. The potential of AI tools in code refactoring is mentioned as well.
We May Not Need Component Testing
Vue.js Live 2024Vue.js Live 2024
26 min
We May Not Need Component Testing
Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.
Component Testing With Vitest
TestJS Summit 2023TestJS Summit 2023
29 min
Component Testing With Vitest
This Talk explores the challenges of choosing and learning testing frameworks, emphasizing the importance of planning, automation, and prioritizing unit testing. The VTEST framework is introduced as a fast and stable option for unit testing JavaScript and TypeScript code, with a focus on logic and mocking external dependencies. The Talk also covers testing React hooks, integration testing with TestingLibraryReact, component testing, and achieving code coverage. Best practices include performing accessibility tests, planning tests before coding, and using data test IDs for stability.
Game Development with ReactJS, CSS, and React Three Fiber
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Game Development with ReactJS, CSS, and React Three Fiber
Jorge Rubiano, a Software Engineer from Colombia, shares puzzle, isometric, and board games developed using React.js and CSS. He demonstrates the use of WebGL and 3.js for creating 3D games on the web. ReactiveFiber, a renderer that combines React and 3.js, is showcased in movement-based and color-changing games. The Talk concludes with the development of a bowling game using ReactiveFiber and complex components.
It's a (Testing) Trap! - Common Testing Pitfalls and How to Solve Them
TestJS Summit 2021TestJS Summit 2021
20 min
It's a (Testing) Trap! - Common Testing Pitfalls and How to Solve Them
This Talk explores the pain points and best practices in software testing, emphasizing the importance of simplicity and comprehensibility in test design. It discusses techniques such as the three-part rule for test titles, the triple-A pattern for test structure, and the use of clear and descriptive names in tests. The Talk also highlights the traps of testing implementation details and using fixed waiting times. The speaker encourages teamwork and learning from experience to improve testing practices.

Workshops on related topic

Should we have business logic in the UI?
JSNation 2022JSNation 2022
148 min
Should we have business logic in the UI?
WorkshopFree
Samuel Pinto
Samuel Pinto
How many times did you say or hear “this is business logic, it should not be here”?In this workshop, we will create a modern frontend application using old patterns and you will learn how to build apps that have decoupled UI and services.We will start with a React application that has its whole logic in the UI. Then step by step we will extract the rules and operations to hit that sweet spot of independence.
Learn To Use Composables: The Swiss Army Knife Of Vue Developers
Vue.js Live 2024Vue.js Live 2024
163 min
Learn To Use Composables: The Swiss Army Knife Of Vue Developers
Workshop
Juan Andrés Núñez Charro
Juan Andrés Núñez Charro
Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components.This shift in perspective opens the possibility for tackling common scenarios in a new and creative way. In this workshop, you will learn how to solve typical problems every Vue developer faces, using composables:
- Data store;- Component cross-communication;- Utility functions (DOM, API, etc);And more.
Introduction to React Native Testing Library
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Josh Justice
Josh Justice
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/