unit test angular2: come testare gli eventi con tiggerEventHandler

Question

Sto cercando di scrivere uno unit test per click evento con angular2 rc1. il mio componente gestisce l'evento click con il metodo onClick() e cambia il campo name da bar a foo. vedi questo plunker.

Ora voglio attivare un evento click per verificare se il valore name è bar oppure no. per favore vedi il file unit-testing.spec.ts su plunker.

it('should change name from foo to bar on click event', inject([],() => { 
return builder.createAsync(UnitTestingComponentTestController) 
    .then((fixture: ComponentFixture<any>) => { 
    let query = fixture.debugElement.query(By.directive(UnitTestingComponent)); 
    expect(query).toBeTruthy(); 
    expect(query.componentInstance).toBeTruthy(); 

    // fixture.detectChanges(); 
    expect(query.componentInstance.name).toBe('foo'); 
    query.triggerEventHandler('click',{}); 
    expect(query.componentInstance.name).toBe('bar'); 
    // fixture.detectChanges(); 
    }); 
})); 

E qui è UnitTestingComponentTestController

@Component({ 
selector: 'test', 
template: ` 
<app-unit-testing></app-unit-testing> 
`, 
directives: [UnitTestingComponent] 
}) 
class UnitTestingComponentTestController { 
} 

Questo test non riesce con questo messaggio:

Expected 'foo' to be 'bar'. 

Ecco la firma del metodo per triggerEventHandler()

triggerEventHandler(eventName: string, eventObj: any): void; 

La mia domanda è come posso lanciare un evento e testarlo con angular2.

Una soluzione potrebbe essere quella di chiamare onClick() metodo su componentInstance ma in questo caso abbiamo appena testare interna della classe e non il comportamento componente

Answer 1

Dopo aver letto this articolo, ora posso innescare cliccare evento dentro il mio test Questo approccio non utilizza triggerEventHandler. Se il modello è qualcosa di simile:

<div class="my-class" (click)="onClick()"> 
    <ul id="my-id"> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 

è possibile utilizzare per attivare fixture.nativeElement.querySelector(<your selector>).click() cliccare evento su selezionato elemento. questo approccio richiede javascript click() funzione (vedi this)

È possibile selezionare elemento in base alla sua id, class o percorso (XPath?). Per esempio:

fixture.nativeElement.querySelector('.my-class').click() 

o

fixture.nativeElement.querySelector('#my-id').click() 

o

fixture.nativeElement.querySelector('div>ul>li').click()