Himalay Majumdar
Himalay Majumdar

Reputation: 3973

Testing nested ng-repeat in protractor

I had been doing trial and error to select and click the following code unsuccessfully, since I am brand new to Protractor I am probably missing something.

HTML

<table id="sample-table-1" class="table table-striped table-condensed table-hover no-bottom-margin feedback">
    <thead>
    <tr>
        <th>
            Service
        </th>
        <th class="text-center">
            Rating
        </th>
    </tr>
    </thead>
    <tbody>
        <tr ng-repeat="feedbackService in feedbackServices" class="ng-scope">
            <td class="ng-binding">Feedback Service One</td>
            <td>
                <div rating="" score="feedbackService.rating_id" max="5" id="34" updaterating="updateScore(ratingId, id)" class="text-center ng-isolate-scope">
                    <div class="rating">
                        <a ng-repeat="star in stars" ng-mouseover="hover($index)" ng-mouseleave="stopHover()" ng-class="starColor($index)" ng-click="setRating($index)" class="ng-scope rating-normal">
                            <i class="fa fa-star-o" ng-class="starClass(star, $index)"></i>
                        </a>
                        <a ng-repeat="star in stars" ng-mouseover="hover($index)" ng-mouseleave="stopHover()" ng-class="starColor($index)" ng-click="setRating($index)" class="ng-scope rating-normal">
                            <i class="fa fa-star-o" ng-class="starClass(star, $index)"></i>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
        <tr ng-repeat="feedbackService in feedbackServices" class="ng-scope">
            <td class="ng-binding">Feedback Service Two</td>
            <td>
                <div rating="" score="feedbackService.rating_id" max="5" id="30" updaterating="updateScore(ratingId, id)" class="text-center ng-isolate-scope">
                    <div class="rating">
                        <a ng-repeat="star in stars" ng-mouseover="hover($index)" ng-mouseleave="stopHover()" ng-class="starColor($index)" ng-click="setRating($index)" class="ng-scope rating-normal">
                            <i class="fa fa-star-o" ng-class="starClass(star, $index)"></i>
                        </a>
                        <a ng-repeat="star in stars" ng-mouseover="hover($index)" ng-mouseleave="stopHover()" ng-class="starColor($index)" ng-click="setRating($index)" class="ng-scope rating-normal">
                            <i class="fa fa-star-o" ng-class="starClass(star, $index)"></i>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

I would like to click anything that is clickable above. TEST

it('should rate feedback services', function() {
    element.all(by.repeater('feedbackService in feedbackServices')).then(function(arr) {
       console.log(arr);
        var rowElems = arr.findElements(by.tagName('td'));
        rowElems.then(function(cols){
            var stars = element.all(by.repeater('star in stars')).then(function(starArr) {
                for (var i = 0; i < cols.length; ++i) {
                    starArr[0].click();
                }
            });
        });
    });
    browser.debugger();
});

xit('feedback services', function() {
    var rows = element.all(by.repeater('feedbackService in feedbackServices'));
    rows.last().then(function(row) {
        var rowElems = row.findElements(by.tagName('td'));
        rowElems.then(function(cols){
                // Not sure if this is the right approach either?

        });
    });
});

I was also able to setup debugger in Webstorm, but I was not able to inspect variables, there was lot of unnecessary data there.

Upvotes: 1

Views: 4332

Answers (1)

Nguyen Vu Hoang
Nguyen Vu Hoang

Reputation: 1570

For the 1st test it('should rate feedback services', function() {, your script has issue from this line

var rowElems = arr.findElements(by.tagName('td'));
rowElems.then(function(cols){

you should change it to

arr.findElements(by.tagName('td')).then(function(rowElems) {
element.all(by.repeater('star in stars')).then(function(starArr)

The same for 2nd test

element.all(by.repeater('feedbackService in feedbackServices')).then(function(rows) {

I re-write your tests as below, I didnot test it

it('should rate feedback services', function() {
    element.all(by.repeater('feedbackService in feedbackServices')).then(function(arrs) {           
        arrs.forEach(function(arr) {
            arr.findElements(by.tagName('td')).then(function(rowElems) {
                var cols = rowElems.length;
                element.all(by.repeater('star in stars')).then(function(starArr) {
                    for (var i = 0; i < cols; ++i) {
                        starArr[0].click();     
                    }
                });
            });
        });
    });
});

it('feedback services', function() {
    element.all(by.repeater('feedbackService in feedbackServices')).then(function(rows) {
        rows[rows.length-1].then(function(row) {
            row.findElements(by.tagName('td')).then(function(rowElems) {
                rowElems.forEach(function(rowElem) {
                    rowElem.getText().then(function(text){
                        console.log(text);
                    });                 
                });
            });
        });
    });
});

Upvotes: 2

Related Questions