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.js22
-rw-r--r--tests/unit/selectmenu/selectmenu_core.js161
-rw-r--r--tests/unit/selectmenu/selectmenu_events.js121
-rw-r--r--tests/unit/selectmenu/selectmenu_methods.js162
-rw-r--r--tests/unit/selectmenu/selectmenu_options.js60
-rw-r--r--tests/visual/compound/dialog_widgets.html14
-rw-r--r--tests/visual/compound/tabs_selectmenu.html53
-rw-r--r--tests/visual/selectmenu/disabled_empty.html182
-rw-r--r--tests/visual/selectmenu/events_methods.html119
11 files changed, 1013 insertions, 2 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..e34dd37fb
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_common.js
@@ -0,0 +1,22 @@
+TestHelpers.commonWidgetTests( "selectmenu", {
+ defaults: {
+ appendTo: null,
+ disabled: false,
+ icons: {
+ button: "ui-icon-triangle-1-s"
+ },
+ position: {
+ my: "left top",
+ at: "left bottom",
+ collision: "none"
+ },
+
+ // 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..c4f43b681
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_core.js
@@ -0,0 +1,161 @@
+(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.simulate( "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.simulate( "click" );
+ links.first().simulate( "mouseover" ).trigger( "click" );
+ // open menu again and hover item
+ button.simulate( "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 );
+ });
+});
+
+})( jQuery );
diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/selectmenu_events.js
new file mode 100644
index 000000000..4d98c9dde
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_events.js
@@ -0,0 +1,121 @@
+(function ( $ ) {
+
+module( "selectmenu: events", {
+ setup: function () {
+ this.element = $( "#speed" );
+ }
+});
+
+test( "change", function () {
+ expect( 5 );
+
+ var that = this,
+ optionIndex = 1;
+
+ 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" );
+ }
+ });
+
+ var button = this.element.selectmenu( "widget" ),
+ menu = this.element.selectmenu( "menuWidget" ).parent(),
+ options = this.element.find( "option" );
+
+ button.simulate( "focus" ).simulate( "click" );
+ menu.find( "a" ).eq( optionIndex ).simulate( "mouseover" ).simulate( "click" );
+});
+
+
+test( "close", function () {
+ expect( 4 );
+
+ this.element.selectmenu({
+ close: function ( event, ui ) {
+ 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" ).simulate( "click" );
+});
+
+
+test( "focus", function () {
+ expect( 12 );
+
+ var button, menu, links,
+ optionIndex = this.element[ 0 ].selectedIndex + 1,
+ options = this.element.find( "option" );
+
+ 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" )
+ .simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+
+ button.simulate( "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
+ this.element.selectmenu( "close" );
+});
+
+
+test( "open", function () {
+ expect( 2 );
+
+ this.element.selectmenu({
+ open: function ( event, ui ) {
+ ok( event, "open event fired on open" );
+ equal( event.type, "selectmenuopen", "event type set to selectmenuopen" );
+ }
+ });
+
+ this.element.selectmenu( "open" );
+});
+
+
+test( "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" ).simulate( "click" );
+ menu.find( "a" ).eq( optionIndex ).simulate( "mouseover" ).simulate( "click" );
+});
+
+})(jQuery);
diff --git a/tests/unit/selectmenu/selectmenu_methods.js b/tests/unit/selectmenu/selectmenu_methods.js
new file mode 100644
index 000000000..96efa9a6a
--- /dev/null
+++ b/tests/unit/selectmenu/selectmenu_methods.js
@@ -0,0 +1,162 @@
+(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" );
+});
+
+test( "refresh - change selected option", function () {
+ expect( 3 );
+
+ var element = $( "#speed" ).selectmenu(),
+ button = element.selectmenu( "widget" );
+
+ equal( element.find( "option:selected" ).text(), button.text(), "button text after init" );
+
+ button.simulate( "focus" );
+
+ equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" );
+
+ element.find( "option" ).eq( 2 ).removeAttr( "selected" );
+ element.find( "option" ).eq( 0 ).attr( "selected", "selected" );
+ element.selectmenu( "refresh" );
+
+ equal( element.find( "option:selected" ).text(), button.text(), "button text after changing selected option" );
+});
+
+
+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 bc4777a56..e6173f581 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,
@@ -91,7 +93,15 @@
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<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>
+ </div>
+ <select id="select">
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
+ </form>
</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..ca4e53e92
--- /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.9.1.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/disabled_empty.html b/tests/visual/selectmenu/disabled_empty.html
new file mode 100644
index 000000000..4bdbf7f01
--- /dev/null
+++ b/tests/visual/selectmenu/disabled_empty.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Disabled & empty elements functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.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>
+ <link rel="stylesheet" href="../../../demos/demos.css">
+ <script>
+ $(function() {
+ /* disabled */
+ $('select#disabled1').selectmenu();
+ var withOverflow = $('select#disabled2').selectmenu();
+ withOverflow.selectmenu("menuWidget").addClass("overflow");
+
+ $('select#disabled3').selectmenu();
+ var disabled4 = $('select#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>
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow { height: 200px; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<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>
+ <br />
+ <br />
+ <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>
+ <br />
+ <br />
+ <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>
+ <br />
+ <br />
+ <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>
+ <br />
+ <h2>Empty tests</h2>
+ <fieldset class="empty">
+ <label for="empty1">Select with no option elements</label>
+ <select name="empty1" id="empty1"></select>
+ <br />
+ <br />
+ <label for="empty2">Select with one empty option element</label>
+ <select name="empty2" id="empty2">
+ <option value=""></option>
+ </select>
+ <br />
+ <br />
+ <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>
+ <br />
+ <br />
+ <label for="empty4">Select with empty optgroup</label>
+ <select 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>
+<br />
+
+</div><!-- End demo -->
+
+
+
+</body>
+</html>
diff --git a/tests/visual/selectmenu/events_methods.html b/tests/visual/selectmenu/events_methods.html
new file mode 100644
index 000000000..e4c9e3d05
--- /dev/null
+++ b/tests/visual/selectmenu/events_methods.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Events & methods functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.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>
+ <link rel="stylesheet" href="../../../demos/demos.css">
+ <script>
+ $(function() {
+ var log = $("#log"),
+ index = 0;
+
+ var mySelectmenu = $('select').selectmenu({
+ open: function(event, ui) {
+ $("<div/>").text( index++ + " Opened").prependTo(log);
+ },
+ close: function(event, ui) {
+ $("<div/>").text( index++ + " Closed").prependTo(log);
+ },
+ focus : function(event, ui) {
+ $("<div/>").text( index++ + " Focused: " + ui.item.label + " #" + ui.item.index ).prependTo(log);
+ },
+ select: function(event, ui) {
+ $("<div/>").text( index++ + " Selected: " + ui.item.label + " #" + ui.item.index ).prependTo(log);
+ },
+ change: function(event, ui) {
+ $("<div/>").text( index++ + " Changed to: " + ui.item.label + " #" + ui.item.index ).prependTo(log);
+ }
+ });
+ $('select').show();
+
+ $("#destroy").click( function() {
+ mySelectmenu.selectmenu("destroy");
+ return false;
+ });
+
+ $("#refresh_add").click( function() {
+ mySelectmenu.append('<option value="fastsound">Faster than sound</option>');
+ mySelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh_selected").click( function() {
+ mySelectmenu[0].selectedIndex = 0;
+ mySelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh").click( function() {
+ mySelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#open").click( function() {
+ mySelectmenu.selectmenu("open");
+ return false;
+ });
+
+ $("#close").click( function() {
+ mySelectmenu.selectmenu("close");
+ return false;
+ });
+ });
+ </script>
+ <style>
+ form { margin: 20px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+
+ #log { height: 400px; width: 270px; overflow: auto; }
+ #control { margin-left: 300px; }
+ #control fieldset { border: 0; width: 270px; }
+ #control button { display: block; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+
+<div style="float: left;">
+ Log:
+ <div id="log" class="ui-widget-content"></div>
+</div>
+
+<div id="control">
+ <form action="#">
+ <fieldset>
+ <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>
+ </fieldset>
+ <button id="destroy">Destroy</button>
+ <button id="refresh_add">Add item</button>
+ <button id="refresh">Refresh</button>
+ <button id="refresh_selected">Change to first item</button>
+ <button id="open">Open</button>
+ <button id="close">Close</button>
+ </form>
+</div>
+
+</div><!-- End demo -->
+
+
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 18:48:23 +0000