Komponententests in Cypress

Was ist das Komponententesting in Cypress?

Das Komponententesting in Cypress ermöglicht es, einzelne Komponenten einer Anwendung isoliert zu testen, um sicherzustellen, dass sie korrekt funktionieren, bevor sie in das gesamte System integriert werden. Dies ist besonders nützlich für Anwendungen, die mit Frameworks wie React, Angular oder Vue entwickelt wurden.

Durch das Testen von Komponenten kann die Funktionalität kleiner Codeeinheiten überprüft werden, ohne dass sie von der Gesamtstruktur des Systems abhängig sind.

Dieser Testansatz ist besonders praktisch für Frontend-Entwicklung, da er es ermöglicht, gleichzeitig sowohl die visuelle Darstellung eines Komponenten als auch die dahinterliegende Logik zu testen – und das, ohne sich um die Integration mit dem Backend, REST-APIs oder Speichersysteme kümmern zu müssen.

In der typischen Testpyramide, die zur Veranschaulichung verschiedener Testmethoden und deren Reichweite verwendet wird, befindet sich das Komponententesting in der Mitte – zwischen End-to-End-Tests (E2E) und Unit-Tests.

Beispiel für Komponententests in Cypress

Ein Komponententest in Cypress „montiert“ die Komponente, indem er sie von jeder übergeordneten Seite oder Komponente, zu der sie in der ursprünglichen Programmhierarchie gehört, unabhängig macht und sie zur Laufzeit isoliert. Dadurch können wir die gewünschten Assertions durchführen.

Zum Beispiel, nehmen wir einen einfachen Button, der als Komponente in Angular gekapselt ist:

Angular-Komponente (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');
  }
}

Die folgende Datei zeigt einen Komponententest in Cypress für denselben Button, bei dem wir überprüfen:
a) Den Namen des Buttons
b) Seine Aktion (in diesem Fall eine einfache Konsolenausgabe)

Komponententest in 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');
    });
  });
});

Zusätzlich könnten wir Tests hinzufügen, um zu überprüfen, dass die Komponente verschiedene Beschriftungen und Zustände korrekt verarbeitet.

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');
  });
});

Komponententests bei WATA Factory

Bei WATA Factory setzen wir bereits seit einiger Zeit Komponententests in unseren Projekten ein, insbesondere in GesA. Dort hat es uns ermöglicht, die Frontend-Entwicklung zu beschleunigen und zu optimieren.

Fazit

Komponententests mit Cypress ermöglichen es dir, mehrere Aspekte des Frontends gleichzeitig zu testen – darunter die Ansicht, Ngrx Stores, Events und mehr –, ohne die Komplexität eines vollständigen End-to-End-Tests (E2E) auf dich nehmen zu müssen.

Man kann es als eine Art kleinen E2E-Test betrachten: weniger komplex, aber gezielter. Also zögere nicht – so wie wir es bei WATA Factory bereits getan haben: Gib dem Komponententesting in Cypress eine Chance!