Skip to content

Commit a447148

Browse files
arschmitzarschmitz
committed
Checkboxradio: PR fixup
1 parent ba6c7d9 commit a447148

File tree

9 files changed

+179
-164
lines changed

9 files changed

+179
-164
lines changed

‎demos/checkboxradio/default.html

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,21 @@
1818
<body>
1919
<div class="widget">
2020
<h1>Checkbox and radio button widgets</h1>
21-
<h2>Checkbox</h2>
2221

22+
<h2>Radio Group</h2>
23+
<fieldset>
24+
<legend>Select a Location: </legend>
25+
<label for="radio-1">New York</label>
26+
<input type="radio" name="radio-1" id="radio-1">
27+
<label for="radio-2">Paris</label>
28+
<input type="radio" name="radio-1" id="radio-2">
29+
<label for="radio-3">London</label>
30+
<input type="radio" name="radio-1" id="radio-3">
31+
</fieldset>
32+
33+
<h2>Checkbox</h2>
2334
<fieldset>
24-
<legend>Rating</legend>
35+
<legend>Hotel Ratings: </legend>
2536
<label for="checkbox-1">2 Star</label>
2637
<input type="checkbox" name="checkbox-1" id="checkbox-1">
2738
<label for="checkbox-2">3 Star</label>
@@ -31,16 +42,22 @@ <h2>Checkbox</h2>
3142
<label for="checkbox-4">5 Star</label>
3243
<input type="checkbox" name="checkbox-4" id="checkbox-4">
3344
</fieldset>
34-
<h2>Radio Group</h2>
45+
46+
<h2>Checkbox nested in label</h2>
3547
<fieldset>
36-
<legend>Location: </legend>
37-
<label for="radio-1">New York</label>
38-
<input type="radio" name="radio-1" id="radio-1">
39-
<label>Paris
40-
<input type="radio" name="radio-1" id="radio-2">
48+
<legend>Bed Type: </legend>
49+
<label for="checkbox-nested-1">2 Double
50+
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
51+
</label>
52+
<label for="checkbox-nested-2">2 Queen
53+
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
54+
</label>
55+
<label for="checkbox-nested-3">1 Queen
56+
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
57+
</label>
58+
<label for="checkbox-nested-4">1 King
59+
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
4160
</label>
42-
<input type="radio" name="radio-1" id="radio-3">
43-
<label for="radio-3">London</label>
4461
</fieldset>
4562
</div>
4663

‎demos/checkboxradio/no-icons.html

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,46 @@
2020
<body>
2121
<div class="widget">
2222
<h1>Checkbox and radio button widgets</h1>
23+
24+
<h2>Radio Group</h2>
25+
<fieldset>
26+
<legend>Select a Location: </legend>
27+
<label for="radio-1">New York</label>
28+
<input type="radio" name="radio-1" id="radio-1">
29+
<label for="radio-2">Paris</label>
30+
<input type="radio" name="radio-1" id="radio-2">
31+
<label for="radio-3">London</label>
32+
<input type="radio" name="radio-1" id="radio-3">
33+
</fieldset>
34+
2335
<h2>Checkbox</h2>
2436
<fieldset>
25-
<legend>Filter by rating</legend>
26-
<label for="rating-1">2 Star</label>
27-
<input type="checkbox" name="rating" id="rating-1" value="1">
28-
<label for="rating-2">3 Star</label>
29-
<input type="checkbox" name="rating" id="rating-2" value="2">
30-
<label for="rating-3">4 Star</label>
31-
<input type="checkbox" name="rating" id="rating-3" value="3">
32-
<label for="rating-4">5 Star</label>
33-
<input type="checkbox" name="rating" id="rating-4" value="4">
37+
<legend>Hotel Ratings: </legend>
38+
<label for="checkbox-1">2 Star</label>
39+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
40+
<label for="checkbox-2">3 Star</label>
41+
<input type="checkbox" name="checkbox-2" id="checkbox-2">
42+
<label for="checkbox-3">4 Star</label>
43+
<input type="checkbox" name="checkbox-3" id="checkbox-3">
44+
<label for="checkbox-4">5 Star</label>
45+
<input type="checkbox" name="checkbox-4" id="checkbox-4">
3446
</fieldset>
35-
<h2>Radio Group</h2>
47+
48+
<h2>Checkbox nested in label</h2>
3649
<fieldset>
37-
<legend>Filter by location: </legend>
38-
<label for="location-new-york">New York</label>
39-
<input type="radio" name="location" id="location-new-york">
40-
<label>Paris
41-
<input type="radio" name="location" id="location-paris">
50+
<legend>Bed Type: </legend>
51+
<label for="checkbox-nested-1">2 Double
52+
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
53+
</label>
54+
<label for="checkbox-nested-2">2 Queen
55+
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
56+
</label>
57+
<label for="checkbox-nested-3">1 Queen
58+
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
59+
</label>
60+
<label for="checkbox-nested-4">1 King
61+
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
4262
</label>
43-
<input type="radio" name="location" id="location-london">
44-
<label for="location-london">London</label>
4563
</fieldset>
4664
</div>
4765

