单位使用tick和fakeAsync测试Observable的角度分量

Question

我看到的问题非常类似于已经被多次询问，但没有找到确切的解决方案，或者有很多解决方案让我感到困惑，就像我最近开始使用角度一样。

我有一个像这样的角度组件：

exportClass myTestComponent implements OnInit {
  isLoading: false;
  testOutput: any = [];
  someConstant: string = "gvt";
  private unsubscription$ = new Subject();
  constructor(private testService: TestService){}

  ngOnInit() {
    getTestOutputList(this.someConstant);
  }

  getTestOutputList(someConstant){
    this.isLoading = true;

    testService.getTestOutputList(someConstant)
    .pipe(takeUnitl(this.unsubscription$))
    .subscribe(res => {
       this.isLoading = true;
       this.testOutput = res;
     })

  }

}

我试过Spying方法getTestOutputList，但我不知道如何将getTestOutputList方法的参数传递给spyOn。以及我如何测试可观察量。

Answer 1

有不同的方法可以解决这个问题。我通常喜欢使用间谍对象，因为这样我就可以为特定服务设置间谍，并在一步中设置返回值。

您的代码中存在许多错误（例如在调用'testService.getTestOutputList（）'之前缺少'this。'，拼写'takeUntil'错误，将isLoading设置为'false'而不是布尔值等等）所以我假设你没有从工作代码中复制和粘贴。 :)

不过，我更正了错误，并将代码放入StackBlitz，以演示如何测试此类组件。从那个Stackblitz，这里是描述，其中包括服务的间谍和测试，以显示Observable的订阅正在工作。

describe('MyTestComponent', () => {
  let component: MyTestComponent;
  let fixture: ComponentFixture<MyTestComponent>;
  let service: TestService;
  const serviceSpy = jasmine.createSpyObj('TestService', {
    getTestOutputList : of(['the result'])
  });

  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [MyTestComponent],
        providers: [ 
          { provide: TestService, useValue: serviceSpy }
        ]
      }).compileComponents().then(() => {
        service = TestBed.get(TestService);
        fixture = TestBed.createComponent(MyTestComponent);
        component = fixture.componentInstance;
      });
  }));

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

  it('should set this.testOutput properly if subscribe is working', () => {
    fixture.detectChanges(); // Need this here to execute ngOnInit()
    expect(component.testOutput).toEqual(['the result']);
  });

});

正如您在StackBlitz中看到的，所有测试都在通过。我希望这有帮助。