Using observable data services using an asynchronous channel to update data directly in a view that is difficult to test (normally works fine).
I want to be able to update the view, start clicks, and then verify that the model has been updated (as a result of a click) correctly, but in the test the asynchronous channel does not display anything when its associated observed event triggers. Therefore, I can not interact with the DOM in the test and check the results of the interaction.
It is impossible to find examples when someone does unit tests with components that specifically use async channels, so I don’t understand. Any feedback is appreciated.
Test:
it('Updates the availability model correctly after UI interaction.', done => { this.instance.morning$ .subscribe(data => { let checkboxes = this.fixture.nativeElement.querySelectorAll('ion-checkbox'); TestUtils.trigger(checkboxes[0], 'click'); let morningModel = this.instance.model.morning; expect(morningModel[0].v).toEqual(true); done(); }); });
Template:
<td *ngFor="let day of morning$ | async"> <ion-checkbox [(ngModel)]="day.v"></ion-checkbox> </td>
component:
@Component({ templateUrl: 'build/modules/availability/availability.view.html', selector: 'availability', providers: [AvailabilitySvc], directives: [Checkbox] }) export class AvailabilityCom { @Input() userId: string; public morning$: any; constructor(private svc: AvailabilitySvc) { this.morning$ = svc.morning$; this.setEvents(); } ngOnInit(){ this.getAvailability(); } getAvailability(){ return this.svc.get(this.userId); } };
Service service. get () usually contains a call to the http provider, but in the layout I just call on with the layout model to the layout and returning the observable.
let subjectMock = new BehaviorSubject(model); let observableMock$ = subjectMock.asObservable(); export class ServiceMock{ get(id:string):any { subjectMock.next(model) return observableMock$; } get morning$(){ return observableMock$.map((model:any) => model.morning); } }
source share