1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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);
});
});
});
});
|
