third-party/jquery-ui-1.10.2/tests/unit/button/button_core.js

   1 /*
   2  * button_core.js
   3  */
   4
   5
   6 (function($) {
   7
   8 module("button: core");
   9
  10 test("checkbox", function() {
  11         expect( 4 );
  12         var input = $("#check"),
  13                 label = $("label[for=check]");
  14         ok( input.is(":visible") );
  15         ok( label.is(":not(.ui-button)") );
  16         input.button();
  17         ok( input.is(".ui-helper-hidden-accessible") );
  18         ok( label.is(".ui-button") );
  19 });
  20
  21 test("radios", function() {
  22         expect( 4 );
  23         var inputs = $("#radio0 input"),
  24                 labels = $("#radio0 label");
  25         ok( inputs.is(":visible") );
  26         ok( labels.is(":not(.ui-button)") );
  27         inputs.button();
  28         ok( inputs.is(".ui-helper-hidden-accessible") );
  29         ok( labels.is(".ui-button") );
  30 });
  31
  32 function assert(noForm, form1, form2) {
  33         ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
  34         ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
  35         ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
  36 }
  37
  38 test("radio groups", function() {
  39         expect( 12 );
  40         $("input[type=radio]").button();
  41         assert(":eq(0)", ":eq(1)", ":eq(2)");
  42
  43         // click outside of forms
  44         $("#radio0 .ui-button:eq(1)").click();
  45         assert(":eq(1)", ":eq(1)", ":eq(2)");
  46
  47         // click in first form
  48         $("#radio1 .ui-button:eq(0)").click();
  49         assert(":eq(1)", ":eq(0)", ":eq(2)");
  50
  51         // click in second form
  52         $("#radio2 .ui-button:eq(0)").click();
  53         assert(":eq(1)", ":eq(0)", ":eq(0)");
  54 });
  55
  56 test("input type submit, don't create child elements", function() {
  57         expect( 2 );
  58         var input = $("#submit");
  59         deepEqual( input.children().length, 0 );
  60         input.button();
  61         deepEqual( input.children().length, 0 );
  62 });
  63
  64 test("buttonset", function() {
  65         expect( 6 );
  66         var set = $("#radio1").buttonset();
  67         ok( set.is(".ui-buttonset") );
  68         deepEqual( set.children(".ui-button").length, 3 );
  69         deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
  70         ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
  71         ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
  72         ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
  73 });
  74
  75 test("buttonset (rtl)", function() {
  76         expect( 6 );
  77         var set,
  78                 parent = $("#radio1").parent();
  79         // Set to rtl
  80         parent.attr("dir", "rtl");
  81
  82         set = $("#radio1").buttonset();
  83         ok( set.is(".ui-buttonset") );
  84         deepEqual( set.children(".ui-button").length, 3 );
  85         deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
  86         ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
  87         ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
  88         ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
  89 });
  90
  91 // TODO: simulated click events don't behave like real click events in IE
  92 // remove this when simulate properly simulates this
  93 // see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
  94 if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
  95         asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() {
  96                 expect( 3 );
  97
  98                 $("#check2").button().change( function() {
  99                         var lbl = $( this ).button("widget");
 100                         ok( this.checked, "checked ok" );
 101                         ok( lbl.attr("aria-pressed") === "true", "aria ok" );
 102                         ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
 103                 });
 104
 105                 // support: Opera
 106                 // Opera doesn't trigger a change event when this is done synchronously.
 107                 // This seems to be a side effect of another test, but until that can be
 108                 // tracked down, this delay will have to do.
 109                 setTimeout(function() {
 110                         $("#check2").button("widget").simulate("click");
 111                         start();
 112                 }, 1 );
 113         });
 114 }
 115
 116 test( "#7092 - button creation that requires a matching label does not find label in all cases", function() {
 117         expect( 5 );
 118         var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
 119         group.find( "input[type=checkbox]" ).button();
 120         ok( group.find( "label" ).is( ".ui-button" ) );
 121
 122         group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
 123         group.filter( "input[type=checkbox]" ).button();
 124         ok( group.filter( "label" ).is( ".ui-button" ) );
 125
 126         group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
 127         group.find( "input[type=checkbox]" ).button();
 128         ok( group.filter( "label" ).is( ".ui-button" ) );
 129
 130         group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
 131         group.find( "input[type=checkbox]" ).button();
 132         ok( group.find( "label" ).is( ".ui-button" ) );
 133
 134         group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
 135         group.filter( "input[type=checkbox]" ).button();
 136         ok( group.find( "label" ).is( ".ui-button" ) );
 137 });
 138
 139 test( "#5946 - buttonset should ignore buttons that are not :visible", function() {
 140         expect( 2 );
 141         $( "#radio01" ).next().addBack().hide();
 142         var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" });
 143         ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
 144         ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) );
 145 });
 146
 147 test( "#6262 - buttonset not applying ui-corner to invisible elements", function() {
 148         expect( 3 );
 149         $( "#radio0" ).hide();
 150         var set = $( "#radio0" ).buttonset();
 151         ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) );
 152         ok( set.find( "label:eq(1)" ).is( ".ui-button" ) );
 153         ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
 154 });
 155
 156 asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
 157         expect( 2 );
 158         var check = $( "#check" ).button(),
 159                 label = $( "label[for='check']" );
 160         ok( !label.is( ".ui-state-focus" ) );
 161         check.focus();
 162         setTimeout(function() {
 163                 ok( label.is( ".ui-state-focus" ) );
 164                 start();
 165         });
 166 });
 167
 168 test( "#7534 - Button label selector works for ids with \":\"", function() {
 169         expect( 1 );
 170         var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
 171         group.find( "input" ).button();
 172         ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
 173 });
 174
 175 })(jQuery);