如何解决在具有AGM的页面上创建单元测试时,“异步功能在5000毫秒内未完成”
我刚刚为我的ionic + angle应用程序创建了一个带有地图的组件。
<ion-header>
<ion-toolbar color="primary">
<ion-title>Spots</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</ion-content>
和TS文件:
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-map',templateUrl: './map.page.html',styleUrls: ['./map.page.scss'],})
export class MapPage implements OnInit {
lat = 51.678418;
lng = 7.809007;
constructor() { }
ngOnInit() {
}
}
它有效,我得到了我的地图。为了进行测试,我必须另外安装@types/googlemaps
:
npm install --save-dev @types/googlemaps
但是现在我的测试给了我这个错误:
Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
import { AgmCoreModule } from '@agm/core';
import { async,ComponentFixture,Testbed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { MapPage } from './map.page';
describe('MapPage',() => {
let component: MapPage;
let fixture: ComponentFixture<MapPage>;
beforeEach(async(() => {
Testbed.configureTestingModule({
declarations: [MapPage],imports: [
IonicModule.forRoot(),AgmCoreModule.forRoot({
apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',}),],}).compileComponents();
fixture = Testbed.createComponent(MapPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create',() => {
expect(component).toBeTruthy();
});
});
知道发生了什么吗?我没有太多有关错误的信息,而且我有点丢失了什么异步功能可能尚未完成,什么可能是错误的?是测试吗?还是代码?
修改 如果我只是像这里指定的那样增加超时,它可以工作,但是我不知道需要5秒钟才能完成?
解决方法
我认为它被卡在beforeEach
的第一个compileComponents
上。也许它不喜欢这种配置。
添加以下日志以确认可疑之处:
beforeEach(async(() => {
console.log('In Before Each');
TestBed.configureTestingModule({
declarations: [MapPage],imports: [
IonicModule.forRoot(),AgmCoreModule.forRoot({
apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',}),],}).compileComponents();
console.log('In after compile components');
fixture = TestBed.createComponent(MapPage);
component = fixture.componentInstance;
fixture.detectChanges();
console.log('After calling fixture.detectChanges');
}));
我认为您不会看到In after compile components
,并且我认为您不需要IonicModule.forRoot()
。 https://www.joshmorony.com/introduction-to-testing-ionic-2-applications-with-testbed/
如果看不到In after compile components
,则说明您的导入或配置有问题。
尝试一下:
import { NO_ERRORS_SCHEMA } from '@angular/core';
....
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MapPage],schemas: [NO_ERRORS_SCHEMA],// NO_ERRORS_SCHEMA basically says if you don't
// understand HTML markup,ignore it.
}).compileComponents();
fixture = TestBed.createComponent(MapPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。