Skip to content

Commit 102bf3d

Browse files
arschmitzarschmitz
committed
Button: Pr fixup add tests
1 parent 0ba675e commit 102bf3d

File tree

5 files changed

+117
-84
lines changed

5 files changed

+117
-84
lines changed

‎demos/button/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1>CSS Buttons</h1>
3636

3737
<div class="demo-description">
3838
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
39-
<p>Buttons can be styled via the button widget or by adding the classes yourself to avoid the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
39+
<p>Buttons can be styled via the button widget or by adding the classes yourself. This avoids the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
4040
</div>
4141
</body>
4242
</html>

‎demos/button/icons.html

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,55 @@
1111
<link rel="stylesheet" href="../demos.css">
1212
<script>
1313
$(function() {
14-
$( ".widget button, .widget a" ).first().button({
15-
icon: "ui-icon-gear",
16-
showLabel: false
17-
}).next().button({
18-
icon: "ui-icon-gear"
19-
}).next().button({
20-
icon: "ui-icon-gear",
21-
iconPosition: "end"
22-
}).next().button({
23-
icon: "ui-icon-gear",
24-
iconPosition: "bottom"
25-
}).next().button({
26-
icon: "ui-icon-gear",
27-
iconPosition: "top"
28-
});
14+
$( ".widget button" ).first()
15+
.button().next()
16+
.button({
17+
icon: "ui-icon-gear",
18+
showLabel: false
19+
}).next().button({
20+
icon: "ui-icon-gear"
21+
}).next().button({
22+
icon: "ui-icon-gear",
23+
iconPosition: "end"
24+
}).next().button({
25+
icon: "ui-icon-gear",
26+
iconPosition: "top"
27+
}).next().button({
28+
icon: "ui-icon-gear",
29+
iconPosition: "bottom"
30+
});
2931
});
3032
</script>
3133
</head>
3234
<body>
3335
<div class="widget">
3436
<h1>Widget</h1>
37+
<button>Button with only text</button>
3538
<button>Button with icon only</button>
3639
<button>Button with icon on the left</button>
3740
<button>Button with icon on the right</button>
38-
<button>Button with icon on the bottom</button>
3941
<button>Button with icon on the top</button>
42+
<button>Button with icon on the bottom</button>
4043
</div>
4144
<div class="css">
4245
<h1>CSS</h1>
43-
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
44-
<span class="ui-icon ui-icon-gear"></span>Button with icon only
46+
<button class="ui-button ui-widget ui-corner-all">
47+
Button with only text
4548
</button>
46-
<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
47-
Button with no text
49+
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
50+
<span class="ui-icon ui-icon-gear"></span> Button with icon only
4851
</button>
49-
<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
50-
<span class="ui-icon ui-icon-triangle-1-w"></span>Button with icon on the left
52+
<button class="ui-button ui-widget ui-corner-all">
53+
<span class="ui-icon ui-icon-gear"></span> Button with icon on the left
5154
</button>
52-
<button class="ui-button ui-widget ui-corner-all ui-icon-end">
53-
Button with icon on the right<span class="ui-icon ui-icon-triangle-1-e"></span>
55+
<button class="ui-button ui-widget ui-corner-all">
56+
Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
5457
</button>
5558
<button class="ui-button ui-widget ui-corner-all">
56-
Button with icon on bottom<span class="ui-icon ui-icon-triangle-1-s ui-widget-icon-block"></span>
59+
<span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
5760
</button>
5861
<button class="ui-button ui-widget ui-corner-all">
59-
<span class="ui-icon ui-icon-triangle-1-n ui-widget-icon-block"></span>Button with icon on top
62+
Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
6063
</button>
6164
</div>
6265
<div class="demo-description">

‎tests/unit/button/button.html

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,6 @@
1515

1616
<div><button id="button">Label</button></div>
1717

18-
<div id="radio0" style="margin-top: 2em;">
19-
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
20-
<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
21-
<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
22-
</div>
23-
<div id="checkbox0">
24-
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
25-
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
26-
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
27-
</div>
28-
<form>
29-
<div id="radio1" style="margin-top: 2em;">
30-
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
31-
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
32-
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
33-
</div>
34-
</form>
35-
<form>
36-
<div id="radio2" style="margin-top: 2em;">
37-
<input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
38-
<input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
39-
<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
40-
</div>
41-
</form>
42-
<form>
43-
<div id="radio3">
44-
<input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
45-
<input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
46-
<input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
47-
</div>
48-
</form>
49-
50-
<input type="checkbox" id="check"><label for="check">Toggle</label>
51-
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
52-
5318
<div><input id="submit" type="submit" value="Label"></div>
5419

5520
<button id="button-disabled" disabled>Button</button>

‎tests/unit/button/options.js

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,67 @@ test( "label, explicit value, with input type submit", function() {
8888
deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" );
8989
});
9090

