diff options
Diffstat (limited to 'tests/unit/button/core.js')
-rw-r--r-- | tests/unit/button/core.js | 230 |
1 files changed, 230 insertions, 0 deletions
diff --git a/tests/unit/button/core.js b/tests/unit/button/core.js new file mode 100644 index 000000000..4bc8d9fe5 --- /dev/null +++ b/tests/unit/button/core.js @@ -0,0 +1,230 @@ +define( [ + "jquery", + "ui/button" +], function( $ ) { + +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)").click(); + assertClasses(":eq(1)", ":eq(1)", ":eq(2)"); + + // click in first form + $("#radio1 .ui-button:eq(0)").click(); + assertClasses(":eq(1)", ":eq(0)", ":eq(2)"); + + // click in second form + $("#radio2 .ui-button:eq(0)").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 = $( "<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() { + 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().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 = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" ); + group.find( "input[type=checkbox]" ).button(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + + group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" ); + group.filter( "input[type=checkbox]" ).button(); + assert.hasClasses( group.filter( "label" ), "ui-button" ); + + group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" ); + group.find( "input[type=checkbox]" ).button(); + assert.hasClasses( group.filter( "label" ), "ui-button" ); + + group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" ); + group.find( "input[type=checkbox]" ).button(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + + 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" }); + 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 = $( "<form>" + + "<button></button>" + + "<label for='c1'></label><input id='c1' type='checkbox' checked>" + + "</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(); + + // #9213: If a button has been removed, refresh should not be called on it when + // its corresponding form is reset. + button.remove(); + + 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.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 = $( "<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 :" ); +}); + +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" ); + start(); + }); +}); + +} ); |