我正在尝试为我的应用程序创建一个spec.ts
。不幸的是,这是使用LoadingControllerfromionic-angular
。现在,当我试图配置模块时,我需要为它提供loadingcontroller(因为它在模块的构造函数中)。
我目前遇到的问题是loadingcontroller希望提供一个App
对象/实例。(_app: App
参数)
我绝望了,所以我问爱奥尼亚自己。github #8539
但他们关闭了我的问题,因为这是一个问题,而不是一个问题,虽然我有问题意识到,他们没有回应。如果这是不可能的/没人知道怎么做会很遗憾,因为这是一个非常酷的特性,它不仅影响加载控制器,例如,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(使用不同的文本)
最佳答案
对于这种类型的东西,您可能不想在ui中测试任何东西(关于使用LoadingController
)。您应该测试的是组件的行为。因此,当你为LoadingController
创建模拟时,你想做的是监视关键方法,并且你的期望应该测试以确保你调用了LoadingController
上的方法。这样你就可以像
expect(loadingController.someMethod).toHaveBeenCalled();
// or
expect(loadingController.someMethod).toHaveBeenCalledWith(args);
您的模拟也不必遵循被模拟项的实际结构。例如
LoadingController.create
返回一个Loading
对象。在你的嘲笑中,你不需要这个。如果需要,可以在调用create
时返回mock本身,并且在mock中只使用Loading
应该有的方法。记住,你只是在测试控制器的行为。mock
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();
});
});
参见:
Jasmine docs on Spies