libs/js/jquery-mobile-1.2.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                                 deepEqual($("#select-choice-few-menu").parent().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                                                 deepEqual(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( "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                                 deepEqual(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         test( "a popup containing a non-native select will cause the select to be rendered as native", function() {
 155                 ok( $( "#select-choice-inside-popup-menu" ).length === 0, "non-native select inside popup has no generated menu" );
 156         });
 157
 158         asyncTest( "a large select option should not overflow", function(){
 159                 // https://github.com/jquery/jquery-mobile/issues/1338
 160                 var menu, select;
 161
 162                 $.testHelper.sequence([
 163                         resetHash,
 164
 165                         function(){
 166                                 select = $("#select-long-option-label");
 167                                 // bring up the dialog
 168                                 select.trigger("click");
 169                         },
 170
 171                         function() {
 172                                 menu = $(".ui-selectmenu-list");
 173
 174                                 equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow");
 175                                 start();
 176                         }
 177                 ], 500);
 178         });
 179
 180         asyncTest( "focus is transferred to a menu item when the menu is opened",function() {
 181                 var select, menu, button;
 182
 183                 expect( 1 );
 184
 185                 $.testHelper.sequence([
 186                         function() {
 187                                 select = $( "#select-choice-menu-focus-test" );
 188                                 menu = $( "#select-choice-menu-focus-test-menu" );
 189                                 button = select.find( "a" );
 190                                 button.trigger( "click" );
 191                         },
 192
 193                         function() {
 194                                 ok( $( document.activeElement ).parents( "#select-choice-menu-focus-test-menu" ).length > 0, "item in open select menu (" + menu.length + ") has focus" );
 195                                 $(".ui-popup-screen:not(.ui-screen-hidden)").trigger( "click" );
 196                         },
 197
 198                         function() {
 199                                 start();
 200                         }
 201                 ], 5000);
 202         });
 203
 204         asyncTest( "using custom refocuses the button after close", function() {
 205                 var select, button, triggered = false;
 206
 207                 expect( 1 );
 208
 209                 $.testHelper.sequence([
 210                         resetHash,
 211
 212                         function() {
 213                                 select = $("#select-choice-focus-test");
 214                                 button = select.find( "a" );
 215                                 button.trigger( "click" );
 216                         },
 217
 218                         function() {
 219                                 // NOTE this is called twice per triggered click
 220                                 button.focus(function() {
 221                                         triggered = true;
 222                                 });
 223
 224                                 $(".ui-popup-screen:not(.ui-screen-hidden)").trigger("click");
 225                         },
 226
 227                         function(){
 228                                 ok(triggered, "focus is triggered");
 229                                 start();
 230                         }
 231                 ], 1500);
 232         });
 233
 234         asyncTest( "selected items are highlighted", function(){
 235                 $.testHelper.sequence([
 236                         resetHash,
 237
 238                         function(){
 239                                 // bring up the smaller choice menu
 240                                 ok($("#select-choice-few-container a").length > 0, "there is in fact a button in the page");
 241                                 $("#select-choice-few-container a").trigger("click");
 242                         },
 243
 244                         function(){
 245                                 var firstMenuChoice = $("#select-choice-few-menu li:first");
 246                                 ok( firstMenuChoice.hasClass( $.mobile.activeBtnClass ),
 247                                                 "default menu choice has the active button class" );
 248
 249                                 $("#select-choice-few-menu a:last").click();
 250                         },
 251
 252                         function(){
 253                                 // bring up the menu again
 254                                 $("#select-choice-few-container a").trigger("click");
 255                         },
 256
 257                         function(){
 258                                 var lastMenuChoice = $("#select-choice-few-menu li:last");
 259                                 ok( lastMenuChoice.hasClass( $.mobile.activeBtnClass ),
 260                                                 "previously slected item has the active button class" );
 261
 262                                 // close the dialog
 263                                 lastMenuChoice.find( "a" ).click();
 264                         },
 265
 266                         start
 267                 ], 1000);
 268         });
 269
 270         test( "enabling and disabling", function(){
 271                 var select = $( "select" ).first(), button;
 272
 273                 button = select.siblings( "a" ).first();
 274
 275                 select.selectmenu( 'disable' );
 276                 deepEqual( select.attr('disabled'), "disabled", "select is disabled" );
 277                 ok( button.hasClass("ui-disabled"), "disabled class added" );
 278                 deepEqual( button.attr('aria-disabled'), "true", "select is disabled" );
 279                 deepEqual( select.selectmenu( 'option', 'disabled' ), true, "disbaled option set" );
 280
 281                 select.selectmenu( 'enable' );
 282                 deepEqual( select.attr('disabled'), undefined, "select is disabled" );
 283                 ok( !button.hasClass("ui-disabled"), "disabled class added" );
 284                 deepEqual( button.attr('aria-disabled'), "false", "select is disabled" );
 285                 deepEqual( select.selectmenu( 'option', 'disabled' ), false, "disbaled option set" );
 286         });
 287
 288         asyncTest( "adding options and refreshing a custom select changes the options list", function(){
 289                 var select = $( "#custom-refresh-opts-list" ),
 290       button = select.siblings( "a" ).find( ".ui-btn-inner" ),
 291       text = "foo";
 292
 293                 $.testHelper.sequence([
 294                         // bring up the dialog
 295                         function() {
 296                                 button.click();
 297                         },
 298
 299                         function() {
 300                                 deepEqual( $( ".ui-popup-container:not(.ui-selectmenu-hidden) .ui-selectmenu ul" ).text(), "default" );
 301                                 $( ".ui-popup-screen" ).click();
 302                         },
 303
 304                         function() {
 305                                 select.find( "option" ).remove(); //remove the loading message
 306                                 select.append('<option value="1">' + text + '</option>');
 307                                 select.selectmenu( 'refresh' );
 308                         },
 309
 310                         function() {
 311                                 button.click();
 312                         },
 313
 314                         function() {
 315                                 deepEqual( $( ".ui-popup-container:not(.ui-selectmenu-hidden) .ui-selectmenu ul" ).text(), text );
 316                                 $( ".ui-popup-screen" ).click();
 317                         },
 318
 319                         start
 320                 ], 500);
 321         });
 322
 323         test( "theme defined on select is used", function(){
 324                 var select = $("select#non-parent-themed");
 325
 326                 ok( select.siblings( "a" ).hasClass("ui-btn-up-" + select.jqmData('theme')));
 327         });
 328
 329         test( "select without theme defined inherits theme from parent", function() {
 330                 var select = $("select#parent-themed");
 331
 332                 ok( select
 333                         .siblings( "a" )
 334                         .hasClass("ui-btn-up-" + select.parents(":jqmData(role='page')").jqmData('theme')));
 335         });
 336
 337         // issue #2547
 338         test( "custom select list item links have encoded option text values", function() {
 339                 $( "#encoded-option" ).data( 'selectmenu' )._buildList();
 340                 deepEqual(window.encodedValueIsDefined, undefined);
 341         });
 342
 343         // not testing the positive case here since's it's obviously tested elsewhere
 344         test( "select elements in the keepNative set shouldn't be enhanced", function() {
 345                 ok( !$("#keep-native").parent().is("div.ui-btn") );
 346         });
 347
 348         asyncTest( "dialog size select title should match the label", function() {
 349                 var $select = $( "#select-choice-many-1" ),
 350                         $label = $select.parent().siblings( "label" ),
 351                         $button = $select.siblings( "a" );
 352
 353                 $.testHelper.pageSequence([
 354                         function() {
 355                                 $button.click();
 356                         },
 357
 358                         function() {
 359                                 deepEqual($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
 360                                 window.history.back();
 361                         },
 362
 363                         start
 364                 ]);
 365         });
 366
 367         asyncTest( "dialog size select title should match the label when changed after the dialog markup is added to the DOM", function() {
 368                 var $select = $( "#select-choice-many-1" ),
 369                         $label = $select.parent().siblings( "label" ),
 370                         $button = $select.siblings( "a" );
 371
 372                 $label.text( "foo" );
 373
 374                 $.testHelper.pageSequence([
 375                         function() {
 376                                 $label.text( "foo" );
 377                                 $button.click();
 378                         },
 379
 380                         function() {
 381                                 deepEqual($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
 382                                 window.history.back();
 383                         },
 384
 385                         start
 386                 ]);
 387         });
 388
 389         test( "a disabled custom select should still be enhanced as custom", function() {
 390                 $("#select-disabled-enhancetest").selectmenu("enable").selectmenu("open");
 391
 392                 var menu = $(".ui-selectmenu").not( ".ui-selectmenu-hidden" );
 393                 ok( menu.text().indexOf("disabled enhance test") > -1, "the right select is showing" );
 394         });
 395
 396         test( "selected option classes are persisted to the button text", function() {
 397                 var $select = $( "#select-preserve-option-class" ),
 398                         selectedOptionClasses = $select.find( "option:selected" ).attr( "class" );
 399
 400                 deepEqual( $select.parent().find( ".ui-btn-text > span" ).attr( "class" ), selectedOptionClasses );
 401         });
 402
 403         test( "multiple select option classes are persisted from the first selected option to the button text", function() {
 404                 var $select = $( "#select-preserve-option-class-multiple" ),
 405                         selectedOptionClasses = $select.find( "option:selected" ).first().attr( "class" );
 406
 407                 deepEqual( $select.parent().find( ".ui-btn-text > span" ).attr( "class" ), selectedOptionClasses );
 408         });
 409
 410         test( "multiple select text values are aggregated in the button text", function() {
 411                 var $select = $( "#select-aggregate-option-text" );
 412
 413                 deepEqual( "Standard: 7 day, Rush: 3 days", $select.parent().find( ".ui-btn-text" ).text() );
 414         });
 415 })(jQuery);