使用量角器单击重复的列表项

Question

我正在尝试为我的 AngularJS 应用程序单击量角器中的重复列表项。该列表与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 来为每个li 放置来自item.view 的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，然后将 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);
        })

    });

});