Skip to content

Commit cedfd5e

Browse files
bfederlebfederle
committed
Add detail view tests
1 parent 95b0f51 commit cedfd5e

2 files changed

Lines changed: 262 additions & 0 deletions

File tree

‎ui/tests/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,6 @@ <h2 id="qunit-userAgent"></h2>
7979
<script src="test.cloudBrowser.js" type="text/javascript"></script>
8080
<script src="test.notifications.js" type="text/javascript"></script>
8181
<script src="test.listView.js" type="text/javascript"></script>
82+
<script src="test.detailView.js" type="text/javascript"></script>
8283
</body>
8384
</html>

‎ui/tests/test.detailView.js‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
(function($) {
2+
module('Detail view');
3+
4+
test('Basic', function() {
5+
var detailView = {
6+
tabs: {
7+
tabA: {
8+
title: 'tabA',
9+
fields: [{}],
10+
dataProvider: function() {}
11+
},
12+
tabB: {
13+
title: 'tabB',
14+
fields: [{}],
15+
dataProvider: function() {}
16+
}
17+
}
18+
};
19+
20+
var $detailView = $('<div>');
21+
22+
ok($detailView.detailView(detailView), 'Create detail view');
23+
equal($detailView.find('.ui-tabs-nav li').size(), 2, 'Detail view has correct tab count');
24+
equal($detailView.find('.ui-tabs-nav li:first a').html(), 'tabA', 'First tab has correct title');
25+
equal($detailView.find('.ui-tabs-nav li:last a').html(), 'tabB', 'Last tab has correct title');
26+
});
27+
28+
test('Data provider', function() {
29+
var detailView = {
30+
tabs: {
31+
tabA: {
32+
title: 'tabA',
33+
fields: [{
34+
fieldA: { label: 'fieldA' },
35+
fieldB: { label: 'fieldB' }
36+
}],
37+
dataProvider: function(args) {
38+
start();
39+
ok(args.response.success({
40+
data: {
41+
fieldA: 'dataProviderFieldA',
42+
fieldB: 'dataProviderFieldB'
43+
}
44+
}), 'Call success');
45+
equal($detailView.find('tr').size(), 2, 'Correct fields rendered');
46+
equal($detailView.find('tr:first td:first').html(), 'fieldA', 'First field has correct label');
47+
equal($detailView.find('tr:first td:last').html(), 'dataProviderFieldA', 'First field has correct content');
48+
equal($detailView.find('tr:last td:first').html(), 'fieldB', 'Last field has correct label');
49+
equal($detailView.find('tr:last td:last').html(), 'dataProviderFieldB', 'Last field has correct content');
50+
}
51+
}
52+
}
53+
};
54+
var $detailView = $('<div>');
55+
56+
stop();
57+
58+
// Test first tab
59+
$detailView = $detailView.detailView(detailView);
60+
61+
// Test last tab
62+
$detailView.find('.ui-tabs-nav li:last').click();
63+
});
64+
65+
test('Data provider, multiple tabs', function() {
66+
var detailView = {
67+
tabs: {
68+
tabA: {
69+
title: 'tabA',
70+
fields: [{
71+
fieldA: { label: 'fieldA' },
72+
fieldB: { label: 'fieldB' }
73+
}],
74+
dataProvider: function(args) {
75+
start();
76+
ok(args.response.success({
77+
data: {
78+
fieldA: 'dataProviderFieldA',
79+
fieldB: 'dataProviderFieldB'
80+
}
81+
}), 'Call success');
82+
equal($detailView.find('tr').size(), 2, 'Correct fields rendered');
83+
equal($detailView.find('tr:first td:first').html(), 'fieldA', 'First field has correct label');
84+
equal($detailView.find('tr:first td:last').html(), 'dataProviderFieldA', 'First field has correct content');
85+
equal($detailView.find('tr:last td:first').html(), 'fieldB', 'Last field has correct label');
86+
equal($detailView.find('tr:last td:last').html(), 'dataProviderFieldB', 'Last field has correct content');
87+
}
88+
},
89+
90+
tabB: {
91+
title: 'tabB',
92+
fields: [{
93+
fieldC: { label: 'fieldC' },
94+
fieldD: { label: 'fieldD' },
95+
fieldC: { label: 'fieldE' },
96+
fieldD: { label: 'fieldF' }
97+
}],
98+
dataProvider: function(args) {
99+
start();
100+
ok(args.response.success({
101+
data: {
102+
fieldC: 'dataProviderFieldC',
103+
fieldD: 'dataProviderFieldD',
104+
fieldE: 'dataProviderFieldE',
105+
fieldF: 'dataProviderFieldF'
106+
}
107+
}), 'Call success');
108+
equal($detailView.find('tr').size(), 4, 'Correct fields rendered');
109+
equal($detailView.find('tr:first td:first').html(), 'fieldC', 'First field has correct label');
110+
equal($detailView.find('tr:first td:last').html(), 'dataProviderFieldC', 'First field has correct content');
111+
equal($detailView.find('tr:last td:first').html(), 'fieldF', 'Last field has correct label');
112+
equal($detailView.find('tr:last td:last').html(), 'dataProviderFieldF', 'Last field has correct content');
113+
}
114+
}
115+
}
116+
};
117+
var $detailView = $('<div>');
118+
119+
stop();
120+
121+
// Test first tab
122+
$detailView = $detailView.detailView(detailView);
123+
124+
// Test last tab
125+
$detailView.find('.ui-tabs-nav li:last').click();
126+
});
127+
128+
test('Field pre-filter', function() {
129+
var detailView = {
130+
tabs: {
131+
tabA: {
132+
title: 'tabA',
133+
fields: {
134+
fieldA: { label: 'fieldA' },
135+
fieldB: { label: 'fieldB' },
136+
fieldC: { label: 'fieldC' },
137+
fieldD: { label: 'fieldD' }
138+
},
139+
preFilter: function(args) {
140+
return ['fieldB', 'fieldC'];
141+
},
142+
dataProvider: function (args) {
143+
args.response.success({
144+
data: {
145+
fieldA: 'fieldAContent',
146+
fieldB: 'fieldBContent',
147+
fieldC: 'fieldCContent',
148+
fieldD: 'fieldDContent'
149+
}
150+
});
151+
152+
start();
153+
equal($detailView.find('tr').size(), 2, 'Correct fields rendered');
154+
equal($detailView.find('tr:first td:first').html(), 'fieldA', 'First field has correct label');
155+
equal($detailView.find('tr:first td:last').html(), 'fieldAContent', 'First field has correct content');
156+
equal($detailView.find('tr:last td:first').html(), 'fieldD', 'Last field has correct label');
157+
equal($detailView.find('tr:last td:last').html(), 'fieldDContent', 'Last field has correct content');
158+
}
159+
}
160+
}
161+
};
162+
var $detailView = $('<div>');
163+
164+
stop();
165+
166+
$detailView.detailView(detailView);
167+
});
168+
169+
test('Action', function() {
170+
var detailView = {
171+
actions: {
172+
actionA: {
173+
label: 'testActionA',
174+
action: function(args) {
175+
start();
176+
ok(args.response.success(), 'Call success from action A');
177+
},
178+
messages: {
179+
confirm: function() { return 'testActionAConfirm'; },
180+
notification: function() { return 'testActionANotification'; }
181+
}
182+
},
183+
actionB: {
184+
label: 'testActionB',
185+
action: function(args) {
186+
start();
187+
ok(args.response.success(), 'Call success from action B');
188+
},
189+
messages: {
190+
confirm: function() { return 'testActionBConfirm'; },
191+
notification: function() { return 'testActionBNotification'; }
192+
},
193+
notification: {
194+
poll: function(args) {
195+
start();
196+
ok(args.complete(), 'Call complete from async action B');
197+
}
198+
}
199+
}
200+
},
201+
tabs: {
202+
tabA: {
203+
title: 'tabA',
204+
fields: {
205+
fieldA: { label: 'fieldA' },
206+
fieldB: { label: 'fieldB' }
207+
},
208+
dataProvider: function(args) {
209+
args.response.success({
210+
data: {
211+
fieldA: 'fieldAContent',
212+
fieldB: 'fieldBContent'
213+
}
214+
});
215+
}
216+
}
217+
}
218+
};
219+
var $detailView = $('<div>');
220+
221+
$detailView.detailView(detailView).appendTo('#qunit-fixture');
222+
223+
equal($detailView.find('.detail-actions').size(), 1, 'Action container present');
224+
equal($detailView.find('.detail-actions .action').size(), 2, 'Correct action count');
225+
equal($detailView.find('.detail-actions .action.actionA').size(), 1, 'actionA present');
226+
equal($detailView.find('.detail-actions .action.actionB').size(), 1, 'actionB present');
227+
228+
cloudStack.dialog.confirm = function(args) {
229+
start();
230+
equal(args.message, 'testActionAConfirm', 'Correct confirmation message for action A');
231+
stop();
232+
233+
args.action(); // Perform action
234+
};
235+
236+
cloudStack.ui.notifications.add = function(notification, success, successArgs) {
237+
stop();
238+
equal(notification.desc, 'testActionANotification', 'Correct notification message for action A');
239+
start();
240+
};
241+
242+
$detailView.find('.detail-actions .action.actionA a').click(); // <a> triggers action, not action's container
243+
244+
cloudStack.dialog.confirm = function(args) {
245+
start();
246+
equal(args.message, 'testActionBConfirm', 'Correct confirmation message for action B');
247+
stop();
248+
249+
args.action(); // Perform action
250+
};
251+
252+
cloudStack.ui.notifications.add = function(notification, success, successArgs) {
253+
start();
254+
equal(notification.desc, 'testActionBNotification', 'Correct notification message for action B');
255+
stop();
256+
notification.poll({ complete: function() { return true; } });
257+
};
258+
259+
$detailView.find('.detail-actions .action.actionB a').click(); // <a> triggers action, not action's container
260+
});
261+
}(jQuery));

0 commit comments

Comments
 (0)