Pruebas unitarias en aplicaciones Angular

Rate this content
Bookmark

Angular ofrece muchas cosas de serie, incluyendo diversas funcionalidades relacionadas con las pruebas. Esta presentación demostrará cómo podemos aprovechar los sólidos fundamentos de las pruebas unitarias de Angular y aplicar ciertos patrones que facilitan las pruebas. Los temas tratados incluyen: dobles de prueba, patrón de prueba de módulo, arneses, "recetas" sobre cómo probar algunos casos comunes y más.

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

FAQ

Filip Voska es de Croacia y trabaja en Infinium como líder de equipo de JavaScript. Tiene experiencia en escribir pruebas para código y enfatiza la importancia de las pruebas para asegurar la calidad del software.

Los frameworks de pruebas más populares para Angular son Jasmine, que se utiliza con Karma como ejecutor de pruebas, y Jest, que es una solución todo en uno.

Una prueba unitaria en Angular involucra probar individualmente las clases que pueden ser componentes, directivas, pipes, módulos, servicios, entre otros, asegurando que funcionen correctamente de manera aislada.

Angular proporciona herramientas como el componente y el fixture, que facilitan la interacción con el componente en las pruebas, permitiendo consultar elementos y activar cambios.

En las pruebas de Angular, es importante no llamar directamente a los métodos del controlador en la clase, sino activar los controladores de eventos programáticamente para simular la interacción del usuario de manera realista.

Los dobles de prueba en Angular, como un servicio de usuario simulado, son versiones de prueba de servicios o componentes que imitan su comportamiento sin realizar operaciones reales como llamadas a API, permitiendo probar componentes de manera aislada.

La cobertura de código es una métrica que indica qué tanto del código ha sido probado. Es útil para identificar áreas no probadas, aunque no siempre es completamente representativa, especialmente porque no incluye las plantillas HTML en Angular.

Filip Voska
Filip Voska
24 min
03 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora las pruebas unitarias en aplicaciones Angular, abordando temas como las pruebas de aplicaciones front-end, los detalles de las pruebas en Angular, las mejores prácticas y los recursos educativos. Se discute la anatomía de una prueba unitaria tanto en Jasmine como en Jest, la configuración y las pruebas iniciales en Angular, las pruebas de interacción del usuario y los controladores de eventos, las pruebas de la salida renderizada y la detección de cambios, y las pruebas unitarias de componentes padres con componentes hijos. También se destacan las mejores prácticas como el uso de dobles de prueba, las pruebas de componentes con inyección de dependencias y las consideraciones para las pruebas unitarias. Se enfatiza que la cobertura de código es una métrica que no garantiza un código libre de errores.
Available in English: Unit Testing Angular Applications

1. Introducción a las pruebas unitarias en aplicaciones de Angular

Short description:

Bienvenidos a mi charla sobre las pruebas unitarias en aplicaciones de Angular. Es crucial escribir pruebas para tu código para asegurarte de que se ejecute correctamente y haga lo que se supone que debe hacer. Exploraremos formas de probar aplicaciones front-end, aspectos específicos de las pruebas en Angular, mejores prácticas aplicables a otros frameworks, qué probar, qué no probar y recursos educativos. Para las pruebas front-end, Jasmine y Jest son frameworks populares, mientras que Cypress, Selenium y Playwright se utilizan para las pruebas end-to-end. Me centraré en Jasmine para las pruebas unitarias en Angular. Las pruebas de integración difuminan la línea entre las pruebas unitarias y las pruebas end-to-end. Angular se centra principalmente en probar clases y crear instancias. Veamos las herramientas de Angular para las pruebas y la creación de instancias.

Hola a todos, bienvenidos a mi charla sobre las pruebas unitarias en aplicaciones de Angular. Primero, una breve introducción sobre mí. Mi nombre es Filip Voska, soy de Croacia y trabajo en Infinium como líder de equipo de JavaScript. A lo largo de los años, una cosa que he aprendido es que realmente debes escribir pruebas para tu código. Nadie escribe código perfecto y quieres tener cierta confianza en que se está ejecutando correctamente y haciendo lo que se supone que debe hacer, y para eso se utilizan las pruebas. Así que rápidamente repasemos los temas, veremos algunas formas de probar aplicaciones front-end, algunos aspectos específicos de las pruebas en Angular, luego en la tercera parte veremos algunas mejores prácticas que no están necesariamente relacionadas con Angular, pero son conceptos que se pueden aplicar en otros frameworks, y al final, tendremos una visión general de algunas cosas que debes probar, que no debes probar y cuáles son los siguientes pasos y los recursos educativos disponibles.

