如何使用 NgZone 和 Google 地点测试 Angular 指令？

Question

我没有找到如何测试我的角度指令...

google-places.directive.ts

import { Directive, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
import {} from '@types/googlemaps';

@Directive({
  selector: '[appGooglePlace]'
})
export class AppGooglePlaceDirective {
  @Output() placeChange: EventEmitter<any> = new EventEmitter<any>();

  constructor(private el: ElementRef, private ngZone: NgZone) {
    const autocomplete = new google.maps.places.Autocomplete(this.el.nativeElement);
    autocomplete.addListener('place_changed', () => {
      this.ngZone.run(() => {
        const place = autocomplete.getPlace();
        this.placeChange.emit(place);
      });
    });
  }
}

mypage.component.html

<input type="search" appGooglePlace (placeChange)="placeChanged($event)"/>

它在应用程序中工作正常，但不能使用 ng test，我不知道如何编写它......

我有一个错误：

“ReferenceError: google 未定义”

开发控制台中出现以下错误：

访问脚本在 'https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=places' 来自原点“http://localhost:9876”已被 CORS 策略阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:9876” 访问。

如果我不在指令中导入@types/googlemaps，首先它是相同的行为，但我不知道为什么在测试中我得到这个错误。我需要在 karma/jasmine 中的某处定义类型吗？？

其次，我的 spec.ts 可以调用真正的 google api 吗？如果我想测试“placeChange”的返回？

这是我的单元测试尝试：

google-places.directive.spec.ts

import { By } from '@angular/platform-browser';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, ElementRef, DebugElement, NgZone } from '@angular/core';
import { AppGooglePlaceDirective } from './google-place.directive';
import {} from '@types/googlemaps';
@Component({
  template: `<input type="search" appGooglePlace (placeChange)="placeChanged($event)" name="test"/>`
})
class TestGooglePlaceComponent {}

export class MockElementRef extends ElementRef {}
export class MockNgZone extends NgZone {
  constructor() {
    super({ enableLongStackTrace: false });
  }
}

fdescribe('GooglePlaceDirective', () => {
  let component: TestGooglePlaceComponent;
  let fixture: ComponentFixture<TestGooglePlaceComponent>;
  let zone: NgZone;
  let searchInput: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestGooglePlaceComponent, AppGooglePlaceDirective],
      providers: [{ provide: NgZone, useClass: MockNgZone }]
    });

    fixture = TestBed.createComponent(TestGooglePlaceComponent);
    component = fixture.componentInstance;
    searchInput = fixture.debugElement.query(By.css('input[name=test]'));
    zone = new MockNgZone();
  });

  it('should create an instance', () => {
    const directive = new AppGooglePlaceDirective(new MockElementRef(searchInput), zone);
    expect(directive).toBeTruthy();
  });
});

感谢您的帮助！我真的迷失了如何编写这个单元测试......

Answer 1

把它放在你的导入下： 声明 var google: any;