Ionic async unit test with LoadingController - unit-testing

Question

I have an Ionic Angular Application and I am trying to write a simple unit test for the service method. The method displays a Loading spinner and then returns true.
See the code below:
Service.specs.ts
import {
TestBed,
ComponentFixture,
inject,
fakeAsync,
tick,
flushMicrotasks,
} from '#angular/core/testing'; import { GeneralmethodsService } from './generalmethods.service';
import { DomSanitizer } from '#angular/platform-browser';
import { ActivatedRoute, Router } from '#angular/router';
import { HTTP } from '#ionic-native/http/ngx';
import { Network } from '#ionic-native/network';
import { AlertController, LoadingController, ModalController, ToastController } from '#ionic/angular';
import { HandleNetworkService } from './handle-network.service';
import { TmmserviceService } from './tmmservice.service';
import { TranslateService } from '#ngx-translate/core';
describe('GeneralmethodsService xxx', () => {
let modalController: ModalController;
let tmmserviceServiceNatice: TmmserviceService;
let loadingController: LoadingController;
let router: Router;
let toastController: ToastController;
let translate: TranslateService;
let Service: GeneralmethodsService;
beforeEach(async () => {
TestBed.configureTestingModule({
providers: [
GeneralmethodsService,
{
provide: LoadingController,
useValue: {
create: () => Promise.resolve(),
dismiss: () => Promise.resolve()
}
}
]
}).compileComponents();
Service = new GeneralmethodsService(
modalController,
router,
loadingController,
tmmserviceServiceNatice,
toastController,
translate
);
});
it('test testPist', fakeAsync(() => {
return Service.testPist().then(async (data) => {
expect(data).toBe(true);
flushMicrotasks();
});
}));
});
Below you can see the method implementation in the service
Service.ts
async testPist(){
let loading = await this.loadingController.create();
await loading.present();
loading.dismiss();
return true;
}
This is the error I'm getting:
Error
Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'create')
TypeError: Cannot read properties of undefined (reading 'create')
Can someone tell me what am I doing wrong?
Thanks in advance

Answer 1

Yes, because the loadingController is undefined.
Follow the comments with !!
TestBed.configureTestingModule({
providers: [
GeneralmethodsService,
{
provide: LoadingController,
// !! You defined loading controller here in the TestBed module
useValue: {
create: () => Promise.resolve(),
dismiss: () => Promise.resolve()
}
}
]
}).compileComponents();
// Service = new GeneralmethodsService(
// modalController,
// router,
// !! at this point loadingController is undefined
// loadingController,
// tmmserviceServiceNatice,
// toastController,
// translate
// );
// !! comment out the above and get a handle on the service using the TestBed
Service = TestBed.inject(GeneralMethodsService);
});
Doing the above changes should hopefully get you unblocked. Since you have a TestBed.configureTestingModule and it is configured, we can use that to get a handle on the service under test.