Ok, primero veamos qué probar. Si buscas en línea, probablemente, si buscas pruebas, verás algo relacionado con la pirámide de pruebas y es lo que describe la proporción entre las pruebas unitarias, de integración y end-to-end. Algunos, en la versión más común, dicen que debes tener la mayor cantidad de pruebas unitarias, luego un poco menos de pruebas de integración y luego aún menos pruebas end-to-end. Ahora, hay variaciones de esto, donde algunos dicen que deberías tener algo como esto, que es como un reloj de arena de pruebas, donde deberías tener, digamos, la misma cantidad de pruebas unitarias y end-to-end, pero un poco menos de pruebas de integración. Y luego también encontrarás esta forma, que es algún tipo de jarrón donde puedes poner flores. Y sí, esas son todas diferentes filosofías, y eso es todo un tema aparte. No entraremos en detalles sobre eso. Solo veremos lo que importa para Angular.

Y para las aplicaciones front-end, generalmente tienes la opción entre Jasmine y Jest. Esos son los dos frameworks de pruebas más populares. Con Jasmine, también usarías Karma como ejecutor de pruebas. Jest es una solución todo en uno. Y Angular viene con Jasmine y Karma listos para usar, pero también es bastante fácil de usar Jest con él. Luego, para las pruebas end-to-end, tienes cosas como Cypress, Selenium, Playwright. Y todas estas son formas de ejecutar un navegador automatizado donde es un navegador real ejecutando tu código y estás simulando el comportamiento del usuario. Así que hoy me centraré en Jasmine para las pruebas unitarias. No cubriré las pruebas end-to-end o de integración. Ahora, las pruebas de integración realmente se pueden hacer con cualquiera de estas herramientas porque la línea entre las pruebas end-to-end, de integración y unitarias es un poco borrosa. Depende de cómo definas una unidad y cuántas unidades están involucradas en una prueba. Entonces, ¿qué es una unidad en el contexto de Angular? Bueno, Angular está compuesto principalmente por diferentes clases y esas clases pueden ser componentes, directivas, pipes, módulos, servicios, etc. Y también tienes funciones como funciones auxiliares regulares que podrías tener. Así que principalmente estamos hablando de probar clases en Angular y crear instancias de esas clases. Veamos algunas de las herramientas que Angular nos proporciona para facilitar las pruebas y la creación de esas instancias. Esto es lo que

2. Understanding Angular Components and Unit Testing

Short description:

Angular consiste en un componente de clase con entradas y salidas para la comunicación con los componentes principales. Tenemos un ejemplo simple con un botón que incrementa un contador y emite un evento al componente principal. Vamos a explorar la anatomía de una prueba unitaria tanto en Jasmine como en Jest. Implica definir un conjunto de pruebas, configurar un estado inicial y escribir pruebas unitarias individuales.

componente en el que estaremos trabajando. Es bastante simple. Para aquellos que tal vez no estén familiarizados con Angular, Angular consiste en un componente de clase que tiene entradas y salidas, y estas son las formas en que el componente puede comunicarse con los componentes principales. Entonces, el componente principal puede pasar algo a través de una entrada al componente secundario y el componente secundario puede emitir un evento de vuelta al componente principal utilizando una salida. En nuestro ejemplo, tenemos un componente muy simple donde se puede ver en la plantilla en la línea 4 que mostramos la cantidad de veces que se ha hecho clic en el botón, y en la línea 6 tenemos un botón con un controlador de clic adjunto que llama a un método y ese método está definido en la clase y simplemente incrementa el contador y emite el evento al componente principal. Entonces, este es uno de los componentes más básicos que podrías tener en Angular. Así que echemos un vistazo a la anatomía de una prueba unitaria. Y esto es realmente lo mismo tanto en Jasmine como en Jest. Hay algunas otras diferencias entre ellos, pero esto es realmente lo mismo y también es lo mismo en muchos otros lenguajes. Primero, definirías un conjunto de pruebas. Entonces, estamos definiendo un conjunto de pruebas para el componente de contador, usamos la función describe para eso. Luego tenemos algo... Usualmente tenemos beforeEach. beforeEach es un fragmento de código que se ejecutará antes de cada prueba, cada prueba individual, y aquí configurarías algún estado y algún estado inicial. Luego, entre las líneas cuatro y seis, finalmente tenemos una prueba unitaria individual. Está utilizando la función it. Es un nombre un poco extraño, pero se llama así porque la forma en que se supone que debes leer esto es `el componente de contador debería hacer algo`, por eso la función se llama it.

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
Pruebas de Aplicaciones Web con Playwright
TestJS Summit 2022TestJS Summit 2022
20 min
Pruebas de Aplicaciones Web con Playwright
Top Content
Testing web applications with Playwright, a reliable end-to-end testing tool. Playwright offers fast execution, powerful tooling, and support for multiple languages. It provides precise selectors, web-first assertions, and code generation for easy testing. Playwright also offers features like live debugging, tracing, and running tests on CI. The future of Playwright aims to make testing easy and fun, with a focus on creating frustration-free web experiences.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.

Workshops on related topic

Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.