ng2 Komponente mit Service-Abhängigkeit analysiert Vorlage während des Komponententests falsch

Question

Ich benutze angle-cli 1.0.0-beta.19-3.

Ich habe eine Komponente namens UserInfo, die eine Gruß- und eine Abmelde-Schaltfläche anzeigt, wenn der CurrentUser-Dienst, an dem der Benutzer angemeldet ist, über einen * ngIf in der Vorlage informiert. Wenn Sie sich abmelden, wird einfach eine Login-Schaltfläche angezeigt, um den Benutzer auf die Anmeldeseite zu leiten. Ich habe versucht, einen Test zu erstellen, aber ich glaube, dass die Vorlage die ngIf falsch auswertet. Ich habe auch versucht, fixture.whenStable().then(...) zu verwenden, aber das schien keine Rolle zu spielen. Ich habe den Karma-Debugger ausgeführt, um component._user zu untersuchen, und isLoggedIn gibt undefined zurück, so dass es so aussieht, als ob mein Stub nicht richtig injiziert wird.

userinfo.component.spec.ts:

/* tslint:disable:no-unused-variable */ 
import { 
    async, 
    ComponentFixture, 
    TestBed 
} from '@angular/core/testing'; 

import { UserInfoComponent } from './userinfo.component'; 
import { CurrentUser } from '../../currentuser/currentuser.service'; 

describe('UserInfoComponent',() => { 
    let component: UserInfoComponent; 
    let fixture: ComponentFixture<UserInfoComponent>; 
    let userStub: any; 
    let mockUser: any; 
    let loginSpy: any; 
    let nameSpy: any; 

    beforeEach(async(() => { 
    userStub = { 
     name: 'Test User', 
     isLoggedIn: function() { return true; }, 
     getFullName: function() { return this.name; } 
    }; 
    TestBed.configureTestingModule({ 
     declarations: [UserInfoComponent], 
     providers: [{ 
     provide: CurrentUser, useValue: userStub 
     }] 
    }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(UserInfoComponent); 
    component = fixture.componentInstance; 
    mockUser = TestBed.get(CurrentUser); 
    loginSpy = spyOn(mockUser, 'isLoggedIn'); 
    nameSpy = spyOn(mockUser, 'getFullName'); 
    fixture.detectChanges(); 
    }); 

    it('should render without crashing',() => { 
    expect(component).toBeDefined(); 
    }); 

    it('should have access to currentUser',() => { 
    expect(component._user).toBeDefined(); 
    }); 

    it('should contain a user greeting when logged in',() => { 
    const greetingEl = fixture.nativeElement.querySelector('.user-greeting'); 
    expect(greetingEl).toBeTruthy(); 
    expect(greetingEl.innerHTML).toContain('Test User', 'Name is missing'); 
    expect(loginSpy.calls.any()).toBe(true); 
    }); 

}); 

UserInfoComponent:

import { Component, OnInit } from '@angular/core'; 
import { CurrentUser } from '../../currentuser/currentuser.service'; 

@Component({ 
    selector: 'oa-userinfo', 
    templateUrl: 'userinfo.component.html', 
    styleUrls: ['userinfo.component.scss'] 
}) 
export class UserInfoComponent implements OnInit { 
    constructor(
     public _user: CurrentUser 
) { } 
    gotoLoginPage() { 
    console.log('going to login'); 
    } 
    ngOnInit() { } 
} 

userinfo.component.html:

<div class="user-info" *ngIf="_user.isLoggedIn()"> 
    <span class="user-greeting">Welcome, {{_user.getFullName()}}!</span> 
    <button id="logout-button" 
    (click)="_user.logout()" 
    md-raised-button 
    color="accent">Logout</button> 
</div> 
<div class="user-info" *ngIf="!_user.isLoggedIn()"> 
    <button id="login-button" 
    (click)="gotoLoginPage()" 
    md-raised-button 
    color="accent">Login</button> 
</div> 

Current:

import { Injectable } from '@angular/core'; 

@Injectable() 
export class CurrentUser implements ICurrentUser { 
    private token: string = '1234567'; 
    private userName: string = 'Test User'; 
    constructor() {} 
    storeToken(token: string) { 
    this.token = token; 
    } 
    logout() { 
    this.token = null; 
    } 

    isLoggedIn() { 
    return this.token; 
    } 

    getFullName() { 
    return this.userName; 
    } 
} 

export interface ICurrentUser { 
    storeToken(token: string); 
    logout(); 
    isLoggedIn(); 
    getFullName(); 
} 

Answer 1

Das Problem stellten sich die Anrufe bei SpyOn. Ich bin nicht vertraut mit Jasmin, so dass ich nicht .and.callThrough() auf die Schaffung der Spione hinzufügen: