third-party/jquery-ui-1.10.2/tests/unit/autocomplete/autocomplete_options.js

   1 (function( $ ) {
   2
   3 module( "autocomplete: options" );
   4
   5 var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ];
   6
   7 test( "appendTo", function() {
   8         expect( 8 );
   9         var detached = $( "<div>" ),
  10                 element = $( "#autocomplete" ).autocomplete();
  11         equal( element.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" );
  12         element.autocomplete( "destroy" );
  13
  14         element.autocomplete({
  15                 appendTo: ".ac-wrap"
  16         });
  17         equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "first found element" );
  18         equal( $( "#ac-wrap2 .ui-autocomplete" ).length, 0, "only appends to one element" );
  19         element.autocomplete( "destroy" );
  20
  21         $( "#ac-wrap2" ).addClass( "ui-front" );
  22         element.autocomplete();
  23         equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap2" )[0], "null, inside .ui-front" );
  24         element.autocomplete( "destroy" );
  25         $( "#ac-wrap2" ).removeClass( "ui-front" );
  26
  27         element.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" );
  28         equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" );
  29         element.autocomplete( "destroy" );
  30
  31         element.autocomplete({
  32                 appendTo: detached
  33         });
  34         equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached jQuery object" );
  35         element.autocomplete( "destroy" );
  36
  37         element.autocomplete({
  38                 appendTo: detached[0]
  39         });
  40         equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached DOM element" );
  41         element.autocomplete( "destroy" );
  42
  43         element.autocomplete().autocomplete( "option", "appendTo", detached );
  44         equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached DOM element via option()" );
  45         element.autocomplete( "destroy" );
  46 });
  47
  48 function autoFocusTest( afValue, focusedLength ) {
  49         var element = $( "#autocomplete" ).autocomplete({
  50                 autoFocus: afValue,
  51                 delay: 0,
  52                 source: data,
  53                 open: function() {
  54                         equal( element.autocomplete( "widget" ).children( ".ui-menu-item:first" ).find( ".ui-state-focus" ).length,
  55                                 focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" );
  56                         start();
  57                 }
  58         });
  59         element.val( "ja" ).keydown();
  60         stop();
  61 }
  62
  63 test( "autoFocus: false", function() {
  64         expect( 1 );
  65         autoFocusTest( false, 0 );
  66 });
  67
  68 test( "autoFocus: true", function() {
  69         expect( 1 );
  70         autoFocusTest( true, 1 );
  71 });
  72
  73 asyncTest( "delay", function() {
  74         expect( 2 );
  75         var element = $( "#autocomplete" ).autocomplete({
  76                         source: data,
  77                         delay: 50
  78                 }),
  79                 menu = element.autocomplete( "widget" );
  80         element.val( "ja" ).keydown();
  81
  82         ok( menu.is( ":hidden" ), "menu is closed immediately after search" );
  83
  84         setTimeout(function() {
  85                 ok( menu.is( ":visible" ), "menu is open after delay" );
  86                 start();
  87         }, 100 );
  88 });
  89
  90 asyncTest( "disabled", function() {
  91         expect( 2 );
  92         var element = $( "#autocomplete" ).autocomplete({
  93                         source: data,
  94                         delay: 0,
  95                         disabled: true
  96                 }),
  97                 menu = element.autocomplete( "widget" );
  98         element.val( "ja" ).keydown();
  99
 100         ok( menu.is( ":hidden" ) );
 101
 102         setTimeout(function() {
 103                 ok( menu.is( ":hidden" ) );
 104                 start();
 105         }, 50 );
 106 });
 107
 108 test( "minLength", function() {
 109         expect( 2 );
 110         var element = $( "#autocomplete" ).autocomplete({
 111                         source: data
 112                 }),
 113                 menu = element.autocomplete( "widget" );
 114         element.autocomplete( "search", "" );
 115         ok( menu.is( ":hidden" ), "blank not enough for minLength: 1" );
 116
 117         element.autocomplete( "option", "minLength", 0 );
 118         element.autocomplete( "search", "" );
 119         ok( menu.is( ":visible" ), "blank enough for minLength: 0" );
 120 });
 121
 122 asyncTest( "minLength, exceed then drop below", function() {
 123         expect( 4 );
 124         var element = $( "#autocomplete" ).autocomplete({
 125                         minLength: 2,
 126                         source: function( req, res ) {
 127                                 equal( req.term, "12", "correct search term" );
 128                                 setTimeout(function() {
 129                                         res([ "item" ]);
 130                                 }, 1 );
 131                         }
 132                 }),
 133                 menu = element.autocomplete( "widget" );
 134
 135         ok( menu.is( ":hidden" ), "menu is hidden before first search" );
 136         element.autocomplete( "search", "12" );
 137
 138         ok( menu.is( ":hidden" ), "menu is hidden before second search" );
 139         element.autocomplete( "search", "1" );
 140
 141         setTimeout(function() {
 142                 ok( menu.is( ":hidden" ), "menu is hidden after searches" );
 143                 start();
 144         }, 50 );
 145 });
 146
 147 test( "minLength, exceed then drop below then exceed", function() {
 148         expect( 3 );
 149         var _res = [],
 150                 element = $( "#autocomplete" ).autocomplete({
 151                         minLength: 2,
 152                         source: function( req, res ) {
 153                                 _res.push( res );
 154                         }
 155                 }),
 156                 menu = element.autocomplete( "widget" );
 157
 158         // trigger a valid search
 159         ok( menu.is( ":hidden" ), "menu is hidden before first search" );
 160         element.autocomplete( "search", "12" );
 161
 162         // trigger a search below the minLength, to turn on cancelSearch flag
 163         ok( menu.is( ":hidden" ), "menu is hidden before second search" );
 164         element.autocomplete( "search", "1" );
 165
 166         // trigger a valid search
 167         element.autocomplete( "search", "13" );
 168         // react as if the first search was cancelled (default ajax behavior)
 169         _res[ 0 ]([]);
 170         // react to second search
 171         _res[ 1 ]([ "13" ]);
 172
 173         ok( menu.is( ":visible" ), "menu is visible after searches" );
 174 });
 175
 176 test( "source, local string array", function() {
 177         expect( 1 );
 178         var element = $( "#autocomplete" ).autocomplete({
 179                         source: data
 180                 }),
 181                 menu = element.autocomplete( "widget" );
 182         element.val( "ja" ).autocomplete( "search" );
 183         equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
 184 });
 185
 186 function sourceTest( source, async ) {
 187         var element = $( "#autocomplete" ).autocomplete({
 188                         source: source
 189                 }),
 190                 menu = element.autocomplete( "widget" );
 191         function result() {
 192                 equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
 193                 element.autocomplete( "destroy" );
 194                 if ( async ) {
 195                         start();
 196                 }
 197         }
 198         if ( async ) {
 199                 stop();
 200                 $( document ).one( "ajaxStop", result );
 201         }
 202         element.val( "ja" ).autocomplete( "search" );
 203         if ( !async ) {
 204                 result();
 205         }
 206 }
 207
 208 test( "source, local object array, only label property", function() {
 209         expect( 1 );
 210         sourceTest([
 211                 { label: "java" },
 212                 { label: "php" },
 213                 { label: "coldfusion" },
 214                 { label: "javascript" }
 215         ]);
 216 });
 217
 218 test( "source, local object array, only value property", function() {
 219         expect( 1 );
 220         sourceTest([
 221                 { value: "java" },
 222                 { value: "php" },
 223                 { value: "coldfusion" },
 224                 { value: "javascript" }
 225         ]);
 226 });
 227
 228 test( "source, url string with remote json string array", function() {
 229         expect( 1 );
 230         sourceTest( "remote_string_array.txt", true );
 231 });
 232
 233 test( "source, url string with remote json object array, only value properties", function() {
 234         expect( 1 );
 235         sourceTest( "remote_object_array_values.txt", true );
 236 });
 237
 238 test( "source, url string with remote json object array, only label properties", function() {
 239         expect( 1 );
 240         sourceTest( "remote_object_array_labels.txt", true );
 241 });
 242
 243 test( "source, custom", function() {
 244         expect( 2 );
 245         sourceTest(function( request, response ) {
 246                 equal( request.term, "ja" );
 247                 response( ["java", "javascript"] );
 248         });
 249 });
 250
 251 test( "source, update after init", function() {
 252         expect( 2 );
 253         var element = $( "#autocomplete" ).autocomplete({
 254                         source: [ "java", "javascript", "haskell" ]
 255                 }),
 256                 menu = element.autocomplete( "widget" );
 257         element.val( "ja" ).autocomplete( "search" );
 258         equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" );
 259         element.autocomplete( "option", "source", [ "php", "asp" ] );
 260         element.val( "ph" ).autocomplete( "search" );
 261         equal( menu.find( ".ui-menu-item" ).text(), "php" );
 262 });
 263
 264 }( jQuery ) );