Angular 如何使用jasmine marbles测试可观察订阅中的代码

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

组件代码段：

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);
    })
  });
});

description（'MyComponent'，（）=>{
let组分：MyComponent；
let夹具：组件夹具；
让myServiceSpy:jasmine.SpyObj；
const dataMock={}；
const updateResponseMock={}；
beforeach（异步（（）=>{
myServiceSpy=jasmine.createSpyObj（'DesignPickerService'[
“加载数据”，
“更新数据”
]);
myServiceSpy.loadData.and.returnValue(
冷（'-a |'，{a:dataMock}）
);
myServiceSpy.updateData.and.returnValue(
冷（'-b |'，{b:updateResponseMock}）
);
TestBed.configureTestingModule({
声明：[
MyComponent，
],
供应商：[
{
提供：MyService，
useFactory:（）=>{
返回myServiceSpy；
}
}
]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MyComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
描述（'测试'，（）=>{
它（'updateData应将DataUpdate设置为true'，（）=>{
？？？//一些代码等待myService.loadData完成
component.dataUpdated=false；
component.updateData（）；
？？？//一些代码等待myService.updateData完成
expect（component.dataUpdated）.toBe（true）；
})
});
});

---

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

很抱歉，我认为您正在谈论一个http呼叫，您可以尝试这种方式，但我没有使用该服务，您可以轻松地模拟它

拟合（'应返回正确的数据'，（完成）=>{

---

阅读本文，您可以找到更多关于它的信息：

您想要e2e测试还是单元测试？@Robert unit test您的示例是测试具有HttpClient依赖性的服务。这不是我要问的

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));
  }

}