角度 2 单元测试 异步服务调用后我的组件没有更新

Question

我是角 2 和茉莉花单元测试的新手，我正在尝试测试我的异步服务是否由我的 ng-on-init 调用，并且值是否在我的组合中设置

这是我的组件：

@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);
    }
  }
}

这是我的测试：

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
  }));

});

expect(fixture.componentInstance.fragmentDefinition(.toBeDefined((; --> fail

我已经卡了几个小时，欢迎任何帮助

Answer 1

您在订阅回调中丢失了上下文

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

使用箭头保留this：

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