Ionic E2E Test View with Jasmine Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found

Question

I am unit/e2e testing an ionic app on an actual device.

I am using ion-infinite-scroll to only display limited ion-items and load more as the user scrolls. I need to test this in jasmine.

I can't test the controller array because the array in $scope stays the same length, only the view is changed.

I have a view like this:

<ion-nav-buttons side="secondary">
    <a id="accounts-search" class="button button-icon icon ion-search" ng-click="showFilterBar()"></a>
</ion-nav-buttons>


<ion-content id="accounts" has-bouncing="false">  
    <ion-list>  
        ...
    </ion-list>  

    <ion-infinite-scroll on-infinite="loadMore()" immediate-check=false></ion-infinite-scroll>
</ion-content>

When I try to compile this view in the test:

    var el;
    var viewHtml;
    var $compile; 
    var $rootScope;

    beforeAll(function(done){  

        $compile = getService("$compile"); 
        $rootScope = getScope();

        $http.get('views/accounts/accounts.html').then(function(res){
            console.log(res);
            viewHtml = res.data; 

            var formElement = angular.element(viewHtml); 

            el = $compile(formElement)($rootScope);

            console.log("got elements");
            console.log(el);

            $rootScope.$digest();

            done();

        },function(err){
            console.error("error getting file");
        });

    });

I get the error:

Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!

Which kind of make sense because the view is expecting to be injected in a place where there is a NavBar, but when I compile it separately, I guess there is no ionNavBar.

Is there any other way to test the live view?

Specifically, I want to test how many items are showing in the ion-list.

FYI:

I am not using ngMock. I am testing everything on a real device where the app is actually running and visible.

I've limited the app so I can see the jasmine results:

<ion-nav-view style="height:100px; position:absolute; bottom: 50;">  </ion-nav-view>

I start the jasmine tests after the Ionic app has loaded and everything is set:

// I've manually exposed this functions so I can control when jasmine starts
jasmine.initialize(); 
jasmine.execute();

score 0 · Answer 1 · answered Sep 30 '16 at 20:34

I found the answer. Instead of compiling the template, we can find it by querying it.

This test shows confirms that only 30 items are displayed.

Then we can programmatically scroll down and test that 60 items are shown

    var el;  

    beforeAll(function(done) { 

        // there are multiple ion-view, we are looking for the one that is active

        var views = document.getElementsByTagName("ion-view");

        for(var i=0; i<views.length;i++){
            if(views[i].getAttribute("nav-view") === "active"){
                el = angular.element(views[i]);
                break;
            }
        }


    }); 

    it('limited accounts should be displayed', function() { 

        var list = el.find('ion-item'); 

        expect(list.length).toEqual($scope.numberOfItemsToDisplay);


    });

Ionic E2E Test View with Jasmine Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found

1 Answers1