1 files changed, 157 insertions, 0 deletions
diff --git a/docs/component-spec/bootstrap/bootstrapSpec.js b/docs/component-spec/bootstrap/bootstrapSpec.js
new file mode 100644
index 00000000..2c8d89fa
--- /dev/null
+++ b/docs/component-spec/bootstrap/bootstrapSpec.js
@@ -0,0 +1,157 @@
+'use strict';
+
+describe('bootstrap', function() {
+  var $compile, $rootScope, element;
+
+  function clickTab(element, index) {
+    browserTrigger(element.children().eq(0).children().eq(index));
+  }
+
+  beforeEach(module('bootstrap'));
+  beforeEach(inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+  beforeEach(function(){
+    function findTab(element, index) {
+      return _jQuery(element[0]).find('> .nav-tabs > li').eq(index);
+    }
+    function findTabPane(element, index) {
+      return _jQuery(element[0]).find('> .tab-content > .tab-pane').eq(index);
+    }
+
+    this.addMatchers({
+      toHaveTab: function(index, title) {
+        var tab = findTab(element, index);
+
+        this.message = function() {
+          if (tab.length) {
+            return 'Expect tab index ' + index + ' to be ' + toJson(title) + ' but was ' + toJson(tab.text());
+          } else {
+            return 'Expect tab index ' + index + ' to be ' + toJson(title) + ' but there are only ' +
+              element.children().length + ' tabs.';
+          }
+        };
+
+        return tab.length && tab.text() == title;
+      },
+
+      toHaveTabPane: function(index, title) {
+        var tabPane = findTabPane(element, index);
+
+        this.message = function() {
+          if (tabPane.length) {
+            return 'Expect tab pane index ' + index + ' to be ' + toJson(title) + ' but was ' + toJson(tabPane.text());
+          } else {
+            return 'Expect tab pane index ' + index + ' to be ' + toJson(title) + ' but there are only ' +
+              element.children().length + 'tab panes.';
+          }
+        };
+
+        return tabPane.length && tabPane.text() == title;
+      },
+
+      toHaveSelected: function(index) {
+        var tab = findTab(element, index);
+        var tabPane = findTabPane(element, index);
+
+        this.message = function() {
+          return 'Expect tab  index ' + index + ' to be selected\n' +
+            '     TAB: ' + angular.mock.dump(tab) + '\n' +
+            'TAB-PANE: ' + angular.mock.dump(tabPane);
+        };
+
+        return tabPane.hasClass('active') && tab.hasClass('active');
+      }
+    });
+  });
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  describe('tabbable', function() {
+
+    it('should create the right structure', function() {
+      element = $compile(
+        '<div class="tabbable">' +
+          '<div class="tab-pane" title="first">tab1</div>' +
+          '<div class="tab-pane" title="second">tab2</div>' +
+        '</div>')($rootScope);
+
+      $rootScope.$apply();
+
+      expect(element).toHaveTab(0, 'first');
+      expect(element).toHaveTab(1, 'second');
+
+      expect(element).toHaveTabPane(0, 'tab1');
+      expect(element).toHaveTabPane(1, 'tab2');
+
+      expect(element).toHaveSelected(0);
+    });
+
+
+    it('should respond to tab click', function(){
+      element = $compile(
+        '<div class="tabbable">' +
+          '<div class="tab-pane" title="first">tab1</div>' +
+          '<div class="tab-pane" title="second">tab2</div>' +
+          '</div>')($rootScope);
+
+      expect(element).toHaveSelected(0);
+      clickTab(element, 1);
+      expect(element).toHaveSelected(1);
+    });
+
+
+    it('should select the first tab in repeater', function() {
+      element = $compile(
+        '<div class="tabbable">' +
+          '<div class="tab-pane" ng-repeat="id in [1,2,3]" title="Tab {{id}}" value="tab-{{id}}">' +
+          'Tab content {{id}}!' +
+          '</div>' +
+        '</div>')($rootScope);
+      $rootScope.$apply();
+
+      expect(element).toHaveSelected(0);
+    });
+
+
+    describe('ngModel', function() {
+      it('should bind to model', function() {
+        $rootScope.tab = 'B';
+
+        element = $compile(
+          '<div class="tabbable" ng-model="tab">' +
+            '<div class="tab-pane" title="first" value="A">tab1</div>' +
+            '<div class="tab-pane" title="second" value="B">tab2</div>' +
+          '</div>')($rootScope);
+
+        $rootScope.$apply();
+        expect(element).toHaveSelected(1);
+
+        $rootScope.tab = 'A';
+        $rootScope.$apply();
+        expect(element).toHaveSelected(0);
+
+        clickTab(element, 1);
+        expect($rootScope.tab).toEqual('B');
+        expect(element).toHaveSelected(1);
+      });
+
+
+      it('should not overwrite the model', function() {
+        $rootScope.tab = 'tab-2';
+        element = $compile(
+        '<div class="tabbable" ng-model="tab">' +
+            '<div class="tab-pane" ng-repeat="id in [1,2,3]" title="Tab {{id}}" value="tab-{{id}}">' +
+            'Tab content {{id}}!' +
+            '</div>' +
+            '</div>')($rootScope);
+        $rootScope.$apply();
+
+        expect(element).toHaveSelected(1);
+      });
+    });
+  });
+});