Как проверить угловую директиву с помощью NgZone и Google мест? - PullRequest
Новая
       42

Как проверить угловую директиву с помощью NgZone и Google мест?

0 голосов
/ 16 мая 2018

Я не знаю, как проверить мою угловую директиву ...

google-place.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, и я не знаю, как его написать ...

У меня ошибка:

"ReferenceError: Google не определен"

И следующая ошибка в консоли разработчика:

Доступ к сценарию в 'https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=places' от источника 'http://localhost:9876' заблокировано политикой CORS: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Следовательно, Origin 'http://localhost:9876' не разрешен доступ.

Первое, это то же самое поведение, если я не импортирую @ types / googlemaps в моей директиве, но я не знаю почемув тесте я получаю эту ошибку.Нужно ли мне определять типизацию где-нибудь в karma / jasmine ??

И, во-вторых, могут ли мои spec.ts вызывать настоящий API Google?Если я хочу проверить возврат "placeChange"?

Это моя попытка модульного теста:

google-place.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();
  });
});

Спасибо за вашу помощь!Я действительно потерял к тому, как написать этот модульный тест ...

...