describe('$ionicNavBar controller', function() {
beforeEach(module('ionic'));
var scope, ele;
function makeNavBarCtrl(css) {
var ctrl;
ele = angular.element('
');
inject(function($rootScope, $controller, $ionicHistory, $ionicViewSwitcher) {
scope = $rootScope.$new();
ctrl = $controller('$ionicNavBar', {
$scope: scope,
$element: ele,
$attrs: { class: css },
$ionicHistory: $ionicHistory,
$ionicViewSwitcher: $ionicViewSwitcher
});
});
return ctrl;
}
it('should createHeaderBar instance', function() {
var ctrl = makeNavBarCtrl('bar-royal');
var headerBar = ctrl.createHeaderBar();
expect(headerBar).toBeDefined();
expect(headerBar.containerEle()).toBeDefined();
expect(headerBar.headerBarEle().hasClass('bar-royal')).toBe(true);
expect(headerBar.headerBarEle().children().eq(0).hasClass('title')).toBe(true);
});
it('should createHeaderBar and add back button', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '');
var headerBar = ctrl.createHeaderBar();
var backBtnEle = headerBar.headerBarEle().find('button');
expect(headerBar.headerBarEle().children().eq(0).text()).toBe('Back');
expect(headerBar.headerBarEle().children().eq(1).hasClass('title')).toBe(true);
});
it('should createHeaderBar and add primary buttons', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('primaryButtons', '
');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(0).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('title')).toBe(true);
});
it('should createHeaderBar, back button and primary buttons', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '
');
ctrl.navElement('primaryButtons', '
');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('back-button')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('title')).toBe(true);
});
it('should createHeaderBar and add secondary buttons', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('secondaryButtons', '
');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('secondary-buttons')).toBe(true);
});
it('should createHeaderBar, back button add secondary buttons', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '
');
ctrl.navElement('secondaryButtons', '
');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('back-button')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).children().eq(0).hasClass('secondary-buttons')).toBe(true);
});
it('should createHeaderBar, back button, primary buttons, and secondary buttons', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '
');
ctrl.navElement('primaryButtons', '
');
ctrl.navElement('secondaryButtons', '
');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('back-button')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(3).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(3).children().eq(0).hasClass('secondary-buttons')).toBe(true);
});
it('should createHeaderBar, primary btns right from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('primaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('right')
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('primary-buttons')).toBe(true);
}));
it('should createHeaderBar, secondary btns right from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('right')
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('secondary-buttons')).toBe(true);
}));
it('should createHeaderBar, primary btns right, secondary btns right, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('primaryButtons', '
');
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('right');
$ionicConfig.navBar.positionSecondaryButtons('right');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(1).hasClass('secondary-buttons')).toBe(true);
}));
it('should createHeaderBar, primary btns right, secondary btns left, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('primaryButtons', '
');
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('right');
$ionicConfig.navBar.positionSecondaryButtons('left');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(0).children().eq(0).hasClass('secondary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).children().eq(0).hasClass('primary-buttons')).toBe(true);
}));
it('should createHeaderBar, back button, primary btns right, secondary btns right, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton' ,'
');
ctrl.navElement('primaryButtons', '
');
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('left');
$ionicConfig.navBar.positionSecondaryButtons('right');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('back-button')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('title')).toBe(true);
expect(headerBar.headerBarEle().children().eq(3).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(3).children().eq(0).hasClass('secondary-buttons')).toBe(true);
}));
it('should createHeaderBar, secondary btns left, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionSecondaryButtons('left');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(0).children().eq(0).hasClass('secondary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('title')).toBe(true);
}));
it('should createHeaderBar, primary btns left, secondary btns left, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('primaryButtons', '
');
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('left');
$ionicConfig.navBar.positionSecondaryButtons('left');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(0).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(0).children().eq(1).hasClass('secondary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('title')).toBe(true);
}));
it('should createHeaderBar, primary btns left, secondary btns left, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '
');
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionSecondaryButtons('left');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('back-button')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('secondary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('title')).toBe(true);
}));
it('should createHeaderBar, back button, primary btns left, secondary btns left, from config', inject(function($ionicConfig) {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '
');
ctrl.navElement('primaryButtons', '
');
ctrl.navElement('secondaryButtons', '
');
$ionicConfig.navBar.positionPrimaryButtons('left');
$ionicConfig.navBar.positionSecondaryButtons('left');
var headerBar = ctrl.createHeaderBar();
expect(headerBar.headerBarEle().children().eq(0).hasClass('back-button')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).hasClass('buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(0).hasClass('primary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(1).children().eq(1).hasClass('secondary-buttons')).toBe(true);
expect(headerBar.headerBarEle().children().eq(2).hasClass('title')).toBe(true);
}));
it('should createHeaderBar and apply scope to new header bar', function() {
var ctrl = makeNavBarCtrl();
scope.buttonText = 'My Button';
ctrl.navElement('backButton', '');
var headerBar = ctrl.createHeaderBar();
scope.$digest();
var backButtonEle = headerBar.headerBarEle().find('button');
expect(backButtonEle.text()).toBe(scope.buttonText);
});
it('should show the active back button on update() w/ showBack false', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '');
ctrl.init();
ctrl.update({
enableBack: true,
showBack: false
});
var backButtonEle1 = ele[0].querySelector('[nav-bar]:first-child .back-button');
var backButtonEle2 = ele[0].querySelector('[nav-bar]:last-child .back-button');
expect(backButtonEle1.classList.contains('hide')).toBe(true);
expect(backButtonEle2.classList.contains('hide')).toBe(true);
ctrl.update({
enableBack: true,
showBack: true
});
expect(backButtonEle1.classList.contains('hide')).toBe(false);
expect(backButtonEle2.classList.contains('hide')).toBe(true);
});
it('should not show the back button on update() w/ enableBack false', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '');
ctrl.init();
ctrl.update({
enableBack: false,
showBack: true
});
var backButtonEle1 = ele[0].querySelector('[nav-bar]:first-child .back-button');
var backButtonEle2 = ele[0].querySelector('[nav-bar]:last-child .back-button');
expect(backButtonEle1.classList.contains('hide')).toBe(true);
expect(backButtonEle2.classList.contains('hide')).toBe(true);
ctrl.update({
enableBack: true,
showBack: true
});
expect(backButtonEle1.classList.contains('hide')).toBe(false);
expect(backButtonEle2.classList.contains('hide')).toBe(true);
});
it('should always hide the back buttons on showBackButton(false)', function() {
var ctrl = makeNavBarCtrl();
ctrl.navElement('backButton', '');
ctrl.init();
ctrl.showBackButton(false);
ctrl.update({
enableBack: true,
showBack: true
});
var backButtonEle1 = ele[0].querySelector('[nav-bar]:first-child .back-button');
var backButtonEle2 = ele[0].querySelector('[nav-bar]:last-child .back-button');
expect(backButtonEle1.classList.contains('hide')).toBe(true);
expect(backButtonEle2.classList.contains('hide')).toBe(true);
ctrl.showBackButton(true);
ctrl.update({
enableBack: true,
showBack: true
});
expect(backButtonEle1.classList.contains('hide')).toBe(false);
expect(backButtonEle2.classList.contains('hide')).toBe(false);
ctrl.update({
enableBack: false,
showBack: true
});
expect(backButtonEle1.classList.contains('hide')).toBe(true);
expect(backButtonEle2.classList.contains('hide')).toBe(false);
});
});