使用 LoadingController 进行离子异步单元测试

Question

我有一个 Ionic Angular 应用程序，我正在尝试为服务方法编写一个简单的单元测试。该方法显示一个 Loading 微调器，然后返回 true。

请看下面的代码：

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();
    });
  }));
});

下面可以看到服务中的方法实现 Service.ts

  async testPist(){
    let loading = await this.loadingController.create();
    await loading.present();
    loading.dismiss();
    return true;
  }

这是我得到的错误：

错误

错误：未捕获（承诺中）：TypeError：无法读取未定义的属性（读取“创建”） TypeError: Cannot read properties of undefined (reading 'create')

谁能告诉我我做错了什么？

提前致谢

Answer 1

是的，因为 loadingController 未定义。

用 !! 关注 cmets

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);
  });

进行上述更改有望让您畅通无阻。由于您有一个 TestBed.configureTestingModule 并且已配置，因此我们可以使用它来获取被测服务的句柄。