使用 ui-select 用量角器测试

Question

我正在尝试用量角器测试 ui-select。在这个 ui-select 中，我有一个国家列表。我的 html 看起来像：

<ui-select ng-model="datiAnagrafici.countryOfBirth" name="countryOfBirth" theme="bootstrap" reset-search-input="true" append-to-body="true" required blur>
                <ui-select-match placeholder="paese di nascita">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="country.code as country in countries | filter: {name:$select.search}">
                    <span ng-bind-html="country.name"></span>
                </ui-select-choices>
</ui-select>

我的页面对象如下所示：

this.country = element(by.model('datiAnagrafici.countryOfBirth'));
this.fillForm = function(){
   this.country.sendKeys('IT');
}

在我的规格文件中我有：

it('should fill the form', function() {
  form.fillForm();
})

但是当我运行我的测试时，ng-model 没有填充发送的数据。你有什么建议吗？谢谢

Answer 1

发送密钥之前，单击 ui-select 元素:

this.country.click();
this.country.sendKeys('IT');

Answer 2

我找到了解决方法here

this.country = element(by.model('datiAnagrafici.countryOfBirth'));
this.selectCountry = this.country.element(by.css('.ui-select-search'));

然后在填表的方法就跟alecxe说的差不多：

this.country.click();
this.selectCountry.sendKeys('Italy');

Answer 3

虽然我无法让 sniper87 的答案为我工作，但通过使用 css 这可以正常工作：

element(by.css('div.ui-select-container div.ui-select-match span.ui-select-input')).click();
element(by.css('div.ui-select-container .ui-select-search')).sendKeys('foo');;

Answer 4

您也可以用这样的函数包装 ui-select：

    function UiSelect(elem) {
        var self = this;

        self._input = elem;
        self._selectInput = self._input.element(by.css('.ui-select-search'));
        self._choices = self._input.all(by.css('.ui-select-choices .ui-select-choices-row-inner'));

        self.sendKeys = function(val) {
            self._input.click();
            self._selectInput.clear();
            return self._selectInput.sendKeys(val);
        };

        self.pickChoice = function(index){
            browser.waitForAngular();
            expect(self._choices.count()).not.toBeLessThan(index + 1);
            return self._choices.get(index).click();
        };
    };

现在可以更轻松地操作任何 ui-select 输入：

var input = new UiSelect(element(by.model('datiAnagrafici.countryOfBirth')));
input.sendKeys('IT'); 
input.pickChoice(0); // Pick choice with index 0 when searching for 'IT'.

Answer 5

单击 ui-select 元素并填写输入后，您应该 select 添加以下结果：

element.all(by.css('.ui-select-choices-row-inner span')).first().click();

使用 ui-select 用量角器测试

Testing with protractor using ui-select

javascript

testing

angularjs

protractor

angular-ui-select