Zen y el Arte de Pruebas de Componentes de UI

Rate this content
Bookmark

Sí, necesitamos probar nuestros componentes de UI pero... Si esto te suena, y especialmente si tu aplicación tiene funcionalidades de UI avanzadas, esta charla es para ti. En esta charla, cubriremos cuáles son los factores que necesitan ser probados en los componentes de UI. Desafiaremos la pirámide de pruebas cuando se trata de pruebas de componentes de UI, y revisaremos las diferentes herramientas que tenemos hoy en día para hacer que las pruebas de componentes de UI sean completas Zen.

Tally Barak
Tally Barak
21 min
11 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla discute la evolución de la automatización de pruebas desde la pirámide original de automatización de pruebas hasta la pirámide de pruebas. Explora enfoques modernos para las pruebas de componentes de UI, incluyendo aislamientos y pruebas con un DOM falso. Se destaca la importancia de las pruebas en un navegador real y la aparición de herramientas como Selenium, WebDriver.io, Puppeteer, Cypress, y PlayWrite para la automatización del navegador. Se explican las ventajas de la automatización del navegador fuera de proceso, junto con el uso de Storybook y Playwright para pruebas de componentes. También se menciona la distinción entre las pruebas de extremo a extremo y las pruebas de componentes.

Available in English

1. Introducción a la Pirámide de Automatización de Pruebas

Short description:

En 1990, las pruebas no se enseñaban en las masterclass de programación. Un libro publicado por Mycom introdujo la pirámide original de automatización de pruebas con tres niveles: unidad, servicio y UI. Con el tiempo, evolucionó hacia la pirámide de pruebas, con pruebas de unidad, pruebas de integración y pruebas de extremo a extremo.

Un breve paseo por el camino de la memoria. Este soy yo. Aquí acabo de graduarme en mi masterclass de programación que fue en el Ejército Israelí, la masterclass de Mammran. Aprendimos muchas cosas. Lo único que no aprendimos es testing. Y esto es porque el año es 1990. Y este es el mismo año en que se publicó este libro por Mycom. Y está hablando de tener éxito con Agile. Y si te sumerges en este libro, encontrarías este diagrama. Este es el pirámide original de automation de pruebas. Habla de tres niveles. Unidad, servicio y UI. Y te das cuenta de que la UI está en la parte superior. Más tarde, esto evolucionó hacia la pirámide de testing, que todos conocemos. Y el nombre cambió. Todavía hablamos de prueba de unidad. Pero también hablamos de integración. Y la prueba de UI se ha convertido en prueba de extremo a extremo. Y esto es realmente cierto, porque esto es lo que sucedió durante muchos años. Veríamos la prueba de extremo a extremo como un sinónimo

2. Enfoques Modernos para la Prueba de Componentes de UI

Short description:

Quiero hablar sobre los enfoques modernos para la prueba de componentes de UI. El primer principio es el aislamiento. Los componentes te permiten dividir la UI en piezas independientes y reutilizables. Puedes pensar en cada pieza de forma aislada, construirla de forma aislada y probarla de forma aislada.

para pruebas de UI. Mi nombre es Tali Barak. Trabajo para una empresa llamada Ubiq. Y quiero hablar sobre enfoques modernos para la prueba de componentes de UI, y llamo a esta charla Zen y el Arte de la Prueba de Componentes de UI. Y pronto, veremos qué es el Zen y cómo podemos lograrlo.

Y lo primero, el primer principio, es que quiero hablar sobre aislamientos. Esta es una página, lo que una página web, una aplicación web parecía en los años 90. Como puedes ver, es bastante simple y es solo una página. Pero luego, más adelante, y estamos hablando aquí sobre 2015, más o menos empezamos a trabajar de una manera completamente diferente al construir nuestra aplicación web. Empezamos a hablar sobre componentes. Esto es AngularJS, como dije, en diciembre de 2015. Están hablando sobre entender los componentes cuando desarrollas una aplicación Angular. Y esto es de junio de 2016. Este es el commit real que se hizo en el readme de React. Y también empezó a hablar sobre lo que significa ser basado en componentes. Habla sobre la construcción de componentes encapsulados que gestionan su propio estado y luego los componen en UIs más complejas. Y todavía vemos a los componentes como una especie de ladrillos de lego. Tienes un componente separado de la exhibición. Cada uno con su propia funcionalidad y luego vas y los construyes en UIs más grandes como barcos, casas, o incluso un servidor de rack de motor de búsqueda que fue construido con lego.

Hoy cuando hablamos del marco moderno para construir UI como Angular, React, Vue, Solid, Svelte, etc., todos están construidos sobre el principio de basado en componentes. Y esto es lo que te permiten hacer los componentes. Te permiten dividir la UI en piezas independientes y reutilizables y puedes pensar en cada pieza de forma aislada. Y cuando dices pensar, no se trata solo de pensar, también se trata de construirlo de forma aislada y probarlo en aislamiento. En este ejemplo aquí, podemos ver que esta es una aplicación CodeWe, una aplicación de demostración que está construida en múltiples lenguajes y frameworks. Puedes encontrar casi cualquier framework que te gustaría. Y puedes ver aquí que en realidad está utilizando el mismo componente de una vista previa de artículo tanto en el feed global como en MyPost. Y esto implica que si quiero probar la funcionalidad de este componente, no necesito ir a la página específica del feed global como lo haría en la prueba de extremo a extremo o iniciar sesión e ir a MyPost como lo haría en la página de MyPost. En realidad puedo aislar este componente, ponerlo por separado. Y como vemos aquí, este es el mismo componente, pero la página solo muestra este componente. Esto está utilizando Storybook. Storybook es una gran herramienta para demostrar y mostrar y exhibir componentes en aislamiento.

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
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!
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
In this talk, we explore the divisive world of testing, where developers often find themselves torn between writing no tests and striving for 100% test coverage. Learn how to navigate these polarizing positions and adopt a more nuanced strategy that makes testing efficient and effective.We'll dive into the concept of 'Humble Views,' where we minimize untestable objects by extracting logic from UI elements into test-friendly parts of the codebase. This approach simplifies testing, focusing on business logic instead of UI complexities. Discover how the Model-View-Presenter (MVP) architecture helps achieve this, with presenters serving as a logical layer for testing and hooks aiding in separating logic from UI components.Throughout the talk, we'll discuss the trade-offs of this approach, the role of End-to-End (E2E) tests, and how to strike the perfect balance between too much and too little testing. Join us as we delve into the art of creating 'Humble Views,' ensuring that our React Native apps are scalable, maintainable, and effectively tested!
We May Not Need Component Testing
Vue.js Live 2024Vue.js Live 2024
26 min
We May Not Need Component Testing
Testings are mandatory and unit tests are the foundation for building a good testing system for our project. But for front end projects which involve components, how many unit tests are considered efficient and not overkill? Should we use additional libraries like Testing Library or Vue Test Utils with Vitest to test a component, when we can perform the same with just Playwright? Whether a component test using an E2E framework like Playwright is really a kill for? Let's find out in my talk.
Component Testing With Vitest
TestJS Summit 2023TestJS Summit 2023
29 min
Component Testing With Vitest
Testing is important. Proper unit tests can eliminate the chance for bugs to appear. But which testing framework will be suitable? Let’s explore how we can develop a reliable and efficient strategy for component development and testing with Vitest
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
It’s a trap” - a call or feeling we all might be familiar with, not only when it comes to Star Wars. It’s signalizing a sudden moment of noticing imminent danger. This situation is an excellent allegory for an unpleasant realization in testing. Imagine having the best intentions when it comes to testing but still ending up with tests failing to deliver you any value at all? Tests who are feeling like a pain to deal with?
When writing frontend tests, there are lots of pitfalls on the way. In sum, they can lead to lousy maintainability, slow execution time, and - in the worst-case - tests you cannot trust. But it doesn’t have to be that way. In this session, I will talk about developers’ common mistakes (including mine), at least from my experience. And, of course, on how to avoid them. Testing doesn’t need to be painful, after all.
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
In this talk, I will share my experience in game development using ReactJS/CSS. We will explore how to make the most out of the component management provided by this library, along with the capabilities of CSS for creating an appealing user interface. Additionally, we will uncover how to leverage the React Three Fiber library to create games with a 3D experience.

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.
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/