diff options
Diffstat (limited to 'tests/unit')
| -rw-r--r-- | tests/unit/selectmenu/all.html | 30 | ||||
| -rw-r--r-- | tests/unit/selectmenu/selectmenu.html | 91 | ||||
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_common.js | 21 | ||||
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_core.js | 114 | ||||
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_events.js | 110 | ||||
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_methods.js | 163 | ||||
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_options.js | 60 |
7 files changed, 589 insertions, 0 deletions
diff --git a/tests/unit/selectmenu/all.html b/tests/unit/selectmenu/all.html new file mode 100644 index 000000000..98ff533c7 --- /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.8.3.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <link rel="stylesheet" href="../subsuiteRunner.css"> + <script src="../../../external/qunit.js"></script> + <script src="../subsuiteRunner.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..8c1759892 --- /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="sm-wrap1" class="sm-wrap"></div> + + <div id="sm-wrap2" class="sm-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..af76aa581 --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_common.js @@ -0,0 +1,21 @@ +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..14b275019 --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -0,0 +1,114 @@ +(function( $ ) { + +module( "selectmenu: core" ); + +test("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); + + 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" ); + }); +}); + + +$.each([ + { + type: "default", + selector: "#speed" + }, + { + type: "optgroups", + selector: "#files" + } +], function( i, settings ) { + test( "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" ); + 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" ); + }); + + test("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" ); + 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" ); + }); + + test( "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" ); + 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" ); + 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" ); + }); +}); + +})( jQuery ); diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/selectmenu_events.js new file mode 100644 index 000000000..f33e66b25 --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_events.js @@ -0,0 +1,110 @@ +(function ($) { + +module( "selectmenu: events", { + setup: function () { + this.element = $( "#speed" ); + } +}); + +test( "change", function () { + expect( 5 ); + + this.element.selectmenu({ + change: function ( event, ui ) { + ok( event, "change event fired on change" ); + equal( event.type, "selectmenuchange", "event type set to selectmenuchange" ); + ok(ui, "ui object is passed as second argument to event handler" ); + equal( ui.item.element[ 0 ].nodeName, "OPTION", "ui.item.element[0] points to original option element" ); + equal( ui.item.value, value, "ui.item.value property updated correctly" ); + } + }); + + var button = this.element.selectmenu( "widget" ), + menu = this.element.selectmenu( "menuWidget" ).parent(), + value = this.element.find( "option" ).first().text(); + + button.simulate( "focus" ).simulate( "click" ); + menu.find( "a" ).first().simulate( "mouseover" ).trigger( "click" ); +}); + + +test( "close", function () { + expect( 3 ); + + this.element.selectmenu({ + close: function ( event, ui ) { + ok( event, "close event fired on close" ); + equal( event.type, "selectmenuclose", "event type set to selectmenuclose" ); + ok( ui, "ui object is passed as second argument to event handler" ); + } + }); + + this.element.selectmenu( "open" ).selectmenu( "close" ); +}); + + +test( "focus", function () { + expect( 4 ); + + var button, + menu, + links; + + this.element.selectmenu({ + focus: function ( event, ui ) { + ok( event, "focus event fired on mouseover" ); + equal( event.type, "selectmenufocus", "event type set to selectmenufocus" ); + ok( ui, "ui object is passed as second argument to event handler" ); + equal( ui.item.element[0].nodeName, "OPTION", "ui points to original option element" ); + } + }); + + button = this.element.selectmenu( "widget" ), + menu = this.element.selectmenu( "menuWidget" ); + + button.simulate( "focus" ); + links = menu.find( "li.ui-menu-item a" ); + + button.simulate( "click" ); + + menu.find( "a" ).last().simulate( "mouseover" ); + + this.element.selectmenu( "close" ); +}); + + +test( "open", function () { + expect( 3 ); + + this.element.selectmenu({ + open: function ( event, ui ) { + ok( event, "open event fired on open" ); + equal( event.type, "selectmenuopen", "event type set to selectmenuopen" ); + ok( ui, "ui object is passed as second argument to event handler" ); + } + }); + + 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" ); + ok( ui, "ui object is passed as second argument to event handler" ); + equal( ui.item.element[0].nodeName, "OPTION", "ui points to original option element" ); + } + }); + + var button = this.element.selectmenu( "widget" ), + menu = this.element.selectmenu( "menuWidget" ).parent(); + + button.simulate( "focus" ).simulate( "click" ); + menu.find( "a" ).first().simulate( "mouseover" ).trigger( "click" ); +}); + +})(jQuery); diff --git a/tests/unit/selectmenu/selectmenu_methods.js b/tests/unit/selectmenu/selectmenu_methods.js new file mode 100644 index 000000000..99692f53d --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_methods.js @@ -0,0 +1,163 @@ +(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", 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..dc87b8608 --- /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: ".sm-wrap" + }); + equal( element.selectmenu( "menuWidget" ).parent().parent()[0], $( "#sm-wrap1" )[0], "first found element" ); + equal( $( "#sm-wrap2 .ui-selectmenu" ).length, 0, "only appends to one element" ); + element.selectmenu( "destroy" ); + + $( "#sm-wrap2" ).addClass( "ui-front" ); + element.selectmenu(); + equal( element.selectmenu( "menuWidget" ).parent().parent()[0], $( "#sm-wrap2" )[0], "null, inside .ui-front" ); + element.selectmenu( "destroy" ); + $( "#sm-wrap2" ).removeClass( "ui-front" ); + + element.selectmenu().selectmenu( "option", "appendTo", "#sm-wrap1" ); + equal( element.selectmenu( "menuWidget" ).parent().parent()[0], $( "#sm-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 ); |