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)

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

在 index.html 中添加 Google Api 加载：

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

在 files 部分添加指向 Karma 配置文件的链接：

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

下载链接内容，将其放入一个文件中，并将引用的文件添加到 Karma 配置文件部分。这可以运行几次，但很快就会引发错误。ant hus 不是 Jenkins 自动化测试的解决方案。
在线尝试其中一种模拟。现有的测试似乎使用了很多函数，因此使用模拟 API 进行测试也失败了。
在运行测试之前尝试在测试文件中加载 API，但没有按预期工作：

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

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

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

解决方法

我现在用 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'
    ],

angular angular angular-google-maps google-maps-api-3 karma-runner typescript typescript typescript