Comment écrire un cas de test qui vérifiera la propriété du composant parent?

Question

composant parent:

export class PlayerListComponent { 
    flag = false; 
} 

composante enfant:

export class PlayerAddComponent { 
    @Output() notifyParent: EventEmitter<any> = new EventEmitter(); 

    clkCancle() { 
    this.notifyParent.emit(false); 
    // this will set parent component property 'flag' to false. 
    } 
} 

Maintenant, comment puis-je écrire un test dans Jasmine spec fichier?

it('cancel button click should set flag to false', function() { 
    // Act 
    component.clkCancle(); 

    // Assert 
    // Since component do not have flag property. It will be set in parent while by Emitter. 
    expect(???).toBe(false); 
}); 

Answer 1

Pour tester deux composants, vous devez charger les deux dans le même TestBed. Par exemple:

describe('component interaction',() => { 
    let fixture: ComponentFixture<PlayerListComponent>; 
    let component: PlayerListComponent; 

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

    beforeEach(() => { 
    fixture = TestBed.createComponent(PlayerListComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should set the parent flag when the child method is called',() => { 
    // Arrange 
    const child: PlayerAddComponent = fixture.debugElement 
     .query(By.directive(PlayerAddComponent)) 
     .componentInstance; 

    // Act 
    child.clkCancle(); // ...Cancel? 
    fixture.detectChanges(); 

    // Assert 
    expect(component.flag).toBe(false, 'parent flag should be set'); 
    } 
}); 

Sinon, vous devriez juste vérifier que l'enfant émet au bon moment, car il ne doit pas faire partie de la responsabilité ce qui se passe à la suite de l'enfant de ce (ce comportement pourrait changer sans enfant en cours de modification, ou être différent selon l'endroit où l'enfant est utilisé):

it('should emit when the method is called', done => { 
    component.clkCancle(); // here component is PlayerAddComponent 

    component.notifyParent.subscribe(flag => { 
    expect(flag).toBe(false, 'should emit false'); 
    done(); 
    }); 
}); 

Notez que, dans les deux cas, je recommande le test que cela se produit lorsque vous cliquez sur un bouton, en utilisant par exemple fixture.nativeElement.querySelector('...').click();, plutôt que lorsque la méthode est appelée; cela permet de séparer le comportement de l'implémentation , ce qui vous permet de renommer les méthodes internes sans avoir besoin de mettre à jour les tests.