在测试中使用它时出现 Angular GoogleMaps 错误

Question

我正在使用 Angular Material 谷歌地图组件将地图集成到离子/电容器应用程序中。

https://github.com/angular/components/tree/master/src/google-maps

当我开发应用程序时，地图功能可以正常工作。当我尝试为实现 Google 地图的组件运行测试文件时，我收到此错误：

Failed: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:202:1)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:441:49)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4029:1)
    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7964:1)
    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7330:1)
    at ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13902:1)
    at HomePage_Template (ng:///HomePage.js:79:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7303:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7112:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8373:1)

karma.conf.js（这是最后的努力，运气不好。）：

config.set({
  ...
  plugins: [
    ...
    require('@angular/google-maps')
  ],
  ...
});

HTML：

<google-map>
    <map-rectangle
      *ngIf="showSelectionUI"
      [bounds]="bounds"
      [options]="options"
    ></map-rectangle>
    <map-marker
      #marker="mapMarker"
      *ngFor="let position of markerPositions"
      [position]="position"
     ></map-marker>
</google-map>

打字稿：

@ViewChild(GoogleMap) map: GoogleMap;

@ViewChild(MapRectangle) rectangle: MapRectangle;

这是整个规范文件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { Storage } from '@ionic/storage';

import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { GoogleMapsModule, GoogleMap } from '@angular/google-maps';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule,
        GoogleMapsModule,
        GooglePlaceModule
      ],
      providers: [
        {
          provide: Storage,
          useValue: {
            get: () => 'manual'
          }
        }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

我在开发库时遇到了同样的问题。 解决方案是从 Google 下载 JavaScript API 文件，将其保存到工作区，然后配置 karma 以在运行测试之前加载它。

看看我的karma.conf file。

这里是google-maps-api.js file

❕ 请注意，这意味着如果 Google 发布任何重大更改，您可能必须手动重新下载并替换文件。可能没什么大不了的。只是需要记住的一点。

? 另一个旁注，看看我的图书馆@bespunky/angular-google-maps。除了它提供的强大功能外，它还有一个测试套件。

干杯?

Answer 2

我遇到了类似的问题，在被困几天后，我决定我的单元测试不应该关心地图组件本身，所以我使用 ng-mocks 模拟了 GoogleMap、MapInfoWinfow 和 MapMarker。

在某种程度上，这为我解决了问题。

Answer 3

我至少可以向您展示我是如何使用Angular Google Maps 做到这一点的。我有一个存档的存储库和网站，它曾经使用带有标记的谷歌地图here。

app.module.ts

import { AgmCoreModule } from '@agm/core';

组件的HTML模板

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng" [mapTypeId]="'hybrid'" style="height: 600px;">
    <agm-marker  [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>

组件的Typescript模板

lat: number = 41.6600203;
lng: number = -88.7526228;
zoom: number = 15;