How to test slide-box in protractor - protractor

Question

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);
})

Answer 1

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.