Testing in Angular2 and Jasmine

Question

I have a simple spec written for a component, and my question is around the behavior of the test.

To test will check if a component is created. It looks as though when I run the test, the suite is first compiling and running the Component class, checking for certain variable states, and if they are not met, the test is failing.

Please see the following case for example:

Component Constructor:

constructor(
    public route: ActivatedRoute,
    public pageService: PageService,
    private homeService: HomeService,
    public staticInfoService: StaticInfoService,
    private lang: LangService,
    public router: Router,
    public usersService: UsersService,
) {
    super(pageService, route);
    this.route.data.subscribe(data => {

        this.entityCounts = data.number;
        console.log(' +++ entity counts are ', data.number);
    });

    this.getRecentSelections();
    this.setEntityTotals();

}

the test for this component is pretty straightforward - check if the component is defined.

Component.spec.ts

fit('should create', () => {
    expect(component).toBeTruthy();
});

and i belive the spec is set up correctly. However the error message I receive when running the test is :

TypeError: data is null in src/test.ts (line 46535)

however I have mocked this route out, complete with the data.

class MockRouter {
    navigate = jasmine.createSpy('navigate');

    data = {
        value: 100,
    };
}

expect(mockRouter.data).toBeDefined();

and when expecting it to be defined, the same error message is thrown.

if someone could provide insight as to why exactly this test is causing this issue, it would be most appreciated. thanks,

score 0 · Answer 1 · answered Feb 06 '18 at 12:54

0

The data property type is observable. So you should pass the mock data as an observable type. then only you can subscribe it

Try this

import 'rxjs/add/observable/of';// import this
class MockRouter {
navigate = jasmine.createSpy('navigate');
data = Observable.of(100);   
}

answered Feb 06 '18 at 12:54

Ramesh Rajendran

37,412
45
153
234

thanks for the suggestion, the error message remains the same. – noddy212 Feb 06 '18 at 13:39

score 0 · Answer 2 · answered Feb 06 '18 at 14:39

It is generally a bad practice to subscribe to observables in the constructor. Use the lifecycle method ngOnInit to subscribe.

Also, you should mock your ActivatedRoute, not your Router. Check this question on how to mock an ActivatedRoute How to unit test a component that depends on parameters from ActivatedRoute?

Testing in Angular2 and Jasmine

2 Answers2