Question

我正在为我正在处理的应用程序编写e2e测试，我正在尝试从包装器指令中编写警报指令（Angular UI Bootstrap）生成的警报测试。这是我到目前为止编写的代码：

首先，我们有用于生成警报的包装器指令

// Grab our directive controller
// The controller just contains the alert functions for the Angular UI     
// Bootstrap alerts directive
import InfoAlertController from './info-alert.controller.js';

let moduleName = 'infoAlert';

// ## Directive Definition
class InfoAlert {

    constructor() {

        this.template =
        `
            <div>

                <alert
                    ng-repeat="alert in vm.alerts"
                    type="{{ alert.type }}"
                    close="vm.closeAlert($index)" >

                        {{ alert.msg }}

                </alert>

            </div>
        `;
        this.restrict = 'E';
        this.scope = {};
        this.bindToController = {

            name : '@?'
        };
        this.transclude = true;
        this.controller = InfoAlertController;
        this.controllerAs = 'vm';
    }

    // ### Optional Link Function
    link (scope, elem, attrs, vm, transclude) {

    }
}

export default [moduleName, directiveFactory(InfoAlert)];

以下是在user login组件视图

中实施的指令

<info-alert
     name="loginAlerts">
</info-alert>

user login组件是另一个指令，其中包含一个带有Angular验证的表单，该表单与Authentication服务进行交互。

这是我正在尝试编写的测试

describe('login component', () => {

    it('should display an error after failedauthentication', () => {

            browser.get('/login');

            element(by.model('vm.user.username')).sendKeys('nerfherder');

            element(by.model('vm.user.password')).sendKeys('badpassword');

            element(by.css('.btn-custom')).click();

            let e = element(by.repeater('alert in vm.alerts').row(0));

            // This is always fails no matter what I try
            expect(e.isDisplayed()).toBe(true);
    });
});

我得到的错误是Expected 0 to be greater than 0，我认为这意味着它没有使用我使用的方法找到警报。我还尝试按其班级element(by.css('.alert-danger'));定位警报分别为element(by.css('.alert'));。它也不适用于browser.waitForAngular();。

我也尝试过量角器预期条件的实施无济于事。

所有功能都适用于手动测试，并且在测试执行期间会弹出警报。任何帮助都会非常感激，因为这个开发人员很难过。

解决方案

此解决方案基于alecxe的答案：

describe('login component', () => {

    it('should display an error after failed authentication', () => {

        let EC = protractor.ExpectedConditions;

        browser.get('/login');

        element(by.model('vm.user.username')).sendKeys('nerfherder');

        element(by.model('vm.user.password')).sendKeys('badpassword');

        let alert = element(by.repeater('alert in vm.alerts').row(0));

        let alertLoaded = EC.visibilityOf(alert);

        element(by.css('.btn-custom')).click();

        // UI Bootstrap alert class
        let e = element(by.css('.alert-danger'));

        browser.wait(alertLoaded, 5000);

        expect(e.isDisplayed()).toBe(true);
    });
});

现在测试正常。

Answer 1

您可能需要明确等待警告显示：

foo = zipWith ($) . repeat

Answer 2

试试这个::

let e = element.all(by.repeater('alert in vm.alerts').row(0));

使用量角器获取ng-repeat中的元素

2 个答案: