각도기를 사용하여 그리드 요소에 어떻게 액세스합니까?

Question

ng-grid를 사용하는 페이지에 대한 각도기 테스트를 작성하고 싶습니다. 그 방법에 대한 문서가 보이지 않습니다. 내 페이지에 데이터가있는 표가 나타납니다. html은 다음과 같습니다.

<div class="gridStyle" 
    ng-grid="tenantsGridOptions" 
    ng-if="tenantsGridOptions != undefined" > 
</div> 

각도기에서이 격자의 요소를 어떻게 찾을 수 있습니까?

Answer 1

컨트롤러 다음 고려 :

var app = angular.module('angularE2EExamples'); 
app.controller('GridCustomersController', function ($scope, $http) { 
    $scope.customers = [{id: 1, name: 'Lissa Montrose', email: 'lissa@company.com', city: 'Washington', comment: ''}, 
         {id: 2, name: 'Karri Lanze', email: 'karri@company.com', city: 'Dallas', comment: ''}, 
         {id: 3, name: 'Michael Smith', email: 'michael@company.com', city: 'Berkeley', comment: ''}, 
         {id: 4, name: 'Fred Tyler', email: 'fred@company.com', city: 'Washington', comment: ''} 
        ]; 

    $scope.gridCustomers = { 
    data: 'customers', 
    columnDefs: [{field: 'id', displayName: 'Id', width: 30}, 
       {field: 'name', displayName: 'Name'}, 
       {field: 'email', displayName: 'Email'}, 
       {field: 'city', displayName: 'City'}, 
       {field: 'comment', displayName: 'Comment', 
        cellTemplate: '<input class="form-control input-sm" type="text" ng-input="COL_FIELD" ng-model="row.entity.comment" />'} 
    ], 
    enableCellSelection: true, 
    enableRowSelection: false, 
    enableCellEdit: true, 
    enableColumnResize: true, 
    enableColumnReordering: true, 
    multiSelect: false, 
    width: 'auto' 
    }; 
}); 

그리고 다음 HTML : NG-그리드 구성 요소 내부의 다른 요소에 대한 액세스에

<div ng-controller="GridCustomersController"> 
    <div class="gridStyle" ng-grid="gridCustomers" style="height: 200px"> 
    </div> 
</div> 

매우 유용한 방법은 'field'는 어디 by.binding('row.entity.<field>')를 사용하는 것입니다 데이터 모델의 키. 당신은 다음과 같이 테스트 케이스를 정의해야합니다 : 컨트롤러와 HTML 내용의

describe('Customer test cases.', function() { 
    it('Should iterate all grid elements', function(){ 
    browser.get('http://localhost:9000/customers'); 
    element.all(by.binding('row.entity.id')).each(function(cell){ 
     browser.sleep(500); 
     cell.click(); 
     cell.getText().then(function(text){ 
     console.log('Id: ' + text); 
     }); 
    }); 
    element.all(by.binding('row.entity.name')).each(function(cell){ 
     browser.sleep(500); 
     cell.click(); 
     cell.getText().then(function(name){ 
     console.log('Name: ' + name); 
     }); 
    }); 
    element.all(by.model('row.entity.comment')).each(function(cell){ 
     browser.sleep(500); 
     cell.click(); 
     cell.sendKeys('New customer.'); 
    }); 
    browser.sleep(2000); 
    }); 
}); 

소스 코드이 예에서 Plunker

에서 발견, 나는 지난 칼럼에 대한 사용자 지정 템플릿을 정의했다. 따라서 각 요소에 액세스하려면 by.model('row.entity.<field>')을 사용했습니다.

주어진 e2e 테스트의 완전한 실행 가능한 예제는 this Git repository입니다.

희망이 도움이됩니다.