ng2 component with service dependency parses template incorrectly during unit testing

Question

I'm using angular-cli 1.0.0-beta.19-3.

I've got a component called UserInfo that displays a greeting and a logout button whenever it's told by the CurrentUser service that the user is logged in, via an *ngIf in the template. Whenever logged out, it simply displays a login button to direct the user to the login page. I've tried setting up a test but I believe the template is evaluating the ngIf improperly. I've also tried using fixture.whenStable().then(...) but that seemed to not matter. I've ran the karma debugger to examine component._user and isLoggedIn returns undefined, so it seems like my stub is not being properly injected.

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

The problem turned out to be the calls to spyOn. I'm not familiar with jasmine so I didn't add .and.callThrough() onto the creation of the spies:

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