Angular 2单元测试服务存根值不变？

2023年12月5日 163次阅读

我正在研究这里的Angular 2测试示例
https://angular.io/docs/ts/latest/guide/testing.html

欢迎组件

import { Component, OnInit } from '@angular/core';
import { UserService }       from './user.service';

@Component({
  selector: 'app-welcome',
  template: '<h3 class="welcome" ><i>{{welcome}}</i></h3>'
})
export class WelcomeComponent implements OnInit {
  welcome = '-- not initialized yet --';
  constructor(private userService: UserService) {     
  }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name :
      'Please log in.';
  }
}

测试规范

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { WelcomeComponent } from './welcome.component';
import { UserService } from './user.service';

describe('WelcomeComponent', () => {
  let component: WelcomeComponent;
  let fixture: ComponentFixture<WelcomeComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  let userServiceStub: UserService;
  let userService:UserService;

  beforeEach(async(() => {
    // Declare stub UserService for test purposes
    let userServiceStub = {
      isLoggedIn: true,
      user: { name: 'Test User'}
    };

    TestBed.configureTestingModule({
      declarations: [ WelcomeComponent ],
       providers:  [ {provide: UserService, useValue: userServiceStub } ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(WelcomeComponent);
    component = fixture.componentInstance;
    //userService = TestBed.get(UserService);
    userService = fixture.debugElement.injector.get(UserService);

    //  get the "welcome" element by CSS selector (e.g., by class name)
    de = fixture.debugElement.query(By.css('.welcome'));
    el = de.nativeElement;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should welcome the user', () => {
    fixture.detectChanges();
    const content = el.textContent;
    expect(content).toContain('Welcome', '"Welcome ..."');
    expect(content).toContain('Test User', 'expected name');
  });

  it('should welcome "Bubba"', () => {
    userService.user.name = 'Bubba'; 
    fixture.detectChanges();
    expect(el.textContent).toContain('Bubba');
  });

  it('should request login if not logged in', () => {
    userService.isLoggedIn = false; 
    fixture.detectChanges();
    const content = el.textContent;
    expect(content).not.toContain('Welcome', 'not welcomed');
    expect(content).toMatch(/log in/i, '"log in"');
  });

});

最后2个it()测试失败,因为服务存根值之后没有改变

userService.user.name = 'Bubba';
fixture.detectChanges();

和

userService.isLoggedIn = false; 
fixture.detectChanges();

知道为什么Angular测试模块无法检测到变化吗？

Uodate

我找到了. fixture.detectChanges()触发ngOnInit().
beforeEach()中的fixture.detectChanges()是罪魁祸首.因为它已初始化组件,所以()中的fixture.detectChanges()不会再次初始化组件.因此,通过从beforeEach()中删除fixture.detectChanges(),it()中的fixture.detectChanges()将有机会触发ngOnInit()并且所有测试都会通过.

  beforeEach(() => {
    fixture = TestBed.createComponent(WelcomeComponent);
    component = fixture.componentInstance;
    //userService = TestBed.get(UserService);
    userService = fixture.debugElement.injector.get(UserService);

    //  get the "welcome" element by CSS selector (e.g., by class name)
    de = fixture.debugElement.query(By.css('.welcome'));
    el = de.nativeElement;
    // fixture.detectChanges(); // this is the culprit.
  });

最佳答案 尝试在“它”上启动您的服务

 it('should welcome "Bubba"' , inject([UserService], (userService: UserService) => {
     userService.user.name = 'Bubba'; 
     fixture.detectChanges();
     expect(el.textContent).toContain('Bubba');
  }));
点赞