Button: Style updates

Ref #14246
Ref gh-1588
This commit is contained in:
Alexander Schmitz 2015-08-21 00:12:35 -04:00
parent de242d8ca9
commit 1f7164660e
5 changed files with 174 additions and 173 deletions

View File

@ -14,9 +14,9 @@ common.testWidget( "button", {
label: null, label: null,
text: true, text: true,
// callbacks // Callbacks
create: null create: null
} }
}); } );
} ); } );

View File

@ -3,58 +3,58 @@ define( [
"ui/widgets/button" "ui/widgets/button"
], function( $ ) { ], function( $ ) {
module("button: core"); module( "button: core" );
test("checkbox", function( assert ) { test( "checkbox", function( assert ) {
expect( 4 ); expect( 4 );
var input = $("#check"), var input = $( "#check" ),
label = $("label[for=check]"); label = $( "label[for=check]" );
ok( input.is(":visible") ); ok( input.is( ":visible" ) );
ok( label.is(":not(.ui-button)") ); ok( label.is( ":not(.ui-button)" ) );
input.button(); input.button();
assert.hasClasses( input, "ui-helper-hidden-accessible" ); assert.hasClasses( input, "ui-helper-hidden-accessible" );
assert.hasClasses( label, "ui-button" ); assert.hasClasses( label, "ui-button" );
}); } );
test("radios", function( assert ) { test( "radios", function( assert ) {
expect( 8 ); expect( 8 );
var inputs = $("#radio0 input"), var inputs = $( "#radio0 input" ),
labels = $("#radio0 label"); labels = $( "#radio0 label" );
ok( inputs.is(":visible") ); ok( inputs.is( ":visible" ) );
ok( labels.is(":not(.ui-button)") ); ok( labels.is( ":not(.ui-button)" ) );
inputs.button(); inputs.button();
inputs.each(function() { inputs.each( function() {
assert.hasClasses( this, "ui-helper-hidden-accessible" ); assert.hasClasses( this, "ui-helper-hidden-accessible" );
}); } );
labels.each(function() { labels.each( function() {
assert.hasClasses( this, "ui-button" ); assert.hasClasses( this, "ui-button" );
}); } );
}); } );
test("radio groups", function( assert ) { test( "radio groups", function( assert ) {
expect( 12 ); expect( 12 );
function assertClasses(noForm, form1, form2) { function assertClasses( noForm, form1, form2 ) {
assert.hasClasses( $("#radio0 .ui-button" + noForm ), "ui-state-active" ); assert.hasClasses( $( "#radio0 .ui-button" + noForm ), "ui-state-active" );
assert.hasClasses( $("#radio1 .ui-button" + form1 ), "ui-state-active" ); assert.hasClasses( $( "#radio1 .ui-button" + form1 ), "ui-state-active" );
assert.hasClasses( $("#radio2 .ui-button" + form2 ), "ui-state-active" ); assert.hasClasses( $( "#radio2 .ui-button" + form2 ), "ui-state-active" );
} }
$("input[type=radio]").button(); $( "input[type=radio]" ).button();
assertClasses(":eq(0)", ":eq(1)", ":eq(2)"); assertClasses( ":eq(0)", ":eq(1)", ":eq(2)" );
// click outside of forms // Click outside of forms
$("#radio0 .ui-button:eq(1)").trigger( "click" ); $( "#radio0 .ui-button:eq(1)" ).trigger( "click" );
assertClasses(":eq(1)", ":eq(1)", ":eq(2)"); assertClasses( ":eq(1)", ":eq(1)", ":eq(2)" );
// click in first form // Click in first form
$("#radio1 .ui-button:eq(0)").trigger( "click" ); $( "#radio1 .ui-button:eq(0)" ).trigger( "click" );
assertClasses(":eq(1)", ":eq(0)", ":eq(2)"); assertClasses( ":eq(1)", ":eq(0)", ":eq(2)" );
// click in second form // Click in second form
$("#radio2 .ui-button:eq(0)").trigger( "click" ); $( "#radio2 .ui-button:eq(0)" ).trigger( "click" );
assertClasses(":eq(1)", ":eq(0)", ":eq(0)"); assertClasses( ":eq(1)", ":eq(0)", ":eq(0)" );
}); } );
test( "radio groups - ignore elements with same name", function() { test( "radio groups - ignore elements with same name", function() {
expect( 1 ); expect( 1 );
@ -63,47 +63,48 @@ test( "radio groups - ignore elements with same name", function() {
checkbox = $( "<input>", { checkbox = $( "<input>", {
type: "checkbox", type: "checkbox",
name: radios.attr( "name" ) name: radios.attr( "name" )
}); } );
form.append( checkbox ); form.append( checkbox );
radios.button( "refresh" ); radios.button( "refresh" );
ok( true, "no exception from accessing button instance of checkbox" ); ok( true, "no exception from accessing button instance of checkbox" );
}); } );
test("input type submit, don't create child elements", function() { test( "input type submit, don't create child elements", function() {
expect( 2 ); expect( 2 );
var input = $("#submit"); var input = $( "#submit" );
deepEqual( input.children().length, 0 ); deepEqual( input.children().length, 0 );
input.button(); input.button();
deepEqual( input.children().length, 0 ); deepEqual( input.children().length, 0 );
}); } );
test("buttonset", function( assert ) { test( "buttonset", function( assert ) {
expect( 6 ); expect( 6 );
var set = $("#radio1").buttonset(); var set = $( "#radio1" ).buttonset();
assert.hasClasses( set, "ui-buttonset" ); assert.hasClasses( set, "ui-buttonset" );
deepEqual( set.children(".ui-button").length, 3 ); deepEqual( set.children( ".ui-button" ).length, 3 );
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
}); } );
test("buttonset (rtl)", function( assert ) { test( "buttonset (rtl)", function( assert ) {
expect( 6 ); expect( 6 );
var set, var set,
parent = $("#radio1").parent(); parent = $( "#radio1" ).parent();
// Set to rtl
parent.attr("dir", "rtl");
set = $("#radio1").buttonset(); // Set to rtl
parent.attr( "dir", "rtl" );
set = $( "#radio1" ).buttonset();
assert.hasClasses( set, "ui-buttonset" ); assert.hasClasses( set, "ui-buttonset" );
deepEqual( set.children(".ui-button").length, 3 ); deepEqual( set.children( ".ui-button" ).length, 3 );
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
}); } );
// TODO: simulated click events don't behave like real click events in IE // TODO: simulated click events don't behave like real click events in IE
// remove this when simulate properly simulates this // remove this when simulate properly simulates this
@ -112,22 +113,22 @@ if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) { asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) {
expect( 3 ); expect( 3 );
$("#check2").button().on( "change", function() { $( "#check2" ).button().on( "change", function() {
var lbl = $( this ).button("widget"); var lbl = $( this ).button( "widget" );
ok( this.checked, "checked ok" ); ok( this.checked, "checked ok" );
ok( lbl.attr("aria-pressed") === "true", "aria ok" ); ok( lbl.attr( "aria-pressed" ) === "true", "aria ok" );
assert.hasClasses( lbl, "ui-state-active" ); assert.hasClasses( lbl, "ui-state-active" );
}); } );
// support: Opera // Support: Opera
// Opera doesn't trigger a change event when this is done synchronously. // Opera doesn't trigger a change event when this is done synchronously.
// This seems to be a side effect of another test, but until that can be // This seems to be a side effect of another test, but until that can be
// tracked down, this delay will have to do. // tracked down, this delay will have to do.
setTimeout(function() { setTimeout( function() {
$("#check2").button("widget").simulate("click"); $( "#check2" ).button( "widget" ).simulate( "click" );
start(); start();
}, 1 ); }, 1 );
}); } );
} }
test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) { test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) {
@ -151,15 +152,15 @@ test( "#7092 - button creation that requires a matching label does not find labe
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" ); group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
group.filter( "input[type=checkbox]" ).button(); group.filter( "input[type=checkbox]" ).button();
assert.hasClasses( group.find( "label" ), "ui-button" ); assert.hasClasses( group.find( "label" ), "ui-button" );
}); } );
test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) { test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) {
expect( 2 ); expect( 2 );
$( "#radio01" ).next().addBack().hide(); $( "#radio01" ).next().addBack().hide();
var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); var set = $( "#radio0" ).buttonset( { items: "input[type=radio]:visible" } );
ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" ); assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" );
}); } );
test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) { test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) {
expect( 3 ); expect( 3 );
@ -169,7 +170,7 @@ test( "#6262 - buttonset not applying ui-corner to invisible elements", function
assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" ); assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" );
assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" ); assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" );
}); } );
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) { asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) {
expect( 2 ); expect( 2 );
@ -185,15 +186,15 @@ asyncTest( "Resetting a button's form should refresh the visual state of the but
form.get( 0 ).reset(); form.get( 0 ).reset();
// #9213: If a button has been removed, refresh should not be called on it when // If a button has been removed, refresh should not be called on it when
// its corresponding form is reset. // its corresponding form is reset.
button.remove(); button.remove();
setTimeout(function() { setTimeout( function() {
assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" ); assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" );
start(); start();
}, 1 ); }, 1 );
}); } );
asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) { asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) {
expect( 2 ); expect( 2 );
@ -201,30 +202,30 @@ asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyb
label = $( "label[for='check']" ); label = $( "label[for='check']" );
assert.lacksClasses( label, "ui-state-focus" ); assert.lacksClasses( label, "ui-state-focus" );
check.trigger( "focus" ); check.trigger( "focus" );
setTimeout(function() { setTimeout( function() {
assert.hasClasses( label, "ui-state-focus" ); assert.hasClasses( label, "ui-state-focus" );
start(); start();
}); } );
}); } );
test( "#7534 - Button label selector works for ids with \":\"", function( assert ) { test( "#7534 - Button label selector works for ids with \":\"", function( assert ) {
expect( 1 ); expect( 1 );
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" ); var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
group.find( "input" ).button(); group.find( "input" ).button();
assert.hasClasses( group.find( "label" ), "ui-button" , "Found an id with a :" ); assert.hasClasses( group.find( "label" ), "ui-button", "Found an id with a :" );
}); } );
asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) { asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) {
expect( 2 ); expect( 2 );
var element = $( "#button1" ).button(); var element = $( "#button1" ).button();
element[ 0 ].focus(); element[ 0 ].focus();
setTimeout(function() { setTimeout( function() {
assert.hasClasses( element, "ui-state-focus" ); assert.hasClasses( element, "ui-state-focus" );
element.button( "disable" ); element.button( "disable" );
assert.lacksClasses( element, "ui-state-focus", assert.lacksClasses( element, "ui-state-focus",
"button does not have ui-state-focus when disabled" ); "button does not have ui-state-focus when disabled" );
start(); start();
}); } );
}); } );
} ); } );

