Bypassing *ngIf on an Angular/Jasmine unit test
10,258
The problem is that DOM does not update until you manually detect changes, and you're attempting to query the DOM before your *ngIf
renders (and ambassador
value is detected).
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');
});
Moving the detectChanges()
before the query()
should solve the problem.
Related videos on Youtube
Author by
Jordan McDonald
Updated on July 13, 2022Comments
-
Jordan McDonald almost 2 years
FYI Logged an issue on github and also included plunkr in the bug with details: https://github.com/angular/angular/issues/19292
I simply cannot get passed the ngIf in order to check the value. If I remove ngIf it works fine. To try and get around this I have hardcoded the value of ambassador directly in the beforeEach(). But to no avail I am missing something else.
In the HTML:
<h3 class="welcome" *ngIf="ambassador"><i>{{ambassador.username}}</i></h3>
Jasmine:
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'); });