jasmine spyOnは最初のテスト実行後に実際の関数を呼び出します

Question

最初のitテストは動作しますが、2番目のテストではCannot read property 'get' of undefinedというエラーが発生します。2番目のテストでは、テスト中に未定義のプライベートプロパティhttp

let expectedZipCode: string; 
let activatedRoute: ActivatedRouteStub = new ActivatedRouteStub(); 
let fixture: ComponentFixture<WeatherComponent>; 
let comp: WeatherComponent; 
let weatherTile: HTMLElement; 
let forecastGrid: HTMLElement; 
let weatherService: WeatherUndergroundService; 
let currentCondition: BehaviorSubject<any> = new BehaviorSubject<any>({}); 

describe('WeatherComponent',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     providers: [ 
     { provide: ActivatedRoute, useValue: activatedRoute }, 
     { provide: WeatherUndergroundService }, 
     { provide: Http } 
     ], 
     declarations: [ 
     WeatherComponent 
     ] 
    }) 
     .compileComponents() 
    })); 

    beforeEach(()=> { 
    fixture = TestBed.createComponent(WeatherComponent); 
    comp = fixture.componentInstance; 
    weatherService = fixture.debugElement.injector.get(WeatherUndergroundService); 
    spyOn(weatherService, 'getCurrentConditions') 
     .and.returnValue(currentCondition); 
    spyOn(weatherService, 'getThreeDayForecast') 
     .and.returnValue(new BehaviorSubject<any>([])); 
    }); 

    describe('when navigating to a valid zip code',() => { 
    beforeEach(() => { 
     expectedZipCode = '23441'; 
     currentCondition.next({ location: 'Tasley, VA' }); 
     activatedRoute.testParamMap = { zipCode: expectedZipCode }; 
    }); 

    //this works 
    it('should display the zip code city', fakeAsync(() => { 
     fixture.detectChanges(); 
     tick(); 
     fixture.detectChanges(); 

     weatherTile = fixture.debugElement.query(By.css('.weather-tile')).nativeElement; 
     expect(weatherTile.querySelector('h3').textContent).toBe(currentCondition.getValue().location); 
     expect(comp.zipCode).toEqual(expectedZipCode); 
    })); 
    }); 

    describe('when navigating without a zip code',() => { 
    beforeEach(() => { 
     expectedZipCode = '10028'; 
     currentCondition.next({ location: 'New York, NY' }); 
     activatedRoute.testParamMap = { zipCode: expectedZipCode }; 
    }); 

    //this fails 
    it('should display default to New York city', fakeAsync(() => { 
     fixture.detectChanges(); 
     tick(); 
     fixture.detectChanges(); 

     weatherTile = fixture.debugElement.query(By.css('.weather-tile')).nativeElement; 
     expect(weatherTile.querySelector('h3').textContent).toBe(currentCondition.getValue().location); 
     expect(comp.zipCode).toEqual(expectedZipCode); 
    })); 
    }); 
}); 

Answer 1

私は以下のようにbeforeEach()内ActivatedRouteStubのインスタンスを移動することによって、問題を解決することができました。不思議なことに、ActivatedRouteStubはangular.ioのexample on this pageから取られます。

... 
//imports 

let activatedRoute: ActivatedRouteStub; 
let fixture: ComponentFixture<WeatherComponent>; 
let comp: WeatherComponent; 
let weatherTile: HTMLElement; 
let forecastGrid: HTMLElement; 
let weatherService: WeatherUndergroundService; 
let currentCondition: BehaviorSubject<any> = new BehaviorSubject<any>({}); 

describe('WeatherComponent',() => { 
    beforeEach(async(() => { 
    activatedRoute = new ActivatedRouteStub(); 
    TestBed.configureTestingModule({ 
     providers: [ 
     { provide: ActivatedRoute, useValue: activatedRoute }, 
     { provide: WeatherUndergroundService }, 
     { provide: Http } 
     ], 
     declarations: [ 
     WeatherComponent 
     ] 
    }) 
     .compileComponents() 
    })); 

    beforeEach(()=> { 
    .... 
    }); 

    it('should display the zip code city given a valid zip code', fakeAsync(() => { 
    .... 
    })); 

    it('should default to New York city without a zip code', fakeAsync(() => { 
    .... 
    })); 
});