diff options
Diffstat (limited to 'tests/unit')
-rw-r--r-- | tests/unit/selectmenu/all.html | 30 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu.html | 87 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu_common.js | 19 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu_core.js | 88 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu_events.js | 107 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu_methods.js | 144 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu_options.js | 41 |
7 files changed, 516 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..d05b4f2be --- /dev/null +++ b/tests/unit/selectmenu/selectmenu.html @@ -0,0 +1,87 @@ +<!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.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"> + + <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> + + <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..6ce79ff15 --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_common.js @@ -0,0 +1,19 @@ +TestHelpers.commonWidgetTests( "selectmenu", { + defaults: { + appendTo: "body", + disabled: false, + dropdown: true, + position: { + my: "left top", + at: "left bottom", + collision: "none" + }, + // callbacks, + create: null, + open: null, + focus: null, + select: null, + close: null, + change: null + } +}); diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js new file mode 100644 index 000000000..54e06cf40 --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -0,0 +1,88 @@ +(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(13 + 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" ); + }); + equal( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "selected menu link aria-selected" ); +}); + + +$.each([ + { + type: "default", + selector: "#speed" + }, + { + type: "optgroups", + selector: "#files" + } +], function( i, settings ) { + test("state synchronization - after keydown - " + settings.type, function () { + expect(5); + + 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( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "selected menu link aria-selected" ); + 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 - " + settings.type, function () { + expect(5); + + 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( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "selected menu link aria-selected" ); + 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" ); + }); +}); + +})( jQuery ); diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/selectmenu_events.js new file mode 100644 index 000000000..eb15fea0a --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_events.js @@ -0,0 +1,107 @@ +(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").parent(), + menu = this.element.selectmenu("menuWidget").parent(), + value = this.element.find("option").first().text(); + + button.find("a").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 counter = 0, + button, + menu; + + this.element.selectmenu({ + focus: function (event, ui) { + counter++; + if (counter === 1) { + 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").parent(); + menu = this.element.selectmenu("menuWidget").parent(); + + button.find("a").simulate( "focus" ).simulate( "click" ); + menu.find(".ui-menu-item").simulate("mouseover"); +}); + + +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").parent(), + menu = this.element.selectmenu("menuWidget").parent(); + + button.find("a").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..68ff6110c --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_methods.js @@ -0,0 +1,144 @@ +(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 - 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(), + widgetElement = element.selectmenu( "widget" ), + menuWidgetElement = element.selectmenu( "menuWidget" ); + + element.selectmenu("refresh"); + + equal( widgetElement.length, 1, "widget: one element" ); + ok( widgetElement.is("a.ui-button"), "widget: button element" ); + + equal( menuWidgetElement.length, 1, "menuWidget: one element" ); + ok( menuWidgetElement.is("ul.ui-menu"), "menuWidget: menu element" ); +}); + +})( jQuery ); diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js new file mode 100644 index 000000000..440df04be --- /dev/null +++ b/tests/unit/selectmenu/selectmenu_options.js @@ -0,0 +1,41 @@ +(function ($) { + +module("selectmenu: options"); + +test("appendTo another element", function () { + expect(2); + + var element = $("#speed").selectmenu(); + + ok(element.selectmenu("option", "appendTo", "#qunit-fixture"), "appendTo accepts selector"); + ok($("#qunit-fixture").find(".ui-selectmenu-menu").length, "selectmenu appendedTo other element"); +}); + + +test("dropdown: 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"); +}); + +test("pop-up: CSS styles", function () { + expect(2); + + var element = $("#speed").selectmenu({ + dropdown: false + }), + button = element.selectmenu("widget"), + menu = element.selectmenu("menuWidget"); + + element.selectmenu("close"); + ok( !button.hasClass("ui-corner-top") && button.hasClass("ui-corner-all") && button.find("span.ui-icon").hasClass("ui-icon-triangle-2-n-s"), "button styles pop-up"); + ok( !menu.hasClass("ui-corner-bottom") && menu.hasClass("ui-corner-all"), "menu styles pop-up"); +}); + +})(jQuery); |