diff options
| author | Matias Niemelä | 2013-05-16 14:55:56 -0400 | 
|---|---|---|
| committer | Misko Hevery | 2013-05-20 14:27:34 -0700 | 
| commit | 2f571a9c830df814902fbdda1e9240b36bb64e3e (patch) | |
| tree | 87c330af480442b4c7eb52ff8a443db192043e2c /docs/component-spec | |
| parent | 9f4f5937112655a9881d3281da8e72035bc8b180 (diff) | |
| download | angular.js-2f571a9c830df814902fbdda1e9240b36bb64e3e.tar.bz2 | |
chore(ngdocs): move angular-bootstrap.js to be generated only inside the docs and remove from the build process
Diffstat (limited to 'docs/component-spec')
| -rw-r--r-- | docs/component-spec/bootstrap/bootstrapSpec.js | 157 | ||||
| -rw-r--r-- | docs/component-spec/bootstrap/code.html | 91 | 
2 files changed, 248 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); +      }); +    }); +  }); +}); diff --git a/docs/component-spec/bootstrap/code.html b/docs/component-spec/bootstrap/code.html new file mode 100644 index 00000000..e1eaa8d2 --- /dev/null +++ b/docs/component-spec/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"> +            <p>Sample text here...</p> +          </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> | 
