libs/js/jquery-mobile-1.1.0/tests/unit/checkboxradio/checkboxradio_core.js

   1 /*
   2  * mobile checkboxradio unit tests
   3  */
   4 (function($){
   5         module( 'jquery.mobile.forms.checkboxradio.js' );
   6
   7         test( "widget can be disabled and enabled", function(){
   8                 var input = $( "#checkbox-1" ),
   9                         button = input.parent().find( ".ui-btn" );
  10
  11                 input.checkboxradio( "disable" );
  12                 input.checkboxradio( "enable" );
  13                 ok( !input.attr( "disabled" ), "start input as enabled" );
  14                 ok( !input.parent().hasClass( "ui-disabled" ), "no disabled styles" );
  15                 ok( !input.attr( "checked" ), "not checked before click" );
  16                 button.trigger( "click" );
  17                 ok( input.attr( "checked" ), "checked after click" );
  18                 ok( button.hasClass( "ui-checkbox-on" ), "active styles after click" );
  19                 button.trigger( "click" );
  20
  21                 input.checkboxradio( "disable" );
  22                 ok( input.attr( "disabled" ), "input disabled" );
  23                 ok( input.parent().hasClass( "ui-disabled" ), "disabled styles" );
  24                 ok( !input.attr( "checked" ), "not checked before click" );
  25                 button.trigger( "click" );
  26                 ok( !input.attr( "checked" ), "not checked after click" );
  27                 ok( !button.hasClass( "ui-checkbox-on" ), "no active styles after click" );
  28         });
  29
  30         test( "clicking a checkbox within a controlgroup does not affect checkboxes with the same name in the same controlgroup", function(){
  31                 var input1 = $("#checkbox-31");
  32                 var button1 = input1.parent().find(".ui-btn");
  33                 var input2 = $("#checkbox-32");
  34                 var button2 = input2.parent().find(".ui-btn");
  35
  36                 ok(!input1.attr("checked"), "input1 not checked before click");
  37                 ok(!input2.attr("checked"), "input2 not checked before click");
  38
  39                 button1.trigger("click");
  40                 ok(input1.attr("checked"), "input1 checked after click on input1");
  41                 ok(!input2.attr("checked"), "input2 not checked after click on input1");
  42
  43                 button2.trigger("click");
  44                 ok(input1.attr("checked"), "input1 not changed after click on input2");
  45                 ok(input2.attr("checked"), "input2 checked after click on input2");
  46         });
  47
  48         asyncTest( "change events fired on checkbox for both check and uncheck", function(){
  49                 var $checkbox = $( "#checkbox-2" ),
  50                         $checkboxLabel = $checkbox.parent().find( ".ui-btn" );
  51
  52                 $checkbox.unbind( "change" );
  53
  54                 expect( 1 );
  55
  56                 $checkbox.one('change', function(){
  57                         ok( true, "change fired on click to check the box" );
  58                 });
  59
  60                 $checkboxLabel.trigger( "click" );
  61
  62                 //test above will be triggered twice, and the start here once
  63                 $checkbox.one('change', function(){
  64                         start();
  65                 });
  66
  67                 $checkboxLabel.trigger( "click" );
  68         });
  69
  70         asyncTest( "radio button labels should update the active button class to last clicked and clear checked", function(){
  71                 var $radioBtns = $( '#radio-active-btn-test input' ),
  72                         singleActiveAndChecked = function(){
  73                                 same( $( "#radio-active-btn-test .ui-radio-on" ).length, 1, "there should be only one active button" );
  74                                 // Use the .checked property, not the checked attribute which is not dynamic
  75                                 var numChecked = 0;
  76                                 $( "#radio-active-btn-test input" ).each(function(i, e) {
  77                                         if( e.checked ) {
  78                                                 numChecked++;
  79                                         }
  80                                 });
  81                                 same( numChecked, 1, "there should be only one checked" );
  82                         };
  83
  84                 $.testHelper.sequence([
  85                         function(){
  86                                 $radioBtns.last().siblings( 'label' ).click();
  87                         },
  88
  89                         function(){
  90                                 ok( $radioBtns.last().prop( 'checked' ), "last input is checked" );
  91                                 ok( $radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
  92                                         "last input label is an active button" );
  93
  94                                 ok( !$radioBtns.first().prop( 'checked' ), "first input label is not active" );
  95                                 ok( !$radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
  96                                         "first input label is not active" );
  97
  98                                 singleActiveAndChecked();
  99
 100                                 $radioBtns.first().siblings( 'label' ).click();
 101                         },
 102
 103                         function(){
 104                                 ok( $radioBtns.first().prop( 'checked' ));
 105                                 ok( $radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
 106                                         "first input label is an active button" );
 107
 108                                 ok( !$radioBtns.last().prop( 'checked' ));
 109                                 ok( !$radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
 110                                         "last input label is not active" );
 111
 112                                 singleActiveAndChecked();
 113
 114                                 start();
 115                         }
 116                 ], 500);
 117
 118         });
 119
 120         test( "checkboxradio controls will create when inside a container that receives a 'create' event", function(){
 121                 ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-checkbox").length, "did not have enhancements applied" );
 122                 ok( $("#enhancetest").trigger("create").find(".ui-checkbox").length, "enhancements applied" );
 123         });
 124
 125         $.mobile.page.prototype.options.keepNative = "input.should-be-native";
 126
 127         // not testing the positive case here since's it's obviously tested elsewhere
 128         test( "checkboxradio elements in the keepNative set shouldn't be enhanced", function() {
 129                 ok( !$("input.should-be-native").parent().is("div.ui-checkbox") );
 130         });
 131
 132         test( "Elements with \u201cdata-mini='true'\u201d should have \u201cui-mini\u201d class attached to enhanced element.", function(){
 133                 var full = document.getElementById("radio-full"),
 134                         $fulllbl = $('[for="radio-full"]'),
 135                         mini = document.getElementById("radio-mini"),
 136                         $minilbl = $('[for="radio-mini"]'),
 137                         minictrl = $("#mini-control");
 138
 139                 ok( !full.getAttribute('data-nstest-mini') && !$fulllbl.hasClass('ui-mini'), "Original element does not have data attribute, enhanced version does not recieve .ui-mini.");
 140                 ok( mini.getAttribute('data-nstest-mini'), "Original element has data attribute, enhanced version recieves .ui-mini." );
 141         });
 142
 143         asyncTest( "clicking the label triggers a click on the element", function() {
 144                 var clicked = false;
 145
 146                 expect( 1 );
 147
 148                 $( "#checkbox-click-triggered" ).one('click', function() {
 149                         clicked = true;
 150                 });
 151
 152                 $.testHelper.sequence([
 153                         function() {
 154                                 $( "[for='checkbox-click-triggered']" ).click();
 155                         },
 156
 157                         function() {
 158                                 ok(clicked, "click was fired on input");
 159                                 start();
 160                         }
 161                 ], 2000);
 162         });
 163
 164         asyncTest( "clicking the label triggers a change on the element", function() {
 165                 var changed = false;
 166
 167                 expect( 1 );
 168
 169                 $( "#checkbox-change-triggered" ).one('change', function() {
 170                         changed = true;
 171                 });
 172
 173                 $.testHelper.sequence([
 174                         function() {
 175                                 $( "[for='checkbox-change-triggered']" ).click();
 176                         },
 177
 178                         function() {
 179                                 ok(changed, "change was fired on input");
 180                                 start();
 181                         }
 182                 ], 2000);
 183         });
 184
 185
 186         test( "theme should be inherited", function() {
 187                 var $inherited = $( "#checkbox-inherit-theme" ),
 188                     $explicit = $( "#checkbox-explicit-theme" );
 189
 190                 ok( $inherited.siblings("label").hasClass( "ui-btn-up-a" ), "should inherit from page" );
 191                 ok( $explicit.siblings("label").hasClass( "ui-btn-up-b" ), "should not inherit" );
 192         });
 193
 194         asyncTest( "form submission should include radio button values", function() {
 195                 var $form = $( "#radio-form" ), $input = $form.find("input").first();
 196
 197                 $.testHelper.pageSequence([
 198                         function() {
 199                                 $input.click();
 200                                 $form.submit();
 201                         },
 202
 203                         function( timeout ){
 204                                 ok( location.search.indexOf("radio1=1") >= 0, "the radio was checked" );
 205
 206                                 // if the changepage in the previous function failed don't go back
 207                                 if( !timeout ){
 208                                         window.history.back();
 209                                 }
 210                         },
 211
 212                         function(){
 213                                 start();
 214                         }
 215                 ]);
 216         });
 217
 218         asyncTest( "form submission should include checkbox button values", function() {
 219                 var $form = $( "#check-form" ), $inputs = $form.find("input");
 220
 221                 $.testHelper.pageSequence([
 222                         function() {
 223                                 $inputs.click();
 224                                 $form.submit();
 225                         },
 226
 227                         function( timeout ){
 228                                 ok( location.search.indexOf("checkbox-form=on") >= 0, "the first checkbox was checked" );
 229                                 ok( location.search.indexOf("checkbox-form-2=on") >= 0, "the second checkbox was checked" );
 230                                 // if the changepage in the previous function failed don't go back
 231                                 if( !timeout ){
 232                                         window.history.back();
 233                                 }
 234                         },
 235
 236                         function(){
 237                                 start();
 238                         }
 239                 ]);
 240         });
 241
 242   test( "nested label checkbox still renders", function() {
 243     var $checkbox = $( "#checkbox-nested-label" );
 244
 245     try {
 246       $checkbox.checkboxradio();
 247     } catch (e) {
 248       ok( false, "checkboxradio exception raised: " + e.toString());
 249     }
 250
 251     ok( $checkbox.parent().hasClass("ui-checkbox"), "enhancement has occured");
 252   });
 253
 254   test( "nested label (no [for]) checkbox still renders", function() {
 255     var $checkbox = $( "#checkbox-nested-label-no-for" );
 256
 257     try {
 258       $checkbox.checkboxradio();
 259     } catch (e) {
 260       ok( false, "checkboxradio exception raised: " + e.toString());
 261     }
 262
 263     ok( $checkbox.parent().hasClass("ui-checkbox"), "enhancement has occured");
 264   });
 265
 266         test( "Icon positioning", function() {
 267                 var bottomicon = $("[for='bottomicon']")
 268                         topicon = $("[for='topicon']");
 269
 270                 ok( bottomicon.hasClass("ui-btn-icon-bottom"), "Icon position set on label adds the appropriate class." );
 271                 ok( topicon.hasClass("ui-btn-icon-top"), "Icon position set on input adds the appropriate class to the label." );
 272         });
 273 })(jQuery);