Angular-Testing: Angular5 spyOn not working in child components

Question

I have an angular app and its one child module is loading by lazy loading. I am using this code in app.routing.ts to load that module.

{
    path: '',
    component: FullLayoutComponent,
    data: {
        title: 'Home'
    },
    children: [
        {
            path: 'dashboard',
            loadChildren: './views/dashboard/dashboard.module#DashboardModule'
        }
    ],
    canActivate: [LoggedInGuard]
},

Now in all the components in dashboard module my unit testing is not working. i.e. because spyOn is not working. let me show the spec file code and actual function

it('be able to call getDemographicsData function from ngOnInit', () => {
        spy = spyOn(programDemographicsComponent, 'getDemographicsData').and.callThrough();
        spyOn(programDemographicsComponent, 'dateRangeHandler');
        programDemographicsComponent.ngOnInit();
        expect(programDemographicsComponent.getDemographicsData).toHaveBeenCalled();
    });

Function that I am unit testing is:

ngOnInit() {
        this.qualifyingProductsTableCurrentPage = 0;
        this.qualifyingProductsTableValuesPerPage = 5;
        const startDateMillis = moment().subtract(90, 'days').valueOf();
        const endDateMillis = moment().valueOf();
        this.getDemographicsData(startDateMillis, endDateMillis)
    }

    getDemographicsData(startDateMillis, endDateMillis) {
        console.log('spy is not working')
        const metricsRequestData = new MetricsRequest();
        metricsRequestData.startDateMillis = startDateMillis;
        metricsRequestData.endDateMillis = endDateMillis;
        this.getGenderData(metricsRequestData);
        this.getAgeData(metricsRequestData);
    }

Since I am spying the getDemographicsData(startDateMillis, endDateMillis) method in test cases but my console.log('spy is not working') is still working. Please let me know if any more details are needed.

PS. I have checked same issue in parent components and my spyOn is working fine in them. I am facing problem only in components with lazyloading

did you try to add fixture.detectChanges(); after programDemographicsComponent.ngOnInit(); — Fateh Mohamed, Oct 25 '18 at 08:04
Please update question with what fail response you get when running test — Lucho, Oct 28 '18 at 02:50

score 0 · Answer 1 · answered Oct 25 '18 at 08:35

0

As lazy loading is async operation, the tests should also be async. You can see in this SO question how to make it async.

answered Oct 25 '18 at 08:35

vasilv

21
1
4

Angular-Testing: Angular5 spyOn not working in child components

1 Answers1