मैं प्रोटैक्टर का उपयोग करके एनजी-ग्रिड तत्वों का उपयोग कैसे करूं?

Question

मैं एक पृष्ठ के लिए एक प्रोटैक्टर परीक्षण लिखना चाहता हूं जो एनजी-ग्रिड का उपयोग करता है। मुझे ऐसा करने के तरीके पर कोई दस्तावेज नहीं दिख रहा है। मेरे पृष्ठ पर, मैं डेटा के साथ एक ग्रिड देखते हैं, एचटीएमएल इस तरह दिखता है:

<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: एनजी ग्रिड घटक के अंदर विभिन्न तत्वों को acces को

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

एक बहुत ही उपयोगी तरीका by.binding('row.entity.<field>'), का उपयोग जहां '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>') का उपयोग किया।

दिए गए ई 2 ई परीक्षण का एक पूर्ण रननेबल उदाहरण this Git repository में उपलब्ध है।

आशा है कि यह मदद करता है।