2017-09-23 1 views
0

Je le code suivant:Pourquoi ai-je besoin exactement de detectChanges dans angular2?

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

Quelle que soit fixture.detectChanges() les changements de element1.textContent() à la valeur de la "nouvelle"? La modification ne devrait-elle pas se produire uniquement si j'appelle la fonction detectChanges()? Sinon, quel est le point d'avoir detectChanges de toute façon puisque le changement est enregistré sans que la fonction soit appelée?

En fait, j'attendre ma dernière fonction s'attendre à passer le test car les changements ne devraient pas avoir avaient été enregistrées par le element1.textContent = « nouveau » en raison de ne pas appeler la fonction detectChanges

Répondre

1

Vous n'êtes pas test votre composant correctement. Vous n'êtes pas supposé changer le contenu de l'appareil. Vous voulez changer les propriétés des composants et vérifier si le projecteur a changé en conséquence, et pour cela vous aurez besoin de la méthode detectChanges().

Exemple:

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

Pour répondre directement à votre question, vous avez besoin de la méthode des appareils detectChanges() afin de détecter les changements qui se sont produits à l'intérieur du composant et de rendre le luminaire à nouveau.

+1

Je le pensais, tnx pour la réponse. – masterach

+0

Pas un problème. Content que je puisse t'aider. – Mihailo