web-dev-qa-db-ja.com

Angular / Jasmineユニットテストで* ngIfをバイパスする

参考までに、githubに問題を記録し、詳細とともにplunkrをバグに含めました: https://github.com/angular/angular/issues/19292

値を確認するためにngIfを渡すことができません。 ngIfを削除すると正常に動作します。これを回避するために、beforeEach()にアンバサダーの値を直接ハードコーディングしました。しかし、無駄に私は何か他のものを逃しています。

HTMLの場合:

 <h3 class="welcome" *ngIf="ambassador"><i>{{ambassador.username}}</i></h3>

ジャスミン:

beforeEach(() => {

    TestBed.configureTestingModule({
       declarations: [ ProfileComponent, BannedComponent ],
       providers:    [ HttpClient, {provide: AmbassadorService, useClass: MockAmbassadorService } ],
       imports:      [ RouterTestingModule, FormsModule, HttpClientModule ]
    });

    fixture = TestBed.createComponent(ProfileComponent);
    component    = fixture.componentInstance;

    // AmbassadorService actually injected into the component
    ambassadorService = fixture.debugElement.injector.get(AmbassadorService);
    componentUserService = ambassadorService;
    // AmbassadorService from the root injector
    ambassadorService = TestBed.get(AmbassadorService);

    // set route params
    component.route.params = Observable.of({ username: 'jrmcdona' });
    component.ambassador = new Ambassador('41', '41a', 'jrmcdona', 4586235, false);
    component.ngOnInit();
  });

  it('should search for an ambassador based off route param OnInit', () => {
     de = fixture.debugElement.query(By.css('.welcome'));
    el = de.nativeElement;
    fixture.detectChanges();
    const content = el.textContent;
    expect(content).toContain('jrmcdona', 'expected name');
  });
8
Jordan McDonald

問題は、変更を手動で検出するまでDOMが更新されず、_*ngIf_がレンダリングされる(およびambassador値が検出される)前にDOMにクエリを実行しようとしていることです。

_  it('should search for an ambassador based off route param OnInit', () => {
    fixture.detectChanges();
     de = fixture.debugElement.query(By.css('.welcome'));
    el = de.nativeElement;
    const content = el.textContent;
    expect(content).toContain('jrmcdona', 'expected name');
  });
_

detectChanges()の前にquery()を移動すると、問題が解決するはずです。

16
Z. Bagley