Question

我试图在AngularJS应用程序的Protractor中单击重复的列表项。 ng-repeat重复了该列表，我想更改选项卡项目的显示。 html看起来像这样：

<ul class="navigation">
    <li ng-repeat="item in vm.navLinks" class="item"
     ng-class="{'active': item.view == vm.selectedState.view}"
     ng-click="vm.selectApiView(item.view)">
         <div class="tabText">{{item.title}}</div>
     </li>
</ul>

 <div class="containerClass">
     <div id="firstDiv" class="tab-view">
       Tab Item 1
      </div>
 </div>

在我的控制器中，我具有更改单击的div的样式的代码，以便在我的标签菜单中可见：

vm.selectApiView = function(view) {
    vm.selectedState.view = view;

    var elementView = document.getElementsByClassName("tab-view");

    for (var i = 0; i < elementView.length; i++) {
        elementView[i].style.display = "none";
    }

    document.getElementById(view).style.display = "block";
};

在量角器测试中，我有以下代码，应该由中继器在列表上循环并单击第二个列表项。我的猜测是它没有单击，因为样式未设置为block，但是我不知道如何证明这一点。我也可能会误解它。

describe("the tab selection", function() {
    it("should expect vm.selectedState.view to be 'fieldname' when clicked",function(){
        element.all(by.repeater('item in vm.navLinks')).get(1).click();
        let view = element(by.model('vm.selectedState.view'));
        console.log('view', view)
        expect(view).toEqual('fieldname')
    });

});

这是应该设置量角器测试以单击div吗？还是我错过了一步？

Answer 1

1）添加一个CSS类来更改活动标签的显示样式

.active-view {
    display: block !important;
}

2）添加一个属性：data-id，以放置item.view中每个li的ID值

<ul class="navigation">
    <li class="item" 
        ng-repeat="item in vm.navLinks" 
        ng-class="{'active': item.view == vm.selectedState.view}"
        ng-click="vm.selectApiView(item.view)"
        data-id="{{item.view}}">
            <div class="tabText">{{item.title}}</div>
    </li>
</ul>

<div class="containerClass">
    <div id="firstDiv" class="tab-view">
    Tab Item 1
    </div>
</div>

3）在Angular控制器中，更改选项卡的class属性以从所有选项卡的active-view属性中删除class，然后将active-view添加到活动选项卡中。

vm.selectApiView = function(view) {
    vm.selectedState.view = view;

    var tabs = document.getElementsByClassName("tab-view");

    for (var i = 0; i < tabs.length; i++) {
        tabs[i].setAttribute('class', tabs[i].className.replace(' active-view', ''));
    }

    var activeTab = document.getElementById(view);
    activeTab.setAttribute('class', activeTab.className + ' active-view');
};

4）通过CSS定位符div.tab-view.active-view找到活动标签，将活动li的data-id与活动div的id进行比较。

describe("the tab selection", function() {

    it("should expect vm.selectedState.view to be 'fieldname' when clicked",function(){

        var activeTab = element.all(by.repeater('item in vm.navLinks')).get(1);
        activeTab.click();

        let activeView = element(by.css('div.tab-view.active-view'));

        // the `data-id` of active li should euqal to the `id` of active div
        activeTab.getAttribute('data-id').then(function(dataId){
            return expect(activeView.getAttribute('id')).toEqual(dataId);
        })

    });

});

单击带有量角器的重复列表项

1 个答案: