如何在".subscribe()"角度/茉莉花中测试代码

Question

我的StatisticComponent中有此代码

this.subscription = this.locationService.getStatisticOne(this.formService.getFormValue())
.subscribe(data => {
this.array = data;
this.wrongValueOne = this.array.shift();
for (let array of this.array) {
this.addData(this.myChartOne, array.date, array.leistung);
}
});

现在我想写一个测试，看看这个.subscribe()函数中是否有任何东西被调用或执行。此代码片段在generateStatisticOne()函数内执行，该函数在ngOnInit()中调用的getData()函数中调用，或在按下按钮时执行。问题是，我刚开始写测试，甚至不知道我在这里发现的东西是否有意义，但我现在有这个测试代码

describe('StatisticComponent', () => {
let component: StatisticComponent;
let fixture: ComponentFixture<StatisticComponent>;
const locationServiceSpy = jasmine.createSpyObj('LocationService', {
getStatisticOne: of([{ id: 1 }, { id: 2 }, { id: 3 }])
});

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [StatisticComponent],
imports: [
HttpClientTestingModule
],
providers: [{ provide: LocationService, useValue: locationServiceSpy },
LocationService,
HttpClientTestingModule
],
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(StatisticComponent);
component = fixture.componentInstance;
locationService = TestBed.get(LocationService);
fixture.detectChanges();
});
it('should call array.shift ', fakeAsync(() => {
const service = TestBed.get(LocationService); // get your service
spyOn(service, 'getStatisticOne').and.callThrough(); // create spy
spyOn(Array.prototype, 'shift');
fixture.detectChanges();
tick();
expect(Array.prototype.shift).toHaveBeenCalled();
}));

我在运行代码时得到的错误是"；预期的间谍转移被称为"；

Answer 1

您需要做的第一件事是将测试一分为二。第一组测试将使用HttpClientTestingModule实例化服务并模拟HttpClient，第二组测试将实例化组件并模拟服务。这样，你就可以在测试内容和边界之间得到一个清晰的分离。为了回答如何测试订阅方法的问题，一旦您模拟了Service，您就可以使用rxjs可观察库中的of()来响应方法调用，并且在其中您可以模拟数据，使其看起来像您想要的样子。