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

test(ionBar): make tests instant

Browse Source
This commit is contained in:
Andy Joslin
2014-03-08 13:10:54 -07:00
parent ecfdbaa67b
commit 5faabb1847
3 changed files with 52 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/ext/angular/src/directive/ionicBar.js vendored
View File

@@ -50,7 +50,7 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
* align-title="center">
* </ion-header-bar>
* ```
*
*
*/
.directive('ionHeaderBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
return {

67
js/ext/angular/test/directive/ionicBar.unit.js
View File

@@ -3,60 +3,41 @@ describe('Ionic Header Bar', function() {
beforeEach(module('ionic'));
beforeEach(inject(function($compile, $rootScope) {
beforeEach(inject(function($animate, $compile, $rootScope) {
compile = $compile;
rootScope = $rootScope;
ionic.requestAnimationFrame = function(cb) { cb(); };
$animate.enabled(false);
el = null;
}));
it('Should not add title-left or title-right classes when align-title=center', function() {
runs(function(){
el = compile('<ion-header-bar align-title="center"></ion-header-bar>')(rootScope);
});
//wait for headerBar View to align() the title
waits(500);
runs(function(){
var headerView = el.isolateScope().headerBarView;
var title = angular.element(headerView.el.querySelector('.title'));
expect(title.hasClass('title-left')).not.toEqual(true);
expect(title.hasClass('title-right')).not.toEqual(true);
});
el = compile('<ion-header-bar align-title="center"></ion-header-bar>')(rootScope);
var headerView = el.isolateScope().headerBarView;
var title = angular.element(headerView.el.querySelector('.title'));
expect(title.hasClass('title-left')).not.toEqual(true);
expect(title.hasClass('title-right')).not.toEqual(true);
});
it('Should add title-left class when align-title=left', function() {
runs(function(){
el = compile('<ion-header-bar align-title="left"></ion-header-bar>')(rootScope);
});
//wait for headerBar View to align() the title
waits(500);
runs(function(){
var headerView = el.isolateScope().headerBarView;
var title = angular.element(headerView.el.querySelector('.title'));
expect(title.hasClass('title-left')).toEqual(true);
});
});
it('Should add title-left class when align-title=left', inject(function($animate) {
el = compile('<ion-header-bar align-title="left"></ion-header-bar>')(rootScope);
rootScope.$apply();
var headerView = el.isolateScope().headerBarView;
var title = angular.element(headerView.el.querySelector('.title'));
expect(title.hasClass('title-left')).toEqual(true);
}));
it('Should add title-right class when align-title=right', function() {
runs(function(){
el = compile('<ion-header-bar align-title="right"></ion-header-bar>')(rootScope);
});
//wait for headerBar View to align() the title
waits(500);
runs(function(){
var headerView = el.isolateScope().headerBarView;
var title = angular.element(headerView.el.querySelector('.title'));
expect(title.hasClass('title-right')).toEqual(true);
});
el = compile('<ion-header-bar align-title="right"></ion-header-bar>')(rootScope);
rootScope.$apply();
var headerView = el.isolateScope().headerBarView;
var title = angular.element(headerView.el.querySelector('.title'));
expect(title.hasClass('title-right')).toEqual(true);
});
it('Should re-align the title when leftButtons change', function() {
rootScope.leftButtons = [];
el = compile('<ion-header-bar left-buttons="leftButtons" align-title="right"></ion-header-bar>')(rootScope);
el = compile('<ion-header-bar left-buttons="leftButtons" align-title="right"></ion-header-bar>')(rootScope);
var headerView = el.isolateScope().headerBarView;
//trigger initial align()
@@ -73,7 +54,7 @@ describe('Ionic Header Bar', function() {
it('Should re-align the title when rightButtons change', function() {
rootScope.rightButtons = [];
el = compile('<ion-header-bar right-buttons="rightButtons" align-title="right"></ion-header-bar>')(rootScope);
el = compile('<ion-header-bar right-buttons="rightButtons" align-title="right"></ion-header-bar>')(rootScope);
var headerView = el.isolateScope().headerBarView;
//trigger initial align()
@@ -88,6 +69,6 @@ describe('Ionic Header Bar', function() {
expect(headerView.align).toHaveBeenCalled();
});
});

51
js/views/headerBarView.js
View File

@@ -17,10 +17,10 @@
* so that the header text size is maximized and aligned
* correctly as long as possible.
*/
align: ionic.animationFrameThrottle(function(titleSelector) {
align: function() {
// Find the titleEl element
var titleEl = this.el.querySelector(titleSelector || '.title');
var titleEl = this.el.querySelector('.title');
if(!titleEl) {
return;
}
@@ -56,32 +56,35 @@
}
}
var margin = Math.max(leftWidth, rightWidth) + 10;
var self = this;
ionic.requestAnimationFrame(function() {
var margin = Math.max(leftWidth, rightWidth) + 10;
// Size and align the header titleEl based on the sizes of the left and
// right children, and the desired alignment mode
if(this.alignTitle == 'center') {
if(margin > 10) {
titleEl.style.left = margin + 'px';
titleEl.style.right = margin + 'px';
}
if(titleEl.offsetWidth < titleEl.scrollWidth) {
// Size and align the header titleEl based on the sizes of the left and
// right children, and the desired alignment mode
if(self.alignTitle == 'center') {
if(margin > 10) {
titleEl.style.left = margin + 'px';
titleEl.style.right = margin + 'px';
}
if(titleEl.offsetWidth < titleEl.scrollWidth) {
if(rightWidth > 0) {
titleEl.style.right = (rightWidth + 5) + 'px';
}
}
} else if(self.alignTitle == 'left') {
titleEl.classList.add('title-left');
if(leftWidth > 0) {
titleEl.style.left = (leftWidth + 15) + 'px';
}
} else if(self.alignTitle == 'right') {
titleEl.classList.add('title-right');
if(rightWidth > 0) {
titleEl.style.right = (rightWidth + 5) + 'px';
titleEl.style.right = (rightWidth + 15) + 'px';
}
}
} else if(this.alignTitle == 'left') {
titleEl.classList.add('title-left');
if(leftWidth > 0) {
titleEl.style.left = (leftWidth + 15) + 'px';
}
} else if(this.alignTitle == 'right') {
titleEl.classList.add('title-right');
if(rightWidth > 0) {
titleEl.style.right = (rightWidth + 15) + 'px';
}
}
})
});
}
});
})(ionic);