aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
Diffstat (limited to 'tests')
-rw-r--r--tests/unit/selectmenu/all.html30
-rw-r--r--tests/unit/selectmenu/selectmenu.html91
-rw-r--r--tests/unit/selectmenu/selectmenu_common.js24
-rw-r--r--tests/unit/selectmenu/selectmenu_core.js235
-rw-r--r--tests/unit/selectmenu/selectmenu_events.js135
-rw-r--r--tests/unit/selectmenu/selectmenu_methods.js169
-rw-r--r--tests/unit/selectmenu/selectmenu_options.js60
-rw-r--r--tests/visual/compound/dialog_widgets.html11
-rw-r--r--tests/visual/compound/tabs_selectmenu.html53
-rw-r--r--tests/visual/selectmenu/selectmenu.html248
10 files changed, 1055 insertions, 1 deletions
diff --git a/tests/unit/selectmenu/all.html b/tests/unit/selectmenu/all.html
new file mode 100644
index 000000000..c3089ae66
--- /dev/null
+++ b/tests/unit/selectmenu/all.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu Test Suite</title>
+
+ <script src="../../../jquery-1.9.1.js"></script>
+
+ <link rel="stylesheet" href="../../../external/qunit.css">
+ <link rel="stylesheet" href="../qunit-composite.css">
+ <script src="../../../external/qunit.js"></script>
+ <script src="../qunit-composite.js"></script>
+ <script src="../subsuite.js"></script>
+
+ <script>
+ testAllVersions( "selectmenu" );
+ </script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+
+</div>
+</body>
+</html>
diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html
new file mode 100644
index 000000000..584a47b53
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu Test Suite</title>
+
+ <script src="../../jquery.js"></script>
+ <link rel="stylesheet" href="../../../external/qunit.css">
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../jquery.simulate.js"></script>
+ <script src="../testsuite.js"></script>
+ <script>
+ TestHelpers.loadResources({
+ css: [ "ui.core", "ui.menu" , "ui.selectmenu" ],
+ js: [
+ "ui/jquery.ui.core.js",
+ "ui/jquery.ui.widget.js",
+ "ui/jquery.ui.position.js",
+ "ui/jquery.ui.menu.js",
+ "ui/jquery.ui.selectmenu.js"
+ ]
+ });
+ </script>
+
+ <script src="selectmenu_common.js"></script>
+ <script src="selectmenu_core.js"></script>
+ <script src="selectmenu_events.js"></script>
+ <script src="selectmenu_methods.js"></script>
+ <script src="selectmenu_options.js"></script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+ <div id="selectmenu-wrap1" class="selectmenu-wrap"></div>
+
+ <div id="selectmenu-wrap2" class="selectmenu-wrap">
+ <label for="speed">Select a speed:</label>
+ <select name="speed" id="speed">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </div>
+
+ <label for="number">Select a number:</label>
+ <select name="number" id="number">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option value="14">14</option>
+ <option value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+
+ <label for="files">Select a file:</label>
+ <select name="files" id="files">
+ <optgroup label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+
+</div>
+</body>
+</html>
diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/selectmenu_common.js
new file mode 100644
index 000000000..d5addff9a
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_common.js
@@ -0,0 +1,24 @@
+TestHelpers.commonWidgetTests( "selectmenu", {
+ defaults: {
+ appendTo: null,
+ disabled: false,
+ icons: {
+ button: "ui-icon-triangle-1-s"
+ },
+ position: {
+ my: "left top",
+ at: "left bottom",
+ collision: "none"
+ },
+ widthButton: null,
+ widthMenu: null,
+
+ // callbacks
+ create: null,
+ change: null,
+ close: null,
+ focus: null,
+ open: null,
+ select: null
+ }
+});
diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js
new file mode 100644
index 000000000..d8b449828
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_core.js
@@ -0,0 +1,235 @@
+(function( $ ) {
+
+module( "selectmenu: core" );
+
+asyncTest( "accessibility", function() {
+ var links,
+ element = $( "#speed" ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" );
+
+ button.simulate( "focus" );
+ links = menu.find( "li.ui-menu-item a" );
+
+ expect( 12 + links.length * 2 );
+
+ setTimeout(function() {
+ equal( button.attr( "role" ), "combobox", "button link role" );
+ equal( button.attr( "aria-haspopup" ), "true", "button link aria-haspopup" );
+ equal( button.attr( "aria-expanded" ), "false", "button link aria-expanded" );
+ equal( button.attr( "aria-autocomplete" ), "list", "button link aria-autocomplete" );
+ equal( button.attr( "aria-owns" ), menu.attr("id"), "button link aria-owns" );
+ equal(
+ button.attr( "aria-labelledby" ),
+ links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+ "button link aria-labelledby"
+ );
+ equal( button.attr( "tabindex" ), 0, "button link tabindex" );
+
+ 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" ),
+ links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+ "menu aria-activedescendant"
+ );
+ $.each( links, function( index ){
+ equal( $( this ).attr( "role" ), "option", "menu link #" + index +" role" );
+ equal( $( this ).attr( "tabindex" ), -1, "menu link #" + index +" tabindex" );
+ });
+ start();
+ });
+});
+
+
+$.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 links,
+ element = $( settings.selector ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" ),
+ selected = element.find( "option:selected" );
+
+ button.simulate( "focus" );
+ setTimeout(function() {
+ links = menu.find("li.ui-menu-item a");
+
+ button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+ equal(
+ menu.attr( "aria-activedescendant" ),
+ links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+ "menu aria-activedescendant"
+ );
+ equal(
+ button.attr( "aria-activedescendant" ),
+ links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+ "button aria-activedescendant"
+ );
+ equal(
+ element.find( "option:selected" ).val(),
+ selected.next( "option" ).val() ,
+ "original select state"
+ );
+ equal( button.text(), selected.next( "option" ).text(), "button text" );
+ start();
+ }, 1 );
+ });
+
+ asyncTest( "state synchronization - after click on item - " + settings.type, function () {
+ expect( 4 );
+
+ var links,
+ element = $( settings.selector ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" );
+
+ button.simulate( "focus" );
+ setTimeout(function() {
+ links = menu.find("li.ui-menu-item a");
+
+ button.trigger( "click" );
+ menu.find( "a" ).last().simulate( "mouseover" ).trigger( "click" );
+ equal(
+ menu.attr( "aria-activedescendant" ),
+ links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+ "menu aria-activedescendant"
+ );
+ equal(
+ button.attr( "aria-activedescendant" ),
+ links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+ "button aria-activedescendant"
+ );
+ equal(
+ element.find( "option:selected" ).val(),
+ element.find( "option" ).last().val(),
+ "original select state"
+ );
+ equal( button.text(), element.find( "option" ).last().text(), "button text" );
+ start();
+ }, 1 );
+ });
+
+ asyncTest( "state synchronization - after focus item and keydown on button - " + settings.type, function () {
+ expect( 4 );
+
+ var links,
+ element = $( settings.selector ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" ),
+ options = element.find( "option" );
+
+ // init menu
+ button.simulate( "focus" );
+
+ setTimeout(function() {
+ links = menu.find( "li.ui-menu-item a" );
+ // open menu and click first item
+ button.trigger( "click" );
+ links.first().simulate( "mouseover" ).trigger( "click" );
+ // open menu again and hover item
+ button.trigger( "click" );
+ links.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" ), links.eq( 1 ).attr( "id" ), "menu aria-activedescendant" );
+ equal( button.attr( "aria-activedescendant" ), links.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();
+ }, 1 );
+ }, 1 );
+ });
+
+ asyncTest( "item looping - " + settings.type, function () {
+ expect( 2 );
+
+ var links,
+ element = $( settings.selector ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" );
+
+ // init menu
+ button.simulate( "focus" );
+
+ setTimeout(function() {
+ links = menu.find( "li.ui-menu-item a" );
+
+ button.trigger( "click" );
+ links.first().simulate( "mouseover" ).trigger( "click" );
+ button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
+ equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" );
+
+ button.trigger( "click" );
+ links.last().simulate( "mouseover" ).trigger( "click" );
+ button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+ equal( element[ 0 ].selectedIndex + 1, links.length, "No looping behind last item" );
+ start();
+ }, 1 );
+ });
+
+ asyncTest( "item focus and active state - " + settings.type, function () {
+ expect( 8 );
+
+ var element = $( settings.selector ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" ),
+ links, focusedItem, activeItem;
+
+ // init menu
+ button.simulate( "focus" );
+
+ setTimeout(function() {
+ links = menu.find( "li.ui-menu-item a" );
+
+ button.trigger( "click" );
+ setTimeout(function() {
+ checkItemClasses();
+
+ links.eq( 3 ).simulate( "mouseover" ).trigger( "click" );
+
+ button.trigger( "click" );
+ links.eq( 2 ).simulate( "mouseover" );
+ $( document ).trigger( "click" );
+
+ button.trigger( "click" );
+ links.eq( 1 ).simulate( "mouseover" );
+ $( document ).trigger( "click" );
+
+ button.trigger( "click" );
+ setTimeout(function() {
+ checkItemClasses();
+ start();
+ }, 350 );
+ }, 350 );
+ }, 1 );
+
+ function checkItemClasses() {
+ focusedItem = menu.find( "li.ui-menu-item a.ui-state-focus" );
+ equal( focusedItem.length, 1, "only one item has ui-state-focus class" );
+ equal( focusedItem.attr( "id" ), links.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-focus class" );
+
+ activeItem = menu.find( "li.ui-menu-item a.ui-state-active" );
+ equal( activeItem.length, 1, "only one item has ui-state-active class" );
+ equal( activeItem.attr( "id" ), links.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-active class" );
+ }
+ });
+});
+
+})( jQuery );
diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/selectmenu_events.js
new file mode 100644
index 000000000..353780ee5
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_events.js
@@ -0,0 +1,135 @@
+(function ( $ ) {
+
+module( "selectmenu: events", {
+ setup: function () {
+ this.element = $( "#speed" );
+ }
+});
+
+asyncTest( "change", function () {
+ expect( 5 );
+
+ var optionIndex = 1,
+ button, menu, options;
+
+ this.element.selectmenu({
+ change: function ( event, ui ) {
+ ok( event, "change event fired on change" );
+ equal( event.type, "selectmenuchange", "event type set to selectmenuchange" );
+ 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" ).parent();
+ options = this.element.find( "option" );
+
+ button.simulate( "focus" );
+
+ setTimeout(function() {
+ button.trigger( "click" );
+ menu.find( "a" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" );
+ start();
+ }, 1 );
+});
+
+
+test( "close", function () {
+ expect( 4 );
+
+ this.element.selectmenu({
+ close: function ( event ) {
+ ok( event, "close event fired on close" );
+ equal( event.type, "selectmenuclose", "event type set to selectmenuclose" );
+ }
+ });
+
+ this.element.selectmenu( "open" ).selectmenu( "close" );
+
+ this.element.selectmenu( "open" );
+ $( "body" ).trigger( "click" );
+});
+
+
+asyncTest( "focus", function () {
+ expect( 12 );
+
+ var that = this,
+ optionIndex = this.element[ 0 ].selectedIndex + 1,
+ options = this.element.find( "option" ),
+ button, menu, links;
+
+ this.element.selectmenu({
+ focus: function ( event, ui ) {
+ ok( event, "focus event fired on element #" + optionIndex + " mouseover" );
+ equal( event.type, "selectmenufocus", "event type set to selectmenufocus" );
+ 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 a" );
+ 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();
+ }, 1 );
+});
+
+
+test( "open", function () {
+ expect( 2 );
+
+ this.element.selectmenu({
+ open: function ( event ) {
+ ok( event, "open event fired on open" );
+ equal( event.type, "selectmenuopen", "event type set to selectmenuopen" );
+ }
+ });
+
+ this.element.selectmenu( "open" );
+});
+
+
+asyncTest( "select", function () {
+ expect( 4 );
+
+ this.element.selectmenu({
+ select: function ( event, ui ) {
+ ok( event, "select event fired on item select" );
+ equal( event.type, "selectmenuselect", "event type set to selectmenuselect" );
+ 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" ).parent(),
+ options = this.element.find( "option" ),
+ optionIndex = 1;
+
+ button.simulate( "focus" );
+
+ setTimeout(function() {
+ button.trigger( "click" );
+ menu.find( "a" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" );
+ start();
+ }, 1 );
+});
+
+})(jQuery);
diff --git a/tests/unit/selectmenu/selectmenu_methods.js b/tests/unit/selectmenu/selectmenu_methods.js
new file mode 100644
index 000000000..f2b56e835
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_methods.js
@@ -0,0 +1,169 @@
+(function( $ ) {
+
+module( "selectmenu: methods" );
+
+test( "destroy", function() {
+ expect( 1 );
+ domEqual( "#speed", function() {
+ $( "#speed" ).selectmenu().selectmenu( "destroy" );
+ });
+});
+
+
+test( "open / close", function() {
+ expect( 4 );
+
+ var element = $( "#speed" ).selectmenu(),
+ menu = element.selectmenu( "menuWidget" );
+
+ 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 wrapper ARIA" );
+ equal( button.attr( "tabindex" ), -1, "disable: button tabindex" );
+ equal( menu.attr( "aria-disabled" ), "true", "disable: menu wrapper 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 wrapper ARIA" );
+ equal( button.attr( "tabindex" ), 0, "enable: button tabindex" );
+ equal( menu.attr( "aria-disabled" ), "false", "enable: menu wrapper ARIA" );
+});
+
+
+test( "refresh - structure", function () {
+ expect( 3 );
+
+ var element = $( "#speed" ).selectmenu(),
+ menu = element.selectmenu( "menuWidget" ).parent();
+
+ element.find( "option" ).eq( 2 ).remove();
+ element.find( "option" ).eq( 3 ).remove();
+ element.append( "<option value=\"added_option\">Added option</option>" );
+ element.find( "option" ).first()
+ .attr( "value", "changed_value" )
+ .text( "Changed value" );
+ element.selectmenu( "refresh" );
+
+ equal( element.find( "option" ).length, menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).length, "menu item length" );
+ equal( element.find( "option" ).last().text(), menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).last().text(), "added item" );
+ equal( element.find( "option" ).first().text(), menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).first().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" ).removeAttr( "selected" );
+ element.prepend( "<option selected value=\"selected_option\">Selected option</option>" );
+ element.selectmenu( "refresh" );
+ equal( element.find( "option:selected" ).text(), button.text(), "button text after adding selected option" );
+
+ start();
+ }, 1 );
+});
+
+
+test( "refresh - disabled select", function () {
+ expect( 4 );
+
+ var element = $( "#speed" ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" );
+
+ element.attr( "disabled", "disabled" );
+ element.selectmenu( "refresh" );
+
+ ok( element.selectmenu( "option", "disabled" ), "widget option" );
+ equal( button.attr( "aria-disabled" ), "true", "button wrapper ARIA" );
+ equal( button.attr( "tabindex" ), -1, "button tabindex" );
+ equal( menu.attr( "aria-disabled" ), "true", "menu wrapper ARIA" );
+});
+
+
+test( "refresh - disabled option", function () {
+ expect(1);
+
+ var disabledItem,
+ element = $( "#speed" ).selectmenu(),
+ menu = element.selectmenu( "menuWidget" ).parent();
+
+ element.attr( "disabled", "disabled" );
+ element.find( "option" ).eq( 2 ).attr( "disabled", "disabled" );
+ element.selectmenu( "refresh" );
+
+ disabledItem = menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).eq(2);
+ ok( disabledItem.hasClass( "ui-state-disabled" ), "class" );
+});
+
+
+test( "refresh - disabled optgroup", function () {
+
+ 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.attr( "disabled", "disabled" );
+ element.selectmenu( "refresh" );
+
+ item = menu.find( "li.ui-selectmenu-optgroup" ).first();
+ ok( item.hasClass( "ui-state-disabled" ), "class" );
+
+ 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" );
+ ok( item.hasClass( "ui-state-disabled" ), "item #" + i + ": class" );
+ }
+});
+
+test( "widget and menuWidget", function() {
+ expect( 4 );
+ var element = $( "#speed" ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" );
+
+ element.selectmenu( "refresh" );
+
+ equal( button.length, 1, "button: one element" );
+ ok( button.is( ".ui-selectmenu-button" ), "button: class" );
+
+ equal( menu.length, 1, "Menu Widget: one element" );
+ ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" );
+});
+
+})( jQuery );
diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js
new file mode 100644
index 000000000..82ea6a8b4
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_options.js
@@ -0,0 +1,60 @@
+(function ( $ ) {
+
+module( "selectmenu: options" );
+
+test( "appendTo another element", function () {
+ expect( 8 );
+
+ var detached = $( "<div>" ),
+ element = $( "#speed" ).selectmenu();
+ equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], document.body, "defaults to body" );
+ element.selectmenu( "destroy" );
+
+ 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" );
+
+ $( "#selectmenu-wrap2" ).addClass( "ui-front" );
+ element.selectmenu();
+ equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], $( "#selectmenu-wrap2" )[ 0 ], "null, inside .ui-front" );
+ element.selectmenu( "destroy" );
+ $( "#selectmenu-wrap2" ).removeClass( "ui-front" );
+
+ 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( "CSS styles", function () {
+ expect( 2 );
+
+ var element = $( "#speed" ).selectmenu(),
+ button = element.selectmenu( "widget" ),
+ menu = element.selectmenu( "menuWidget" );
+
+ element.selectmenu( "open" );
+ ok( button.hasClass( "ui-corner-top" ) && !button.hasClass( "ui-corner-all" ) && button.find( "span.ui-icon" ).hasClass( "ui-icon-triangle-1-s" ), "button styles dropdown" );
+ ok( menu.hasClass( "ui-corner-bottom" ) && !menu.hasClass( "ui-corner-all" ), "menu styles dropdown" );
+});
+
+})( jQuery );
diff --git a/tests/visual/compound/dialog_widgets.html b/tests/visual/compound/dialog_widgets.html
index f5b0be95e..25bbd123f 100644
--- a/tests/visual/compound/dialog_widgets.html
+++ b/tests/visual/compound/dialog_widgets.html
@@ -22,8 +22,10 @@
<script src="../../../ui/jquery.ui.slider.js"></script>
<script src="../../../ui/jquery.ui.tabs.js"></script>
<script src="../../../ui/jquery.ui.tooltip.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
<script>
$(function() {
+ $( "#dialog" ).dialog();
$( "[title]" ).tooltip();
$( "#accordion" ).accordion();
$( "#autocomplete" ).autocomplete({
@@ -45,7 +47,7 @@
}
});
$( "#tabs" ).tabs();
- $( "#dialog" ).dialog();
+ $( '#select' ).selectmenu();
$( "#dialog2" ).dialog({
autoOpen: false,
width: 100,
@@ -92,6 +94,13 @@
<div id="tabs-2">Phasellus mattis tincidunt nibh.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
+ <select id="select">
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
</div>
<div id="dialog2">
Yay, another dialog.
diff --git a/tests/visual/compound/tabs_selectmenu.html b/tests/visual/compound/tabs_selectmenu.html
new file mode 100644
index 000000000..9554562c5
--- /dev/null
+++ b/tests/visual/compound/tabs_selectmenu.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Compound Visual Test : Selectmenu in Tabs</title>
+ <link rel="stylesheet" href="../visual.css">
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <script src="../../../ui/jquery.ui.tabs.js"></script>
+ <script>
+ $(function() {
+ $( "#tabs" ).tabs();
+ $( "select" ).selectmenu();
+ });
+ </script>
+ <style>
+ select { width: 200px; }
+ </style>
+</head>
+<body>
+
+<div id="tabs">
+ <ul>
+ <li><a href="#tabs-1">First</a></li>
+ <li><a href="#tabs-2">Second</a></li>
+ </ul>
+ <div id="tabs-1">
+ <select>
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
+ </div>
+ <div id="tabs-2">
+ <select>
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html
new file mode 100644
index 000000000..fab7c0a7c
--- /dev/null
+++ b/tests/visual/selectmenu/selectmenu.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Selectmenu Visual Test: Default</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <script>
+ $(function() {
+ var log = $("#log"),
+ index = 0,
+ text;
+
+ function logger( event, ui ) {
+ text = "#" + index++ + " " + event.type.replace("selectmenu","");
+ if ( ui.item ) {
+ text += ": " + ui.item.index + " => " + ui.item.label;
+ }
+ $( "<p>" ).text( text ).prependTo( "#log" );
+ }
+
+ /* events */
+ var eventsSelectmenu = $('#control select').selectmenu({
+ open: logger,
+ close: logger,
+ focus : logger,
+ select: logger,
+ change: logger
+ });
+ eventsSelectmenu.show();
+
+ $("#destroy").click( function() {
+ eventsSelectmenu.selectmenu("destroy");
+ return false;
+ });
+
+ $("#refresh_add").click( function() {
+ eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh_selected").click( function() {
+ eventsSelectmenu[0].selectedIndex = 0;
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh").click( function() {
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#open").click( function() {
+ eventsSelectmenu.selectmenu("open");
+ return false;
+ });
+
+ $("#close").click( function() {
+ eventsSelectmenu.selectmenu("close");
+ return false;
+ });
+
+ /* disabled */
+ $('#disabled1, #disabled2, #disabled3').selectmenu();
+ var disabled4 = $('#disabled4').selectmenu();
+
+ $("#disable_select").on("click", function() {
+ if (disable_select) {
+ disable_select = false;
+ disabled4.selectmenu("disable");
+ } else {
+ disable_select = true;
+ disabled4.removeAttr("disabled");
+ }
+ disabled4.selectmenu("refresh");
+ return false;
+ });
+
+ $("#disable_option").on("click", function() {
+ if (disable_option) {
+ disable_option = false;
+ disabled4.find("option:eq(0)").attr("disabled", "disabled");
+ } else {
+ disable_option = true;
+ disabled4.find("option:eq(0)").removeAttr("disabled");
+ }
+ disabled4.selectmenu("refresh");
+ return false;
+ });
+
+ $("#disable_optgroup").on("click", function() {
+ if (disable_optgroup) {
+ disable_optgroup = false;
+ disabled4.find("optgroup:eq(0)").attr("disabled", "disabled");
+ } else {
+ disable_optgroup = true;
+ disabled4.find("optgroup:eq(0)").removeAttr("disabled");
+ }
+ disabled4.selectmenu("refresh");
+ return false;
+ });
+
+ /* empty */
+ $('.empty select').selectmenu();
+ });
+ </script>
+ <style>
+ body { font-size:62.5%; }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+
+ .ui-selectmenu-button { display: block; margin-bottom: 1em;}
+ </style>
+</head>
+<body>
+
+<div id="control">
+ <h2>Event logging tests</h2>
+ <form action="#">
+ <button id="open">Open</button>
+ <button id="close">Close</button>
+ <button id="refresh_add">Add item</button>
+ <button id="refresh_selected">Change to first item</button>
+ <button id="refresh">Refresh</button>
+ <button id="destroy">Destroy</button>
+ <fieldset>
+ <select>
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </fieldset>
+ </form>
+</div>
+
+<form action="#">
+ <h2>Disabled tests</h2>
+ <fieldset>
+ <label for="disabled1">Disabled select</label>
+ <select disabled="disabled" name="disabled1" id="disabled1">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+
+ <label for="disabled2">Disabled options</label>
+ <select name="disabled2" id="disabled2">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option disabled="disabled" value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option disabled="disabled" value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option disabled="disabled" value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option disabled="disabled" value="14">14</option>
+ <option disabled="disabled" value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+
+ <label for="disabled3">Disabled optgroup</label>
+ <select name="disabled3" id="disabled3">
+ <optgroup disabled="disabled" label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+
+ <label for="disabled4">Disable specific element and refresh selectmenu on button click</label>
+ <select name="disabled4" id="disabled4">
+ <optgroup label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+ <button id="disable_select">Toggle disable select</button>
+ <button id="disable_option">Toggle disable option</button>
+ <button id="disable_optgroup">Toggle disable optgroup</button>
+ </fieldset>
+
+ <h2>Empty tests</h2>
+ <fieldset class="empty">
+ <label for="empty1">Select with no option elements</label>
+ <select name="empty1" id="empty1"></select>
+
+ <label for="empty2">Select with one empty option element</label>
+ <select name="empty2" id="empty2">
+ <option value=""></option>
+ </select>
+
+ <label for="empty3">Select with some empty option elements</label>
+ <select name="empty3" id="empty3">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value=""></option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value=""></option>
+ <option value="9">9</option>
+ </select>
+
+ <label for="empty4">Select with empty optgroup</label>
+ <select id="empty4" name="empty4" class="empty4">
+ <optgroup label="Scripts"></optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+ </fieldset>
+</form>
+
+<div style="position: absolute; top: 1em; right: 1em;">
+ Log:
+ <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 10:29:45 +0000