2 * mobile select unit tests
6 var libName = "jquery.mobile.forms.select",
7 originalDefaultDialogTrans = $.mobile.defaultDialogTransition,
8 originalDefTransitionHandler = $.mobile.defaultTransitionHandler,
9 originalGetEncodedText = $.fn.getEncodedText,
10 resetHash, closeDialog;
12 resetHash = function(timeout){
13 $.testHelper.openPage( location.hash.indexOf("#default") >= 0 ? "#" : "#default" );
16 closeDialog = function(timeout){
17 $.mobile.activePage.find("li a").first().click();
22 $.mobile.defaultDialogTransition = originalDefaultDialogTrans;
23 $.mobile.defaultTransitionHandler = originalDefTransitionHandler;
25 $.fn.getEncodedText = originalGetEncodedText;
26 window.encodedValueIsDefined = undefined;
30 asyncTest( "placeholder correctly gets ui-selectmenu-placeholder class after rebuilding", function(){
31 $.testHelper.sequence([
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");
39 //select the first menu item
40 $("#optgroup-and-placeholder-menu a:first").click();
44 ok($("#optgroup-and-placeholder-menu li:first").hasClass("ui-selectmenu-placeholder"), "the placeholder item has the ui-selectmenu-placeholder class");
50 asyncTest( "firing a click at least 400 ms later on the select screen overlay does close it", function(){
51 $.testHelper.sequence([
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");
59 //select the first menu item
60 $("#select-choice-few-menu a:first").click();
64 same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 1);
70 asyncTest( "a large select menu should use the default dialog transition", function(){
73 $.testHelper.pageSequence([
77 select = $("#select-choice-many-container-1 a");
79 //set to something else
80 $.mobile.defaultTransitionHandler = $.testHelper.decorate({
81 fn: $.mobile.defaultTransitionHandler,
83 before: function(name){
84 same(name, $.mobile.defaultDialogTransition);
88 // bring up the dialog
89 select.trigger("click");
98 asyncTest( "custom select menu always renders screen from the left", function(){
103 $.testHelper.sequence([
107 select = $("ul#select-offscreen-menu");
108 $("#select-offscreen-container a").trigger("click");
112 ok(select.offset().left >= 30, "offset from the left is greater than or equal to 30px" );
118 asyncTest( "selecting an item from a dialog sized custom select menu leaves no dialog hash key", function(){
119 var dialogHashKey = "ui-state=dialog";
121 $.testHelper.pageSequence([
125 $("#select-choice-many-container-hash-check a").click();
129 ok(location.hash.indexOf(dialogHashKey) > -1);
134 same(location.hash.indexOf(dialogHashKey), -1);
140 asyncTest( "dialog sized select menu opened many times remains a dialog", function(){
141 var dialogHashKey = "ui-state=dialog",
143 openDialogSequence = [
147 $("#select-choice-many-container-many-clicks a").click();
151 ok(location.hash.indexOf(dialogHashKey) > -1, "hash should have the dialog hash key");
156 sequence = openDialogSequence.concat(openDialogSequence).concat([start]);
158 $.testHelper.sequence(sequence, 1000);
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" );
165 module("Non native menus", {
167 $.mobile.selectmenu.prototype.options.nativeMenu = false;
169 teardown: function() {
170 $.mobile.selectmenu.prototype.options.nativeMenu = true;
174 asyncTest( "a large select option should not overflow", function(){
175 // https://github.com/jquery/jquery-mobile/issues/1338
178 $.testHelper.sequence([
182 select = $("#select-long-option-label");
183 // bring up the dialog
184 select.trigger("click");
188 menu = $(".ui-selectmenu-list");
190 equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow");
196 asyncTest( "using custom refocuses the button after close", function() {
197 var select, button, triggered = false;
201 $.testHelper.sequence([
205 select = $("#select-choice-focus-test");
206 button = select.find( "a" );
207 button.trigger( "click" );
211 // NOTE this is called twice per triggered click
212 button.focus(function() {
216 $(".ui-selectmenu-screen:not(.ui-screen-hidden)").trigger("click");
220 ok(triggered, "focus is triggered");
226 asyncTest( "selected items are highlighted", function(){
227 $.testHelper.sequence([
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");
237 var firstMenuChoice = $("#select-choice-few-menu li:first");
238 ok( firstMenuChoice.hasClass( $.mobile.activeBtnClass ),
239 "default menu choice has the active button class" );
241 $("#select-choice-few-menu a:last").click();
245 // bring up the menu again
246 $("#select-choice-few-container a").trigger("click");
250 var lastMenuChoice = $("#select-choice-few-menu li:last");
251 ok( lastMenuChoice.hasClass( $.mobile.activeBtnClass ),
252 "previously slected item has the active button class" );
255 lastMenuChoice.find( "a" ).click();
262 test( "enabling and disabling", function(){
263 var select = $( "select" ).first(), button;
265 button = select.siblings( "a" ).first();
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" );
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" );
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" ),
285 $.testHelper.sequence([
286 // bring up the dialog
292 same( $( ".ui-selectmenu.in ul" ).text(), "default" );
293 $( ".ui-selectmenu-screen" ).click();
297 select.find( "option" ).remove(); //remove the loading message
298 select.append('<option value="1">' + text + '</option>');
299 select.selectmenu( 'refresh' );
307 same( $( ".ui-selectmenu.in ul" ).text(), text );
308 $( ".ui-selectmenu-screen" ).click();
315 test( "theme defined on select is used", function(){
316 var select = $("select#non-parent-themed");
318 ok( select.siblings( "a" ).hasClass("ui-btn-up-" + select.jqmData('theme')));
321 test( "select without theme defined inherits theme from parent", function() {
322 var select = $("select#parent-themed");
326 .hasClass("ui-btn-up-" + select.parents(":jqmData(role='page')").jqmData('theme')));
330 test( "custom select list item links have encoded option text values", function() {
331 $( "#encoded-option" ).data( 'selectmenu' )._buildList();
332 same(window.encodedValueIsDefined, undefined);
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") );
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" );
345 $.testHelper.pageSequence([
351 same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
352 window.history.back();
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" );
364 $label.text( "foo" );
366 $.testHelper.pageSequence([
368 $label.text( "foo" );
373 same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
374 window.history.back();
381 test( "a disabled custom select should still be enhanced as custom", function() {
382 $("#select-disabled-enhancetest").selectmenu("enable").siblings("a").click();
384 var menu = $(".ui-selectmenu").not( ".ui-selectmenu-hidden" );
385 ok( menu.text().indexOf("disabled enhance test") > -1, "the right select is showing" );