3

アプリケーション用に を作成しようとしてspec.tsいます。悲しいことに、これは のLoadingControllerを使用していionic-angularます。ここで、モジュールを構成しようとしているときに、LoadingController を提供する必要があります (モジュールのコンストラクターにあるため)。

私が現在直面している問題は、LoadingController にAppオブジェクト/インスタンスを提供したいということです。(_app: Appパラメータ)

必死だったのでIonic自身に聞いてみました。ギットハブ #8539

しかし、それは問題ではなく質問だったので、彼らは私の質問を閉じました. これが不可能な場合や方法がわからない場合は残念です。これは非常に優れた機能であり、LoadingController だけでなく、AlertController と ToastController も影響を受けるためです。

私のテストベッド構成atm：

TestBed.configureTestingModule({
    declarations: [EventsPage],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [
      {provide: APICaller, useValue: mockAPICaller},
      {provide: NavController, useValue: mockNavController },
      {provide: LoadingController, useValue: ???????}, //it seems like everything I try to enter here fails.
    ],
    imports: [FormsModule]
  });

そして EventsPage コンストラクター:

constructor(public apiCaller: APICaller, public navCtrl: NavController,
             public loadingCtrl: LoadingController){}

編集: LoadingController の使用

getEvents() {
    // setup a loadingscreen
     let loading = this.loadingCtrl.create({
      content: "Loading..."
    }); 
   // present the loadingscreen
    loading.present();

    // reset the noEvents boolean.
    this.noEvents = true;

    // call the api and get all events
    this.apiCaller.getEvents()
    .subscribe(response => {
      // response is list of events
      this.events = response;
      // if the event is not empty, set noEvents to false.
      if (this.events.length > 0) {
        this.noEvents = false;
      }
      // close the loading message.
     loading.dismiss();
    });
  }

次に、このloadingspinnerになります（テキストが異なります）

ionicの読み込み

4

1 に答える 1

7

このタイプの場合、( の使用に関して) UI で何もテストしたくない可能性がありますLoadingController。テストする必要があるのは、コンポーネントの動作です。LoadingControllerしたがって、あなたがやりたいことのモックを作成するときは、重要なメソッドをスパイすることであり、 LoadingController. これを行うと、次のようなテストを書くことができます

expect(loadingController.someMethod).toHaveBeenCalled();
// or
expect(loadingController.someMethod).toHaveBeenCalledWith(args);

モックは、モックされる項目の実際の構造に従う必要もありません。たとえばLoadingController.create、オブジェクトを返しLoadingます。モックでは、これは必要ありません。必要に応じて、 を呼び出すときにモック自体を返すcreateだけでよく、モックには必要なメソッドが含まれLoadingています。

コントローラーの動作をテストしているだけであることを忘れないでください。モックが実際に何をするかは問題ではなくLoadingController、メソッドを呼び出すことができ、テストをチェックインして、呼び出されると予想されるときに呼び出されることを確認します。それ以外は、実際の動作を想定LoadingControllerする必要があります。

だからあなたは次のようなものを持つことができます

let mockLoadingController = {
  // Tried `create: jasmine.createSpy('create').and.returnValue(this)
  // seem this doesn't work. We just create the spy later
  create: (args: any) => { return this; },
  present: jasmine.createSpy('present'),
  dismiss: jasmine.createSpy('dismiss')
};
spyOn(mockLoadingController, 'create').and.returnValue(mockLoadingController);

{ provide: LoadingController, useValue: mockLoadingController }

次に、テストで次のようなことを行うことができます

it('should create loader with args ...', () => {
  ...
  expect(mockLoadingController.create).toHaveBeenCalledWith({...})
})
it('should present the loader', () => {
  ...
  expect(mockLoadingController.present).toHaveBeenCalled();
})
it('should dismiss the loader when the api call returns', async(() => {
  ..
  expect(mockLoadingController.dismiss).toHaveBeenCalled();
}))

これが私が今テストに使用したものです

class LoadingController {
  create(args: any) { return this; }
  present() {}
  dismiss() {}
}

@Component({
  template: ''
})
class TestComponent {
  constructor(private loadingController: LoadingController) {}

  setEvents() {
    let loading = this.loadingController.create({hello: 'world'});

    loading.present();
    loading.dismiss();
  }
}

describe('component: TestComponent', () => {
  let mockLoadingController;

  beforeEach(async(() => {
    mockLoadingController = {
      create: (args: any) => { return this; },
      present: jasmine.createSpy('present'),
      dismiss: jasmine.createSpy('dismiss')
    };
    spyOn(mockLoadingController, 'create').and.returnValue(mockLoadingController);

    TestBed.configureTestingModule({
      declarations: [TestComponent],
      providers: [
        { provide: LoadingController, useValue: mockLoadingController }
      ]
    });
  }));

  it('should calling loading controller', () => {
    let comp = TestBed.createComponent(TestComponent).componentInstance;
    comp.setEvents();

    expect(mockLoadingController.create).toHaveBeenCalledWith({ hello: 'world'});
    expect(mockLoadingController.present).toHaveBeenCalled();
    expect(mockLoadingController.dismiss).toHaveBeenCalled();
  });
});

関連項目:

于 2016-10-11T13:47:38.567 に答える