Umgehen * ngIf auf einem Schräg/Jasmine Unit-Test

Question

FYI ein Problem auf Github und ebenfalls enthalten Gespeichert plunkr im Bug mit Details: https://github.com/angular/angular/issues/19292

Ich kann einfach nicht die ngIf übergeben bekommen, um den Wert zu überprüfen. Wenn ich ngIf entferne, funktioniert es gut. Um dies zu umgehen, habe ich den Wert des Botschafters direkt im beforeEach() festgeschrieben. Aber ohne Erfolg verpasse ich etwas anderes.

Im HTML:

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

Jasmin:

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

Answer 1

Das Problem ist, dass DOM nicht aktualisiert, bis Sie manuell Änderungen erkennen, und Sie versuchen, das DOM vor Ihrer *ngIf abfragen rendert (und ambassador Wert wird erkannt).

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

Umzug der detectChanges() vor dem query() sollte das Problem lösen.