I've been writing some tests as part of a project I'm working on, and for some reason I could not get a mocked Observable to resolve. This will explain the mistake I made and how to fix it.
The Setup
This component used a resolver to load data before the component loaded. To access a resolver's data, you inject the activated route into the constructor, like this:
constructor(private route:ActivatedRoute){}
In the ngOnInit(), you'd subscribe to the data property:
ngOnInit(){
this.route.data.subscribe((data: {myValue}){
this.myValue = data.myValue
}
);
}
This saves your MyValue data from the resolver into the local component instances myValue.
Writing The Tests
First, I mocked the ActivatedRoute:
class ActivatedRouteMock {
data: Observable<Data>;
}
Then, I created an instance of it:
const activatedRoute = new ActivatedRoutMock();
As part of the TestBed's providers:
{ provide: ActivatedRoute, useValue: activatedRoute}
The first test I wrote was to make sure the subscribe was actively working.
First, I created the observer and component:
const observer;
beforeEach(() => {
activatedRoute.data = Observable.create (observer) => {
observer = observer;
}
spyOn(activatedRoute.data, 'subscribe');
component = TestBed.createComponent(myComp).componentInstance;
});
Then, I ran the test:
it('should subscribe to activated route', () => {
expect(activatedRoute.data.subscribe).toHaveBeenCalled();
});
This worked great. Now, I wanted to test to make sure that other methods inside the component's result function worked. To do that I'll have manually trigger the observer:
it('should resolve route data and save myValue'. ()=>}
const myValue = "something";
const results = {};
results['myValue'] = myValue;
observer.next(results);
observer.component();
expect(component.myValue).toBe(myValue);
});
This should work, right? Nope, it failed ever time. The observer was always null. I was scratching my head and adding a lot of breakpoints and outputs trying to figure out what I had done wrong so far.
What is wrong
The function to create the observable is never run until the observable is subscribed to. Clearly we are subscribing to it in the component code:
this.route.data.subscribe((data: {myValue}){
this.myValue = data.myValue
}
So, why doesn't it run? Think about it first, because spoilers are below.
The spy is getting in the way:
spyOn(activatedRoute.data, 'subscribe');
Because of the spy in place, the subscribe() function is intercepted, and as such never run, which never runs the function in the Observable's create function, which never saves the Observer. The solution was simple once I figured out what was going on:
spyOn(activatedRoute.data, 'subscribe').and.callThrough();
Tell the spy to intercept and watch, but still allow the call to go through.
Everything started working wonderfully. :-)
