Test for tab bar controller

hacking/TabBar.js

@@ -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];
+    }
+  }
+};
+

hacking/TabBar.unit.js

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

hacking/TabBarController.js

@@ -1,8 +1,3 @@
-TabBar = function(element) {
-  this.element = element;
-}
-TabBar.prototype = {};
-
 TabBarController = function(options) {
   this.tabBar = options.tabBar;
 
@@ -73,4 +68,4 @@ TabBarController.prototype = {
     this._clearSelected();
     this.selectController(0);
   }
-}
+}

hacking/TabBarController.unit.js

@@ -2,8 +2,9 @@ describe('TabBarController', function() {
   var ctrl;
 
   beforeEach(function() {
+    var tabEl = $('<div class="tabs"></div>');
     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() {
+    var tabEl = $('<div class="tabs"></div>');
     ctrl = new TabBarController({
-      tabBar: new TabBar(),
+      tabBar: new TabBar({ el: tabEl }),
       controllerWillChange: function(Controller) { return false; }
     });
 
@@ -70,4 +72,4 @@ describe('TabBarController', function() {
     expect(ctrl.getSelectedController()).toBe(ctrl.getController(0));
   });
 
-})
+})

hacking/TestRunner.html

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

ionic.conf.js

@@ -19,10 +19,10 @@ module.exports = function(config) {
       'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
 
       'vendor/angular/1.2.0rc1/*',
-      'ext/angular/src/**/*.js',
-      'ext/angular/test/**/*.js',
+      //'ext/angular/src/**/*.js',
+      //'ext/angular/test/**/*.js',
       'hacking/**/*.js',
-      'test/**/*.js'
+      //'test/**/*.js'
     ],