CODEWITHSUNDEEP
protractorangularjs-e2e
Patrick Haggood
Patrick Haggood

Reputation: 65

How to test slide-box in protractor

I have a slide-box described in one of my protractor tests; I can find the box and can get properties (i.e. 'how many') but how do I cycle through the boxes so I can test verify the display, e.g.

profilepage.slides.next()
expect(profilepage.slide.slideTitle  = 'Credentials'
profilepage.slides.next()
expect(profilepage.slide.slideTitle = "Info"
etc.

Controller:

.controller('ProfileCtrl', function ($scope, ProfileService) {

    $scope.data = {
        numViewableSlides: 0,
        slideIndex: 0,
        initialInstruction: true,
        secondInstruction: false, slides: [
            {
                'template': 'templates/slidebox/credentials.html',
                'viewable': true
            },

            {
                'template': 'templates/slidebox/contactinfo.html',
                'viewable': true
            },
            {
                'template': 'templates/slidebox/employeeinfo.html',
                'viewable': true
            },
            {
                'template': 'templates/slidebox/assignmentinfo.html',
                'viewable': true
            }
        ]
    }
    . . .

Template:

    <ion-slide-box on-slide-changed="slideChanged(index)" show-pager="true">

        <ion-slide ng-repeat="slide in data.slides | filter:{viewable : true}">
            <div ng-include src="slide.template"></div>
        </ion-slide>

    </ion-slide-box>

Page Object:

profilepage.prototype = Object.create({}, {
backButton: {
    get: function () {
        return element(by.css('ion-ios7-arrow-back'));
    }
},
slides: {
    get: function () {
        return element.all(by.repeater('slide in data.slides'));
    }
},
slideTitle: {
    get: function (id) {
        element.all(by.repeater('slide in data.slides')).then(function (slidelist) {
            var titleElement = slidelist[id].element(by.css('#slideName'));
            return titleElement.getText();
        });
    }
},
. . .

Spec:

describe('Profile', function () {

var ppage = new profilepage();

beforeEach(function () {
    browser.ignoreSynchronization = false;
});

it('should have correct lastname and have four slides on profile page', function () {
    expect(browser.getCurrentUrl()).toEqual('http://localhost:8100/#/profile');
    expect(ppage.lastname).toBe('Smith,');
    expect(ppage.slides.count()).toEqual(4);
    browser.sleep(1000);
});

it('should slide all the pages', function(){
    expect(browser.getCurrentUrl()).toEqual('http://localhost:8100/#/profile');
    // SLIDE EACH PAGE ABOUT HERE  <------------
    browser.sleep(1000);
})

Upvotes: 1

Views: 501

Answers (1)

Yossi Shasho
Yossi Shasho

Reputation: 3640

The idea is to use ionic's $ionicSlideBoxDelegate from within the spec file. For that we'll need to make it accessible globally:

var addProtractorSlideBox, nextSlide;

addProtractorSlideBox = function() {
  return browser.addMockModule("services", function() {
    return angular.module("services").run(function($ionicSlideBoxDelegate) {
      return window._$ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
    });
  });
};

nextSlide = function() {
  return browser.executeScript('_$ionicSlideBoxDelegate.next()');
};

...

beforeEach(function() {
  ...
  addProtractorSlideBox();
  ...
});

it('...', function() {
  ...
  nextSlide();
  ...
})

This pattern is very useful for other ionic/angular services.

Upvotes: 1

Related Questions