Kategorie: JavaScript

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.

Um einen Unit Test von einer Angular Komponente mit Abhängigkeiten (Dependencies) schreiben zu können, muss man die Abhängigkeiten unter Kontrolle bringen.

Wenn man dies nicht tut, schreibt man einen Integration-Test. Integration-Tests haben eine höhere Komplexität hat und gehen schneller kaputt.

Beipsiel einer Komponente „MyComponent“ mit einer Abhängikeit „MyService“:

export class MyComponent implements OnInit {

  public serviceValue;

  constructor(
    private myService: MyService,
  ) {}

  ngOnInit() {
    this.serviceValue =  this.myService.getValue();
  }
}

Um in einem Jasmine Unit Test die Abhängigkeit von MyService zu kontrollieren, kann man einen Spy einsetzen, der an die die Stelle der Methode MyService::getValue gesetzt wird und die Sachen macht, die man für den Test gern hätte.

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myService:MyService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent,],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });

  it('spy should set value', () => {
     spyOn(myService,'getValue').and.returnValue('foo');
    fixture.detectChanges();
    expect(component.serviceValue).toBe('foo');
  });
});

In dem Beispiel wird die Methode getValue der Klasse MyService mit einem Spy überschrieben und dem Spy mitgeteilt, dass er den Wert ‚foo‘ zurückgeben soll.

Um Selenium Tests in Firefox und Chrome im Headless Modus auszuführen mit Protractor, kann man folgende Konfiguraton verwenden in der protractor.conf:

exports.config = {
....
  multiCapabilities: [
    {
      browserName: 'chrome',
      chromeOptions: {
        'args': ['--headless']
      },
    },
    {
      browserName: 'firefox',
      firefoxOptions: {
        args: ['--headless']
      },
      'moz:firefoxOptions': {
        args: ['--headless']
      }
    },
  ],
...
};

Um eine Kompatibilität mit alten Browsern, wie dem Firefox Version <= 5 zu erreichen, kann man das angular http Modul nicht verwenden. Das ngx-translate Module bneötigt einen Loader, der die richtige Sprache lädt per Ajax Request. Dies läst sich auch mit dem XMLHttpRequest und einem Observalbe lösen:

import {Injectable} from '@angular/core';
import {TranslateLoader} from '@ngx-translate/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class LanguageLoader implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return Observable.create(function (observer) {
    let url = `./assets/i18n/${lang}.json?=` + new Date().getTime();
    let xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE || xhr.readyState == 4) {
              let response = JSON.parse(xhr.responseText);
              observer.next(response);
              observer.complete();
        }
      }
      xhr.open('GET', url, true);
      xhr.send(null);
    });
  }
}

In der app.module.ts kann man dann den Loader wie folgt einbinden:

TranslateModule.forRoot({
  loader: {provide: TranslateLoader, useClass: LanguageLoader}
})

Bei einem Fehlgeschlagenen Request kann man sehr komfortabel nochmals anfragen mit der Methode retry():

import 'rxjs/add/operator/retry';

...

const result = this.http.get(url)
.retry(2);