NG2组件具有服务依赖性解析在单元测试期间错误的模板

Question

我正在使用angular-cli 1.0.0-beta.19-3。

我有一个名为UserInfo的组件，该组件在当前使用者服务告诉该数据时显示一个问候按钮，并通过模板中的AN *ngif登录了用户。每当登录时，它只会显示一个登录按钮，即可将用户引向登录页面。我已经尝试设置测试，但我相信该模板正在不正确地评估NGIF。我也尝试使用fixture.whenStable().then(...)，但这似乎并不重要。我已经运行了业力调试器来检查组件。

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();