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

Posted 2023-03-16

【中文标题】在测试中使用它时出现 Angular GoogleMaps 错误

【英文标题】：Angular GoogleMaps error when using it in test

【发布时间】：2021-04-26 13:25:02

【问题描述】：

我正在使用 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();
  );
);

【参考方案1】：

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

看看我的karma.conf file。

这里是google-maps-api.js file

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

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

干杯?

【参考方案2】：

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

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

【参考方案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;

【讨论】：

所以，地图的实现没问题。这只是我收到此错误的测试文件。我对切换框架持开放态度，但我已经从 Cordova 地图转移到了 angular/components 谷歌地图。因此，如果我在测试设置中遗漏了一件小事，我会犹豫是否要再次执行该过程。

我最近从 agm/core 迁移到 Google Maps 的原生 Angular 实现，主要是因为 Angular 10 及更高版本不支持 agm/core。我面临同样的命名空间问题，仅在单元测试中。