각도 2 단위 테스트 비동기 서비스 호출 후 내 구성 요소가 업데이트되지 않음

Question

각도 2 및 단위 테스트를 처음 사용하는 경우 재시작시 내 비동기 서비스가 호출되는지 테스트하려고합니다. 여기

@Component({ 
    selector: 'fragment-overlay', 
    templateUrl: './fragment-overlay.component.html', 
    styleUrls: ['./fragment-overlay.component.css'] 
}) 
export class FragmentOverlayComponent implements OnInit { 

    @Input() 
    fragmentOverlay:FragmentOverlay; 

    @Input() 
    index: Number; 

    fragmentDefinition:FragmentDefinition; 


    constructor(private fragmentService:FragmentService) { 
    } 

    ngOnInit():void { 
    let fragmentId = this.fragmentOverlay.fragmentId; 

    this.fragmentService.getFragmentDefinitionByConfigurationId(fragmentId).subscribe(function (fragmentDefinition:FragmentDefinition) { 
     this.fragmentDefinition = fragmentDefinition; 
     console.log("blablabla "+fragmentDefinition); 
    }); 
    } 

    ngOnChanges(changes) { 
    if (changes.hasOwnProperty("index") && !changes.index.firstChange){ 
     console.log(this.fragmentOverlay.fragmentId +"previous "+ changes.index.previousValue +"after "+changes.index.currentValue); 
    } 
    } 
} 

내 테스트입니다 : 값이 내 componenent 여기

에 설정되어 내 구성 요소입니다

describe('Fragment overlay ',() => { 

    let comp: FragmentOverlayComponent; 
    let fixture: ComponentFixture<FragmentOverlayComponent>; 
    let de:  DebugElement; 
    let el:  HTMLElement; 
    let spy ; 


    class FragmentServiceMock { 
    private fragmentDefinitionTest = new FragmentDefinition("id", "label", false, true, [], "location"); 

    getFragmentDefinitionByConfigurationId(id:string):Observable<FragmentDefinition> { return Observable.of(this.fragmentDefinitionTest) } 
    } 


    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [HttpModule], 
     declarations: [FragmentOverlayComponent],// declare the test component 
     providers: [FragmentService, { provide: XHRBackend, useClass: MockBackend },] 
    }) 
     .compileComponents(); // compile template and css 
    fixture = TestBed.createComponent(FragmentOverlayComponent); 



    comp = fixture.componentInstance; 

    let fragService = fixture.debugElement.injector.get(FragmentService); 

    let fragmentDefinitionTest = new FragmentDefinition("id", "label", false, true, [], "location"); 

    spy = spyOn(fragService, 'getFragmentDefinitionByConfigurationId') 
     .and.returnValue(Observable.of(fragmentDefinitionTest)); 

    comp.fragmentOverlay = new FragmentOverlay(); 
    comp.fragmentOverlay.fragmentId = "idFragment"; 


    // query for the title <h1> by CSS element selector 
    de = fixture.debugElement.query(By.css('.fragment-overlay')); 
    el = de.nativeElement; 

    }); 



    it('should get a definition avec init async call resolved', async(() => { 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { // wait for async getFragmentDefinitionByConfigurationId 
     fixture.detectChanges();  // update view with quote 
     expect(fixture.componentInstance.fragmentDefinition).toBeDefined(); 

    }); 
    })); 


    it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => { 
    fixture.detectChanges(); 
    tick();     // wait for async getQuote 
    fixture.detectChanges(); // update view with quote 

    })); 


}); 

기대 (fixture.componentInstance.fragmentDefinition) .toBeDefined(); -> 내가 몇 시간 붙어 있었어요

실패, 어떤 도움 콜백 가입

this.fragmentService.getFragmentDefinitionByConfigurationId(fragmentId) 
    .subscribe(function (fragmentDefinition:FragmentDefinition) { // don't use FE here 
    this.fragmentDefinition = fragmentDefinition; 
    console.log("blablabla "+fragmentDefinition); 
    }); 

사용을 유지하기 위해 화살표를 내

Answer 1

당신은 상황을 잃게 환영받을 this :

.subscribe((fragmentDefinition:FragmentDefinition) => { 
    ...