Random angular stuff and testing things

ext/angular/src/ionicContent.js

@@ -0,0 +1,9 @@
+angular.module('ionic.ui.content', {})
+
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: '<div class="content"></div>'
+  }
+});

ext/angular/src/ionicTabBar.js

@@ -0,0 +1,78 @@
+angular.module('ionic.ui.tabbar', {})
+
+.controller('TabBarCtrl', function($scope) {
+  $scope.selectTab = function(index) {
+  };
+  $scope.beforeTabSelect = function(index) {
+  };
+  $scope.tabSelected = function(index) {
+  };
+
+  this.getSelectedTabIndex = function() {
+    return $scope.selectedIndex;
+  }
+
+  this.selectTabAtIndex = function(index) {
+    $scope.selectedIndex = index;
+  };
+})
+
+.directive('tabBar', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    controller: 'TabBarCtrl',
+    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
+    template: '<div class="full-section"></div>',
+  }
+})
+
+.controller('TabsCtrl', function($scope) {
+})
+
+.directive('tabs', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    controller: 'TabBarCtrl',
+    template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
+  '<nav class="tabs">' + 
+    '<ul class="tabs-inner">' + 
+      '<tab-item ng-repeat="tab in tabs">' + 
+      '</tab-item>' +
+    '</ul>' +
+  '</nav>' +
+'</footer>'
+  }
+})
+
+.directive('tabItem', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    controller: 'TabBarCtrl',
+    scope: {
+      text: '@',
+      icon: '@',
+      tabSelected: '@'
+    },
+    link: function(scope, element, attrs, TabBarCtrl) {
+      // Set a default item text if none is provided
+      attrs.$observe('text', function(value) {
+        scope.text = value || 'Item';
+      });
+      
+      // Set a default item icon if none is provided
+      attrs.$observe('icon', function(value) {
+        scope.icon = value || 'icon-default';
+      });
+    },
+    template: '<li class="tab-item">' + 
+        '<a href="#" ng-click="selectTabItem($index)">' + 
+          '<i class="{{icon}}"></i>' +
+          '{{text}}' +
+        '</a></li>'
+  }
+});
+

ext/angular/test/ionicContent.unit.js

@@ -0,0 +1,15 @@
+describe('Ionic Content directive', function() {
+  var compile, element, scope;
+  
+  beforeEach(module('ionic.ui.content'));
+
+  beforeEach(inject(function($compile, $rootScope) {
+    compile = $compile;
+    scope = $rootScope;
+  }));
+  
+  it('Has content class', function() {
+    element = compile('<content></content>')(scope);
+    expect(element.hasClass('content')).toBe(true);
+  });
+});

ext/angular/test/ionicTabBar.unit.js

@@ -0,0 +1,84 @@
+describe('Tab Bar Controller', function() {
+  var compile, element, scope;
+
+  beforeEach(module('ionic.ui.tabbar'));
+  
+  beforeEach(inject(function($compile, $rootScope, $controller) {
+    compile = $compile;
+    scope = $rootScope;
+    ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
+  }));
+
+  it('Select item in controller works', function() {
+    ctrl.selectTabAtIndex(1);
+    expect(ctrl.getSelectedTabIndex()).toEqual(1);
+  });
+});
+
+describe('Tab Bar directive', function() {
+  var compile, element, scope;
+
+  beforeEach(module('ionic.ui.tabbar'));
+  
+  //beforeEach(module('ext/angular/tmpl/ionicTabBar.tmpl.html', 'ext/angular/tmpl/ionicTabs.tmpl.html'));
+
+  beforeEach(inject(function($compile, $rootScope) {
+    compile = $compile;
+    scope = $rootScope;
+  }));
+
+  it('Has section wrapper class', function() {
+    element = compile('<tab-bar></tab-bar>')(scope);
+    expect(element.hasClass('full-section')).toBe(true);
+  });
+});
+
+describe('Tabs directive', function() {
+  var compile, element, scope;
+  
+  beforeEach(module('ionic.ui.tabbar'));
+
+  beforeEach(inject(function($compile, $rootScope) {
+    compile = $compile;
+    scope = $rootScope;
+  }));
+  
+  it('Has tab class', function() {
+    element = compile('<tabs></tabs>')(scope);
+    expect(element.hasClass('bar-tabs')).toBe(true);
+  });
+  
+  it('Has tab children', function() {
+    scope.tabs = [
+      { text: 'Home', icon: 'icon-home' },
+      { text: 'Fun', icon: 'icon-fun' },
+      { text: 'Beer', icon: 'icon-beer' },
+    ];
+    element = compile('<tabs></tabs>')(scope);
+    scope.$digest();
+    expect(element.find('li').length).toBe(3);
+  });
+});
+
+describe('Tab Item directive', function() {
+  var compile, element, scope, ctrl;
+  
+  beforeEach(module('ionic.ui.tabbar'));
+
+  beforeEach(inject(function($compile, $rootScope) {
+    compile = $compile;
+    scope = $rootScope;
+  }));
+  
+  it('Default text works', function() {
+    element = compile('<tab-item></tab-item>')(scope);
+    scope.$digest();
+    expect(element.find('a').text()).toEqual('Item');
+  });
+
+  it('Default icon works', function() {
+    element = compile('<tab-item></tab-item>')(scope);
+    scope.$digest();
+    expect(element.find('i').hasClass('icon-default')).toBeTruthy();
+  });
+})

ext/angular/tmpl/ionicTabBar.tmpl.html

@@ -0,0 +1,2 @@
+<div class="full-section">
+</div>

ext/angular/tmpl/ionicTabs.tmpl.html

@@ -0,0 +1,12 @@
+<footer class="bar bar-tabs bar-footer bar-success">
+  <nav id="tab-bar" class="tabs">
+    <ul class="tabs-inner">
+      <li class="tab-item" ng-repeat="tab in tabs">
+        <a href="#">
+          <i class="{{tab.icon}}"></i>
+          {{tab.text}}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</footer>