参考までに、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');
});
問題は、変更を手動で検出するまで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()
を移動すると、問題が解決するはずです。