量角器列表筛选测试失败，计数0，而不是预期的数在4个测试

Question

量角器测试失败，而不是从列表滤波值的预期数计数0。但是在实际程序中的过滤器工作正常。

测试运行。数值在测试期间输入到搜索文本框中。测试有什么问题？怎么解决？

这里的测试：

'use strict'; 
 

 
// Angular E2E Testing Guide: 
 
// https://docs.angularjs.org/guide/e2e-testing 
 

 
describe('LLO 2016', function() { 
 

 
    describe('edit-leerling', function() { 
 

 
    beforeEach(function() { 
 
     browser.get('index.html#/leerlingen'); 
 
    }); 
 

 
    it('should filter the leerlingen list as a user types into the search box', function() { 
 
     var editLeerling = element.all(by.repeater('(id, leerling) in leerlingen')); 
 
     var query = element(by.model('mentorQuery')); 
 

 
     expect(editLeerling.count()).toBe(248); 
 

 
     query.sendKeys('5H'); 
 
     expect(editLeerling.count()).toBe(163); 
 

 
     query.clear(); 
 
     query.sendKeys('6V'); 
 
     expect(editLeerling.count()).toBe(85); 
 

 
     query.clear(); 
 
     query.sendKeys('WIND'); 
 
     expect(editLeerling.count()).toBe(22); 
 
    }); 
 

 
    }); 
 

 
});

而这里的HTML：

<div class="panel-heading"> 
 
    <h3 class="panel-title">Leerlingenlijst</h3><br /> 
 
    Zoeken: <input ng-model="mentorQuery" /> 
 
</div> 
 

 
<div class="panel-body"> 
 
    <div class="table-responsive"> 
 
    <table class="table table-hover"> 
 
     <tr> 
 
     <th>Nr.</th> 
 
     <th>Mentor</th> 
 
     <th>Klas</th> 
 
     <th>Leerling Naam</th> 
 
     <th></th> 
 
     <th></th> 
 
     </tr> 
 
     <tr ng-repeat="(id, leerling) in leerlingen | filter: mentorQuery"> 
 
     <form class="form-inline"> 
 
      <td><span>{{leerling.leerlingNummer}}</span></td> 
 
      <td><span>{{leerling.leerlingMentor}}</span></td> 
 
      <td><span>{{leerling.leerlingKlas}}</span></td> 
 
      <td><input type="text" class="form-control" ng-model="leerling.leerlingNaam"></td> 
 
      <td> 
 
      <button type="button" class="btn btn-default" ng-click="update({id: id})"> 
 
       <span class="glyphicon glyphicon-edit"></span> 
 
      </button> 
 
      </td> 
 
      <td> 
 
      <button type="button" class="btn btn-default" ng-click="remove({id: id})"> 
 
       <span class="glyphicon glyphicon-trash"></span> 
 
      </button> 
 
      </td> 
 
     </form> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

好吧，我们在评论想通了，那这是一个计时问题 - 搜索结果时，你的期望是没有加载。

browser.sleep()本身并不是一个可靠的解决方案（见this为什么）。你需要一个browser.wait()和一个等待的条件。至少我们可以检查至少存在一个搜索结果：

var EC = protractor.ExpectedConditions; 
var elm = element(by.repeater('(id, leerling) in leerlingen')); 

browser.wait(EC.presenceOf(elm), 5000); 

var editLeerling = element.all(by.repeater('(id, leerling) in leerlingen')); 
var query = element(by.model('mentorQuery')); 

expect(editLeerling.count()).toBe(248); 

// ...