¿Qué es el testing de componentes en Cypress?
El testing de componentes en Cypress permite probar componentes individuales de una aplicación en aislamiento, garantizando que funcionen correctamente antes de ser integrados en el sistema completo. Esto es particularmente útil para aplicaciones desarrolladas con frameworks como React, Angular o Vue.
El test de componentes permite verificar la funcionalidad de pequeñas unidades de código sin dependencia de la estructura general del sistema.
Es un enfoque de testing realmente util cuando trabajamos en frontend ya que permite testear de forma simultanea no solo la parte visual de un componente sino además la lógica que hay detrás de este sin tener que preocuparnos por su integración con el backend, apis rest o sistemas de almacenamiento.
En la típica pirámide que usamos para ilustrar los distintos métodos y el alcance de los mismos a la hora de testear, el test de componentes ocuparía un lugar intermedio entre los test E2E y los test unitarios.
Ejemplo de testing de componentes en Cypress
Un test de componente en Cypress basicamente “monta” el componente independizandolo de cualquier página u componente superior al que perteneciese en la jerarquía del programa original y lo aisla en tiempo de ejecución para que podamos hacer los “asserts” que consideremos oporturnos.
Por ejemplo, dado este simple botón encapsulado como componente en Angular:
Componente Angular (button.component.ts)
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-button',
template: '<button (click)="handleClick()">{{label}}</button>',
styleUrls: ['./button.component.css']
})
export class ButtonComponent {
@Input() label: string = 'Click me';
handleClick() {
console.log('Button clicked');
}
}El siguiente archivo reflejaría un test de componente en Cypress para el mismo donde estamos verificando:
a) El nombre del botón
b) La acción del mismo ( en este caso un mero mensaje por consola)
Test de componente en Cypress (button.component.cy.ts)
describe('ButtonComponent', () => {
it('renders correctly and handles click events', () => {
cy.mount('<app-button label="Test Button"></app-button>');
cy.get('button').should('contain', 'Test Button'); //<-- comprobamos el nombre
cy.get('button').click();
cy.window().then(win => {. // <-- Comprobamos la acción
cy.spy(win.console, 'log');
cy.get('button').click();
cy.wrap(win.console.log).should('be.calledWith', 'Button clicked');
});
});
});Adicionalmente, podríamos agregar pruebas para verificar que el componente maneja correctamente diferentes etiquetas y estados.
describe('ButtonComponent - Additional Tests', () => {
it('should render with a different label', () => {
cy.mount('<app-button label="New Label"></app-button>');
cy.get('button').should('contain', 'New Label');
});
it('should apply different styles based on properties', () => {
cy.mount('<app-button label="Styled Button" class="primary"></app-button>');
cy.get('button').should('have.class', 'primary');
});
});Test de componentes en WATA Factory
En WATA Factory ya llevamos bastante tiempo aplicando el testing de componentes en nuestros proyectos, principalmente en GesA, alli nos ha brindado la oportunidad de acelerar y reforzar el desarrollo en frontend.
Conclusión
El testing de componentes con Cypress te permite elevar el numero de elementos a testear a la vez en el frontend, a saber la vista, los stores Ngrx, eventos, etc… sin llegar a la complejidad de levantar, mantener y preparar un entorno para un test E2E.
Puedes considerarlo un test E2E a pequeña escala, menos complejo y más focalizado. Así que no lo dudes, como ya hemos hecho en WATA Factory: ¡dale una oportunidad al testing de componentes en Cypress! 🚀
