Ho un componente che utilizza un EventEmitter e EventEmitter viene utilizzato quando si fa clic su qualcuno sulla pagina. C'è un modo per osservare EventEmitter durante un test unitario e utilizzare TestComponentBuilder per fare clic sull'elemento che attiva il metodo EventEmitter.next() e vedere cosa è stato inviato?Un modo per testare EventEmitter in Angular2?
risposta
Il test potrebbe essere:
it('should emit on click', inject([],() => {
tcb.createAsync(MyComponent)
.then((fixture) => {
// spy on event emitter
let component = fixture.componentInstance;
spyOn(component.myEventEmitter, 'emit');
// trigger the click
let nativeElement = fixture.nativeElement;
let button = nativeElement.querySelector('button');
button.dispatchEvent(new Event('click'));
fixture.detectChanges();
expect(component.myEventEmitter.emit).toHaveBeenCalledWith('hello');
});
}));
quando il componente è:
@Component({ ... })
class MyComponent {
@Output myEventEmitter = new EventEmitter();
buttonClick() {
this.myEventEmitter.emit('hello');
}
}
Se si tratta di un ancoraggio che si sta cliccando invece di un pulsante, il selettore di query dovrebbe essere solo un pulsante anziché? Sto usando qualcosa esattamente come quel componente, ma il 'expect (value) .toBe (' hello ');' non viene mai eseguito. Mi chiedo se sia perché è un'ancora invece. – tallkid24
Ho aggiornato la mia risposta con un metodo più pulito per testare, usando una spia invece di un emettitore reale, e penso che dovrebbe funzionare (questo è quello che effettivamente faccio per i campioni nel mio ebook). – cexbrayat
Questo funziona benissimo! Sono nuovo nello sviluppo front-end, in particolare l'unità che lo testa. Questo aiuta molto. Non sapevo nemmeno che esistesse la funzione spyOn. – tallkid24
È possibile iscriversi all'emettitore o associarvi ad esso, se è un @Output()
, nel modello principale e controllare il componente principale se il collegamento è stato aggiornato. Puoi anche inviare un evento click e l'abbonamento dovrebbe attivarsi.
Quindi, se mi è piaciuto emitter.subscribe (dati => { }); come ottenere l'output next()? – tallkid24
Esattamente. Oppure il modello in 'TestComponent' ha'
Diciamo che avete un metodo chiamato buttonClick()
che attiva un emettitore evento chiamato eventEmitter
, è possibile iscriversi alla manifestazione e quindi chiamare il metodo per verificare se l'evento si attiva e chiamare il callback done()
quando lo fa ...
@Component({ ... })
class MyComponent {
@Output eventEmitter = new EventEmitter();
buttonClick() {
this.eventEmitter.emit('bar');
}
}
E poi nel test ...
it('should emit on click', (done) => {
component.eventEmitter.subscribe(foo => {
expect(foo).toEqual('bar');
done();
});
component.buttonClick();
});
In alternativa, è possibile utilizzare una spia, dipende dal vostro stile. Ecco come si usa una spia facilmente per vedere se emit
che viene sparato fuori ...
it('should emit on click', fakeAsync(() => {
spyOn(component.eventEmitter, 'emit');
component.buttonClick();
tick(1);
expect(component.eventEmitter.emit).toHaveBeenCalled();
expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar');
}));
- 1. Impossibile capire EventEmitter o sintassi osservabili corretti nei servizi Angular2
- 2. Posso passare variabili usando EventEmitter dal componente angular2?
- 3. Quando utilizzare Observable vs EventEmitter vs Dot Rule per il rilevamento del cambiamento in angular2
- 4. Un modo corretto per testare le gemme
- 5. Esiste un modo idiomatico per testare l'uguaglianza dell'array in Coffeescript?
- 6. C'è un modo per testare il riferimento circolare in JavaScript?
- 7. Usa EventEmitter in classe ES6
- 8. Esiste un modo semplice per testare due PNG per l'uguaglianza?
- 9. Esiste un modo per testare una variabile per "isForEachable"
- 10. E 'regex un buon modo per testare un url
- 11. Un modo semplice per testare un carico pigro proprietà
- 12. node.js eventEmitter + http.request
- 13. Eventi Golang: EventEmitter/dispatcher per architettura plug-in
- 14. Angular2 ngOnDestroy, emit evento
- 15. Modo efficiente per testare la connessione ODBC
- 16. Modo elegante per testare la disponibilità SSH
- 17. Esiste un modo per verificare la presenza di @Output da un componente in Angular 2?
- 18. modo migliore per testare se un tipo è una raccolta
- 19. Esiste un modo per testare l'unità contro gli effetti collaterali?
- 20. Parametri del passaggio con EventEmitter
- 21. Hamcrest - Un modo elegante per testare oggetti complessi con samepropertyvaluesas
- 22. unit test angular2: come testare gli eventi con tiggerEventHandler
- 23. angular2 - Evento trigger in direttiva dal componente
- 24. NodeJS EventEmitter con classe TypeScript
- 25. Il modo migliore per testare i valori booleani in Rspec
- 26. Qual è un buon modo per testare un file per vedere se è un file zip?
- 27. Qual è il modo migliore per testare un'app per rails?
- 28. Angular2, annullare l'iscrizione dall'evento in ngOnDestroy
- 29. Angular2 modo più semplice per memorizzare le risposte HTTP
- 30. Mock un servizio per testare un controller
Potete fornire una plunker che mostra quello che hai provato, allora posso avere uno sguardo per aggiungere i pezzi mancanti. –