2 * mobile select unit tests
6 var libName = "jquery.mobile.forms.select.js",
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( "firing a click at least 400 ms later on the select screen overlay does close it", function(){
31 $.testHelper.sequence([
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");
39 //select the first menu item
40 $("#select-choice-few-menu a:first").click();
44 same($("#select-choice-few-menu").parent(".ui-selectmenu-hidden").length, 1);
50 asyncTest( "a large select menu should use the default dialog transition", function(){
53 $.testHelper.pageSequence([
57 select = $("#select-choice-many-container-1 a");
59 //set to something else
60 $.mobile.defaultTransitionHandler = $.testHelper.decorate({
61 fn: $.mobile.defaultTransitionHandler,
63 before: function(name){
64 same(name, $.mobile.defaultDialogTransition);
68 // bring up the dialog
69 select.trigger("click");
78 asyncTest( "custom select menu always renders screen from the left", function(){
83 $.testHelper.sequence([
87 select = $("ul#select-offscreen-menu");
88 $("#select-offscreen-container a").trigger("click");
92 ok(select.offset().left >= 30, "offset from the left is greater than or equal to 30px" );
98 asyncTest( "selecting an item from a dialog sized custom select menu leaves no dialog hash key", function(){
99 var dialogHashKey = "ui-state=dialog";
101 $.testHelper.pageSequence([
105 $("#select-choice-many-container-hash-check a").click();
109 ok(location.hash.indexOf(dialogHashKey) > -1);
114 same(location.hash.indexOf(dialogHashKey), -1);
120 asyncTest( "dialog sized select menu opened many times remains a dialog", function(){
121 var dialogHashKey = "ui-state=dialog",
123 openDialogSequence = [
127 $("#select-choice-many-container-many-clicks a").click();
131 ok(location.hash.indexOf(dialogHashKey) > -1, "hash should have the dialog hash key");
136 sequence = openDialogSequence.concat(openDialogSequence).concat([start]);
138 $.testHelper.sequence(sequence, 1000);
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" );
145 module("Non native menus", {
147 $.mobile.selectmenu.prototype.options.nativeMenu = false;
149 teardown: function() {
150 $.mobile.selectmenu.prototype.options.nativeMenu = true;
154 asyncTest( "a large select option should not overflow", function(){
155 // https://github.com/jquery/jquery-mobile/issues/1338
158 $.testHelper.sequence([
162 select = $("#select-long-option-label");
163 // bring up the dialog
164 select.trigger("click");
168 menu = $(".ui-selectmenu-list");
170 equal(menu.width(), menu.find("li:nth-child(2) .ui-btn-text").width(), "ui-btn-text element should not overflow");
176 asyncTest( "using custom refocuses the button after close", function() {
177 var select, button, triggered = false;
181 $.testHelper.sequence([
185 select = $("#select-choice-focus-test");
186 button = select.find( "a" );
187 button.trigger( "click" );
191 // NOTE this is called twice per triggered click
192 button.focus(function() {
196 $(".ui-selectmenu-screen:not(.ui-screen-hidden)").trigger("click");
200 ok(triggered, "focus is triggered");
206 asyncTest( "selected items are highlighted", function(){
207 $.testHelper.sequence([
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");
217 var firstMenuChoice = $("#select-choice-few-menu li:first");
218 ok( firstMenuChoice.hasClass( $.mobile.activeBtnClass ),
219 "default menu choice has the active button class" );
221 $("#select-choice-few-menu a:last").click();
225 // bring up the menu again
226 $("#select-choice-few-container a").trigger("click");
230 var lastMenuChoice = $("#select-choice-few-menu li:last");
231 ok( lastMenuChoice.hasClass( $.mobile.activeBtnClass ),
232 "previously slected item has the active button class" );
235 lastMenuChoice.find( "a" ).click();
242 test( "enabling and disabling", function(){
243 var select = $( "select" ).first(), button;
245 button = select.siblings( "a" ).first();
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" );
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" );
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" ),
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);
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" ),
277 $.testHelper.sequence([
278 // bring up the dialog
284 same( $( ".ui-selectmenu.in ul" ).text(), "default" );
285 $( ".ui-selectmenu-screen" ).click();
289 select.find( "option" ).remove(); //remove the loading message
290 select.append('<option value="1">' + text + '</option>');
291 select.selectmenu( 'refresh' );
299 same( $( ".ui-selectmenu.in ul" ).text(), text );
300 $( ".ui-selectmenu-screen" ).click();
307 test( "theme defined on select is used", function(){
308 var select = $("select#non-parent-themed");
310 ok( select.siblings( "a" ).hasClass("ui-btn-up-" + select.jqmData('theme')));
313 test( "select without theme defined inherits theme from parent", function() {
314 var select = $("select#parent-themed");
318 .hasClass("ui-btn-up-" + select.parents(":jqmData(role='page')").jqmData('theme')));
322 test( "custom select list item links have encoded option text values", function() {
323 $( "#encoded-option" ).data( 'selectmenu' )._buildList();
324 same(window.encodedValueIsDefined, undefined);
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;
332 $( "#encoded-option" ).data( 'selectmenu' )._buildList();
334 same(window.encodedValueIsDefined, true);
337 $.mobile.page.prototype.options.keepNative = "select.should-be-native";
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") );
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" );
349 $.testHelper.pageSequence([
355 same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
356 window.history.back();
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" );
368 $label.text( "foo" );
370 $.testHelper.pageSequence([
372 $label.text( "foo" );
377 same($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
378 window.history.back();