Wie schreibe ich einen Testfall, der die Eigenschaft der Elternkomponente prüft?

Question

Geordnete Komponente:

export class PlayerListComponent { 
    flag = false; 
} 

Kinder Komponente:

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

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

Nun, wie kann ich ein Testfall in Jasmin schreiben Spec-Datei?

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

zwei Komponenten testen zusammen, Sie beide in der gleichen TestBed zu laden haben. Zum Beispiel:

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

Andernfalls sollten Sie nur testen, ob das Kind zur richtigen Zeit abgibt, weil es nicht Teil des Kindes verantwortlich sein sollte, was als Ergebnis das passiert (dieses Verhalten ohne dem ändern könnte Kind verändert wird, oder unterschiedlich sein, je nachdem, wo das Kind verwendet wird):

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

Beachten Sie, dass in beiden Fällen würde ich Tests empfehlen, dieses passiert, wenn Sie auf eine Schaltfläche klicken, zB mit fixture.nativeElement.querySelector('...').click();, anstatt wenn die Methode aufgerufen wird; Dies hilft, das Verhalten von der Implementierung zu trennen, so dass Sie die internen Methoden umbenennen können, ohne die Tests zu aktualisieren.