Question

我们有一些使用Aurelia框架和Dialog插件的TypeScript代码，我们正在尝试使用Jasmine进行测试，但无法确定如何正确执行。

这是源函数：

openDialog(action: string) {
    this._dialogService.open({ viewModel: AddAccountWizard })
        .whenClosed(result => {
            if (!result.wasCancelled && result.output) {
                const step = this.steps.find((i) => i.action === action);
                if (step) {
                    step.isCompleted = true;
                }
            }
        });
}

我们可以创建一个DialogService间谍，并轻松验证open方法 - 但我们无法弄清楚如何让spy使用模拟结果参数调用whenClosed方法，以便我们可以断言该步骤已完成。

这是目前的Jasmine代码：

it("opens a dialog when clicking on incomplete bank account", async done => {
    // arrange
    arrangeMemberVerificationStatus();
    await component.create(bootstrap);
    const vm = component.viewModel as GettingStartedCustomElement;
    dialogService.open.and.callFake(() => {
        return { whenClosed: () => Promise.resolve({})};
    });

    // act
    $(".link, .-arrow")[0].click();

    // assert
    expect(dialogService.open).toHaveBeenCalledWith({ viewModel: AddAccountWizard });
    expect(vm.steps[2].isCompleted).toBeTruthy(); // FAILS

    done();
});

Answer 1

我们刚刚更新了我们的DialogService并遇到了同样的问题，所以我们已经制作了适合我们目的的原始模拟。这是相当有限的，并不适合模拟具有不同结果的多个调用，但应该适用于您的上述情况：

export class DialogServiceMock {
    shouldCancelDialog = false;
    leaveDialogOpen = false;
    desiredOutput = {};
    open = () => {
        let result = { wasCancelled: this.shouldCancelDialog, output: this.desiredOutput };
        let closedPromise = this.leaveDialogOpen ? new Promise((r) => { }) : Promise.resolve(result);
        let resultPromise = Promise.resolve({ closeResult: closedPromise });
        resultPromise.whenClosed = (callback) => {
            return this.leaveDialogOpen ? new Promise((r) => { }) : Promise.resolve(typeof callback == "function" ? callback(result) : null);
        };
        return resultPromise;
    };
}

此模拟可配置为在用户取消对话框时测试各种响应，以及对话框仍处于打开状态的场景。

我们还没有进行e2e测试，所以我不知道确保你等到.click（）调用完成所以你的expect（）之间没有竞争条件的好方法和whenClosed（）逻辑，但我认为你应该能够在测试中使用mock，如下所示：

it("opens a dialog when clicking on incomplete bank account", async done => {
    // arrange
    arrangeMemberVerificationStatus();
    await component.create(bootstrap);
    const vm = component.viewModel as GettingStartedCustomElement;

    let mockDialogService = new MockDialogService();
    vm.dialogService = mockDialogService; //Or however you're injecting the mock into the constructor; I don't see the code where you're doing that right now.
    spyOn(mockDialogService, 'open').and.callThrough();

    // act
    $(".link, .-arrow")[0].click();
    browser.sleep(100)//I'm guessing there's a better way to verify that it's finished with e2e testing, but the point is to make sure it finishes before we assert.

    // assert
    expect(mockDialogService.open).toHaveBeenCalledWith({ viewModel: AddAccountWizard });
    expect(vm.steps[2].isCompleted).toBeTruthy(); // FAILS

    done();
});

如何使用Jasmine模拟DialogService.open（...）。whenClosed（...）？

1 个答案: