Sebastian Viereck

Der HTML Code kann ausgegeben werden mit:

console.log(fixture.debugElement.nativeElement.innerHTML);

Die Change Detection von Angular wird immer ausgeführt bei einem Array Input, wenn sich die Referenz des Arrays ändert, aber nicht der Inhalt:

console.log([1] === [1]); // ergibt false

In Angular kann man die Change Detection beeinflussen, indem man die Strategie der Change Detection für eine Komponente ändert. Eine der Strategien ist die „OnPush“-Strategie, bei der die Change Detection nur dann ausgelöst wird, wenn sich die Eingangsparameter einer Komponente ändern oder wenn ein Ereignis aufgerufen wird.

Um sicherzustellen, dass die Change Detection nur ausgeführt wird, wenn das Input-Array geändert wurde, können Sie den OnPush-Strategie für die Komponente verwenden und eine Überwachungsfunktion für das Input-Array hinzufügen, die nur dann ausgelöst wird, wenn sich die Werte des Arrays ändern.

Hier ist ein Beispiel einer solchen Komponente:

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '...',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  @Input() items: any[] = [];

  constructor(private cd: ChangeDetectorRef) { }

  ngOnChanges(changes: any) {
    if (changes.items && !this.arrayEquals(changes.items.previousValue, changes.items.currentValue)) {
      this.cd.markForCheck();
    }
  }

  private arrayEquals(a: any[], b: any[]): boolean {
    return JSON.stringify(a) == JSON.stringify(a);
  }
}

Somit wird die Komponente nur neu gerendert, wenn sich an dem Items Array wirklich etwas ändert und nicht nur die Referenz.

Um End-To-End-Tests mit Cypress und Angular zu schreiben, können Sie folgende Schritte ausführen:

1. Stellen Sie sicher, dass Sie die neueste Version von Cypress und Angular installiert haben. Sie können Cypress mit dem Befehl npm install -D cypress installieren.
2. Öffnen Sie Cypress mit dem Befehl npx cypress open im Hauptverzeichnis Ihres Projekts. Cypress öffnet eine Benutzeroberfläche, in der Sie Ihre Tests aufzeichnen und ausführen können.
3. Erstellen Sie eine neue Testdatei, indem Sie auf „Add test file“ in der Cypress-Benutzeroberfläche klicken. Sie können die Testdatei auch manuell im Verzeichnis „cypress/integration“ erstellen.
4. Fügen Sie den folgenden Code in Ihre Testdatei ein, um sicherzustellen, dass Cypress Ihre Angular-Anwendung erfolgreich geladen hat:

describe('My First Test', () => {
  it('Does not do much!', () => {
    cy.visit('http://localhost:4200');
    cy.contains('app-root h1', 'Welcome to my-app!');
  });
});

5. Führen Sie den Test aus, indem Sie auf die Testdatei in der Cypress-Benutzeroberfläche klicken. Wenn alles erfolgreich war, sollte der Test grün markiert werden.
6. Erstellen Sie weitere Tests, indem Sie Schritte und Assertions hinzufügen. Sie können Elemente auf der Seite auswählen und auf sie interagieren, indem Sie die Methoden von Cypress verwenden, z.B. cy.get(), cy.click() und cy.type().

Um Cypress mit einem Docker-Container zu verwenden, können Sie folgende Schritte ausführen:

1. Erstellen Sie eine Dockerfile in Ihrem Projektverzeichnis mit den folgenden Inhalten:

FROM cypress/browsers:node18.6.0-chrome105-ff104

# Install your application's dependencies
COPY package.json yarn.lock ./
RUN yarn

# Add your application code
COPY . ./

# Run the tests
CMD ["yarn", "cy:run"]

2. Erstellen Sie ein Docker-Image mit dem Befehl docker build -t my-app .
3. Führen Sie einen Container auf Basis des Images mit dem Befehl docker run -it --rm -v $(pwd):/app my-app aus. Dies führt die Cypress-Tests innerhalb des Containers aus.

Durch das Hinzufügen von -v $(pwd):/app werden Ihre Projektdateien in den Container gemountet und Cypress kann auf sie zugreifen.