Angular Google 地图业力测试

Question

我更新了一个 Angular 项目 (8 -> 11) 和依赖项。之前项目用的是@agm/core(https://github.com/SebastianM/angular-google-maps)包，不兼容Angular11，所以我换了，按照提示直接使用@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>

将 Link 添加到 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 地图 API 以进行测试？

Answer 1

我现在用 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 Google 地图业力测试

Angular Google Maps Karma Testing

angular

typescript

google-maps-api-3

karma-runner

angular-google-maps