使用 TestBed 检测对服务存根的更改

Question

这是使用 angular2 文档中提供的存根进行ServiceComponent的测试示例。

当我尝试构建并运行它时，我发现该组件没有为第二个测试用例拾取更改。我总是看到消息。

该服务如下所示：

从"@angular/核心"导入 { 可注射 };

@Injectable()
export class UserService {
isLoggedIn: true;
user: { name: string };
}

该组件如下所示：

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
moduleId: module.id,
selector: 'app-welcome',
templateUrl: './welcome.component.html'
})
export class WelcomeComponent implements OnInit {
welcome = '--- not initialized yet';
constructor (private userService: UserService) {}
ngOnInit () {
this.welcome = this.userService.isLoggedIn ?
'Welcome, ' + this.userService.user.name :
'Please log in.';
}
}

这是有问题的单元测试：

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

let fixture: ComponentFixture<WelcomeComponent>;
let comp: WelcomeComponent;
let de: DebugElement;
let el: HTMLElement;
let userService: UserService;
describe('Welcome Component (testing a component with a service)', () => {
beforeEach(async(() => {
const userServiceStub = {
isLoggedIn: true,
user: {
name: 'Test User'
}
};
return TestBed.configureTestingModule({
declarations: [
WelcomeComponent
],
providers: [
{
provide: ComponentFixtureAutoDetect,
useValue: true
},
{
provide: UserService,
useValue: userServiceStub
}
]
}).compileComponents(); // DO NOT USE WITH WEBPACK
}));
beforeEach(() => {
fixture = TestBed.createComponent(WelcomeComponent);
userService = TestBed.get(UserService);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('.welcome'));
el = de.nativeElement;
});
it('should welcome the user', () => {
fixture.detectChanges();
const content = el.textContent;
expect(content).toContain('Welcome', '"Welcome..."');
});
it('should welcome Bubba', () => {
userService.user.name = 'Bubba';
fixture.detectChanges();
expect(el.textContent).toContain('Bubba');
});
});

错误始终为：

Expected 'Welcome, Test User' to contain 'Bubba'.

错误：预期"欢迎，测试用户"包含"Bubba"。

调试时，我发现服务存根已更新为适当的值。

Answer 1

你在这里做什么

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

只是一次性初始化。对服务的任何后续更新都不会导致重新初始化。

您可以做的是使用订阅系统，您可以在其中订阅更新。也许像

welcome = '--- not initialized yet';
ngOnInit () {
this.userService.status$.subscribe(status) => {
let loggedIn = status.isLoggedIn;
let user = status.user;
this.welcome = '...'
})
}

然后，您需要更改服务以使用可以发出新值的Subject或更好的BehaviorSubject。这些新的排放量将由该部分认购

class UserService {
private _isLoggedIn: boolean = false;
private _user = { name: 'Anonymous' };
private _status = new BehaviorSubject({
isLoggedIn: this._isLoggedIn
user: this._user
});
get status$() {
return this._status.asObservable();
}
updateUserName(name: string) {
this._user.name = name;
this.emit();
}
updateIsLoggedIn(loggedIn: boolean) {
this.isLoggedIn = loggedIn;
if (!loggedIn) {
this._user.name = 'Anonymous;
}
this.emit();
}
private emit() {
this._status.next({
isLoggedIn: this._isLoggedIn,
user: this._user
})
}
}

使用Subject，您可以通过调用next(..)来发出新值，并且您传递给它的任何内容都将发送给订阅者。

现在在测试中，您只需调用服务updateUserName即可。如果要存根服务进行测试，则可以执行以下操作

let mockService = {
status$: new Subject<>();
}
mockService.status$.next(...)

但实际上，使用原样服务，不使用任何外部依赖项，真的没有必要嘲笑它。

另请注意，因为现在服务是异步的，所以您应该使用async或fakeAsync进行测试，例如

import { fakeAsync, async, tick + from '@angular/core/testing';
it('..', fakeAsync(() => {
service.updateUserName(..)
tick();
expect(...)
}))
it('..', async(() => {
service.updateUserName(..)
fixture.whenStable().then(() => {
expect(...)
})
}))