91-
test( "icon", function() {
92-
expect( 1 );
93-
$("#button").button({
94-
showLabel: false,
95-
icon: "iconclass"
96-
});
97-
strictEqual( $( "#button" ).find( "span.ui-icon.iconclass" ).length, 1 );
91+
test( "icon", function( assert ) {
92+
expect( 4 );
93+
var button = $("#button").button({
94+
showLabel: false,
95+
icon: "iconclass"
96+
}),
97+
icon = button.find( ".ui-icon" );
98+
99+
assert.hasClasses( icon, "iconclass" );
100+
equal( icon.length, 1, "button with icon option set has icon" );
101+
102+
button.button( "option", "icon", false );
103+
equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" );
104+
105+
button.button( "option", "icon", "iconclass" );
106+
ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" );
107+
98108
});
99109

110+
test( "icon position", function( assert ) {
111+
expect( 21 );
112+
113+
var button = $( "#button" ).button( {
114+
icon: "ui-icon-gear"
115+
} ),
116+
icon = button.find( ".ui-icon" ),
117+
space = button.find( ".ui-button-icon-space" );
118+
119+
equal( icon.length, 1, "button with icon option set has icon" );
120+
equal( button.button( "option", "iconPosition" ), "beginning",
121+
"Button has iconPosition beginning by default" );
122+
equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" );
123+
equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining");
124+
equal( space.text(), " ",
125+
"ui-button-icon-space contains a breaking space iconPosition:beginning" );
126+
assert.lacksClasses( icon, "ui-widget-icon-block" );
127+
128+
button.button( "option", "iconPosition", "end" );
129+
equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" );
130+
equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" );
131+
equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" );
132+
equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end");
133+
equal( space.text(), " ",
134+
"ui-button-icon-space contains a breaking space iconPosition:beginning" );
135+
assert.lacksClasses( icon, "ui-widget-icon-block" );
136+
137+
button.button( "option", "iconPosition", "top" );
138+
equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" );
139+
equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" );
140+
equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" );
141+
ok( !button.find( "ui-button-icon-space" ).length,
142+
"Button should not have an iconSpace with position: top" );
143+
144+
button.button( "option", "iconPosition", "bottom" );
145+
equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" );
146+
equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" );
147+
equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" );
148+
ok( !button.find( "ui-button-icon-space" ).length,
149+
"Button should not have an iconSpace with position: bottom" );
150+
assert.hasClasses( icon, "ui-widget-icon-block" );
151+
152+
} );
153+
100154
} );

‎ui/button.js

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,10 @@ $.widget( "ui.button", {
144144
}
145145
},
146146

147-
_updateIcon: function( icon ) {
148-
var displayBlock = this.options.iconPosition === "top" ||
149-
this.options.iconPosition === "bottom";
147+
_updateIcon: function( value, option ) {
148+
var icon = option !== "iconPosition",
149+
position = icon ? this.options.iconPosition : value,
150+
displayBlock = position === "top" || position === "bottom";
150151

151152
if ( !this.icon ) {
152153
this.icon = $( "<span>" );
@@ -155,19 +156,28 @@ $.widget( "ui.button", {
155156

156157
if ( !this.options.showLabel ) {
157158
this._addClass( "ui-button-icon-only" );
158-
} else if ( displayBlock ) {
159-
this._addClass( this.icon, null, "ui-widget-icon-block" );
160159
}
161-
} else {
160+
} else if ( icon ) {
162161
this._removeClass( this.icon, null, this.options.icon );
162+
if ( displayBlock ) {
163+
this._removeClass( this.icon, null, "ui-wiget-icon-block" );
164+
}
163165
}
164-
this._addClass( this.icon, null, icon );
165-
this.element[ this._getAttachMethod() ]( this.icon );
166+
if ( icon ) {
167+
this._addClass( this.icon, null, value );
168+
}
169+
this.element[ this._getAttachMethod( false, icon ? undefined : value ) ]( this.icon );
166170
if ( !displayBlock ) {
167171
if ( !this.iconSpace ) {
168172
this.iconSpace = $( "<span> </span>" );
173+
this._addClass( this.iconSpace, "ui-button-icon-space" );
174+
}
175+
this.icon[ this._getAttachMethod( true, icon ? undefined : value ) ]( this.iconSpace );
176+
} else {
177+
this._addClass( this.icon, null, "ui-widget-icon-block" );
178+
if( this.iconSpace ) {
179+
this.iconSpace.remove();
169180
}
170-
this.icon[ this._getAttachMethod( true ) ]( this.iconSpace );
171181
}
172182
},
173183

@@ -190,18 +200,19 @@ $.widget( "ui.button", {
190200
}
191201
},
192202

193-
_getAttachMethod: function( space ) {
194-
return this.options.iconPosition === "top" || this.options.iconPosition === "beginning" ?
195-
space ? "before" : "prepend" :
196-
space ? "after" : "append";
203+
_getAttachMethod: function( space, position ) {
204+
position = position || this.options.iconPosition;
205+
return position === "top" || position === "beginning" ?
206+
space ? "after" : "prepend" :
207+
space ? "before" : "append";
197208
},
198209

199210
_setOption: function( key, value ) {
200211
var iconGroup;
201212

202213
if ( key === "icon" || key === "iconPosition" ) {
203-
if ( value !== null ) {
204-
this._updateIcon( value );
214+
if ( value ) {
215+
this._updateIcon( value, key );
205216
} else {
206217
this.icon.remove();
207218
this.iconSpace.remove();

0 commit comments

Comments
 (0)