Test for tab bar controller

This commit is contained in:
Max Lynch
2013-09-13 09:48:48 -05:00
parent a05f9064ad
commit cad4d9b0d5
6 changed files with 112 additions and 55 deletions

54
hacking/TabBar.js Normal file
View 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
View 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);
});
});

View File

@ -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;

View File

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

View File

@ -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>

View File

@ -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'
], ],