使用Jasmine对带有rxjs主题的Angular组件进行单元测试

Question

我有两个组件和一个服务层。服务层在其中声明了带有set和get方法定义的主题。第一个组件基于用户操作调用主题的设置方法，而第二个组件订阅同一主题。它工作正常，但是当我尝试对第二个组件中的订阅进行单元测试时，我在使用该方法时遇到了麻烦。我创建了一个模拟服务层来测试其他功能。

在测试运行期间，ngOnit内部的订阅未受到攻击。当组件初始化时，代码在订阅中执行，但是在调用setSubject之后则不执行。调试时，可以看到它在执行完成后会命中，但是我无法验证数据是否已更新。

export class MockService {
 private subject = new Subject<any>();

 getSubject() {
   return Observable.of(this.subject);
 }

 setSubject(value) {
   this.subject.next({ message: value });
 }

}

组件2

export class Component2 implements OnInit {
  textFromComponent1: string;
  subscription: Subscription;

  constructor(public service: Service) {}
  ngOnInit() {
    this.subscription = this.service.getSubject().subscribe(message => {
      this.textFromComponent1 = message.value;
    });
  }
}

第2部分单元测试

beforeEach( async(() => {
    TestBed.configureTestingModule( {
        declarations: [Component2],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [{ provide: Service, useClass: MockService }]
    } )
        .compileComponents();
} ) );
beforeEach(() => {
    fixture = TestBed.createComponent( Component2 );
    component = fixture.componentInstance;
    fixture.detectChanges();
});
it('should test subscription' () => {
   component.service.setSubject("abc");
   expect(component.textFromComponent1).toBe("abc");
});

Answer 1

由于Subject是Observable的特殊类型，因此您应该从this.subject方法返回getSubject()，而不必使用observable方法。

以下是使用Observable.of() v11 +的有效示例：

angular：

example.component.ts

import { Component, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; import { Service } from './example.service'; @Component({}) export class Component2 implements OnInit { textFromComponent1: string; subscription: Subscription; constructor(public service: Service) {} ngOnInit() { console.log('ngOnInit'); this.subscription = this.service.getSubject().subscribe((data) => { console.log(data); this.textFromComponent1 = data.message; }); } } ：

example.service.ts

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable() export class Service { private subject = new Subject<{ message: string }>(); getSubject() { return this.subject; } setSubject(value: string) { this.subject.next({ message: value }); } } ：

example.component.spec.ts

单元测试结果：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { Subject } from 'rxjs';
import { Component2 } from './example.component';
import { Service } from './example.service';

class MockService {
  private subject = new Subject<any>();

  getSubject() {
    return this.subject;
  }

  setSubject(value: string) {
    this.subject.next({ message: value });
  }
}

fdescribe('52263178', () => {
  let fixture: ComponentFixture<Component2>;
  let component: Component2;
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [Component2],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [{ provide: Service, useClass: MockService }],
      }).compileComponents();
    })
  );
  beforeEach(() => {
    fixture = TestBed.createComponent(Component2);
    component = fixture.componentInstance;
  });

  it(
    'should test subscription',
    waitForAsync(() => {
      expect(component.textFromComponent1).toBeUndefined();
      fixture.detectChanges();
      component.service.setSubject('abc');
      fixture.whenStable().then(() => {
        expect(component.textFromComponent1).toBe('abc');
      });
    })
  );
});

测试范围：