diff options
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> |