组件 props 即使在成功后 promise 回调 - 角度测试也是空的

Question

过去两天我一直在尝试确定不断失败的角度测试的问题。在Promise回调中，设置了组件 props，但当spying相同的成功回调Promise时，props 不会更新，也不会在浏览器中控制台日志。例如，以下测试通过和道具已更新，没有任何问题：

fit('should call insuranceSerivce.search', () => {
    component.travelPeriod = ['01-08-2019', '01-08-09'];
    component.destination = 'MYS';
    component.tripType.individual = 'days';
    component.onContinue();
    expect(insuranceServiceSpy.search).toHaveBeenCalled();
});

但是，如果我取消注释plans道具期望，则以下测试失败

fit('should send the success response to "onSearchInsuranceSuccess"', fakeAsync(() => {
    spyOn(component, 'onSearchInsuranceSuccess');
    component.travelPeriod = ['01-08-2019', '01-08-09'];
    component.destination = 'MYS';
    component.tripType.individual = 'days';
    component.onContinue();
    fixture.detectChanges();
    tick();
    expect(component.onSearchInsuranceSuccess).toHaveBeenCalled();
    console.log('[[[plans at spec]]]', component.plans); // Why is it always empty?
    // expect(component.plans[0].plan).toEqual(insurance.data[0].plan); <-- it fails here
    // expect(component.benefitsList[0].title).toEqual(insurance.benefits[0].title);
}));

上述测试的另一个问题是，如果我在tick之后放置fixture.detectChanges();，它会抛出以下错误

错误：队列中仍有 2 个计时器。

以下是component.ts代码：

    onContinue() {
        const startD = moment(this.travelPeriod[0], 'DD-MM-YYYY');
        const endD = moment(this.travelPeriod[1], 'DD-MM-YYYY');
        // The difference is +1 e.g 23-01-2012 till 23-01-2012 with diff 0 whilst we need 1 day insurance so 0 + 1 = 1;
        const duration = endD.diff(startD, 'days') + 1;
        const country = this.countriesList.find((co) => co.code === this.destination);
        const params = {
            plan: this.tripType,
            destination: this.destination,
            region: country.region,
            duration
        };
        console.log('[[plan before]]', this.plans);
        this.insuranceService.search(params)
        .then(
            (res: InsuranceSearchResponse) => this.onSearchInsuranceSuccess(res),
            (error) => this.onFailed(error)
            );
    }
    /**
     * when search insurance is successful
     */
    onSearchInsuranceSuccess(res: InsuranceSearchResponse) {
        if (res.success) {
            this.showForm = false;
            this.plans = res.data;
            this.benefitsList = res.benefits;
        } else {
            this.message = res.message;
        }
        console.log('[[plan after]]', this.plans);
    }

以下是spec的输出

[[plan before]] []length: 0__proto__: Array(0)
context.js:255 [[plan after]] (3) [{…}, {…}, {…}]0: {plan: "Plan 1", fare: {…}, details: {…}, supplierID: 17}1: {plan: "Plan 2", fare: {…}, details: {…}, supplierID: 17}2: {plan: "Plan 3", fare: {…}, details: {…}, supplierID: 17}length: 3__proto__: Array(0)
context.js:255 [[plan before]] []length: 0__proto__: Array(0)
context.js:255 [[[plans at spec]]] []length: 0__proto__: Array(0)

以及上述console输出的快照。

insurance.component.spec.ts

谢谢

Answer 1

问题可能是间谍呼叫。默认情况下，您可以使用此创建一个不执行任何操作的存根。

因此，在您的情况下，监视onSearchInsuranceSuccess会停止执行内部的任何内容，但可以让您测试该方法是否已执行。

有一些方法可以让您定义间谍应该做什么。通常就是像spyOn(...).and.returnValue这样的东西。如果您希望间谍只执行它通常执行的操作，则必须使用spyOn(...).and.callThrough()设置间谍。

这是SpyStrategy的官方茉莉花文档，显示了您的间谍的所有可用方法。