View File

@ -3,15 +3,15 @@ define( [
"ui/widgets/button" "ui/widgets/button"
], function( $ ) { ], function( $ ) {
module("button: events"); module( "button: events" );
test("buttonset works with single-quote named elements (#7505)", function() { test( "buttonset works with single-quote named elements (#7505)", function() {
expect( 1 ); expect( 1 );
$("#radio3").buttonset(); $( "#radio3" ).buttonset();
$("#radio33").on( "click", function(){ $( "#radio33" ).on( "click", function() {
ok( true, "button clicks work with single-quote named elements" ); ok( true, "button clicks work with single-quote named elements" );
}).trigger( "click" ); } ).trigger( "click" );
}); } );
asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) { asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) {
expect( 1 ); expect( 1 );
@ -22,15 +22,15 @@ asyncTest( "when button loses focus, ensure active state is removed (#8559)", fu
element.one( "blur", function() { element.one( "blur", function() {
assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" ); assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" );
start(); start();
}).trigger( "blur" ); } ).trigger( "blur" );
}); } );
element.trigger( "focus" ); element.trigger( "focus" );
setTimeout(function() { setTimeout( function() {
element element
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ) .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } )
.simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } ); .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
}); } );
}); } );
} ); } );

View File

@ -3,50 +3,50 @@ define( [
"ui/widgets/button" "ui/widgets/button"
], function( $ ) { ], function( $ ) {
module("button: methods"); module( "button: methods" );
test("destroy", function( assert ) { test( "destroy", function( assert ) {
expect( 1 ); expect( 1 );
assert.domEqual( "#button", function() { assert.domEqual( "#button", function() {
$( "#button" ).button().button( "destroy" ); $( "#button" ).button().button( "destroy" );
}); } );
}); } );
test( "refresh: Ensure disabled state is preserved correctly.", function() { test( "refresh: Ensure disabled state is preserved correctly.", function() {
expect( 8 ); expect( 8 );
var element = $( "<a href='#'></a>" ); var element = $( "<a href='#'></a>" );
element.button({ disabled: true }).button( "refresh" ); element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237 ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237
element = $( "<div></div>" ); element = $( "<div></div>" );
element.button({ disabled: true }).button( "refresh" ); element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" ); ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" );
element = $( "<button></button>" ); element = $( "<button></button>" );
element.button( { disabled: true} ).button( "refresh" ); element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh"); ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh" );
element = $( "<input type='checkbox'>" ); element = $( "<input type='checkbox'>" );
element.button( { disabled: true} ).button( "refresh" ); element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh"); ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
element = $( "<input type='radio'>" ); element = $( "<input type='radio'>" );
element.button( { disabled: true} ).button( "refresh" ); element.button( { disabled: true } ).button( "refresh" );
ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh"); ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
element = $( "<button></button>" ); element = $( "<button></button>" );
element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh."); //See #8828 ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh." ); //See #8828
element = $( "<input type='checkbox'>" ); element = $( "<input type='checkbox'>" );
element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh."); ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
element = $( "<input type='radio'>" ); element = $( "<input type='radio'>" );
element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh."); ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
}); } );
// #8975 // #8975
test( "refresh: buttonset should turn added elements into button widgets", function() { test( "refresh: buttonset should turn added elements into button widgets", function() {
@ -68,6 +68,6 @@ test( "refresh: buttonset should turn added elements into button widgets", funct
equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" ); equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" ); equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
}); } );
} ); } );

