时间戳

首页 > 解决方案 > Angular 谷歌地图业力测试

angular - Angular 谷歌地图业力测试

问题描述

我更新了一个 Angular 项目（8 -> 11）和依赖项。以前该项目使用的是@agm/core（https://github.com/SebastianM/angular-google-maps）包，它与 Angular 11 不兼容。所以我替换了它并按照建议@angular/google-maps直接使用。没什么大不了的，除了测试之外，一切都按预期工作。

该地图是组件的一部分，Google API 已加载到那里（防止多次加载）：

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { GoogleMap } from '@angular/google-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  apiLoaded: Observable<boolean>;

  constructor(httpClient: HttpClient) {
    if (window.google === undefined) {
      this.apiLoaded = httpClient.jsonp(`https://maps.googleapis.com/maps/api/js?key=${environment.googleAPIKey}`, 'callback')
          .pipe(
            // Doing preparation stuff
          );
    }
    else {
      this.apiLoaded = of(true);
    }
  }

}

运行ng serve一切都按预期工作。但是由于已经有很多测试，我遇到了运行问题ng test：

Unhandled promise rejection: InvalidValueError: ng_jsonp_callback_0 is not a function
error properties: null({ constructor: Function })
Error: 
    at new ge (https://maps.googleapis.com/maps/api/js?key=<api-key>&callback=ng_jsonp_callback_0:70:72)
    at Object._.he (https://maps.googleapis.com/maps/api/js?key=<api-key>&callback=ng_jsonp_callback_0:70:182)
    at Nj (https://maps.googleapis.com/maps/api/js?key=<api-key>&callback=ng_jsonp_callback_0:146:233)
    at https://maps.googleapis.com/maps/api/js?key=<api-key>&callback=ng_jsonp_callback_0:146:118
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:123:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:857:1
    at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:399:1)
    at Zone.runTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:167:1)
    at drainMicroTaskQueue (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:569:1)

所以我猜在测试期间谷歌 API 不存在。我已经尝试了以下事情但没有成功：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    files: [
      'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY'
    ],

  beforeEach(waitForAsync(() => {
    httpClient.jsonp(`https://maps.googleapis.com/maps/api/js?key=${environment.googleAPIKey}`, 'callback');

我仍然想尝试将 API 加载移动到服务中，但我认为这不会改变任何事情。此外，下载 API 预测试以将其加载到 Karma 配置中似乎也不是一个好的解决方案。

如何确保以优雅的方式提供当前的 Google Maps API 以进行测试？

标签： angulartypescriptgoogle-maps-api-3karma-runnerangular-google-maps

解决方案

我现在用一个pretest脚本修复了它：

package.json：

//...
  "scripts": {
    //...
    "pretest": "./pretest.sh",
    "test": "ng test",
//...

该脚本在测试之前加载 API 代码 ( pretest.sh)：

echo "Running 'pretest.sh' script do download Google Maps API for testing..."
rm google-maps-api.js
date +"// Download time: %Y-%m-%d %H:%M" >> google-maps-api.js
curl 'https://maps.googleapis.com/maps/api/js?key=<API_KEY>' >> google-maps-api.js
echo "'pretest.sh' finished"

Karma 在文件部分加载文件进行测试karma.config.js：

module.exports = function (config) {
  config.set({
    basePath: '',
    plugins: [
      //...
    ],
    files: [
      'google-maps-api.js'
    ],

推荐阅读