Angular 在测试中使用 GoogleMaps 时出错

Question

我正在使用 Angular Material google 地图组件将地图集成到 Ionic/Capacitor 应用程序中。

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

我至少可以告诉你我是如何使用 Angular Google Maps. I have an archived repository and website that used to use a Google map with a marker on it 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;

Answer 2

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

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

Answer 3

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

看看我的karma.conf file。

这里是 google-maps-api.js file

❕ Note that this means you might have to manually redownload and replace the file if Google releases any breaking changes. Probably not a big deal. Just something to keep in mind.

Another side note, have a look at my library @bespunky/angular-google-maps. In addition to the great features it offers, it also has a testing suite.

干杯

Angular 在测试中使用 GoogleMaps 时出错

Angular GoogleMaps error when using it in test

google-maps

ionic-framework

angular

capacitor