如何使用Protractor测试mdToast的渲染文本？

Posted 2021-04-16

我的同事正在使用Angular Material，他正在以这种方式使用mdToast :(在else语句中）

$scope.login = () => {
    $scope.loading = true;
    authService.login($scope.username, $scope.password, (result) => {
        if (result) {
            if (result === true) {
                $location.path('/');
            } else {
                $mdToast.show($mdToast.simple().textContent($filter('capitalize')($filter('translate')('passwordNotValid'))).position('top right').hideDelay(3000));
                $scope.loading = false;
                $("#input_username_login").focus();
            }
        } else {
            //error callback from server
            $mdToast.show($mdToast.simple().textContent($filter('capitalize')($filter('translate')('passwordNotValid'))).position('top right').hideDelay(3000));
            $scope.loading = false;
            $("#input_username_login").focus();
        }
    });
};

我需要测试结果吐司的文本，但似乎Angular Material的mdToast使用ng-if。我的同事没有任何用于吐司的html代码（他只是使用上面的控制器来生成它），即使这样，当触发吐司时，下一个代码在DOM中出现几秒钟：

screenshot of the generated md-toast

除了其他方面，我尝试过使用browser.wait，waitForAngular等减慢toast的消失，但是没有用。我坚持：

it("should show error toast in English when user fails login", function(){        
    login.email_address_field.sendKeys('[e-mail]');
    login.password_field.sendKeys('hardest_pass_123');
    login.login_button.click();
    expect(element(by.tagName('md-toast')).element(by.tagName('span')).getText()).toBe('Incorrect username and/or password');
});

答案

我找到了一个使用这个answer作为例子的解决方案。我的规格是：

it("should show error toast in English when user fails login", function(){        
    login.email_address_field.sendKeys('[e-mail]');
    login.password_field.sendKeys('hardest_pass_123');
    login.login_button.click();
    browser.ignoreSynchronization = true; 
    browser.sleep(1000);
    expect(element(by.tagName('md-toast')).element(by.tagName('span')).getText()).toBe('Incorrect username and/or password');
    browser.ignoreSynchronization = false;
});

另一答案

您可以使用ExpectedConditions使您的脚本等到烤箱消息显示。一旦显示烤面包机，您也可以验证消息。

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.tagName('md-toast'))),5000);
expect(element(by.tagName('md-toast')).element(by.tagName('span')).getText()).toEqual('Incorrect username and/or password');

另一答案

这个规范对我有用，它不使用睡眠。这里需要注意的重要一点是，浏览器在等待时必须设置browser.ignoreSynchronization标志。由于browser.wait的异步特性，必须在browser.wait promise解析之后更改ignoreSynchronization，否则它可能无效。

// a close button that appears on the md-toast template
const closeToastButton = $('[data-automation="toast-close"]')
const cond = protractor.ExpectedConditions
function waitToastShow() {
    return browser.wait(cond.elementToBeClickable(closeToastButton), 5000)
}
function waitToastHide() {
    return browser.wait(cond.invisibilityOf(closeToastButton), 5000)
}

screenshot = name => browser.takeScreenshot().then(/* save fn */)

describe('a suite ... ', () => {
    it('takes screenshots of an md-toast once shown and after hidden', function () {
        // ... actions that launch an md-toast using $mdToast.show({ ... })
        browser.ignoreSynchronization = true
        waitToastShow().then(() => {
            screenshot('toast-showing.png')
            waitToastHide().then(() => {
                screenshot('toast-hidden.png')
                browser.ignoreSynchronization = false;
            })
        })
    });
}