Question

的以下组件的正确方向

import * as Leaflet from "leaflet";

export class GeoFencingComponent {

    map: any;

    constructor() {
         this.map = Leaflet
            .map( "map" )
            .locate( {
                enableHighAccuracy: true,
                setView: true,
                maxZoom: 16
            } );
         Leaflet.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" )
            .addTo( this.map );
    }
}

到目前为止，我进行了以下茉莉花测试;但是这给了我undefined不是构造函数错误 -

it( 'expect something...', () => {
        spyOn( Leaflet, 'tileLayer' );
        expect( Leaflet.tileLayer ).toHaveBeenCalled();
    } );

可能发生的事情是我完全错过了这个概念，并以错误的方式进行。

Answer 1

我会将代码从构造函数移动到OnInit。构造函数调用一次，onInit调用多个实例。

ngOnInit(): void {
this.map = Leaflet
  .map("map")
  .locate({
    enableHighAccuracy: true,
    setView: true,
    maxZoom: 16
  });
Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
  .addTo(this.map);

}

您需要确保实际调用tileLayer（而不仅仅是存根），因为您使用addTo函数链接它。所以应该使用callThrough。

所以这样的事情应该有效：

    beforeEach(() => {
      spy = spyOn(Leaflet, 'tileLayer').and.callThrough();
      fixture = TestBed.createComponent(LeafletComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('expect something...', () => {
      fixture.detectChanges();
      expect(spy).toHaveBeenCalled();
    });

关于测试使用第三方JS库的NG2组件的建议

1 个答案: