小册子地图故障测试（角度5）

Question

我试图为传单地图编写多个测试，但似乎无法找出正确的执行方式而不会出错。

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            CommonModule,
            FormsModule,
            MomentModule,
            NgbModule.forRoot(),
            ApiModule.forRoot(true),
            ReactiveFormsModule,
            RouterTestingModule,
            SharedModule.forRoot(),
            NgbModalModule,
            ColorPickerModule,
            MapModule
        ],
        declarations: [
            RoutesManagerComponent
        ]
    }).compileComponents();
}));

beforeEach(() => {
    this.fixture = TestBed.createComponent(RoutesManagerComponent);
    this.compInstance = this.fixture.componentInstance;
    this.compiled = this.fixture.debugElement.nativeElement;
    this.routeService = TestBed.get(RouteService);

    spyOn(this.routeService, 'getDropdownOptions').and.callThrough();
    spyOn(this.routeService, 'create').and.callThrough();
    spyOn(this.routeService, 'update').and.callThrough();

    spyOn(this.compInstance, 'clearMap').and.callThrough();
    spyOn(this.compInstance, 'loadStops').and.callThrough();
    spyOn(this.compInstance, 'loadRoute').and.callThrough();
    spyOn(this.compInstance, 'createLeg').and.callThrough();
    spyOn(this.compInstance, 'setRoute').and.callThrough();
    spyOn(this.compInstance, 'ngOnInit').and.callThrough();
    spyOn(this.compInstance, 'save').and.callThrough();
    spyOn(this.compInstance, 'removeLeg').and.callThrough();
    spyOn(this.compInstance, 'onMapClicked').and.callThrough();
    spyOn(this.compInstance, 'addPointToEndOfLegPath').and.callThrough();
    spyOn(this.compInstance, 'addWaypointToLegAtIdx').and.callThrough();
    spyOn(this.compInstance, 'onStopClicked').and.callThrough();
    spyOn(this.compInstance, 'convertPointToWaypoint').and.callThrough();
    spyOn(this.compInstance, 'findNearestSegmentOnPath').and.callThrough();
    spyOn(this.compInstance, 'findClosestPointOnPathForLeg').and.callThrough();
    spyOn(this.compInstance, 'createWaypoint').and.callThrough();
    spyOn(this.compInstance, 'OnWaypointMoved').and.callThrough();
    spyOn(this.compInstance, 'OnWaypointMoveCompleted').and.callThrough();
    spyOn(this.compInstance, 'appendLegToRoute').and.callThrough();
    spyOn(this.compInstance, 'updateLegDurationAndDistance').and.callThrough();
    spyOn(this.compInstance, 'changeRouteColor').and.callThrough()
    spyOn(this.compInstance, 'getCoordsPriorToNewWaypoint').and.callThrough();
    spyOn(this.compInstance, 'findPath').and.callThrough();

    this.fixture.detectChanges();
});

it(`should define component instance`, (done => {
    this.compInstance.mapComponent.getNativeInstance().then(map => {
        expect(this.fixture.componentInstance).toBeDefined();
        expect(this.compInstance.ngOnInit).toHaveBeenCalled();
        expect(this.routeService.getDropdownOptions).toHaveBeenCalled();

        expect(this.fixture.componentInstance.messages).not.toBeNull();
        expect(this.fixture.componentInstance.messages.length).toEqual(0);
        done();
    });
}));

it(`should contain the correct leg when clicking stops`, (done => {
    this.compInstance.mapComponent.getNativeInstance().then(map => {
        this.compInstance.stopLayer.getLayers()[0].fire('click', { latlng: <any>([31.2284724615694, -85.4321765899658]) });
        this.compInstance.stopLayer.getLayers()[1].fire('click', { latlng: <any>([31.2490940369638, 85.4247093200683]) });

        expect(this.compInstance.onStopClicked).toHaveBeenCalled();

        expect(this.fixture.componentInstance.routeLegs[0].origin_stop).toEqual(
            { id: 1, name: 'Org1_stop1', code: 'o1-one', description: 'org1 first stop', url: null, location_type: 'stop', has_wheelchair_boarding: null, geometry: Object({ type: 'Point', coordinates: [-85.4321765899658, 31.2284724615694] }), boundary: Object({ type: 'Polygon', coordinates: [[[-85.4324126243591, 31.2282339294713], [-85.4318976402283, 31.2282339294713], [-85.4318976402283, 31.2288486071163], [-85.4324126243591, 31.2288486071163], [-85.4324126243591, 31.2282339294713]]] }) }
        );

        expect(this.fixture.componentInstance.routeLegs[0].destination_stop).toEqual(
            { id: 2, name: 'Org1_stop2', code: 'o1-two', description: 'org1 second stop', url: null, location_type: 'stop', has_wheelchair_boarding: null, geometry: Object({ type: 'Point', coordinates: [-85.4247093200683, 31.2490940369638] }), boundary: Object({ type: 'Polygon', coordinates: [[[-85.4248702526092, 31.2489472800928], [-85.4245215654373, 31.2489472800928], [-85.4245215654373, 31.2493416886665], [-85.4248702526092, 31.2493416886665], [-85.4248702526092, 31.2489472800928]]] }) }
        );

        this.fixture.detectChanges();

        expect(this.compInstance.onStopClicked).toHaveBeenCalled();
        expect(this.compInstance.appendLegToRoute).toHaveBeenCalled();
        expect(this.compInstance.updateLegDurationAndDistance).toHaveBeenCalled();

        done();
    });
}));

it(`should clear map when button is clicked`, (done => {
    this.compInstance.mapComponent.getNativeInstance().then(map => {
        this.compiled.querySelector('#clear-btn').click();
        expect(this.compInstance.clearMap).toHaveBeenCalled();
        done();
    });
}));

我在运行测试时会随机出错：尝试使用已损坏的视图：detectChanges，googleBounds未定义或el未定义。但有时错误根本不会显示出来，或者他们会在Chrome中传递但在Firefox中失败。我尝试了不同的fakeAsync和异步策略，但没有任何一致性。

链接到样本仓库：https://github.com/mattb103190/map-tests