mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Test for tab bar controller
This commit is contained in:
54
hacking/TabBar.js
Normal file
54
hacking/TabBar.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
TabBarItem = function(el) {
|
||||||
|
this.el = el;
|
||||||
|
};
|
||||||
|
TabBarItem.prototype = {
|
||||||
|
setSelected: function(isSelected) {
|
||||||
|
this.isSelected = isSelected;
|
||||||
|
if(isSelected) {
|
||||||
|
this.el.classList.add('active');
|
||||||
|
} else {
|
||||||
|
this.el.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
TabBar = function(opts) {
|
||||||
|
this.el = opts.el;
|
||||||
|
this._buildItems();
|
||||||
|
};
|
||||||
|
|
||||||
|
TabBar.prototype = {
|
||||||
|
getSelectedItem: function() {
|
||||||
|
return this.selectedItem;
|
||||||
|
},
|
||||||
|
setSelectedItem: function(index) {
|
||||||
|
this.selectedItem = this.items[index];
|
||||||
|
|
||||||
|
// Deselect all
|
||||||
|
for(var i = 0, j = this.items.length; i < j; i += 1) {
|
||||||
|
this.items[i].setSelected(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select the new item
|
||||||
|
this.selectedItem && this.selectedItem.setSelected(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
getItems: function() {
|
||||||
|
return this.items;
|
||||||
|
},
|
||||||
|
|
||||||
|
_buildItems: function() {
|
||||||
|
this.items = [];
|
||||||
|
|
||||||
|
var items = this.el.children;
|
||||||
|
|
||||||
|
for(var i = 0, j = items.length; i < j; i += 1) {
|
||||||
|
this.items[i] = new TabBarItem(items[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.items.length > 0) {
|
||||||
|
this.selectedItem = this.items[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
49
hacking/TabBar.unit.js
Normal file
49
hacking/TabBar.unit.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
describe('TabBar view', function() {
|
||||||
|
var element, tabBar, items;
|
||||||
|
|
||||||
|
beforeEach(function() {
|
||||||
|
element = $('<div class="tabs">' +
|
||||||
|
'<a href="#" class="tab-item">Tab 1</a>' +
|
||||||
|
'<a href="#" class="tab-item">Tab 2</a>' +
|
||||||
|
'<a href="#" class="tab-item">Tab 3</a>');
|
||||||
|
|
||||||
|
tabBar = new TabBar({
|
||||||
|
el: element.get(0)
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
it('Should read tabs', function() {
|
||||||
|
|
||||||
|
items = tabBar.getItems();
|
||||||
|
|
||||||
|
expect(items.length).toEqual(3);
|
||||||
|
expect(items[0].el.innerText).toEqual('Tab 1');
|
||||||
|
expect(items[1].el.innerText).toEqual('Tab 2');
|
||||||
|
expect(items[2].el.innerText).toEqual('Tab 3');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Should select', function() {
|
||||||
|
items = tabBar.getItems();
|
||||||
|
|
||||||
|
// Track selection object
|
||||||
|
tabBar.setSelectedItem(1);
|
||||||
|
expect(tabBar.getSelectedItem().el.innerText).toEqual('Tab 2');
|
||||||
|
tabBar.setSelectedItem(0);
|
||||||
|
expect(tabBar.getSelectedItem().el.innerText).toEqual('Tab 1');
|
||||||
|
tabBar.setSelectedItem(2);
|
||||||
|
expect(tabBar.getSelectedItem().el.innerText).toEqual('Tab 3');
|
||||||
|
|
||||||
|
// Track class change
|
||||||
|
expect(tabBar.getSelectedItem().el.classList.contains('active')).toEqual(true);
|
||||||
|
|
||||||
|
// Make sure the other ones have theirs cleared
|
||||||
|
expect(items[0].el.classList.contains('active')).toEqual(false);
|
||||||
|
expect(items[1].el.classList.contains('active')).toEqual(false);
|
||||||
|
expect(items[2].el.classList.contains('active')).toEqual(true);
|
||||||
|
|
||||||
|
tabBar.setSelectedItem(0);
|
||||||
|
expect(items[0].el.classList.contains('active')).toEqual(true);
|
||||||
|
expect(items[1].el.classList.contains('active')).toEqual(false);
|
||||||
|
expect(items[2].el.classList.contains('active')).toEqual(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,8 +1,3 @@
|
|||||||
TabBar = function(element) {
|
|
||||||
this.element = element;
|
|
||||||
}
|
|
||||||
TabBar.prototype = {};
|
|
||||||
|
|
||||||
TabBarController = function(options) {
|
TabBarController = function(options) {
|
||||||
this.tabBar = options.tabBar;
|
this.tabBar = options.tabBar;
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,9 @@ describe('TabBarController', function() {
|
|||||||
var ctrl;
|
var ctrl;
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
|
var tabEl = $('<div class="tabs"></div>');
|
||||||
ctrl = new TabBarController({
|
ctrl = new TabBarController({
|
||||||
tabBar: new TabBar()
|
tabBar: new TabBar({ el: tabEl })
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -53,8 +54,9 @@ describe('TabBarController', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('Should allow cancelling Controller switch', function() {
|
it('Should allow cancelling Controller switch', function() {
|
||||||
|
var tabEl = $('<div class="tabs"></div>');
|
||||||
ctrl = new TabBarController({
|
ctrl = new TabBarController({
|
||||||
tabBar: new TabBar(),
|
tabBar: new TabBar({ el: tabEl }),
|
||||||
controllerWillChange: function(Controller) { return false; }
|
controllerWillChange: function(Controller) { return false; }
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,43 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="../vendor/jasmine/lib/jasmine-1.3.1/jasmine.css">
|
|
||||||
<script src="../vendor/jasmine/lib/jasmine-1.3.1/jasmine.js"></script>
|
|
||||||
<script src="../vendor/jasmine/lib/jasmine-1.3.1/jasmine-html.js"></script>
|
|
||||||
|
|
||||||
<script src="TabBarController.js"></script>
|
|
||||||
|
|
||||||
<script src="TabBarController.unit.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
(function() {
|
|
||||||
var jasmineEnv = jasmine.getEnv();
|
|
||||||
jasmineEnv.updateInterval = 1000;
|
|
||||||
|
|
||||||
var htmlReporter = new jasmine.HtmlReporter();
|
|
||||||
|
|
||||||
jasmineEnv.addReporter(htmlReporter);
|
|
||||||
|
|
||||||
jasmineEnv.specFilter = function(spec) {
|
|
||||||
return htmlReporter.specFilter(spec);
|
|
||||||
};
|
|
||||||
|
|
||||||
var currentWindowOnload = window.onload;
|
|
||||||
|
|
||||||
window.onload = function() {
|
|
||||||
if (currentWindowOnload) {
|
|
||||||
currentWindowOnload();
|
|
||||||
}
|
|
||||||
execJasmine();
|
|
||||||
};
|
|
||||||
|
|
||||||
function execJasmine() {
|
|
||||||
jasmineEnv.execute();
|
|
||||||
}
|
|
||||||
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -19,10 +19,10 @@ module.exports = function(config) {
|
|||||||
'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
|
'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
|
||||||
|
|
||||||
'vendor/angular/1.2.0rc1/*',
|
'vendor/angular/1.2.0rc1/*',
|
||||||
'ext/angular/src/**/*.js',
|
//'ext/angular/src/**/*.js',
|
||||||
'ext/angular/test/**/*.js',
|
//'ext/angular/test/**/*.js',
|
||||||
'hacking/**/*.js',
|
'hacking/**/*.js',
|
||||||
'test/**/*.js'
|
//'test/**/*.js'
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user