View File

@ -8,33 +8,33 @@ module( "button: options" );
test( "disabled, explicit value", function( assert ) { test( "disabled, explicit value", function( assert ) {
expect( 7 ); expect( 7 );
var element = $( "#radio01" ).button({ disabled: false }); var element = $( "#radio01" ).button( { disabled: false } );
deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" ); deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
deepEqual( element.prop( "disabled" ), false, "element is disabled" ); deepEqual( element.prop( "disabled" ), false, "element is disabled" );
assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" ); assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" );
element = $( "#radio02" ).button({ disabled: true }); element = $( "#radio02" ).button( { disabled: true } );
ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" ); assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" );
deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" ); deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
deepEqual( element.prop( "disabled" ), true, "element is not disabled" ); deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
}); } );
test("disabled, null", function() { test( "disabled, null", function() {
expect( 4 ); expect( 4 );
$("#radio01").button({ disabled: null }); $( "#radio01" ).button( { disabled: null } );
deepEqual(false, $("#radio01").button("option", "disabled"), deepEqual( false, $( "#radio01" ).button( "option", "disabled" ),
"disabled option set to false"); "disabled option set to false" );
deepEqual(false, $("#radio01").prop("disabled"), "element is disabled"); deepEqual( false, $( "#radio01" ).prop( "disabled" ), "element is disabled" );
$("#radio02").prop("disabled", true).button({ disabled: null }); $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
deepEqual(true, $("#radio02").button("option", "disabled"), deepEqual( true, $( "#radio02" ).button( "option", "disabled" ),
"disabled option set to true"); "disabled option set to true" );
deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled"); deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
}); } );
test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) { test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) {
expect( 12 ); expect( 12 );
@ -68,90 +68,90 @@ test( "disabled, ui-state-active is removed unless checkbox or radio", function(
assert.lacksClasses( buttonElement, "ui-state-active", assert.lacksClasses( buttonElement, "ui-state-active",
"Disabled [" + elementType + "] does not have ui-state-active class." ); "Disabled [" + elementType + "] does not have ui-state-active class." );
} }
}); } );
}); } );
test("text false without icon", function() { test( "text false without icon", function() {
expect( 1 ); expect( 1 );
$("#button").button({ $( "#button" ).button( {
text: false text: false
}); } );
ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") ); ok( $( "#button" ).is( ".ui-button-text-only:not(.ui-button-icon-only)" ) );
$("#button").button("destroy"); $( "#button" ).button( "destroy" );
}); } );
test("text false with icon", function() { test( "text false with icon", function() {
expect( 1 ); expect( 1 );
$("#button").button({ $( "#button" ).button( {
text: false, text: false,
icons: { icons: {
primary: "iconclass" primary: "iconclass"
} }
}); } );
ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") ); ok( $( "#button" ).is( ".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)" ) );
$("#button").button("destroy"); $( "#button" ).button( "destroy" );
}); } );
test("label, default", function() { test( "label, default", function() {
expect( 2 ); expect( 2 );
$("#button").button(); $( "#button" ).button();
deepEqual( $("#button").text(), "Label" ); deepEqual( $( "#button" ).text(), "Label" );
deepEqual( $( "#button").button( "option", "label" ), "Label" ); deepEqual( $( "#button" ).button( "option", "label" ), "Label" );
$("#button").button("destroy"); $( "#button" ).button( "destroy" );
}); } );
test("label", function() { test( "label", function() {
expect( 2 ); expect( 2 );
$("#button").button({ $( "#button" ).button( {
label: "xxx" label: "xxx"
}); } );
deepEqual( $("#button").text(), "xxx" ); deepEqual( $( "#button" ).text(), "xxx" );
deepEqual( $("#button").button( "option", "label" ), "xxx" ); deepEqual( $( "#button" ).button( "option", "label" ), "xxx" );
$("#button").button("destroy"); $( "#button" ).button( "destroy" );
}); } );
test("label default with input type submit", function() { test( "label default with input type submit", function() {
expect( 2 ); expect( 2 );
deepEqual( $("#submit").button().val(), "Label" ); deepEqual( $( "#submit" ).button().val(), "Label" );
deepEqual( $("#submit").button( "option", "label" ), "Label" ); deepEqual( $( "#submit" ).button( "option", "label" ), "Label" );
}); } );
test("label with input type submit", function() { test( "label with input type submit", function() {
expect( 2 ); expect( 2 );
var label = $("#submit").button({ var label = $( "#submit" ).button( {
label: "xxx" label: "xxx"
}).val(); } ).val();
deepEqual( label, "xxx" ); deepEqual( label, "xxx" );
deepEqual( $("#submit").button( "option", "label" ), "xxx" ); deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" );
}); } );
test("icons", function() { test( "icons", function() {
expect( 1 ); expect( 1 );
$("#button").button({ $( "#button" ).button( {
text: false, text: false,
icons: { icons: {
primary: "iconclass", primary: "iconclass",
secondary: "iconclass2" secondary: "iconclass2"
} }
}); } );
ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") ); ok( $( "#button" ).is( ":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)" ) );
$("#button").button("destroy"); $( "#button" ).button( "destroy" );
}); } );
test( "#5295 - button does not remove hoverstate if disabled" , function( assert ) { test( "#5295 - button does not remove hoverstate if disabled", function( assert ) {
expect( 1 ); expect( 1 );
var btn = $("#button").button(); var btn = $( "#button" ).button();
btn.on( "hover", function() { btn.on( "hover", function() {
btn.button( "disable" ); btn.button( "disable" );
}); } );
btn.trigger( "mouseenter" ); btn.trigger( "mouseenter" );
btn.trigger( "mouseleave" ); btn.trigger( "mouseleave" );
assert.lacksClasses( btn, "ui-state-hover" ); assert.lacksClasses( btn, "ui-state-hover" );
}); } );
} ); } );