Компонент ng2 с неправильной обработкой шаблона зависимостей службы во время модульного тестирования

Question

Я использую angular-cli 1.0.0-beta.19-3.

У меня есть компонент UserInfo, который отображает приветствие и кнопку выхода из системы, когда сообщается службой CurrentUser, что пользователь вошел в систему, через * ngIf в шаблоне. Когда вы выходите из системы, он просто отображает кнопку входа в систему, чтобы направить пользователя на страницу входа. Я попытался настроить тест, но считаю, что шаблон неправильно оценивает ngIf. Я также пробовал использовать fixture.whenStable().then(...), но это, казалось, не имело значения. Я запустил отладчик кармы, чтобы проверить, что component._user и isLoggedIn возвращены undefined, поэтому кажется, что мой заглушка не вводится правильно.

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. Я не знаком с жасмином, поэтому я не добавил .and.callThrough() на создание шпионов:

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