如何在 promise 解决之前和之后验证值？

Question

我正在使用 Protractor 为 Angular 1.5 应用程序创建端到端测试。该应用程序允许用户通过使用标准input type="file" 控件和submit 按钮选择文件，将文件上传到后端Web API。我有一个控制器，它的行为基本上是这样的：

function exampleController() {
    var vm = this;

    vm.status = "";
    vm.buttonClickHandler = buttonClickHandler;

    function buttonClickHandler() {
        vm.status = "calling";
        service.makeAsyncCall()
               .then(function() {
                   vm.status = "success";
               }, function() {
                   vm.status = "error";
               });
    }
}

当用户点击submit按钮时调用buttonClickHandler。

如何使用 Protractor 编写端到端测试，验证用户单击按钮时状态是否变为“正在调用”，然后在承诺解决时变为“成功”？

在我的大多数尝试中，我可以验证vm.status 是否已设置为“成功”，或如果我设置ignoreSynchronization = true，我可以验证它是否设置为“正在调用”，但后者仅在我在我的 Web API 后端调用中构建人为延迟时起作用，否则该过程显然太快并且值将显示“成功”。

Answer 1

这是相当丑陋，易碎的，这是一种不好的做法，但无论如何我都会尝试一下 :)

it('click test', function () {
    $('button').click();

    browser.wait(function () {
        // Polls 'as fast as possible' until it evalutes to truthy value
        // This might be flaky if 'calling' status is shorter than
        // 1 polling interval (whose length can't be determined)
        return $('div_containing_status').getText().then(function (status) {
            return /calling/.test(status);
        });
    }, 10000);

    expect($('div_containing_status').getText()).toBe('calling');

    browser.wait(function () {
        return $('div_containing_status').getText().then(function (status) {
            return /success/.test(status);
        });
    }, 10000);

    expect($('div_containing_status').getText()).toBe('success');
});

更新：根据@alecxe 评论编辑了有关投票的信息