Angular 测试模拟已订阅 属性

Question

我有一个具有 2 个属性的服务：

服务

...
public usernameAnnounced;
private username: Subject<string> = new Subject<string>();

constructor() {
    super();
    this.usernameAnnounced = this.username.asObservable();
}

在我的组件上，我想订阅 属性:

组件

    public ngOnInit(): void {
    this.service.usernameAnnounced.subscribe((username: string) => {
        this.username = NavbarComponent.capitalizeFirstLetter(username);
    });
}

我发送到另一台电脑上的用户名。但它与这个问题无关。 现在我想模拟 usernameAnnounced 但我遇到了困难。我用 spyOn 试了一下，结果是：'usernameAnnounced is not a function.' 使用 spyOnProperties 它会抛出一个：'property is not a getter'.

已测试组件

到目前为止，我的方法如下所示：

    beforeEach(async(() => {
    TestBed.configureTestingModule({
        ...
        declarations: [NavbarComponent],
        providers: [
            ...,
            {provide: service, useValue: authenticationMock}
            ]
        })
        .compileComponents();

    fixture = TestBed.createComponent(NavbarComponent);
}));
...
    it('should render username',() => {
    const underTest = fixture.componentInstance;

    spyOnProperty(authenticationMock, 'usernameAnnounced').and.returnValue({
            subscribe: () => {'boboUser'}}); <== important part here

    underTest.ngOnInit();
    fixture.detectChanges();

    const compiled: HTMLElement = fixture.debugElement.nativeElement.querySelector('#userName');
    const rendered: string = compiled.textContent;

    expect(rendered).toMatch(`Logged in as: ${underTest.username}`);
});

有人有什么提示吗？

Answer 1

我总是不得不在我的 mock 上构建一个 Subject（或 BehaviorSubject）。

class authenticationMock{ // is the mock of AuthenticationService
    public usernameAnnounced:Subject<string> = new Subject<string>();
}

...

// in Test
let authenticationService = TestBed.get(AuthenticationService)
...
authenticationService.next('myNewUser');

热烈的问候

Answer 2

我找到了解决方案： 首先像这样创建一个 jasmine.spyObj：

    const authenticationMock: AuthenticationService = jasmine.createSpyObj('AuthenticationService',
    ['usernameAnnounced']);

将其分配给模拟服务：{provide: AuthenticationService, useValue: authenticationMock}。 单元测试本身只是将 属性 分配给您的预期结果：

const spy = TestBed.get(AuthenticationService);
    spy.usernameAnnounced = Observable.of('dummyUser');