From 02033262ee0fb1d9f33c361b3c2ddfa168604854 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 22 Jan 2014 12:02:32 -0500 Subject: Button: Initial commit of button re-factor Move to using element stats rather then js class states remove ui-button-text spans. Removed button set --- tests/unit/button/button.html | 47 ++----- tests/unit/button/common-deprecated.js | 27 ++++ tests/unit/button/common.js | 12 +- tests/unit/button/core.js | 220 +------------------------------- tests/unit/button/deprecated.html | 60 +++++++++ tests/unit/button/deprecated.js | 196 +++++++++++++++++++++++++++++ tests/unit/button/events.js | 30 ++--- tests/unit/button/methods.js | 51 +------- tests/unit/button/options.js | 222 ++++++++++++++++++--------------- 9 files changed, 436 insertions(+), 429 deletions(-) create mode 100644 tests/unit/button/common-deprecated.js create mode 100644 tests/unit/button/deprecated.html create mode 100644 tests/unit/button/deprecated.js (limited to 'tests/unit/button') diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html index 7ba400645..09b5a4c23 100644 --- a/tests/unit/button/button.html +++ b/tests/unit/button/button.html @@ -6,54 +6,23 @@ - +
+
+
-
- -
- - - -
-
- - - -
- -
- - - -
-
-
-
- - - -
+
-
-
- - - -
-
- - - -
- - +
+ + Anchor Button +
diff --git a/tests/unit/button/common-deprecated.js b/tests/unit/button/common-deprecated.js new file mode 100644 index 000000000..1441d3a8a --- /dev/null +++ b/tests/unit/button/common-deprecated.js @@ -0,0 +1,27 @@ +define( [ + "lib/common", + "ui/button" +], function( common ) { + +common.testWidget( "button", { + defaults: { + classes: { + "ui-button": "ui-corner-all" + }, + disabled: null, + icon: null, + iconPosition: "beginning", + icons: { + primary: null, + secondary: null + }, + label: null, + showLabel: true, + text: true, + + // Callbacks + create: null + } +} ); + +} ); diff --git a/tests/unit/button/common.js b/tests/unit/button/common.js index 4ef136fac..91ce1cff9 100644 --- a/tests/unit/button/common.js +++ b/tests/unit/button/common.js @@ -5,14 +5,14 @@ define( [ common.testWidget( "button", { defaults: { - classes: {}, - disabled: null, - icons: { - primary: null, - secondary: null + classes: { + "ui-button": "ui-corner-all" }, + disabled: null, + icon: null, + iconPosition: "beginning", label: null, - text: true, + showLabel: true, // Callbacks create: null diff --git a/tests/unit/button/core.js b/tests/unit/button/core.js index f4e5d35a7..a7c164a33 100644 --- a/tests/unit/button/core.js +++ b/tests/unit/button/core.js @@ -3,227 +3,19 @@ define( [ "ui/widgets/button" ], function( $ ) { -module( "button: core" ); +module( "Button: core" ); -test( "checkbox", function( assert ) { - expect( 4 ); - var input = $( "#check" ), - label = $( "label[for=check]" ); - ok( input.is( ":visible" ) ); - ok( label.is( ":not(.ui-button)" ) ); - input.button(); - assert.hasClasses( input, "ui-helper-hidden-accessible" ); - assert.hasClasses( label, "ui-button" ); -} ); - -test( "radios", function( assert ) { - expect( 8 ); - var inputs = $( "#radio0 input" ), - labels = $( "#radio0 label" ); - ok( inputs.is( ":visible" ) ); - ok( labels.is( ":not(.ui-button)" ) ); - inputs.button(); - inputs.each( function() { - assert.hasClasses( this, "ui-helper-hidden-accessible" ); - } ); - labels.each( function() { - assert.hasClasses( this, "ui-button" ); - } ); -} ); - -test( "radio groups", function( assert ) { - expect( 12 ); - - function assertClasses( noForm, form1, form2 ) { - assert.hasClasses( $( "#radio0 .ui-button" + noForm ), "ui-state-active" ); - assert.hasClasses( $( "#radio1 .ui-button" + form1 ), "ui-state-active" ); - assert.hasClasses( $( "#radio2 .ui-button" + form2 ), "ui-state-active" ); - } - - $( "input[type=radio]" ).button(); - assertClasses( ":eq(0)", ":eq(1)", ":eq(2)" ); - - // Click outside of forms - $( "#radio0 .ui-button:eq(1)" ).trigger( "click" ); - assertClasses( ":eq(1)", ":eq(1)", ":eq(2)" ); - - // Click in first form - $( "#radio1 .ui-button:eq(0)" ).trigger( "click" ); - assertClasses( ":eq(1)", ":eq(0)", ":eq(2)" ); - - // Click in second form - $( "#radio2 .ui-button:eq(0)" ).trigger( "click" ); - assertClasses( ":eq(1)", ":eq(0)", ":eq(0)" ); -} ); - -test( "radio groups - ignore elements with same name", function() { - expect( 1 ); - var form = $( "form:first" ), - radios = form.find( "[type=radio]" ).button(), - checkbox = $( "", { - type: "checkbox", - name: radios.attr( "name" ) - } ); - - form.append( checkbox ); - radios.button( "refresh" ); - ok( true, "no exception from accessing button instance of checkbox" ); -} ); - -test( "input type submit, don't create child elements", function() { +asyncTest( "Disabled button loses focus", function() { expect( 2 ); - var input = $( "#submit" ); - deepEqual( input.children().length, 0 ); - input.button(); - deepEqual( input.children().length, 0 ); -} ); - -test( "buttonset", function( assert ) { - expect( 6 ); - var set = $( "#radio1" ).buttonset(); - assert.hasClasses( set, "ui-buttonset" ); - deepEqual( set.children( ".ui-button" ).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(1)" ).is( ".ui-button: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 ) { - expect( 6 ); - var set, - parent = $( "#radio1" ).parent(); - - // Set to rtl - parent.attr( "dir", "rtl" ); - - set = $( "#radio1" ).buttonset(); - assert.hasClasses( set, "ui-buttonset" ); - deepEqual( set.children( ".ui-button" ).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(1)" ).is( ".ui-button: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 -// remove this when simulate properly simulates this -// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info -if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) { - asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) { - expect( 3 ); - - $( "#check2" ).button().on( "change", function() { - var lbl = $( this ).button( "widget" ); - ok( this.checked, "checked ok" ); - ok( lbl.attr( "aria-pressed" ) === "true", "aria ok" ); - assert.hasClasses( lbl, "ui-state-active" ); - } ); - - // Support: Opera - // 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 - // tracked down, this delay will have to do. - setTimeout( function() { - $( "#check2" ).button( "widget" ).simulate( "click" ); - start(); - }, 1 ); - } ); -} - -test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) { - expect( 5 ); - var group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button" ); - - group = $( "" ); - group.filter( "input[type=checkbox]" ).button(); - assert.hasClasses( group.filter( "label" ), "ui-button" ); - - group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - assert.hasClasses( group.filter( "label" ), "ui-button" ); - - group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button" ); - - group = $( "" ); - group.filter( "input[type=checkbox]" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button" ); -} ); - -test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) { - expect( 2 ); - $( "#radio01" ).next().addBack().hide(); - var set = $( "#radio0" ).buttonset( { items: "input[type=radio]:visible" } ); - 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" ); -} ); - -test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) { - expect( 3 ); - $( "#radio0" ).hide(); - var set = $( "#radio0" ).buttonset(); - assert.hasClasses( set.find( "label:eq(0)" ), "ui-button ui-corner-left" ); - assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" ); - 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 ) { - expect( 2 ); - var form = $( "
" + - "" + - "" + - "
" ), - button = form.find( "button" ).button(), - checkbox = form.find( "input[type=checkbox]" ).button(); - - checkbox.prop( "checked", false ).button( "refresh" ); - assert.lacksClasses( checkbox.button( "widget" ), "ui-state-active" ); - - form.get( 0 ).reset(); - - // If a button has been removed, refresh should not be called on it when - // its corresponding form is reset. - button.remove(); + var element = $( "#button" ).button(); + element.focus(); setTimeout( function() { - assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" ); - start(); - }, 1 ); -} ); -asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) { - expect( 2 ); - var check = $( "#check" ).button(), - label = $( "label[for='check']" ); - assert.lacksClasses( label, "ui-state-focus" ); - check.trigger( "focus" ); - setTimeout( function() { - assert.hasClasses( label, "ui-state-focus" ); - start(); - } ); -} ); - -test( "#7534 - Button label selector works for ids with \":\"", function( assert ) { - expect( 1 ); - var group = $( "" ); - group.find( "input" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button", "Found an id with a :" ); -} ); + equal( element[ 0 ], $.ui.safeActiveElement( document ), "Button is focused" ); -asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) { - expect( 2 ); - var element = $( "#button1" ).button(); - element[ 0 ].focus(); - setTimeout( function() { - assert.hasClasses( element, "ui-state-focus" ); element.button( "disable" ); - assert.lacksClasses( element, "ui-state-focus", - "button does not have ui-state-focus when disabled" ); + notEqual( element[ 0 ], $.ui.safeActiveElement( document ), "Button has had focus removed" ); start(); } ); } ); diff --git a/tests/unit/button/deprecated.html b/tests/unit/button/deprecated.html new file mode 100644 index 000000000..788d2eeeb --- /dev/null +++ b/tests/unit/button/deprecated.html @@ -0,0 +1,60 @@ + + + + + jQuery UI Button Deprecated Test Suite + + + + + + + +
+
+ +
+ +
+ + + +
+
+ + + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+ + + + +
+ + +Anchor Button + +
+ + diff --git a/tests/unit/button/deprecated.js b/tests/unit/button/deprecated.js new file mode 100644 index 000000000..bb023ab4f --- /dev/null +++ b/tests/unit/button/deprecated.js @@ -0,0 +1,196 @@ +define( [ + "jquery", + "ui/button" +], function( $ ) { + +module( "Button (deprecated): core" ); + +test( "Calling button on a checkbox input calls checkboxradio widget", function() { + var checkbox = $( "#checkbox01" ); + + expect( 2 ); + checkbox.button(); + + ok( !!checkbox.checkboxradio( "instance" ), + "Calling button on a checkbox creates checkboxradio instance" ); + ok( !checkbox.checkboxradio( "option", "icon" ), + "Calling button on a checkbox sets the checkboxradio icon option to false" ); +} ); + +test( "Calling buttonset calls controlgroup", function() { + var controlgroup = $( ".buttonset" ); + + expect( 1 ); + controlgroup.buttonset(); + + ok( controlgroup.is( ":ui-controlgroup" ), "Calling buttonset creates controlgroup instance" ); +} ); + +module( "Button (deprecated): methods" ); + +test( "destroy", function( assert ) { + expect( 1 ); + assert.domEqual( "#checkbox02", function() { + $( "#checkbox02" ).button().button( "destroy" ); + } ); +} ); + +test( "refresh: Ensure disabled state is preserved correctly.", function() { + expect( 5 ); + var element = null; + + element = $( "#checkbox02" ); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" ); + ok( element.prop( "disabled" ), "Input remains disabled after refresh" ); + + element = $( "#radio02" ); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" ); + + element = $( "#checkbox02" ); + 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." ); + + element = $( "#radio02" ); + 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." ); + +} ); + +module( "button (deprecated): options" ); + +test( "Setting items option on buttonset sets the button properties on the items option", function() { + expect( 2 ); + + var controlgroup = $( ".buttonset" ); + + controlgroup.buttonset( { items: "bar" } ); + equal( controlgroup.controlgroup( "option", "items.button" ), "bar", + "items.button set when setting items option on init on buttonset" ); + + controlgroup.buttonset( "option", "items", "foo" ); + equal( controlgroup.controlgroup( "option", "items.button" ), "foo", + "items.button set when setting items option on buttonset" ); +} ); + +test( "disabled, null", function() { + expect( 2 ); + + $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } ); + deepEqual( $( "#radio02" ).button( "option", "disabled" ), true, + "disabled option set to true" ); + deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" ); +} ); + +test( "text / showLabel options proxied", function() { + expect( 8 ); + var button = $( "#button" ); + button.button( { + text: false, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "showLabel" ), false, + "Setting the text option to false sets the showLabel option to false on init" ); + button.button( "option", "showLabel", true ); + equal( button.button( "option", "text" ), true, + "Setting showLabel true with option method sets text option to true" ); + button.button( "option", "text", false ); + equal( button.button( "option", "showLabel" ), false, + "Setting text false with option method sets showLabel option to false" ); + button.button( "option", "text", true ); + equal( button.button( "option", "showLabel" ), true, + "Setting text true with option method sets showLabel option to true" ); + button.button( "option", "showLabel", false ); + equal( button.button( "option", "text" ), false, + "Setting showLabel false with option method sets text option to false" ); + button.button( "destroy" ); + button.button( { + text: true, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "showLabel" ), true, + "Setting the text option to true sets the showLabel option to true on init" ); + button.button( "destroy" ); + button.button( { + showLabel: true, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "text" ), true, + "Setting the showLabel option to true sets the text option to true on init" ); + button.button( "destroy" ); + button.button( { + showLabel: false, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "text" ), false, + "Setting the showLabel option to false sets the text option to false on init" ); +} ); + +test( "icon / icons options properly proxied", function() { + expect( 10 ); + + var button = $( "#button" ); + + button.button( { + icon: "foo" + } ); + + equal( button.button( "option", "icons.primary" ), "foo", + "Icon option properly proxied on init" ); + + button.button( { + icon: "bar" + } ); + + equal( button.button( "option", "icons.primary" ), "bar", + "Icon option properly proxied with option method" ); + + button.button( { + icons: { + primary: "foo" + } + } ); + + equal( button.button( "option", "icon" ), "foo", + "Icons primary option properly proxied with option method" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Icons primary option sets iconPosition option to beginning" ); + + button.button( { + icons: { + secondary: "bar" + } + } ); + + equal( button.button( "option", "icon" ), "bar", + "Icons secondary option properly proxied with option method" ); + equal( button.button( "option", "iconPosition" ), "end", + "Icons secondary option sets iconPosition option to end" ); + + button.button( "destroy" ); + + button.button( { + icons: { + primary: "foo" + } + } ); + + equal( button.button( "option", "icon" ), "foo", + "Icons primary option properly proxied on init" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Icons primary option sets iconPosition option to beginning on init" ); + + button.button( { + icons: { + secondary: "bar" + } + } ); + + equal( button.button( "option", "icon" ), "bar", + "Icons secondary option properly proxied on init" ); + equal( button.button( "option", "iconPosition" ), "end", + "Icons secondary option sets iconPosition option to end on init" ); +} ); + +} ); diff --git a/tests/unit/button/events.js b/tests/unit/button/events.js index 15a285046..0bec5a7d2 100644 --- a/tests/unit/button/events.js +++ b/tests/unit/button/events.js @@ -3,34 +3,18 @@ define( [ "ui/widgets/button" ], function( $ ) { -module( "button: events" ); +module( "Button: events" ); -test( "buttonset works with single-quote named elements (#7505)", function() { - expect( 1 ); - $( "#radio3" ).buttonset(); - $( "#radio33" ).on( "click", function() { - ok( true, "button clicks work with single-quote named elements" ); - } ).trigger( "click" ); -} ); - -asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) { +asyncTest( "Anchor recieves click event when spacebar is pressed", function() { expect( 1 ); + var element = $( "#anchor-button" ).button(); - var element = $( "#button" ).button(); - - element.one( "keypress", function() { - element.one( "blur", function() { - assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" ); - start(); - } ).trigger( "blur" ); + element.on( "click", function() { + ok( true, "click occcured as a result of spacebar" ); + start(); } ); - element.trigger( "focus" ); - setTimeout( function() { - element - .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ) - .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } ); - } ); + element.trigger( $.Event( "keyup", { keyCode: $.ui.keyCode.SPACE } ) ); } ); } ); diff --git a/tests/unit/button/methods.js b/tests/unit/button/methods.js index 0bafd90f9..09a91bbc0 100644 --- a/tests/unit/button/methods.js +++ b/tests/unit/button/methods.js @@ -3,7 +3,7 @@ define( [ "ui/widgets/button" ], function( $ ) { -module( "button: methods" ); +module( "Button: methods" ); test( "destroy", function( assert ) { expect( 1 ); @@ -13,61 +13,22 @@ test( "destroy", function( assert ) { } ); test( "refresh: Ensure disabled state is preserved correctly.", function() { - expect( 8 ); + expect( 3 ); var element = $( "" ); element.button( { disabled: true } ).button( "refresh" ); - ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237 - - element = $( "
" ); - element.button( { disabled: true } ).button( "refresh" ); - ok( element.button( "option", "disabled" ), "
buttons should remain disabled after refresh" ); + ok( element.button( "option", "disabled" ), + "Anchor button should remain disabled after refresh" ); element = $( "" ); element.button( { disabled: true } ).button( "refresh" ); ok( element.button( "option", "disabled" ), "" ); element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" ); - ok( !element.button( "option", "disabled" ), "Changing a " ), - $( "" ), - $( "
" ), - $( "" ), - $( "" ) - ]; - - $.each( elements, function() { - var element = $( this ).first().button(), - buttonElement = element.button( "widget" ), - elementType = element.prop( "nodeName" ).toLowerCase(); - - if ( element.is( "input" ) ) { - elementType += ":" + element.attr( "type" ); - } - - element.trigger( "mousedown" ); - assert.hasClasses( buttonElement, "ui-state-active", - "[" + elementType + "] has ui-state-active class after mousedown." ); - - element.button( "disable" ); - if ( element.is( "[type=checkbox], [type=radio]" ) ) { - assert.hasClasses( buttonElement, "ui-state-active", - "Disabled [" + elementType + "] has ui-state-active class." ); - } else { - assert.lacksClasses( buttonElement, "ui-state-active", - "Disabled [" + elementType + "] does not have ui-state-active class." ); - } - } ); -} ); +test( "showLabel, false, without icon", function( assert ) { + expect( 4 ); -test( "text false without icon", function() { - expect( 1 ); - $( "#button" ).button( { - text: false + var button = $( "#button" ).button( { + showLabel: false } ); - ok( $( "#button" ).is( ".ui-button-text-only:not(.ui-button-icon-only)" ) ); - $( "#button" ).button( "destroy" ); + assert.lacksClasses( button, "ui-button-icon-only" ); + strictEqual( button.button( "option", "showLabel" ), true, + "showLabel false only allowed if icon true" ); + + button.button( "option", "showLabel", false ); + assert.lacksClasses( button, "ui-button-icon-only" ); + strictEqual( button.button( "option", "showLabel" ), true, + "showLabel false only allowed if icon true" ); } ); -test( "text false with icon", function() { +test( "showLabel, false, with icon", function( assert ) { expect( 1 ); - $( "#button" ).button( { - text: false, - icons: { - primary: "iconclass" - } + var button = $( "#button" ).button( { + showLabel: false, + icon: "iconclass" } ); - ok( $( "#button" ).is( ".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)" ) ); - - $( "#button" ).button( "destroy" ); + assert.hasClasses( button, "ui-button ui-corner-all ui-widget ui-button-icon-only" ); } ); test( "label, default", function() { expect( 2 ); - $( "#button" ).button(); - deepEqual( $( "#button" ).text(), "Label" ); - deepEqual( $( "#button" ).button( "option", "label" ), "Label" ); + var button = $( "#button" ).button(); - $( "#button" ).button( "destroy" ); + deepEqual( button.text(), "Label" ); + deepEqual( button.button( "option", "label" ), "Label" ); } ); -test( "label", function() { +test( "label, explicit value", function() { expect( 2 ); - $( "#button" ).button( { + var button = $( "#button" ).button( { label: "xxx" } ); - deepEqual( $( "#button" ).text(), "xxx" ); - deepEqual( $( "#button" ).button( "option", "label" ), "xxx" ); - $( "#button" ).button( "destroy" ); + deepEqual( button.text(), "xxx" ); + deepEqual( button.button( "option", "label" ), "xxx" ); } ); -test( "label default with input type submit", function() { +test( "label, default, with input type submit", function() { expect( 2 ); - deepEqual( $( "#submit" ).button().val(), "Label" ); - deepEqual( $( "#submit" ).button( "option", "label" ), "Label" ); + var button = $( "#submit" ).button(); + + deepEqual( button.val(), "Label" ); + deepEqual( button.button( "option", "label" ), "Label" ); } ); -test( "label with input type submit", function() { +test( "label, explicit value, with input type submit", function() { expect( 2 ); - var label = $( "#submit" ).button( { + var button = $( "#submit" ).button( { label: "xxx" - } ).val(); - deepEqual( label, "xxx" ); - deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" ); + } ); + + deepEqual( button.val(), "xxx" ); + deepEqual( button.button( "option", "label" ), "xxx" ); } ); -test( "icons", function() { - expect( 1 ); - $( "#button" ).button( { - text: false, - icons: { - primary: "iconclass", - secondary: "iconclass2" - } - } ); - ok( $( "#button" ).is( ":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)" ) ); +test( "icon", function( assert ) { + expect( 4 ); + var button = $( "#button" ).button( { + showLabel: false, + icon: "iconclass" + } ), + icon = button.find( ".ui-icon" ); + + assert.hasClasses( icon, "iconclass" ); + equal( icon.length, 1, "button with icon option set has icon" ); + + button.button( "option", "icon", false ); + equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" ); + + button.button( "option", "icon", "iconclass" ); + ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" ); - $( "#button" ).button( "destroy" ); } ); -test( "#5295 - button does not remove hoverstate if disabled", function( assert ) { - expect( 1 ); - var btn = $( "#button" ).button(); - btn.on( "hover", function() { - btn.button( "disable" ); - } ); - btn.trigger( "mouseenter" ); - btn.trigger( "mouseleave" ); - assert.lacksClasses( btn, "ui-state-hover" ); +test( "icon position", function( assert ) { + expect( 22 ); + + var button = $( "#button" ).button( { + icon: "ui-icon-gear" + } ), + icon = button.find( ".ui-icon" ), + space = button.find( ".ui-button-icon-space" ); + + equal( icon.length, 1, "button with icon option set has icon" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Button has iconPosition beginning by default" ); + equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" ); + equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining" ); + equal( space.text(), " ", + "ui-button-icon-space contains a breaking space iconPosition:beginning" ); + assert.lacksClasses( icon, "ui-widget-icon-block" ); + + button.button( "option", "iconPosition", "end" ); + icon = button.find( ".ui-icon" ); + space = button.find( ".ui-button-icon-space" ); + equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" ); + equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" ); + equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" ); + equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end" ); + equal( space.text(), " ", + "ui-button-icon-space contains a breaking space iconPosition:beginning" ); + assert.lacksClasses( icon, "ui-widget-icon-block" ); + + button.button( "option", "iconPosition", "top" ); + icon = button.find( ".ui-icon" ); + equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" ); + equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" ); + equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" ); + ok( !button.find( "ui-button-icon-space" ).length, + "Button should not have an iconSpace with position: top" ); + assert.hasClasses( icon, "ui-widget-icon-block" ); + + button.button( "option", "iconPosition", "bottom" ); + icon = button.find( ".ui-icon" ); + equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" ); + equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" ); + equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" ); + ok( !button.find( "ui-button-icon-space" ).length, + "Button should not have an iconSpace with position: bottom" ); + assert.hasClasses( icon, "ui-widget-icon-block" ); + } ); } ); -- cgit v1.2.3