‎demos/checkboxradio/product-selector.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
$( "[name='brand']").on( "change", function(){
3030
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
3131
});
32-
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
32+
$( "input" ).filter( ":checked" ).trigger( "change" );
3333
$( ".shape-bar" ).controlgroup();
3434
$( ".toggles" ).controlgroup({
3535
direction: "vertical"

‎demos/checkboxradio/radiogroup.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,14 @@
2121
<div class="widget">
2222

2323
<h2>Radio Group</h2>
24-
<fieldset >
25-
<legend>Location: </legend>
24+
<fieldset>
25+
<legend>Select a Location: </legend>
2626
<label for="radio-1">New York</label>
2727
<input type="radio" name="radio-1" id="radio-1">
28-
<label>Paris
29-
<input type="radio" name="radio-1" id="radio-2">
30-
</label>
31-
<input type="radio" name="radio-1" id="radio-3">
28+
<label for="radio-2">Paris</label>
29+
<input type="radio" name="radio-1" id="radio-2">
3230
<label for="radio-3">London</label>
31+
<input type="radio" name="radio-1" id="radio-3">
3332
</fieldset>
3433
</div>
3534

‎tests/unit/checkboxradio/checkboxradio_core.js

Lines changed: 46 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,23 @@
55

66
(function($) {
77

8-
module("Checkboxradio: core");
8+
module( "Checkboxradio: core" );
99
test( "Checkbox - Initial class structure", function( assert ) {
10-
expect( 4 );
10+
expect( 2 );
1111
var input = $("#check"),
1212
label = $("label[for=check]");
13-
ok( input.is( ":visible" ) );
14-
assert.lacksClasses( label, "ui-button" );
13+
1514
input.checkboxradio();
1615
assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" );
1716
assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all",
1817
true, "Label has proper classes" );
1918
});
2019

2120
test( "Radios - Initial class structure", function( assert ) {
22-
expect( 10 );
21+
expect( 6 );
2322
var inputs = $( "#radio0 input" ),
2423
labels = $( "#radio0 label" );
25-
ok( inputs.is( ":visible" ) );
26-
labels.each( function() {
27-
assert.lacksClasses( this, "ui-button" );
28-
});
24+
2925
inputs.checkboxradio();
3026
inputs.each( function() {
3127
assert.hasClasses( this, "ui-helper-hidden-accessible" );
@@ -35,48 +31,48 @@ test( "Radios - Initial class structure", function( assert ) {
3531
});
3632
});
3733

38-
function assert(noForm, form1, form2) {
34+
function radioFormAssert( noForm, form1, form2, assert ) {
3935
var others,
4036
noFormElement = $( "#radio0 .ui-button" + noForm ),
4137
form1Element = $( "#radio1 .ui-button" + form1 ),
4238
form2Element = $( "#radio2 .ui-button" + form2 );
4339

44-
QUnit.assert.hasClasses( noFormElement, "ui-state-active" );
40+
assert.hasClasses( noFormElement, "ui-state-active" );
4541
$( "#radio0" ).find( ".ui-button" ).not( noFormElement ).each( function(){
46-
QUnit.assert.lacksClasses( this, "ui-state-active" );
42+
assert.lacksClasses( this, "ui-state-active" );
4743
});
4844

49-
QUnit.assert.hasClasses( form1Element, "ui-state-active" );
45+
assert.hasClasses( form1Element, "ui-state-active" );
5046
others = $( "#radio1" ).find( ".ui-button" ).not( form1Element );
5147
others.each( function(){
52-
QUnit.assert.lacksClasses( this, "ui-state-active" );
48+
assert.lacksClasses( this, "ui-state-active" );
5349
});
54-
QUnit.assert.hasClasses( form2Element, "ui-state-active" );
50+
assert.hasClasses( form2Element, "ui-state-active" );
5551
$( "#radio2" ).find( ".ui-button" ).not( form2Element ).each( function(){
56-
QUnit.assert.lacksClasses( this, "ui-state-active" );
52+
assert.lacksClasses( this, "ui-state-active" );
5753
});
5854
}
5955

60-
test("radio groups", function() {
56+
test( "radio groups", function( assert ) {
6157
expect( 36 );
62-
$("input[type=radio]").checkboxradio();
63-
assert(":eq(0)", ":eq(1)", ":eq(2)");
58+
$( "input[type=radio]").checkboxradio();
59+
radioFormAssert( ":eq(0)", ":eq(1)", ":eq(2)", assert );
6460

6561
// click outside of forms
66-
$("#radio0 .ui-button:eq(1)").simulate("click");
67-
assert(":eq(1)", ":eq(1)", ":eq(2)");
62+
$( "#radio0 .ui-button:eq(1)" ).simulate( "click" );
63+
radioFormAssert(":eq(1)", ":eq(1)", ":eq(2)", assert );
6864

6965
// click in first form
70-
$("#radio1 .ui-button:eq(0)").simulate("click");
71-
assert(":eq(1)", ":eq(0)", ":eq(2)");
66+
$( "#radio1 .ui-button:eq(0)").simulate( "click" );
67+
radioFormAssert( ":eq(1)", ":eq(0)", ":eq(2)", assert );
7268

7369
// click in second form
74-
$("#radio2 .ui-button:eq(0)").simulate("click");
75-
assert(":eq(1)", ":eq(0)", ":eq(0)");
70+
$("#radio2 .ui-button:eq(0)" ).simulate( "click" );
71+
radioFormAssert( ":eq(1)", ":eq(0)", ":eq(0)", assert );
7672
});
7773

7874
asyncTest(
79-
"Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation",
75+
"Checkbox/Radiobutton do not show focused State when using keyboard navigation",
8076
function( assert ) {
8177
expect( 2 );
8278
var check = $( "#check" ).checkboxradio(),
@@ -86,7 +82,7 @@ asyncTest(
8682
setTimeout(function() {
8783
assert.hasClasses( label, "ui-state-focus" );
8884
start();
89-
});
85+
} );
9086
}
9187
);
9288

@@ -97,8 +93,6 @@ asyncTest( "Ensure checked after single click on checkbox label button", functio
9793
var label = $( this ).checkboxradio( "widget" );
9894
ok( this.checked, "checked ok" );
9995

100-
// The following test is commented out for now because with new markup we are trying to avoid aria
101-
//ok( lbl.attr("aria-pressed") === "true", "aria ok" );
10296
assert.hasClasses( label, "ui-state-active" );
10397
});
10498

@@ -111,53 +105,44 @@ asyncTest( "Ensure checked after single click on checkbox label button", functio
111105
start();
112106
});
113107
});
114-
test( "Checkbox creation that requires a matching finds label in all cases", function( assert ) {
115-
expect( 7 );
116-
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
117-
group.find( "input[type=checkbox]" ).checkboxradio();
118-
assert.hasClasses( group.find( "label" ), "ui-button" );
119108

120-
group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
121-
group.filter( "input[type=checkbox]" ).checkboxradio();
122-
assert.hasClasses( group.filter( "label" ), "ui-button" );
123-
124-
group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
125-
group.find( "input[type=checkbox]" ).checkboxradio();
126-
assert.hasClasses( group.filter( "label" ), "ui-button" );
127-
128-
group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
129-
group.find( "input[type=checkbox]" ).checkboxradio();
130-
assert.hasClasses( group.find( "label" ), "ui-button" );
131-
132-
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
133-
group.filter( "input[type=checkbox]" ).checkboxradio();
134-
assert.hasClasses( group.find( "label" ), "ui-button" );
135-
136-
group = $( "<span><label><input type='checkbox' id='t7092f'></label></span>" );
137-
group.find( "input[type=checkbox]" ).checkboxradio();
138-
assert.hasClasses( group.find( "label" ), "ui-button" );
139-
140-
group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
141-
group.find( "input" ).checkboxradio();
142-
assert.hasClasses( group.find( "label" ), "ui-button", "Found an label with id containing a :" );
109+
test( "Checkbox creation requires a label, and finds it in all cases", function( assert ) {
110+
expect( 7 );
111+
var groups = [
112+
"<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>",
113+
"<span><input type='checkbox' id='t7092b'><label for='t7092b'></label></span>",
114+
"<span><span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label></span>",
115+
"<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>",
116+
"<span><input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>",
117+
"<span><label><input type='checkbox' id='t7092f'></label></span>",
118+
"<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>"
119+
];
120+
121+
$.each( groups, function( index, markup ) {
122+
var group = $( markup );
123+
124+
group.find( "input[type=checkbox]" ).checkboxradio();
125+
assert.hasClasses( group.find( "label" ), "ui-button" );
126+
} );
143127
});
144128

145129
asyncTest(
146-
"Resetting a button's form should refresh, the visual state of the button to match.",
130+
"Resetting a button's form should refresh, the visual state of the checkbox to match.",
147131
function( assert ) {
148132
expect( 2 );
149133
var form = $( "<form>" +
150134
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
151135
"</form>" ),
152-
checkbox = form.find( "input[type=checkbox]" ).checkboxradio();
136+
checkbox = form.find( "input[type=checkbox]" ).checkboxradio(),
137+
widget = checkbox.checkboxradio( "widget" );
153138

154139
checkbox.prop( "checked", false ).checkboxradio( "refresh" );
155-
assert.lacksClasses( checkbox.checkboxradio( "widget" ), "ui-state-active" );
140+
assert.lacksClasses( widget, "ui-state-active" );
156141

157142
form.get( 0 ).reset();
158143

159144
setTimeout(function() {
160-
assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-active" );
145+
assert.hasClasses( widget, "ui-state-active" );
161146
start();
162147
}, 1 );
163148
}

‎tests/unit/checkboxradio/checkboxradio_methods.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44

55

66
(function($) {
7-
87
module( "Checkboxradio: methods" );
8+
99
test( "Checkbox: refresh", function( assert ) {
1010
var widget, icon,
1111
checkbox = $( "#checkbox-method-refresh" );
1212
expect( 11 );
1313
checkbox.checkboxradio();
1414

1515
widget = checkbox.checkboxradio( "widget" );
16-
strictEqual( widget.find( ".ui-icon" ).length, 1,
16+
icon = widget.find( ".ui-icon" );
17+
strictEqual( icon.length, 1,
1718
"There is initally one icon" );
18-
widget.find( ".ui-icon" ).eq( 0 ).remove();
19+
icon.remove();
1920
checkbox.checkboxradio( "refresh" );
2021
icon = widget.find( ".ui-icon" );
2122
strictEqual( icon.length, 1,
@@ -113,16 +114,14 @@ test( "Radio: disable / enable", function( assert ) {
113114
widget = radio.checkboxradio().checkboxradio( "widget" );
114115

115116
expect( 4 );
117+
116118
radio.checkboxradio( "disable" );
117-
assert.hasClasses( widget, "ui-state-disabled",
118-
"label gets ui-state-disabled when disable is called" );
119-
strictEqual( radio.is( ":disabled" ), true,
120-
"checkbox is disabled when disable is called" );
119+
assert.hasClasses( widget, "ui-state-disabled" );
120+
strictEqual( radio.is( ":disabled" ), true );
121+
121122
radio.checkboxradio( "enable" );
122-
assert.lacksClasses( widget, "ui-state-disabled",
123-
"label has ui-state-disabled removed when enable is called" );
124-
strictEqual( radio.is( ":disabled" ), false,
125-
"checkbox has disabled prop removed when enable is called" );
123+
assert.lacksClasses( widget, "ui-state-disabled" );
124+
strictEqual( radio.is( ":disabled" ), false );
126125
});
127126
test( "Radio: widget returns the label", function(){
128127
var radio = $( "#radio-method-refresh" ),

0 commit comments

Comments
 (0)