diff options
author | Alexander Schmitz <arschmitz@gmail.com> | 2015-08-21 00:12:35 -0400 |
---|---|---|
committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-08-21 08:06:24 -0400 |
commit | 1f7164660e798ac3029f511221a34ae43ea539dc (patch) | |
tree | 7b4d03eb4495f1d5009d04fba2358d0674967cab /tests/unit/button | |
parent | de242d8ca9bf2b90237c413cb91601541798bae9 (diff) | |
download | jquery-ui-1f7164660e798ac3029f511221a34ae43ea539dc.tar.gz jquery-ui-1f7164660e798ac3029f511221a34ae43ea539dc.zip |
Button: Style updates
Ref #14246
Ref gh-1588
Diffstat (limited to 'tests/unit/button')
-rw-r--r-- | tests/unit/button/common.js | 4 | ||||
-rw-r--r-- | tests/unit/button/core.js | 163 | ||||
-rw-r--r-- | tests/unit/button/events.js | 22 | ||||
-rw-r--r-- | tests/unit/button/methods.js | 40 | ||||
-rw-r--r-- | tests/unit/button/options.js | 120 |
5 files changed, 175 insertions, 174 deletions
diff --git a/tests/unit/button/common.js b/tests/unit/button/common.js index 0372cddbf..4ef136fac 100644 --- a/tests/unit/button/common.js +++ b/tests/unit/button/common.js @@ -14,9 +14,9 @@ common.testWidget( "button", { label: null, text: true, - // callbacks + // Callbacks create: null } -}); +} ); } ); diff --git a/tests/unit/button/core.js b/tests/unit/button/core.js index f3ae2e583..f4e5d35a7 100644 --- a/tests/unit/button/core.js +++ b/tests/unit/button/core.js @@ -3,58 +3,58 @@ define( [ "ui/widgets/button" ], function( $ ) { -module("button: core"); +module( "button: core" ); -test("checkbox", function( assert ) { +test( "checkbox", function( assert ) { expect( 4 ); - var input = $("#check"), - label = $("label[for=check]"); - ok( input.is(":visible") ); - ok( label.is(":not(.ui-button)") ); + 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 ) { +test( "radios", function( assert ) { expect( 8 ); - var inputs = $("#radio0 input"), - labels = $("#radio0 label"); - ok( inputs.is(":visible") ); - ok( labels.is(":not(.ui-button)") ); + var inputs = $( "#radio0 input" ), + labels = $( "#radio0 label" ); + ok( inputs.is( ":visible" ) ); + ok( labels.is( ":not(.ui-button)" ) ); inputs.button(); - inputs.each(function() { + inputs.each( function() { assert.hasClasses( this, "ui-helper-hidden-accessible" ); - }); - labels.each(function() { + } ); + labels.each( function() { assert.hasClasses( this, "ui-button" ); - }); -}); + } ); +} ); -test("radio groups", function( assert ) { +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" ); + 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)"); + $( "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 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 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)"); -}); + // 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 ); @@ -63,47 +63,48 @@ test( "radio groups - ignore elements with same name", function() { checkbox = $( "<input>", { 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() { +test( "input type submit, don't create child elements", function() { expect( 2 ); - var input = $("#submit"); + var input = $( "#submit" ); deepEqual( input.children().length, 0 ); input.button(); deepEqual( input.children().length, 0 ); -}); +} ); -test("buttonset", function( assert ) { +test( "buttonset", function( assert ) { expect( 6 ); - var set = $("#radio1").buttonset(); + 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 ) { + 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(); + parent = $( "#radio1" ).parent(); + // Set to rtl - parent.attr("dir", "rtl"); + parent.attr( "dir", "rtl" ); - set = $("#radio1").buttonset(); + 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)") ); -}); + 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 @@ -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 ) { expect( 3 ); - $("#check2").button().on( "change", function() { - var lbl = $( this ).button("widget"); + $( "#check2" ).button().on( "change", function() { + var lbl = $( this ).button( "widget" ); 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" ); - }); + } ); - // support: Opera + // 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"); + 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 ) { @@ -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.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" }); + 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 ); @@ -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(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 ); @@ -185,15 +186,15 @@ asyncTest( "Resetting a button's form should refresh the visual state of the but 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. button.remove(); - setTimeout(function() { + 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 ); @@ -201,30 +202,30 @@ asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyb label = $( "label[for='check']" ); assert.lacksClasses( label, "ui-state-focus" ); check.trigger( "focus" ); - setTimeout(function() { + setTimeout( function() { assert.hasClasses( label, "ui-state-focus" ); start(); - }); -}); + } ); +} ); test( "#7534 - Button label selector works for ids with \":\"", function( assert ) { expect( 1 ); var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" ); 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 ) { expect( 2 ); var element = $( "#button1" ).button(); element[ 0 ].focus(); - setTimeout(function() { + 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" ); start(); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/button/events.js b/tests/unit/button/events.js index d778b4a2b..15a285046 100644 --- a/tests/unit/button/events.js +++ b/tests/unit/button/events.js @@ -3,15 +3,15 @@ define( [ "ui/widgets/button" ], 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 ); - $("#radio3").buttonset(); - $("#radio33").on( "click", function(){ + $( "#radio3" ).buttonset(); + $( "#radio33" ).on( "click", function() { 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 ) { expect( 1 ); @@ -22,15 +22,15 @@ asyncTest( "when button loses focus, ensure active state is removed (#8559)", fu element.one( "blur", function() { assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" ); start(); - }).trigger( "blur" ); - }); + } ).trigger( "blur" ); + } ); element.trigger( "focus" ); - setTimeout(function() { + setTimeout( function() { element .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ) .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } ); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/button/methods.js b/tests/unit/button/methods.js index 29e917022..0bafd90f9 100644 --- a/tests/unit/button/methods.js +++ b/tests/unit/button/methods.js @@ -3,50 +3,50 @@ define( [ "ui/widgets/button" ], function( $ ) { -module("button: methods"); +module( "button: methods" ); -test("destroy", function( assert ) { +test( "destroy", function( assert ) { expect( 1 ); assert.domEqual( "#button", function() { $( "#button" ).button().button( "destroy" ); - }); -}); + } ); +} ); test( "refresh: Ensure disabled state is preserved correctly.", function() { expect( 8 ); 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 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" ); element = $( "<button></button>" ); - element.button( { disabled: true} ).button( "refresh" ); - ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh"); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh" ); element = $( "<input type='checkbox'>" ); - element.button( { disabled: true} ).button( "refresh" ); - ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh"); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" ); element = $( "<input type='radio'>" ); - element.button( { disabled: true} ).button( "refresh" ); - ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh"); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" ); element = $( "<button></button>" ); - 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 + 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 element = $( "<input type='checkbox'>" ); - 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.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 = $( "<input type='radio'>" ); - 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."); -}); + 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." ); +} ); // #8975 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( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" ); -}); +} ); } ); diff --git a/tests/unit/button/options.js b/tests/unit/button/options.js index ad4169e14..31542427c 100644 --- a/tests/unit/button/options.js +++ b/tests/unit/button/options.js @@ -8,33 +8,33 @@ module( "button: options" ); test( "disabled, explicit value", function( assert ) { 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.prop( "disabled" ), false, "element is 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" ); assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" ); deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" ); deepEqual( element.prop( "disabled" ), true, "element is not disabled" ); -}); +} ); -test("disabled, null", function() { +test( "disabled, null", function() { expect( 4 ); - $("#radio01").button({ disabled: null }); - deepEqual(false, $("#radio01").button("option", "disabled"), - "disabled option set to false"); - deepEqual(false, $("#radio01").prop("disabled"), "element is disabled"); - - $("#radio02").prop("disabled", true).button({ disabled: null }); - deepEqual(true, $("#radio02").button("option", "disabled"), - "disabled option set to true"); - deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled"); -}); + $( "#radio01" ).button( { disabled: null } ); + deepEqual( false, $( "#radio01" ).button( "option", "disabled" ), + "disabled option set to false" ); + deepEqual( false, $( "#radio01" ).prop( "disabled" ), "element is disabled" ); + + $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } ); + deepEqual( true, $( "#radio02" ).button( "option", "disabled" ), + "disabled option set to true" ); + deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" ); +} ); test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) { expect( 12 ); @@ -68,90 +68,90 @@ test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert.lacksClasses( buttonElement, "ui-state-active", "Disabled [" + elementType + "] does not have ui-state-active class." ); } - }); -}); + } ); +} ); -test("text false without icon", function() { +test( "text false without icon", function() { expect( 1 ); - $("#button").button({ + $( "#button" ).button( { 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 ); - $("#button").button({ + $( "#button" ).button( { text: false, icons: { 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 ); - $("#button").button(); - deepEqual( $("#button").text(), "Label" ); - deepEqual( $( "#button").button( "option", "label" ), "Label" ); + $( "#button" ).button(); + deepEqual( $( "#button" ).text(), "Label" ); + deepEqual( $( "#button" ).button( "option", "label" ), "Label" ); - $("#button").button("destroy"); -}); + $( "#button" ).button( "destroy" ); +} ); -test("label", function() { +test( "label", function() { expect( 2 ); - $("#button").button({ + $( "#button" ).button( { label: "xxx" - }); - deepEqual( $("#button").text(), "xxx" ); - deepEqual( $("#button").button( "option", "label" ), "xxx" ); + } ); + deepEqual( $( "#button" ).text(), "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 ); - deepEqual( $("#submit").button().val(), "Label" ); - deepEqual( $("#submit").button( "option", "label" ), "Label" ); -}); + deepEqual( $( "#submit" ).button().val(), "Label" ); + deepEqual( $( "#submit" ).button( "option", "label" ), "Label" ); +} ); -test("label with input type submit", function() { +test( "label with input type submit", function() { expect( 2 ); - var label = $("#submit").button({ + var label = $( "#submit" ).button( { label: "xxx" - }).val(); + } ).val(); deepEqual( label, "xxx" ); - deepEqual( $("#submit").button( "option", "label" ), "xxx" ); -}); + deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" ); +} ); -test("icons", function() { +test( "icons", function() { expect( 1 ); - $("#button").button({ + $( "#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)") ); + } ); + 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 ); - var btn = $("#button").button(); + var btn = $( "#button" ).button(); btn.on( "hover", function() { btn.button( "disable" ); - }); + } ); btn.trigger( "mouseenter" ); btn.trigger( "mouseleave" ); assert.lacksClasses( btn, "ui-state-hover" ); -}); +} ); } ); |