libs/js/jquery-mobile-1.1.0/tests/unit/select/select_core.js

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