It seems like the infinite scrolling feature in ng-grid is not exactly infinite, but it's the closest comparison I could come up with for what I am observing.
In our application, we are using ng-grid to display data in a table with approximately 170 items (rows). However, when inspecting the repeater created by ng-grid in the browser, I noticed that it only loads and displays 35 items at a time. As you scroll down the list, the older rows at the top are removed from the DOM while new rows are added at the bottom. This behavior deviates from traditional infinite scrolling where more rows would usually be appended seamlessly.
To clarify, there are always 35 'ng-repeat=row in rendered rows' elements present in the DOM regardless of how far you have scrolled down the page.
This setup poses a challenge when trying to test the functionality. I need to retrieve and store the text of all 170 items in the list. However, methods like
element.all(by.binding('item.name'))Therefore, my question is how can I access and extract all 170 items as an object that can then be iterated through to gather their respective texts and store them in an array?
In other instances where we had fewer than 35 items displayed, I used bindings to create an object, followed by asynchronous processing to fetch and store the text of each row (see code snippet below for a modified example).
//column data contains only 35 rows, i need all 170.
var columnData = element.all(by.binding('row.entity.name')),
colDataTextArr = [],
prevOrderArray = ['item1', 'item2'... 'item 169', 'item 170'];
function getColumnData(columnData, colDataTextArr, prevOrderArray){
columnData.then(function(colData){
//using async to go over each row
async.eachSeries(colData, function(colDataRow, nRow){
//get the text for the current async row
colDataRow.getText().then(function(colDataText){
//add each rows text to an array
colDataTextArr.push(colDataText);
nRow()
});
}, function(err){
if(err){
console.log('Failed to process a row')
}else{
//perform the expect
return expect(colDataTextArr).toEqual(prevOrderArray);
}
});
});
}
Additionally, I acknowledge that iterating through 170 rows and storing the text in an array may not be the most efficient approach. Therefore, any suggestions for a better method are welcome.
I'm relatively new to JavaScript and web testing, so if I'm not using the correct terminology or if my explanation is unclear, please let me know, and I'll be happy to provide further clarification.