Come accedere agli elementi di griglia ng usando il rapportatore?

Question

Vorrei scrivere un test del goniometro per una pagina che utilizza ng-grid. Non vedo alcuna documentazione su come farlo. Sulla mia pagina, vedo una griglia con i dati, il codice HTML simile al seguente:

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

Come posso trovare elementi su questa griglia da goniometro?

Answer 1

Considerate seguenti controller:

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

E seguente codice HTML:

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

Un modo molto utile per accesso a diversi elementi all'interno componente ng-grid è utilizzare by.binding('row.entity.<field>'), dove 'field' è un chiave del tuo modello di dati. È necessario definire un banco di prova come segue: Codice

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

Fonte di controller e contenuto HTML trovato in Plunker

In questo esempio, ho definito un modello personalizzato per ultima colonna. Quindi, ho usato by.model('row.entity.<field>') per accedere al rispettivo elemento.

Un esempio eseguibile completo di un dato test e2e è disponibile in this Git repository.

Hope It helps.