2

我正在尝试为使用 Observable.forkJoin 的组件方法编写测试。我已经在网上到处找了一些弹珠兔子洞，但最后我认为我真正需要做的就是模拟 Observable forkJoin 调用并返回假数据。这是我的组件方法

  public loadData(): void {
    this.someOtherMethod();
    this.someProperty = false;
    this.someOtherMethod2();

    if (this.isNew) {
      this.noData = true;
    } else if (this.key) {
      Observable.forkJoin([
        /*00*/ this.service1$.someCall(this.key),
        /*01*/ this.service2$.someCall(this.key),
        /*02*/ this.service2$.someCall1(this.key),
        /*03*/ this.service2$.someCall2(this.key),
        /*04*/ this.service2$.someCall3(this.key),
        /*05*/ this.service2$.someCall4(this.key),
        /*06*/ this.service2$.someCall5(this.key),
      ])
        .takeWhile(() => this.alive)
        .subscribe(
          response => {
            ... // join all the data together
          },
          // error => this.handleError(error)
        );
    }

    this.changeDetector$.markForCheck();
  }

到目前为止，这是我的测试：

it('makes expected calls', async(() => {
  const response = [];
  const service1Stub: Service1 = fixture.debugElement.injector.get(Service1 );
  const service2Stub: Service2 = fixture.debugElement.injector.get(Service2 );

  comp.key = key;
  spyOn(comp, 'someOtherMethod').and.returnValue(of(response));
  spyOn(comp, 'someOtherMethod2').and.returnValue(of(dummyData));

  spyOn(service1Stub, 'someCall').and.returnValue(of(dummyData));
  spyOn(service2Stub, 'someCall').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall1').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall2').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall3').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall4').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall5').and.returnValue(of(response));

  comp.loadData();
  expect(comp.someProperty).toBe(false);
  expect(comp.someOtherMethod).toHaveBeenCalled();
  expect(comp.someOtherMethod2).toHaveBeenCalled();
  expect(service1Stub.someCall).toHaveBeenCalledWith(key);
  expect(service2Stub.someCall1).toHaveBeenCalledWith(key);                  
  expect(service2Stub.someCall2).toHaveBeenCalledWith(key);
  expect(service1Stub.someCall3).toHaveBeenCalledWith(key);
  expect(service1Stub.someCall4).toHaveBeenCalledWith(key);
  expect(service1Stub.someCall5).toHaveBeenCalledWith(key);
}));

我收到以下错误（在我注释掉上面的错误捕获之后）：

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Marbles 似乎关心测试 observable 以及它如何反应。我只是想看看调用是否正在进行，并对所有数据连接在一起的订阅内部发生的情况进行更深入的测试。

我知道有更好的方法来处理数据，但这需要对应用程序进行大修。我不能改变方法，只能忍受现在的样子。

4

2 回答 2

1

这里有点无能为力，它在这个复制中对我有用：

import { ComponentFixture, TestBed, } from '@angular/core/testing';
import { Component, Injectable, OnInit } from '@angular/core';
import { of, forkJoin } from 'rxjs';

@Injectable({providedIn: 'root'})
export class Service { // service to be mocked
  response = ['hello', 'world'];
  // this is mocked anyway
  someCall() { return of(this.response); }
  someCall1() { return of(this.response); }
  someCall2() { return of(this.response); }
  someCall3() { return of(this.response); }
  someCall4() { return of(this.response); }
  someCall5() { throw new Error('oups!') }
}

@Component({
  selector: 'app-testee',
  template: `<h1>hi</h1>`
})
export class TesteeComponent implements OnInit { // main comp
  constructor(private service: Service) {}

  result: string; // aggregated property

  ngOnInit() { }

  loadData() {
    forkJoin([
      this.service.someCall(),
      this.service.someCall1(),
      this.service.someCall2(),
      this.service.someCall3(),
      this.service.someCall4(),
      this.service.someCall5(),
    ]).subscribe(
      rse => this.result = [].concat(...rse).join('-'), // aggregation
      err => this.result = `ERR ${err}`
    );
  }
}

describe('TesteeComponent', () => {
  let fixture: ComponentFixture<TesteeComponent>;
  let component: TesteeComponent;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [
        TesteeComponent
      ],
      providers: [
        Service
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(TesteeComponent);
    component = fixture.componentInstance;
  });

  it('should load data', () => {
    const testee = component;
    // why not use TestBed.get(Service) here?
    const service = fixture.debugElement.injector.get(Service);
    spyOn(service, 'someCall').and.returnValue(of(['test', 'values', '0']));
    spyOn(service, 'someCall1').and.returnValue(of(['test', 'values', '1']));
    spyOn(service, 'someCall2').and.returnValue(of(['test', 'values', '2']));
    spyOn(service, 'someCall3').and.returnValue(of(['test', 'values', '3']));
    spyOn(service, 'someCall4').and.returnValue(of(['test', 'values', '4']));
    spyOn(service, 'someCall5').and.returnValue(of(['test', 'values', '5']));
    expect(testee).toBeTruthy();
    fixture.detectChanges();
    testee.loadData();

    expect(testee.result).toEqual('test-values-0-test-values-1-test-values-2-test-values-3-test-values-4-test-values-5');
    expect(service.someCall).toHaveBeenCalled();
  });
});
于 2019-09-19T16:16:07.423 回答
0

这个问题是从一点开始的，但我希望无论如何它都会有所帮助。

这应该可以正常工作：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { TestComponent } from 'someLocation';
import { ServiceTest1 } from 'someLocation';
import { ServiceTest2 } from 'someLocation';

describe('TestComponent', () => {

    let fixture: ComponentFixture<TestComponent>;
    let component: TestComponent;
    let service1: ServiceTest1;
    let service2: ServiceTest2;
    let httpMock: HttpTestingController;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [
          TestComponent
        ],
        imports: [
          HttpClientTestingModule
        ],
        providers: [
          ServiceTest1,
          ServiceTest2
        ]
      }).compileComponents();

      service1 = TestBed.inject(ServiceTest1);
      service2 = TestBed.inject(ServiceTest2);
      httpMock = TestBed.inject(HttpTestingController);

      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;

      fixture.detectChanges();

    });

    it('TestComponent should be created', () => {
      expect(component).toBeTruthy();
    });

    it('should load data', done => {

      const response0 = ['test', 'values', '0'];
      const response1 = ['test', 'values', '1'];
      const response2 = ['test', 'values', '2'];
      const response3 = ['test', 'values', '3'];
      const response4 = ['test', 'values', '4'];
      const response5 = ['test', 'values', '5'];
      const response6 = ['test', 'values', '6'];

      component.loadData().subscribe({
        next: (responses) => {

          expect(responses[0]).toEqual(response0);
          expect(responses[1]).toEqual(response1);
          expect(responses[2]).toEqual(response2);
          expect(responses[3]).toEqual(response3);
          expect(responses[4]).toEqual(response4);
          expect(responses[5]).toEqual(response5);
          expect(responses[6]).toEqual(response6);

          done();

        }
      });

      httpMock.expectOne('urlSomeCall0').flush(response0);
      httpMock.expectOne('urlSomeCall1').flush(response1);
      httpMock.expectOne('urlSomeCall2').flush(response2);
      httpMock.expectOne('urlSomeCall3').flush(response3);
      httpMock.expectOne('urlSomeCall4').flush(response4);
      httpMock.expectOne('urlSomeCall5').flush(response5);
      httpMock.expectOne('urlSomeCall6').flush(response6);

      httpMock.verify();

    });
});

使用这样的 loadData() 函数：

loadData(): Observable<any> {

  return new Observable(observable => {

    this.someOtherMethod();
    this.someProperty = false;
    this.someOtherMethod2();

    if (this.isNew) {
      this.noData = true;
    } else if (this.key) {
      Observable.forkJoin([
        /*00*/ this.service1$.someCall(this.key),
        /*01*/ this.service2$.someCall(this.key),
        /*02*/ this.service2$.someCall1(this.key),
        /*03*/ this.service2$.someCall2(this.key),
        /*04*/ this.service2$.someCall3(this.key),
        /*05*/ this.service2$.someCall4(this.key),
        /*06*/ this.service2$.someCall5(this.key),
      ])
        .takeWhile(() => this.alive)
        .subscribe({
          next: responses => {
            observable.next(responses);
            observable.complete();
            ... // join all the data together
          },
          error: error => {
            observable.error(error);
            observable.complete();
            this.handleError(error);
          }
        });
    }

    this.changeDetector$.markForCheck();

  });

};

还要记住，使用 forkJoin 你所有的 observables 都应该返回完整的事件。

于 2020-06-05T09:25:55.377 回答