Angular2 & TestBed: how to mock AngularFire2 / observable data service?

Question

It is very difficult for me to try to understand how TestBed works, and how to use it to retrieve data (via AngularFire2, i.e. observable) / offline clicks unit test. If someone can provide a simple example, look at this, it will make things a lot easier.

Below (part) StateService. Then I insert this service into another component and print the names of the graphs, for example.

graph-modules.component.html

<div *ngFor="let module of s.graphModules$ | async"><div class="module-card">{{module.name}}</div></div>

graph-modules.component.ts

constructor(public s: StateService){}

state.service.ts

 @Injectable() export class StateService { graphModules$: FirebaseListObservable<any>; private auth; constructor(public af: AngularFire) { af.auth.subscribe( latestAuth => { this.graphModules$ = af.database.list('/graphModules', { query: { orderByChild: 'archived', equalTo: false } }); }, errors => { this.auth = {uid: 'AUTH PROBLEMS'}; throw 'Problems authenticating'; } ); } saveToDB(key: string, value: any) { this.af.database.list('/graphModules').update(key, value); ... } ... } 

What I want to test

1), given the "graphModules" layout / stub, the correct number of .card module will be printed in the DOM.

2) after updating one of the modules using s.saveToDB (), the names are updated in the DOM

On the side of the note, if you have other comments about my “architecture” for finding data that would be very welcome :)

Thank you very much!

EDIT:

Ok, I found out how to fix the number 1. The test passes correctly. Question 2 has not yet been answered. The specification file now looks like this:

count-modules.component.spec.ts

 class MockStateService { public graphModules$: Observable<GraphModule[]>; constructor () { this.graphModules$ = Observable.of<GraphModule[]>([ { name: 'first', ... }, { name: 'second', ... } ]); } updateGraphModule(key: string, value: any) { // Not sure what to put here in order to emit new value on graphModules$ } } describe('ModulesComponent', () => { let fixture: ComponentFixture<ModulesComponent>; beforeEach(() => { this.service = new MockStateService(); TestBed.configureTestingModule({ imports: [AppModule], providers: [{provide: StateService, useValue: this.service }] }); fixture = TestBed.createComponent(ModulesComponent); }); it('should print out two graphModules', async(() => { fixture.whenStable().then(() => { fixture.detectChanges(); const test = fixture.nativeElement.querySelectorAll('.module-card'); expect(fixture.nativeElement.querySelectorAll('.module-card').length).toBe(2); }); })); it('should retrieve new data from observer and update DOM when the first graph-module has been given a new name', async(() => { fixture.whenStable().then(() => { fixture.detectChanges(); this.service.updateGraphModule(0, {name: 'new name'}); // What should I write here to test if the DOM is correctly updated? }); })); })); });