Warum brauche ich detectChanges in angular2 genau?

Question

Ich habe den folgenden Code:

it ("test detect change", async()=>{ 
    let fixture= TestBed.createComponent(AppComponent); 
    let element1= fixture.debugElement.nativeElement.querySelector("h1"); 
    expect(element1.textContent).toContain("come"); 
    element1.textContent="new"; 
    //fixture.detectChanges(); 
    expect(element1.textContent).toContain("come"); 
}); 

Unabhängig von fixture.detectChanges() die element1.textContent() wechselt auf den Wert von "neu"? Sollte die Änderung nicht passieren, nur wenn ich die detectChanges() Funktion aufrufen ?. Sonst, was ist der Punkt, da detectChanges auf jeden Fall erkannt wurde, da die Änderung registriert wurde, ohne dass die Funktion aufgerufen wurde?

Grundsätzlich erwarte ich meine letzte erwarten Funktion den Test bestehen, da sollten die Änderungen nicht mit dem element1.textContent = „neuen“ registriert worden, weil der nicht den Aufruf der detectChanges funktionieren

Answer 1

Sie sind nicht Test Ihre Komponente richtig. Sie dürfen den Inhalt des Geräts nicht ändern. Sie möchten die Komponenteneigenschaften ändern und prüfen, ob sich das Fixture entsprechend geändert hat. Dazu benötigen Sie die Methode detectChanges().

Beispiel:

app.component.ts

@Component({ 
    selector : 'app-root', 
    template: '<h1>{{ title }}</h1>', 
}) 
export class AppComponent { 
    title = 'Test'; 
} 

app.component.spec.ts

it('should change the title',() => { 
    const compiled = fixture.debugElement.nativeElement; 
    const component = fixture.componentInstance; 

    expect(compiled.querySelector('h1').textContent).toBe('Test'); 
    component.title = 'New'; 
    fixture.detectChanges(); // <- Required for the following expectation to pass 
    expect(compiled.querySelector('h1').textContent).toBe('New'); 
}); 

Um Ihre Frage direkt zu beantworten, benötigen Sie die Fixtures detectChanges() Methode, um Änderungen innerhalb der Komponente zu erkennen und das Fixture erneut zu rendern.