サービス依存関係のあるng2コンポーネントは、ユニットテスト中にテンプレートを正しく解析しません。

Question

私はangular-cli 1.0.0-beta.19-3を使用しています。

私はUserInfoというコンポーネントを持っています。このコンポーネントは、テンプレートの* ngIfを使用して、ユーザーがログインしていることをCurrentUserサービスから通知されるたびに挨拶とログアウトボタンを表示します。ログアウトするたびに、ユーザーにログインページを誘導するログインボタンが表示されます。私はテストを設定しようとしましたが、テンプレートがngIfを不適切に評価していると思います。私もfixture.whenStable().then(...)を使ってみましたが、それは問題ではないようです。私はカルマデバッガを実行してcomponent._userとisLoggedInを調べましたが、私のスタブが正しく挿入されていないように見えます。

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> 

あるCurrentUser：

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

問題はspyOnの呼び出しであることが判明しました。私はジャスミンに精通していないので、私はスパイの作成にを受け入れていませんでした。

loginSpy = spyOn(mockUser, 'isLoggedIn').and.callThrough(); 
nameSpy = spyOn(mockUser, 'getFullName').and.callThrough();