如何使用茉莉弹珠测试 Observable 订阅中的代码

Question

我有一个组件订阅从 ngOnInit 中的服务返回的 observable。我也有方法（updateData），它从服务订阅 observable，但也更新订阅中的一些属性。我需要创建一个测试来检查调用 updateData 时此属性是否更改为正确的值。

组件sn-p：

ngOnInit() {
    this.myService.loadData().subscribe() => {
        // some code here
    });
}

...

public updateData() {
    this.myService.updateData(this.data).subscribe(() => {
        this.dataUpdated = true;
    });
}

测试设置

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myServiceSpy: jasmine.SpyObj<MyService>;

  const dataMock = {};
  const updateResponseMock = {};

  beforeEach(async(() => {
    myServiceSpy = jasmine.createSpyObj('DesignPickerService', [
      'loadData',
      'updateData'
    ]);
    myServiceSpy.loadData.and.returnValue(
      cold('-a|', { a: dataMock })
    );
    myServiceSpy.updateData.and.returnValue(
      cold('--b|', { b: updateResponseMock })
    );
    TestBed.configureTestingModule({
      declarations: [
        MyComponent,
      ],
      providers: [
        {
          provide: MyService,
          useFactory: () => {
            return myServiceSpy;
          }
        }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  describe('Tests', () => {
    it('updateData should set dataUpdated to true', () => {
      ??? // some code to wait for myService.loadData to finish
      component.dataUpdated = false;
      component.updateData();
      ??? // some code to wait for myService.updateData to finish
      expect(component.dataUpdated).toBe(true);
    })
  });
});

我想添加那些缺失的行，以便测试通过。任何帮助将不胜感激。

Answer 1

很抱歉，您说的是http调用，您可以尝试这种方式但我没有使用服务，您可以轻松地模拟它。

fit('应该返回正确的数据', (done) => {

expect(component.dataUpdated).toEqual(false);

component.getData().subscribe(data => {
  expect(data).toEqual([1, 2, 3, 4]);
  expect(component.dataUpdated).toEqual(true);
  done();
}
  );

  });


export class ObservableTddComponent implements OnInit {

  dataUpdated;

  constructor() {
    this.dataUpdated = false;
  }

  ngOnInit() {
    this.getData().subscribe( (x) => {
      this.dataUpdated = true;
    });
  }

  getData(){
    return of([1,2,3,4]).pipe(delay(500));
  }

}

你可以找到更多关于它的信息，阅读这篇文章：https://itnext.io/a-quick-tip-on-testing-observables-e2fbdebef4c