libs/js/jquery-mobile-1.0.1pre/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                                 same( $( "#radio-active-btn-test :checked" ).length, 1, "there should be only one checked" );
  75                         };
  76
  77                 $.testHelper.sequence([
  78                         function(){
  79                                 $radioBtns.last().siblings( 'label' ).click();
  80                         },
  81
  82                         function(){
  83                                 ok( $radioBtns.last().prop( 'checked' ) );
  84                                 ok( $radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
  85                                         "last input label is an active button" );
  86
  87                                 ok( !$radioBtns.first().prop( 'checked' ) );
  88                                 ok( !$radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
  89                                         "first input label is not active" );
  90
  91                                 singleActiveAndChecked();
  92
  93                                 $radioBtns.first().siblings( 'label' ).click();
  94                         },
  95
  96                         function(){
  97                                 ok( $radioBtns.first().prop( 'checked' ));
  98                                 ok( $radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
  99                                         "first input label is an active button" );
 100
 101                                 ok( !$radioBtns.last().prop( 'checked' ));
 102                                 ok( !$radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
 103                                         "last input label is not active" );
 104
 105                                 singleActiveAndChecked();
 106
 107                                 start();
 108                         }
 109                 ], 500);
 110
 111         });
 112
 113         test( "checkboxradio controls will create when inside a container that receives a 'create' event", function(){
 114                 ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-checkbox").length, "did not have enhancements applied" );
 115                 ok( $("#enhancetest").trigger("create").find(".ui-checkbox").length, "enhancements applied" );
 116         });
 117
 118         $.mobile.page.prototype.options.keepNative = "input.should-be-native";
 119
 120         // not testing the positive case here since's it's obviously tested elsewhere
 121         test( "checkboxradio elements in the keepNative set shouldn't be enhanced", function() {
 122                 ok( !$("input.should-be-native").parent().is("div.ui-checkbox") );
 123         });
 124
 125         asyncTest( "clicking the label triggers a click on the element", function() {
 126                 var clicked = false;
 127
 128                 expect( 1 );
 129
 130                 $( "#checkbox-click-triggered" ).one('click', function() {
 131                         clicked = true;
 132                 });
 133
 134                 $.testHelper.sequence([
 135                         function() {
 136                                 $( "[for='checkbox-click-triggered']" ).click();
 137                         },
 138
 139                         function() {
 140                                 ok(clicked, "click was fired on input");
 141                                 start();
 142                         }
 143                 ], 2000);
 144         });
 145 })(jQuery);