javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ionNavBar,ionHeaderBar): use declarative syntax

Browse Source 
BREAKING CHANGE:

navBar is majorly different.  Manually write this when changelog is
released.  Add link to docs.
This commit is contained in:
Andy Joslin
2014-03-13 18:35:34 -06:00
parent c0f08f5113
commit bfcfae3747
14 changed files with 1025 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
js/ext/angular/test/directive/ionicView.unit.js
View File

@@ -1,263 +1,63 @@
'use strict';
describe('Ionic View', function() {
var compile, scope, listElement, listCtrl;
describe('ionView directive', function() {
beforeEach(module('ionic.ui.viewState'));
beforeEach(inject(function($compile, $rootScope, $controller) {
compile = $compile;
scope = $rootScope;
function setup(attrs, scopeProps, content) {
var el;
inject(function($compile, $rootScope) {
var scope = angular.extend($rootScope.$new(), scopeProps || {});
el = angular.element('<ion-view '+(attrs||'')+'>');
el.data('$ionNavBarController', {
changeTitle: jasmine.createSpy('changeTitle'),
setTitle: jasmine.createSpy('setTitle'),
showBackButton: jasmine.createSpy('showBackButton'),
showBar: jasmine.createSpy('showBar')
});
content && el.html(content);
el = $compile(el)(scope);
$rootScope.$apply();
});
return el;
}
it('should remove title & add pane, even with no navbar', inject(function($compile, $rootScope) {
var el = $compile('<ion-view title="1">')($rootScope.$new());
$rootScope.$apply();
expect(el.hasClass('pane')).toBe(true);
expect(el[0].getAttribute('title')).toBe(null);
}));
it('should init a view', function() {
var element = compile('<ion-view>me view</ion-view>')(scope);
expect(element.html()).toEqual('me view');
it('should have content inside', function() {
var el = setup(null, null, '<b>some</b> html');
expect(el.html()).toBe('<b>some</b> html');
});
it('should add pane classname and remove title from view', function() {
var element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
expect(element.attr('title')).toBeUndefined();
expect(element.hasClass('pane')).toEqual(true);
it('should changeTitle with a navDirection', function() {
var el = setup('title="Hi, {{1}}!"', {$navDirection: 'foo'});
expect(el.controller('ionNavBar').changeTitle).toHaveBeenCalledWith('Hi, 1!', 'foo');
});
it('should broacast view enter on link', function() {
spyOn(scope, '$broadcast');
var element = compile('<ion-view title="Me Title"></ion-view>')(scope);
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: undefined });
scope.$navDirection = 'forward';
element = compile('<ion-view title="Me Title"></ion-view>')(scope);
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: 'forward' });
it('should showBackButten depending on what is given', function() {
var el = setup();
expect(el.controller('ionNavBar').showBackButton).toHaveBeenCalledWith(true);
el = setup('hide-back-button="true"');
expect(el.controller('ionNavBar').showBackButton).toHaveBeenCalledWith(false);
});
it('should set hide back button', function() {
spyOn(scope, '$broadcast');
var element = compile('<ion-view></ion-view>')(scope);
var viewScope = element.isolateScope();
expect(viewScope.hideBackButton).toBeUndefined();
expect(scope.$broadcast).not.toHaveBeenCalledWith('viewState.showBackButton', false);
element = compile('<ion-view hide-back-button="true"></ion-view>')(scope);
viewScope = element.isolateScope();
expect(viewScope.hideBackButton).toEqual(true);
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.showBackButton', false);
it('should showBar depending on what is given', function() {
var el = setup();
expect(el.controller('ionNavBar').showBar).toHaveBeenCalledWith(true);
var el = setup('hide-nav-bar="true"');
expect(el.controller('ionNavBar').showBar).toHaveBeenCalledWith(false);
});
it('should add/remove back button based on events', function() {
var element = compile('<ion-nav-bar back-button-label="Back"></ion-nav-bar>')(scope);
scope.$apply();
function backButton() {
return angular.element(element[0].querySelector('.back-button'));
};
expect(backButton().hasClass('hide')).toEqual(true);
scope.$broadcast('viewState.showBackButton', false);
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(true);
scope.$broadcast('viewState.showBackButton', true);
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(false);
scope.$broadcast('$viewHistory.historyChange', { showBack: false });
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(true);
scope.$broadcast('$viewHistory.historyChange', { showBack: true });
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(false);
it('should setTitle on change', function() {
var el = setup('', {title: 'foo'});
expect(el.controller('ionNavBar').setTitle).not.toHaveBeenCalled();
el.isolateScope().$apply('title = "bar"');
expect(el.controller('ionNavBar').setTitle).toHaveBeenCalledWith('bar');
});
it('should show/hide navBar', function() {
var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
scope.$digest();
expect(element.hasClass('invisible')).toEqual(true);
scope.$broadcast('viewState.showNavBar', true);
scope.$digest();
expect(element.hasClass('invisible')).toEqual(false);
scope.$broadcast('viewState.showNavBar', false);
scope.$digest();
expect(element.hasClass('invisible')).toEqual(true);
});
it('should have have animateEnabled=true if there is a navDirection and animate isnt false', function() {
var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
scope.$digest();
scope = element.isolateScope();
scope.$broadcast('viewState.viewEnter', {});
expect(scope.animateEnabled).toBe(false);
scope.$broadcast('viewState.viewEnter', { navDirection: 'forward' });
expect(scope.animateEnabled).toBe(true);
scope.$broadcast('viewState.viewEnter', { navDirection: 'forward', animate: false });
expect(scope.animateEnabled).toBe(false);
scope.$broadcast('viewState.viewEnter', { navDirection: 'back', animate: true });
expect(scope.animateEnabled).toBe(true);
});
it('should hide navBar when using view attr', function() {
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view hide-nav-bar="true"></ion-view></div>')(scope);
scope.$digest();
var navBar = element.find('header')
expect(navBar.hasClass('invisible')).toEqual(true);
});
it('should show and update navBar title when using view attr or events', function() {
scope.viewTitle = 'Title';
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view title="{{viewTitle}}"></ion-view></div>')(scope);
scope.$digest();
var navBar = element.find('header');
var title = navBar.find('h1');
expect(element.find('header').find('h1').text().trim()).toEqual('Title');
scope.viewTitle = 'New Title';
scope.$digest();
title = navBar.find('h1');
expect(title.text().trim()).toEqual('New Title');
scope.$broadcast('viewState.titleUpdated', { title: 'Event Title' });
scope.$digest();
title = navBar.find('h1');
expect(title.text().trim()).toEqual('Event Title');
});
it('should show / update navBar left and right buttons when using view attr or events', function() {
scope.leftButtons = [{
type: 'button',
content: 'Left Button'
}];
scope.rightButtons = [{
type: 'button',
content: 'Right Button'
}];
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view left-buttons="leftButtons" right-buttons="rightButtons"></ion-view></div>')(scope);
scope.$digest();
var leftButton = angular.element(element[0].querySelector('.left-buttons')).find('button');
expect(leftButton.text().trim()).toBe('Left Button');
var rightButton = angular.element(element[0].querySelector('.right-buttons')).find('button');
expect(rightButton.text().trim()).toBe('Right Button');
scope.leftButtons = [{
type: 'button',
content: 'New Left Button'
}];
scope.rightButtons = [{
type: 'button',
content: 'New Right Button'
}];
scope.$digest();
leftButton = angular.element(element[0].querySelector('.left-buttons')).find('button');
expect(leftButton.text().trim()).toBe('New Left Button');
rightButton = angular.element(element[0].querySelector('.right-buttons')).find('button');
expect(rightButton.text().trim()).toBe('New Right Button');
scope.$broadcast('viewState.leftButtonsChanged', [{
type: 'button',
content: 'Event Left Button'
}]);
scope.$broadcast('viewState.rightButtonsChanged', [{
type: 'button',
content: 'Event Right Button'
}]);
scope.$digest();
leftButton = angular.element(element[0].querySelector('.left-buttons')).find('button');
expect(leftButton.text().trim()).toBe('Event Left Button');
rightButton = angular.element(element[0].querySelector('.right-buttons')).find('button');
expect(rightButton.text().trim()).toBe('Event Right Button');
});
it('should show navbar when not using view attr', function() {
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view></ion-view></div>')(scope);
scope.$digest();
var navBar = element.find('header')
expect(navBar.hasClass('invisible')).toEqual(false);
});
it('should set the navBar type', function() {
var element = compile('<ion-nav-bar type="bar-positive"></ion-nav-bar>')(scope);
scope.$digest();
expect(element.hasClass('bar-positive')).toEqual(true);
});
it('should not have the back button if no back button attributes set', function() {
var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(0);
});
it('should have the back button if back-button-type attributes set', function() {
var element = compile('<ion-nav-bar back-button-type="button-icon"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should have the back button if back-button-icon attributes set', function() {
var element = compile('<ion-nav-bar back-button-icon="ion-back"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should have the back button if back-button-label attributes set', function() {
var element = compile('<ion-nav-bar back-button-label="Button"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should have the back button if all back button attributes set', function() {
var element = compile('<ion-nav-bar back-button-type="button-icon" back-button-icon="ion-back" back-button-label="Button"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should set just a back button icon, no text', function() {
var element = compile('<ion-nav-bar back-button-icon="ion-back" back-button-type="button-icon"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.hasClass('button')).toEqual(true);
expect(backButton.hasClass('button-icon')).toEqual(true);
expect(backButton.hasClass('icon')).toEqual(true);
expect(backButton.hasClass('ion-back')).toEqual(true);
expect(backButton.children().length).toEqual(0);
expect(backButton.text().trim()).toEqual('');
});
it('should set just a back button with only text, button-clear', function() {
var element = compile('<ion-nav-bar back-button-label="Back" back-button-type="button-clear"></ion-nav-bar>')(scope);
scope.$apply();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.hasClass('button')).toEqual(true);
expect(backButton.hasClass('button-clear')).toEqual(true);
expect(backButton.hasClass('icon')).toEqual(false);
expect(backButton.text().trim()).toEqual('Back');
});
it('should set a back button with an icon and text, button-icon', function() {
var element = compile('<ion-nav-bar back-button-icon="ion-back" back-button-label="Back" back-button-type="button-icon"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.hasClass('button')).toEqual(true);
expect(backButton.hasClass('button-icon')).toEqual(true);
var icon = backButton.find('i');
expect(icon.hasClass('icon')).toEqual(true);
expect(backButton.children()[0].tagName.toLowerCase()).toBe('i');
expect(backButton.children()[0].className).toBe('icon ion-back');
expect(backButton.text().trim()).toBe('Back');
});
});