2

我刚刚为我的 ionic+angular 应用程序创建了一个带有地图的组件。

这很简单，只需在一个位置显示一个标记：

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

我的测试是默认的 ionic（刚刚添加的 AGM 模块）：

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 秒才能完成？

我收到超时 - 在 jasmine.DEFAULT_TIMEOUT_INTERVAL 错误指定的超时内未调用异步回调

4

1 回答 1

0

我想它是卡在第一个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();
  }));
于 2020-10-05T18:32:32.240 回答