From bde431bb449b1d957d4e0b736111ff342f2a919d Mon Sep 17 00:00:00 2001 From: Scott González Date: Tue, 7 Apr 2015 10:55:52 -0400 Subject: Tests: Rename files Ref gh-1528 --- tests/unit/selectmenu/common.js | 34 +++ tests/unit/selectmenu/core.js | 332 ++++++++++++++++++++++++++++ tests/unit/selectmenu/events.js | 136 ++++++++++++ tests/unit/selectmenu/methods.js | 189 ++++++++++++++++ tests/unit/selectmenu/options.js | 128 +++++++++++ tests/unit/selectmenu/selectmenu_common.js | 34 --- tests/unit/selectmenu/selectmenu_core.js | 332 ---------------------------- tests/unit/selectmenu/selectmenu_events.js | 136 ------------ tests/unit/selectmenu/selectmenu_methods.js | 189 ---------------- tests/unit/selectmenu/selectmenu_options.js | 128 ----------- 10 files changed, 819 insertions(+), 819 deletions(-) create mode 100644 tests/unit/selectmenu/common.js create mode 100644 tests/unit/selectmenu/core.js create mode 100644 tests/unit/selectmenu/events.js create mode 100644 tests/unit/selectmenu/methods.js create mode 100644 tests/unit/selectmenu/options.js delete mode 100644 tests/unit/selectmenu/selectmenu_common.js delete mode 100644 tests/unit/selectmenu/selectmenu_core.js delete mode 100644 tests/unit/selectmenu/selectmenu_events.js delete mode 100644 tests/unit/selectmenu/selectmenu_methods.js delete mode 100644 tests/unit/selectmenu/selectmenu_options.js (limited to 'tests/unit/selectmenu') diff --git a/tests/unit/selectmenu/common.js b/tests/unit/selectmenu/common.js new file mode 100644 index 000000000..b24b8dace --- /dev/null +++ b/tests/unit/selectmenu/common.js @@ -0,0 +1,34 @@ +define( [ + "lib/common", + "ui/selectmenu" +], function( common ) { + +common.testWidget( "selectmenu", { + defaults: { + appendTo: null, + classes: { + "ui-selectmenu-button-open": "ui-corner-top", + "ui-selectmenu-button-closed": "ui-corner-all" + }, + disabled: null, + icons: { + button: "ui-icon-triangle-1-s" + }, + position: { + my: "left top", + at: "left bottom", + collision: "none" + }, + width: false, + + // callbacks + change: null, + close: null, + create: null, + focus: null, + open: null, + select: null + } +}); + +} ); diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js new file mode 100644 index 000000000..e5807817e --- /dev/null +++ b/tests/unit/selectmenu/core.js @@ -0,0 +1,332 @@ +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { + +module( "selectmenu: core" ); + +test( "markup structure", function( assert ) { + expect( 4 ); + + var element = $( "#files" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + menuWrap = menu.parent(); + + assert.hasClasses( button, + "ui-selectmenu-button ui-selectmenu-button-closed ui-widget" ); + assert.lacksClasses( button, "ui-selectmenu-button-open" ); + assert.hasClasses( menuWrap, "ui-selectmenu-menu" ); + assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" ); +}); + +asyncTest( "accessibility", function() { + var wrappers, button, menu, + element = $( "#speed" ).attr( "title", "A demo title" ); + + element.find( "option" ).each(function( index ) { + $( this ).attr( "title", "A demo title #" + index ); + }); + + element.selectmenu(); + button = element.selectmenu( "widget" ); + menu = element.selectmenu( "menuWidget" ); + + button.simulate( "focus" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); + + expect( 13 + wrappers.length * 3 ); + + setTimeout(function() { + equal( button.attr( "role" ), "combobox", "button role" ); + equal( button.attr( "aria-haspopup" ), "true", "button aria-haspopup" ); + equal( button.attr( "aria-expanded" ), "false", "button aria-expanded" ); + equal( button.attr( "aria-autocomplete" ), "list", "button aria-autocomplete" ); + equal( button.attr( "aria-owns" ), menu.attr( "id" ), "button aria-owns" ); + equal( + button.attr( "aria-labelledby" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "button link aria-labelledby" + ); + equal( button.attr( "tabindex" ), 0, "button link tabindex" ); + equal( button.attr( "title" ), "A demo title", "button title" ); + + equal( menu.attr( "role" ), "listbox", "menu role" ); + equal( menu.attr( "aria-labelledby" ), button.attr( "id" ), "menu aria-labelledby" ); + equal( menu.attr( "aria-hidden" ), "true", "menu aria-hidden" ); + equal( menu.attr( "tabindex" ), 0, "menu tabindex" ); + equal( + menu.attr( "aria-activedescendant" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "menu aria-activedescendant" + ); + $.each( wrappers, function( index ) { + var item = $( this ); + equal( item.attr( "role" ), "option", "menu item #" + index +" role" ); + equal( item.attr( "tabindex" ), -1, "menu item #" + index +" tabindex" ); + equal( item.attr( "title" ), "A demo title #" + index, "menu item #" + index + " title" ); + }); + start(); + }); +}); + +test( "_renderButtonItem()", function() { + expect( 2 ); + + var option, + element = $( "#speed" ).selectmenu(), + instance = element.selectmenu( "instance" ), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + instance._renderButtonItem = function( item ) { + var buttonItem = $( "" ); + this._setText( buttonItem, item.label + item.index ); + + return buttonItem; + }; + + element.selectmenu( "refresh" ); + option = element.find( "option:selected" ); + equal( + option.text() + element[ 0 ].selectedIndex, + button.text(), + "refresh: button item text" + ); + + button.trigger( "click" ); + menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" ); + option = element.find( "option" ).last(); + equal( + option.text() + element[ 0 ].selectedIndex, + button.text(), + "click: button item text" + ); +}); + +$.each([ + { + type: "default", + selector: "#speed" + }, + { + type: "optgroups", + selector: "#files" + } +], function( i, settings ) { + asyncTest( "state synchronization - after keydown on button - " + settings.type, function() { + expect( 4 ); + + var wrappers, + element = $( settings.selector ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + + // Get the option after the currently selected option because + // we simulate pressing DOWN. + selected = element.find( "option:selected" ).next(); + + button.simulate( "focus" ); + setTimeout(function() { + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); + + button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( + menu.attr( "aria-activedescendant" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "menu aria-activedescendant" + ); + equal( + button.attr( "aria-activedescendant" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "button aria-activedescendant" + ); + equal( + element.find( "option:selected" ).val(), + selected.val() , + "original select state" + ); + equal( button.text(), selected.text(), "button text" ); + start(); + }); + }); + + asyncTest( "state synchronization - after click on item - " + settings.type, function() { + expect( 4 ); + + var wrappers, + element = $( settings.selector ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + selected = element.find( "option" ).last(); + + button.simulate( "focus" ); + setTimeout(function() { + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); + + button.trigger( "click" ); + menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" ); + equal( + menu.attr( "aria-activedescendant" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "menu aria-activedescendant" + ); + equal( + button.attr( "aria-activedescendant" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "button aria-activedescendant" + ); + equal( + element.find( "option:selected" ).val(), + selected.val(), + "original select state" + ); + equal( button.text(), selected.text(), "button text" ); + start(); + }, 1 ); + }); + + asyncTest( "state synchronization - " + + "after focus item and keydown on button - " + settings.type, function() { + expect( 4 ); + + var wrappers, + element = $( settings.selector ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + options = element.find( "option" ); + + // Init menu + button.simulate( "focus" ); + + setTimeout(function() { + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); + + // Open menu and click first item + button.trigger( "click" ); + wrappers.first().simulate( "mouseover" ).trigger( "click" ); + + // Open menu again and hover item + button.trigger( "click" ); + wrappers.eq( 3 ).simulate( "mouseover" ); + + // Close and use keyboard control on button + button.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + button.simulate( "focus" ); + setTimeout(function() { + button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + + equal( menu.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ), + "menu aria-activedescendant" ); + equal( button.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ), + "button aria-activedescendant" ); + equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() , + "original select state" ); + equal( button.text(), options.eq( 1 ).text(), "button text" ); + start(); + }); + }); + }); + + asyncTest( "item looping - " + settings.type, function() { + expect( 4 ); + + var wrappers, + element = $( settings.selector ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + button.simulate( "focus" ); + setTimeout(function() { + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); + + button.trigger( "click" ); + wrappers.first().simulate( "mouseover" ).trigger( "click" ); + equal( element[ 0 ].selectedIndex, 0, "First item is selected" ); + button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" ); + + button.trigger( "click" ); + wrappers.last().simulate( "mouseover" ).trigger( "click" ); + equal( element[ 0 ].selectedIndex, wrappers.length - 1, "Last item is selected" ); + button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( element[ 0 ].selectedIndex, wrappers.length - 1, "No looping behind last item" ); + start(); + }); + }); + + asyncTest( "item focus and active state - " + settings.type, function() { + expect( 4 ); + + var wrappers, focusedItem, + element = $( settings.selector ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + button.simulate( "focus" ); + setTimeout(function() { + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); + + button.trigger( "click" ); + setTimeout(function() { + checkItemClasses(); + + wrappers.eq( 3 ).simulate( "mouseover" ).trigger( "click" ); + + button.trigger( "click" ); + wrappers.eq( 2 ).simulate( "mouseover" ); + $( document ).trigger( "click" ); + + button.trigger( "click" ); + wrappers.eq( 1 ).simulate( "mouseover" ); + $( document ).trigger( "click" ); + + button.trigger( "click" ); + setTimeout(function() { + checkItemClasses(); + start(); + }); + }); + }); + + function checkItemClasses() { + focusedItem = menu.find( ".ui-menu-item-wrapper.ui-state-active" ); + equal( focusedItem.length, 1, "only one item has ui-state-focus class" ); + equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), + "selected item has ui-state-focus class" ); + } + }); + + asyncTest( "empty option - " + settings.type, function( assert ) { + expect( 7 ); + + var button, menu, wrappers, wrapper, + element = $( settings.selector ); + + element.find( "option" ).first().text( "" ); + element.selectmenu(); + button = element.selectmenu( "widget" ); + menu = element.selectmenu( "menuWidget" ); + + button.simulate( "focus" ); + setTimeout(function() { + wrappers = menu.find( "li:not(.ui-selectmenu-optgroup) .ui-menu-item-wrapper" ); + wrapper = wrappers.first(); + + button.trigger( "click" ); + + equal( wrappers.length, element.find( "option" ).length, + "correct amount of list elements" ); + ok( wrapper.outerHeight() > 10, "empty item seems to have reasonable height" ); + ok( wrapper.attr( "id" ), "empty item has id attribute" ); + assert.hasClasses( wrapper.parent(), "ui-menu-item" ); + assert.lacksClasses( wrapper, "ui-menu-divider" ); + equal( wrapper.attr( "tabindex" ), -1, "empty item has tabindex" ); + equal( wrapper.attr( "role" ), "option", "empty item has role option" ); + + start(); + }); + }); +}); + +} ); diff --git a/tests/unit/selectmenu/events.js b/tests/unit/selectmenu/events.js new file mode 100644 index 000000000..d5c463fa9 --- /dev/null +++ b/tests/unit/selectmenu/events.js @@ -0,0 +1,136 @@ +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { + +module( "selectmenu: events", { + setup: function() { + this.element = $( "#speed" ); + } +}); + +asyncTest( "change", function() { + expect( 3 ); + + var button, menu, options, + optionIndex = 1; + + this.element.selectmenu({ + change: function ( event, ui ) { + equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" ); + equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], + "ui.item.element contains original option element" ); + equal( ui.item.value, options.eq( optionIndex ).text(), + "ui.item.value property updated correctly" ); + } + }); + + button = this.element.selectmenu( "widget" ); + menu = this.element.selectmenu( "menuWidget" ); + options = this.element.find( "option" ); + + button.simulate( "focus" ); + + setTimeout(function() { + button.trigger( "click" ); + menu.find( "li" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" ); + start(); + }); +}); + +test( "close", function() { + expect( 2 ); + + var shouldFire; + + this.element.selectmenu({ + close: function() { + ok( shouldFire, "close event fired on close" ); + } + }); + + shouldFire = false; + this.element.selectmenu( "open" ); + shouldFire = true; + this.element.selectmenu( "close" ); + shouldFire = false; + this.element.selectmenu( "open" ); + shouldFire = true; + $( "body" ).trigger( "mousedown" ); +}); + +asyncTest( "focus", function() { + expect( 9 ); + + var button, menu, links, + that = this, + optionIndex = this.element[ 0 ].selectedIndex + 1, + options = this.element.find( "option" ); + + this.element.selectmenu({ + focus: function( event, ui ) { + ok( true, "focus event fired on element #" + optionIndex + " mouseover" ); + equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" ); + equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], + "ui.item.element contains original option element" ); + } + }); + + button = this.element.selectmenu( "widget" ); + menu = this.element.selectmenu( "menuWidget" ); + + button.simulate( "focus" ); + setTimeout(function() { + button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + + button.trigger( "click" ); + links = menu.find( "li.ui-menu-item" ); + optionIndex = 0; + links.eq( optionIndex ).simulate( "mouseover" ); + optionIndex += 1; + links.eq( optionIndex ).simulate( "mouseover" ); + + // This tests for unwanted, additional focus event on close + that.element.selectmenu( "close" ); + start(); + }); +}); + +test( "open", function() { + expect( 1 ); + + this.element.selectmenu({ + open: function() { + ok( true, "open event fired on open" ); + } + }); + + this.element.selectmenu( "open" ); +}); + +asyncTest( "select", function() { + expect( 3 ); + + this.element.selectmenu({ + select: function( event, ui ) { + ok( true, "select event fired on item select" ); + equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" ); + equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], + "ui.item.element contains original option element" ); + } + }); + + var button = this.element.selectmenu( "widget" ), + menu = this.element.selectmenu( "menuWidget" ), + options = this.element.find( "option" ), + optionIndex = 1; + + button.simulate( "focus" ); + setTimeout(function() { + button.trigger( "click" ); + menu.find( "li" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" ); + start(); + }); +}); + +} ); diff --git a/tests/unit/selectmenu/methods.js b/tests/unit/selectmenu/methods.js new file mode 100644 index 000000000..8481e804e --- /dev/null +++ b/tests/unit/selectmenu/methods.js @@ -0,0 +1,189 @@ +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { + +module( "selectmenu: methods" ); + +test( "destroy", function( assert ) { + expect( 1 ); + assert.domEqual( "#speed", function() { + $( "#speed" ).selectmenu().selectmenu( "destroy" ); + }); +}); + +test( "open / close", function() { + expect( 5 ); + + var element = $( "#speed" ).selectmenu(), + menu = element.selectmenu( "menuWidget" ); + + ok( menu.is( ":hidden" ), "menu hidden on init" ); + + element.selectmenu( "open" ); + ok( menu.is( ":visible" ), "open: menu visible" ); + equal( menu.attr( "aria-hidden" ), "false", "open: menu aria-disabled" ); + + element.selectmenu( "close" ); + ok( menu.is( ":hidden" ), "close: menu hidden" ); + equal( menu.attr( "aria-hidden" ), "true", "close: menu aria-disabled" ); +}); + +test( "enable / disable", function() { + expect( 10 ); + + var element = $( "#speed" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + element.selectmenu( "disable" ); + ok( element.selectmenu( "option", "disabled" ), "disable: widget option" ); + equal( element.attr( "disabled" ), "disabled", "disable: native select disabled" ); + equal( button.attr( "aria-disabled" ), "true", "disable: button ARIA" ); + equal( button.attr( "tabindex" ), -1, "disable: button tabindex" ); + equal( menu.attr( "aria-disabled" ), "true", "disable: menu ARIA" ); + + element.selectmenu( "enable" ); + ok( !element.selectmenu( "option", "disabled" ), "enable: widget option" ); + equal( element.attr( "disabled" ), undefined, "enable: native select disabled" ); + equal( button.attr( "aria-disabled" ), "false", "enable: button ARIA" ); + equal( button.attr( "tabindex" ), 0, "enable: button tabindex" ); + equal( menu.attr( "aria-disabled" ), "false", "enable: menu ARIA" ); +}); + +test( "refresh - structure", function() { + expect( 3 ); + + var menuItems, + element = $( "#speed" ).selectmenu(), + menu = element.selectmenu( "menuWidget" ), + options = element.find( "option" ); + + options.eq( 0 ) + .attr( "value", "changed_value" ) + .text( "Changed value" ); + options.eq( 2 ).remove(); + options.eq( 3 ).remove(); + element.append( "" ); + element.selectmenu( "refresh" ); + + options = element.find( "option" ); + menuItems = menu.find( "li" ).not( ".ui-selectmenu-optgroup" ); + + equal( options.length, menuItems.length, "menu item length" ); + equal( "Added option", menuItems.last().text(), "added item" ); + equal( "Changed value", menuItems.eq( 0 ).text(), "changed item" ); +}); + +asyncTest( "refresh - change selected option", function() { + expect( 4 ); + + var element = $( "#speed" ).selectmenu(), + button = element.selectmenu( "widget" ); + + equal( element.find( "option:selected" ).text(), button.text(), "button text after init" ); + + button.simulate( "focus" ); + setTimeout(function() { + equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" ); + + element[ 0 ].selectedIndex = 0; + element.selectmenu( "refresh" ); + equal( element.find( "option:selected" ).text(), button.text(), + "button text after changing selected option" ); + + element.find( "option" ).prop( "selected", false ); + element.append( "" ); + element.selectmenu( "refresh" ); + equal( "Selected option", button.text(), "button text after adding selected option" ); + + start(); + }); +}); + +test( "refresh - disabled select", function() { + expect( 4 ); + + var element = $( "#speed" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + element.prop( "disabled", true ); + element.selectmenu( "refresh" ); + + ok( element.selectmenu( "option", "disabled" ), "widget option" ); + equal( button.attr( "aria-disabled" ), "true", "button ARIA" ); + equal( button.attr( "tabindex" ), -1, "button tabindex" ); + equal( menu.attr( "aria-disabled" ), "true", "menu ARIA" ); +}); + +test( "refresh - disabled option", function( assert ) { + expect( 1 ); + + var disabledItem, + element = $( "#speed" ).selectmenu(), + menu = element.selectmenu( "menuWidget" ).parent(); + + element.find( "option" ).eq( 2 ).prop( "disabled", true ); + element.selectmenu( "refresh" ); + + disabledItem = menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).eq( 2 ); + assert.hasClasses( disabledItem, "ui-state-disabled" ); +}); + +test( "refresh - disabled optgroup", function( assert ) { + var i, item, + element = $( "#files" ).selectmenu(), + menu = element.selectmenu( "menuWidget" ).parent(), + originalDisabledOptgroup = element.find( "optgroup" ).first(), + originalDisabledOptions = originalDisabledOptgroup.find( "option" ); + + expect( 2 + originalDisabledOptions.length ); + + originalDisabledOptgroup.prop( "disabled", true ); + element.selectmenu( "refresh" ); + + item = menu.find( "li.ui-selectmenu-optgroup" ).first(); + + assert.hasClasses( item, "ui-state-disabled" ); + + equal( + menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).filter( ".ui-state-disabled" ).length, + originalDisabledOptions.length, + "disabled options" + ); + for ( i = 0; i < originalDisabledOptions.length; i++ ) { + item = item.next( "li" ); + assert.hasClasses( item, "ui-state-disabled" ); + } +}); + +test( "refresh - remove all options", function() { + expect( 2 ); + + var element = $( "#speed" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + element.children().remove(); + element.selectmenu( "refresh" ); + equal( button.find( ".ui-selectmenu-text" ).html(), $( " " ).html(), + "Empty button text" ); + equal( menu.children().length, 0, "Empty menu" ); +}); + +test( "widget and menuWidget", function( assert ) { + expect( 4 ); + + var element = $( "#speed" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + equal( button.length, 1, "button: one element" ); + assert.hasClasses( button, "ui-selectmenu-button" ); + + equal( menu.length, 1, "Menu Widget: one element" ); + ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" ); +}); + +} ); diff --git a/tests/unit/selectmenu/options.js b/tests/unit/selectmenu/options.js new file mode 100644 index 000000000..deb7a6d3a --- /dev/null +++ b/tests/unit/selectmenu/options.js @@ -0,0 +1,128 @@ +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { + +module( "selectmenu: options" ); + +test( "appendTo: null", function() { + expect( 1 ); + + var element = $( "#speed" ).selectmenu(); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], document.body, + "defaults to body" ); +}); + +test( "appendTo: explicit", function() { + expect( 6 ); + + var detached = $( "
" ), + element = $( "#speed" ); + + element.selectmenu({ + appendTo: ".selectmenu-wrap" + }); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], + $( "#selectmenu-wrap1" )[ 0 ], "first found element" ); + equal( $( "#selectmenu-wrap2 .ui-selectmenu" ).length, 0, "only appends to one element" ); + element.selectmenu( "destroy" ); + + element.selectmenu().selectmenu( "option", "appendTo", "#selectmenu-wrap1" ); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], + $( "#selectmenu-wrap1" )[ 0 ], "modified after init" ); + element.selectmenu( "destroy" ); + + element.selectmenu({ + appendTo: detached + }); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], + "detached jQuery object" ); + element.selectmenu( "destroy" ); + + element.selectmenu({ + appendTo: detached[ 0 ] + }); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], + "detached DOM element" ); + element.selectmenu( "destroy" ); + + element.selectmenu().selectmenu( "option", "appendTo", detached ); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], + "detached DOM element via option()" ); + element.selectmenu( "destroy" ); +}); + +test( "appendTo: ui-front", function() { + expect( 2 ); + + var element = $( "#speed" ); + + $( "#selectmenu-wrap2" ).addClass( "ui-front" ); + element.selectmenu(); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], + $( "#selectmenu-wrap2" )[ 0 ], "null, inside .ui-front" ); + element.selectmenu( "destroy" ); + + element.selectmenu({ + appendTo: $() + }); + equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], + $( "#selectmenu-wrap2" )[ 0 ], "empty jQuery object, inside .ui-front" ); +}); + +test( "CSS styles", function( assert ) { + expect( 5 ); + + var element = $( "#speed" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + element.selectmenu( "open" ); + + assert.hasClasses( button, "ui-corner-top" ); + assert.lacksClasses( button, "ui-corner-all" ); + assert.hasClasses( button.find( "span.ui-icon" ), "ui-icon-triangle-1-s" ); + assert.hasClasses( menu, "ui-corner-bottom" ); + assert.lacksClasses( button, "ui-corner-all" ); +}); + +test( "width", function() { + expect( 6 ); + + var button, + element = $( "#speed" ); + + element.selectmenu(); + button = element.selectmenu( "widget" ); + + equal( button[ 0 ].style.width, "", "no inline style" ); + + element.selectmenu( "option", "width", null ); + equal( button.outerWidth(), element.outerWidth(), "button width auto" ); + + element.outerWidth( 100 ); + element.selectmenu( "refresh" ); + equal( button.outerWidth(), 100, "button width set by CSS" ); + + element + .width( "" ) + .selectmenu( "option", "width", 100 ) + .selectmenu( "refresh" ); + equal( button.outerWidth(), 100, "button width set by JS option" ); + + element + .append( $( "