From c4fa48725039c30349af725583f147e7f4fb69c7 Mon Sep 17 00:00:00 2001
From: Misko Hevery
Date: Sat, 28 Apr 2012 22:25:05 -0700
Subject: feat(bootstrap): support code prettify and dropdown from bootstrap

---
 test/bootstrap/bootstrapSpec.js | 157 ++++++++++++++++++++++++++++++++++++++++
 test/bootstrap/code.html        |  91 +++++++++++++++++++++++
 2 files changed, 248 insertions(+)
 create mode 100644 test/bootstrap/bootstrapSpec.js
 create mode 100644 test/bootstrap/code.html

(limited to 'test/bootstrap')

diff --git a/test/bootstrap/bootstrapSpec.js b/test/bootstrap/bootstrapSpec.js
new file mode 100644
index 00000000..2c8d89fa
--- /dev/null
+++ b/test/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);
+      });
+    });
+  });
+});
diff --git a/test/bootstrap/code.html b/test/bootstrap/code.html
new file mode 100644
index 00000000..e1eaa8d2
--- /dev/null
+++ b/test/bootstrap/code.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="../../src/angular-bootstrap.js"></script>
+    <script type="text/javascript">
+      $script('src/bootstrap/google-prettify/prettify', 'prettify');
+      $script.ready('angular', function() {
+        $script(['src/bootstrap/bootstrap-prettify', 'src/bootstrap/bootstrap'], 'myCode');
+        angular.module('myApp', []).run(function($rootScope){ $rootScope.text = 'WORKS!' });
+      });
+      $script.ready(['myCode', 'prettify'], function() {
+        angular.bootstrap(document, ['bootstrapPrettify', 'bootstrap']);
+      });
+    </script>
+    <link rel="stylesheet" href="../../src/bootstrap/google-prettify/prettify.css" type="text/css">
+    <link rel="stylesheet" href="../../src/bootstrap/css/bootstrap.css" type="text/css">
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+        <div class="span12">
+          <h1>AngularJS is {{'working'}}</h1>
+
+          <h2>Directive: <code>prettify</code></h2>
+          <pre class="prettyprint linenums">
+            &lt;p&gt;Sample text here...&lt;/p&gt;
+          </pre>
+
+
+          <h2>Directive: <code>ng-set-text</code></h2>
+          <pre class="prettyprint linenums" ng-set-text="hello.html"></pre>
+          <script type="text/html" id="hello.html">
+            <h1>Hello World!</h1>
+          </script>
+
+          <h2>Directive: <code>ng-html-wrap</code></h2>
+          <pre class="prettyprint linenums" ng-set-text="hello.html" ng-html-wrap="angular.js angular-resource.js myApp abc.js abc.css"></pre>
+
+          <h2>Directive <code>ng-embed-app</code></h2>
+          <div ng-embed-app="myApp">{{text}}</div>
+
+          <h1>Bootstrap</h1>
+
+          <h2>Directive <code>drop-down-toggle</code></h2>
+          <div class="btn btn-primary dropdown">
+            <a href="#ABC" class="dropdown-toggle">
+              Account
+              <b class="caret"></b>
+            </a>
+            <ul class="dropdown-menu">
+              <li>One</li>
+              <li>Two</li>
+            </ul>
+          </div>
+
+          <h2 ng-init="state = 'tab-2' ">Directive <code>tabbable</code></h2>
+          state = {{state}}
+
+          <div class="tabbable" ng-model="state">
+            <div class="tab-pane" ng-repeat="id in [1,2,3]" title="Tab {{id}}" value='tab-{{id}}'>
+              Tab content {{id}}!
+            </div>
+          </div>
+
+          <hr/>
+
+          <div class="tabbable" ng-model="state">
+            <div class="tab-pane" ng-repeat="id in [1,2,3]" title="Tab {{id}}" value='tab-{{id}}'>
+              Tab content {{id}}!
+            </div>
+          </div>
+
+          <hr/>
+
+          <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>
+
+        </div>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </body>
+</html>
-- 
cgit v1.2.3