Щелкните по элементу повторного списка с помощью транспортира

Question

Я пытаюсь нажать на повторяющийся элемент списка в Protractor для моего приложения 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 для размещения значения идентификатора из item.view для каждого li

<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) В угловом контроллере измените атрибут класса вкладки, чтобы удалить 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, сравните data-id активного li с id активного div.

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);
        })

    });

});