libs/js/jquery-mobile-1.0.1pre/tests/unit/select/select_core.js

   1 /*
   2  * mobile select unit tests
   3  */
   4
   5 (function($){
   6         var libName = "jquery.mobile.forms.select.js",
   7                 originalDefaultDialogTrans = $.mobile.defaultDialogTransition,
   8                 originalDefTransitionHandler = $.mobile.defaultTransitionHandler,
   9                 originalGetEncodedText = $.fn.getEncodedText,
  10                 resetHash, closeDialog;
  11
  12         resetHash = function(timeout){
  13                 $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
  14         };
  15
  16         closeDialog = function(timeout){
  17                 $.mobile.activePage.find("li a").first().click();
  18         };
  19
  20         module(libName, {
  21                 teardown: function(){
  22                         $.mobile.defaultDialogTransition = originalDefaultDialogTrans;
  23                         $.mobile.defaultTransitionHandler = originalDefTransitionHandler;
  24
  25                         $.fn.getEncodedText = originalGetEncodedText;
  26                         window.encodedValueIsDefined = undefined;
  27                 }
  28         });
  29
  30         asyncTest( "firing a click at least 400 ms later on the select screen overlay does close it", function(){
  31                 $.testHelper.sequence([
  32                         function(){
  33                                 // bring up the smaller choice menu
  34                                 ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
  35                                 $("#select-choice-few-container a").trigger("click");
  36                         },
  37
  38                         function(){
  39                                 //select the first menu item
  40                                 $("#select-choice-few-menu a:first").click();
  41                         },
  42
  43                         function(){
  44                                 same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 1);
  45                                 start();
  46                         }
  47                 ], 1000);
  48         });
  49
  50         asyncTest( "a large select menu should use the default dialog transition", function(){
  51                 var select;
  52
  53                 $.testHelper.pageSequence([
  54                         resetHash,
  55
  56                         function(timeout){
  57                                 select = $("#select-choice-many-container-1 a");
  58
  59                                 //set to something else
  60                                 $.mobile.defaultTransitionHandler = $.testHelper.decorate({
  61                                         fn: $.mobile.defaultTransitionHandler,
  62
  63                                         before: function(name){
  64                                                 same(name, $.mobile.defaultDialogTransition);
  65                                         }
  66                                 });
  67
  68                                 // bring up the dialog
  69                                 select.trigger("click");
  70                         },
  71
  72                         closeDialog,
  73
  74                         start
  75                 ]);
  76         });
  77
  78         asyncTest( "custom select menu always renders screen from the left", function(){
  79                 var select;
  80
  81                 expect( 1 );
  82
  83                 $.testHelper.sequence([
  84                         resetHash,
  85
  86                         function(){
  87                                 select = $("ul#select-offscreen-menu");
  88                                 $("#select-offscreen-container a").trigger("click");
  89                         },
  90
  91                         function(){
  92                                 ok(select.offset().left >= 30, "offset from the left is greater than or equal to 30px" );
  93                                 start();
  94                         }
  95                 ], 1000);
  96         });
  97
  98         asyncTest( "selecting an item from a dialog sized custom select menu leaves no dialog hash key", function(){
  99                 var dialogHashKey = "ui-state=dialog";
 100
 101                 $.testHelper.pageSequence([
 102                         resetHash,
 103
 104                         function(timeout){
 105                                 $("#select-choice-many-container-hash-check a").click();
 106                         },
 107
 108                         function(){
 109                                 ok(location.hash.indexOf(dialogHashKey) > -1);
 110                                 closeDialog();
 111                         },
 112
 113                         function(){
 114                                 same(location.hash.indexOf(dialogHashKey), -1);
 115                                 start();
 116                         }
 117                 ]);
 118         });
 119
 120         asyncTest( "dialog sized select menu opened many times remains a dialog", function(){
 121                 var dialogHashKey = "ui-state=dialog",
 122
 123                                 openDialogSequence = [
 124                                         resetHash,
 125
 126                                         function(){
 127                                                 $("#select-choice-many-container-many-clicks a").click();
 128                                         },
 129
 130                                         function(){
 131                                                 ok(location.hash.indexOf(dialogHashKey) > -1, "hash should have the dialog hash key");
 132                                                 closeDialog();
 133                                         }
 134                                 ],
 135
 136                                 sequence = openDialogSequence.concat(openDialogSequence).concat([start]);
 137
 138                 $.testHelper.sequence(sequence, 1000);
 139         });
 140
 141         test( "make sure the label for the select gets the ui-select class", function(){
 142                 ok( $( "#native-select-choice-few-container label" ).hasClass( "ui-select" ), "created label has ui-select class" );
 143         });
 144
 145         module("Non native menus", {
 146                 setup: function() {
 147                         $.mobile.selectmenu.prototype.options.nativeMenu = false;
 148                 },
 149                 teardown: function() {
 150                         $.mobile.selectmenu.prototype.options.nativeMenu = true;
 151                 }
 152         });
 153
 154         asyncTest( "a large select option should not overflow", function(){
 155                 // https://github.com/jquery/jquery-mobile/issues/1338
 156                 var menu, select;
 157
 158                 $.testHelper.sequence([
 159                         resetHash,
 160
 161                         function(){
 162                                 select = $("#select-long-option-label");
 163                                 // bring up the dialog
 164                                 select.trigger("click");
 165                         },
 166
 167                         function() {
 168                                 menu = $(".ui-selectmenu-list");
 169
 170                                 equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow");
 171                                 start();
 172                         }
 173                 ], 500);
 174         });
 175
 176         asyncTest( "using custom refocuses the button after close", function() {
 177                 var select, button, triggered = false;
 178
 179                 expect( 1 );
 180
 181                 $.testHelper.sequence([
 182                         resetHash,
 183
 184                         function() {
 185                                 select = $("#select-choice-focus-test");
 186                                 button = select.find( "a" );
 187                                 button.trigger( "click" );
 188                         },
 189
 190                         function() {
 191                                 // NOTE this is called twice per triggered click
 192                                 button.focus(function() {
 193                                         triggered = true;
 194                                 });
 195
 196                                 $(".ui-selectmenu-screen:not(.ui-screen-hidden)").trigger("click");
 197                         },
 198
 199                         function(){
 200                                 ok(triggered, "focus is triggered");
 201                                 start();
 202                         }
 203                 ], 5000);
 204         });
 205
 206         asyncTest( "selected items are highlighted", function(){
 207                 $.testHelper.sequence([
 208                         resetHash,
 209
 210                         function(){
 211                                 // bring up the smaller choice menu
 212                                 ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
 213                                 $("#select-choice-few-container a").trigger("click");
 214                         },
 215
 216                         function(){
 217                                 var firstMenuChoice = $("#select-choice-few-menu li:first");
 218                                 ok( firstMenuChoice.hasClass( $.mobile.activeBtnClass ),
 219                                                 "default menu choice has the active button class" );
 220
 221                                 $("#select-choice-few-menu a:last").click();
 222                         },
 223
 224                         function(){
 225                                 // bring up the menu again
 226                                 $("#select-choice-few-container a").trigger("click");
 227                         },
 228
 229                         function(){
 230                                 var lastMenuChoice = $("#select-choice-few-menu li:last");
 231                                 ok( lastMenuChoice.hasClass( $.mobile.activeBtnClass ),
 232                                                 "previously slected item has the active button class" );
 233
 234                                 // close the dialog
 235                                 lastMenuChoice.find( "a" ).click();
 236                         },
 237
 238                         start
 239                 ], 1000);
 240         });
 241
 242         test( "enabling and disabling", function(){
 243                 var select = $( "select" ).first(), button;
 244
 245                 button = select.siblings( "a" ).first();
 246
 247                 select.selectmenu( 'disable' );
 248                 same( select.attr('disabled'), "disabled", "select is disabled" );
 249                 ok( button.hasClass("ui-disabled"), "disabled class added" );
 250                 same( button.attr('aria-disabled'), "true", "select is disabled" );
 251                 same( select.selectmenu( 'option', 'disabled' ), true, "disbaled option set" );
 252
 253                 select.selectmenu( 'enable' );
 254                 same( select.attr('disabled'), undefined, "select is disabled" );
 255                 ok( !button.hasClass("ui-disabled"), "disabled class added" );
 256                 same( button.attr('aria-disabled'), "false", "select is disabled" );
 257                 same( select.selectmenu( 'option', 'disabled' ), false, "disbaled option set" );
 258         });
 259
 260         test( "adding options and refreshing a custom select defaults the text", function() {
 261                 var select = $( "#custom-refresh" ),
 262       button = select.siblings( "a" ).find( ".ui-btn-inner" ),
 263       text = "foo";
 264
 265     same(button.text(), "default");
 266     select.find( "option" ).remove(); //remove the loading message
 267     select.append('<option value="1">' + text + '</option>');
 268     select.selectmenu( 'refresh' );
 269                 same(button.text(), text);
 270         });
 271
 272         asyncTest( "adding options and refreshing a custom select changes the options list", function(){
 273                 var select = $( "#custom-refresh-opts-list" ),
 274       button = select.siblings( "a" ).find( ".ui-btn-inner" ),
 275       text = "foo";
 276
 277                 $.testHelper.sequence([
 278                         // bring up the dialog
 279                         function() {
 280                                 button.click();
 281                         },
 282
 283                         function() {
 284                                 same( $( ".ui-selectmenu.in ul" ).text(), "default" );
 285                                 $( ".ui-selectmenu-screen" ).click();
 286                         },
 287
 288                         function() {
 289                                 select.find( "option" ).remove(); //remove the loading message
 290                                 select.append('<option value="1">' + text + '</option>');
 291                                 select.selectmenu( 'refresh' );
 292                         },
 293
 294                         function() {
 295                                 button.click();
 296                         },
 297
 298                         function() {
 299                                 same( $( ".ui-selectmenu.in ul" ).text(), text );
 300                                 $( ".ui-selectmenu-screen" ).click();
 301                         },
 302
 303                         start
 304                 ], 500);
 305         });
 306
 307         test( "theme defined on select is used", function(){
 308                 var select = $("select#non-parent-themed");
 309
 310                 ok( select.siblings( "a" ).hasClass("ui-btn-up-" + select.jqmData('theme')));
 311         });
 312
 313         test( "select without theme defined inherits theme from parent", function() {
 314                 var select = $("select#parent-themed");
 315
 316                 ok( select
 317                         .siblings( "a" )
 318                         .hasClass("ui-btn-up-" + select.parents(":jqmData(role='page')").jqmData('theme')));
 319         });
 320
 321         // issue #2547
 322         test( "custom select list item links have encoded option text values", function() {
 323                 $( "#encoded-option" ).data( 'selectmenu' )._buildList();
 324                 same(window.encodedValueIsDefined, undefined);
 325         });
 326
 327         // issue #2547
 328         test( "custom select list item links have unencoded option text values when using vanilla $.fn.text", function() {
 329                 // undo our changes, undone in teardown
 330                 $.fn.getEncodedText = $.fn.text;
 331
 332                 $( "#encoded-option" ).data( 'selectmenu' )._buildList();
 333
 334                 same(window.encodedValueIsDefined, true);
 335         });
 336
 337         $.mobile.page.prototype.options.keepNative = "select.should-be-native";
 338
 339         // not testing the positive case here since's it's obviously tested elsewhere
 340         test( "select elements in the keepNative set shouldn't be enhanced", function() {
 341                 ok( !$("#keep-native").parent().is("div.ui-btn") );
 342         });
 343
 344         asyncTest( "dialog size select title should match the label", function() {
 345                 var $select = $( "#select-choice-many-1" ),
 346                         $label = $select.parent().siblings( "label" ),
 347                         $button = $select.siblings( "a" );
 348
 349                 $.testHelper.pageSequence([
 350                         function() {
 351                                 $button.click();
 352                         },
 353
 354                         function() {
 355                                 same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
 356                                 window.history.back();
 357                         },
 358
 359                         start
 360                 ]);
 361         });
 362
 363         asyncTest( "dialog size select title should match the label when changed after the dialog markup is added to the DOM", function() {
 364                 var $select = $( "#select-choice-many-1" ),
 365                         $label = $select.parent().siblings( "label" ),
 366                         $button = $select.siblings( "a" );
 367
 368                 $label.text( "foo" );
 369
 370                 $.testHelper.pageSequence([
 371                         function() {
 372                                 $label.text( "foo" );
 373                                 $button.click();
 374                         },
 375
 376                         function() {
 377                                 same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
 378                                 window.history.back();
 379                         },
 380
 381                         start
 382                 ]);
 383         });
 384 })(jQuery);