Skip to content

Commit e0042cf

Browse files
gseguingseguin
committed
Added unit tests for controlgroup
1 parent 50a2615 commit e0042cf

File tree

2 files changed

+176
-0
lines changed

2 files changed

+176
-0
lines changed

‎tests/unit/controlgroup/controlgroup_core.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*
2+
* mobile checkboxradio unit tests
3+
*/
4+
(function($){
5+
module( 'vertical controlgroup', {
6+
setup: function() {
7+
this.vcontrolgroup = $( "#vertical-controlgroup" );
8+
this.vcontrolgroup.find( ".ui-btn" ).show();
9+
this.vcontrolgroup.controlgroup("refresh");
10+
}
11+
});
12+
13+
test( "vertical controlgroup classes", function() {
14+
var buttons = this.vcontrolgroup.find( ".ui-btn" ),
15+
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
16+
length = buttons.length;
17+
18+
ok( buttons.first().hasClass( "ui-corner-top" ), "first button should have class 'ui-corner-top'" );
19+
ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
20+
ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
21+
ok( buttons.last().hasClass( "ui-corner-bottom"), "last button should have class 'ui-corner-bottom'" );
22+
});
23+
24+
test( "vertical controlgroup after first button was hidden", function() {
25+
//https://github.com/jquery/jquery-mobile/issues/1929
26+
27+
//We hide the first button and refresh
28+
this.vcontrolgroup.find( ".ui-btn" ).first().hide();
29+
this.vcontrolgroup.controlgroup("refresh");
30+
31+
var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
32+
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
33+
length = buttons.length;
34+
35+
ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
36+
ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
37+
ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
38+
ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
39+
});
40+
41+
test( "vertical controlgroup after last button was hidden", function() {
42+
//https://github.com/jquery/jquery-mobile/issues/1929
43+
44+
//We hide the last button and refresh
45+
this.vcontrolgroup.find( ".ui-btn" ).last().hide();
46+
this.vcontrolgroup.controlgroup("refresh");
47+
48+
var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
49+
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
50+
length = buttons.length;
51+
52+
ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
53+
ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
54+
ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
55+
ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
56+
});
57+
58+
module( 'horizontal controlgroup', {
59+
setup: function() {
60+
this.hcontrolgroup = $( "#horizontal-controlgroup" );
61+
this.hcontrolgroup.find( ".ui-btn" ).show();
62+
this.hcontrolgroup.controlgroup("refresh");
63+
}
64+
});
65+
66+
test( "horizontal controlgroup classes", function() {
67+
var buttons = this.hcontrolgroup.find( ".ui-btn" ),
68+
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
69+
length = buttons.length;
70+
71+
ok( buttons.first().hasClass( "ui-corner-left" ), "first button should have class 'ui-corner-left'" );
72+
ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
73+
ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
74+
ok( buttons.last().hasClass( "ui-corner-right"), "last button should have class 'ui-corner-right'" );
75+
});
76+
77+
test( "horizontal controlgroup after first button was hidden", function() {
78+
//We hide the first button and refresh
79+
this.hcontrolgroup.find( ".ui-btn" ).first().hide();
80+
this.hcontrolgroup.controlgroup("refresh");
81+
82+
var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
83+
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
84+
length = buttons.length;
85+
86+
ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
87+
ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
88+
ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
89+
ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
90+
});
91+
92+
test( "horizontal controlgroup after last button was hidden", function() {
93+
//We hide the last button and refresh
94+
this.hcontrolgroup.find( ".ui-btn" ).last().hide();
95+
this.hcontrolgroup.controlgroup("refresh");
96+
97+
var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
98+
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
99+
length = buttons.length;
100+
101+
ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
102+
ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
103+
ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
104+
ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
105+
});
106+
107+
108+
})(jQuery);

‎tests/unit/controlgroup/index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>jQuery Mobile Checkboxradio Test Suite</title>
7+
8+
<script src="../../../js/jquery.js"></script>
9+
<script src="../jquery.setNameSpace.js"></script>
10+
<script src="../../../js/"></script>
11+
<script src="../../../tests/jquery.testHelper.js"></script>
12+
13+
<link rel="stylesheet" href="../../../themes/default/"/>
14+
<link rel="stylesheet" href="../../../external/qunit.css"/>
15+
<script src="../../../external/qunit.js"></script>
16+
17+
<script src="controlgroup_core.js"></script>
18+
</head>
19+
<body>
20+
21+
<h1 id="qunit-header">jQuery Mobile Controlgroup Test Suite</h1>
22+
<h2 id="qunit-banner"></h2>
23+
<h2 id="qunit-userAgent"></h2>
24+
<ol id="qunit-tests">
25+
</ol>
26+
27+
<div data-nstest-role="page">
28+
<div data-nstest-role="content">
29+
30+
<div data-nstest-role="fieldcontain" id="radio-active-btn-test">
31+
<fieldset data-nstest-role="controlgroup" id="vertical-controlgroup">
32+
<legend>Choose a pet:</legend>
33+
<input type="radio" name="radio-pet-active-btn" id="radio-pet-1" value="choice-1" checked="checked" />
34+
<label for="radio-pet-1">Cat</label>
35+
36+
<input type="radio" name="radio-pet-active-btn" id="radio-pet-2" value="choice-2" />
37+
<label for="radio-pet-2">Dog</label>
38+
39+
<input type="radio" name="radio-pet-active-btn" id="radio-pet-3" value="choice-3" />
40+
<label for="radio-pet-3">Hamster</label>
41+
42+
<input type="radio" name="radio-pet-active-btn" id="radio-pet-4" value="choice-4" />
43+
<label for="radio-pet-4">Lizard</label>
44+
</fieldset>
45+
</div>
46+
47+
<div data-nstest-role="fieldcontain">
48+
<fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal" id="horizontal-controlgroup">
49+
<legend>Font styling:</legend>
50+
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
51+
<label for="checkbox-6">b</label>
52+
53+
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
54+
<label for="checkbox-7"><em>i</em></label>
55+
56+
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
57+
<label for="checkbox-8"><em>s</em></label>
58+
59+
<input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
60+
<label for="checkbox-9">u</label>
61+
</fieldset>
62+
</div>
63+
</div>
64+
65+
</div>
66+
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)