diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/button')
7 files changed, 539 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/unit/button/all.html b/apps/it/static/js/ui/tests/unit/button/all.html new file mode 100644 index 0000000..871006f --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/all.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button Test Suite</title> + + <script src="../../../jquery-1.10.2.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( "button" ); + </script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Button 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/apps/it/static/js/ui/tests/unit/button/button.html b/apps/it/static/js/ui/tests/unit/button/button.html new file mode 100644 index 0000000..223581e --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/button.html @@ -0,0 +1,78 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button 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.button" ], + js: [ + "ui/jquery.ui.core.js", + "ui/jquery.ui.widget.js", + "ui/jquery.ui.button.js" + ] + }); + </script> + + <script src="button_common.js"></script> + <script src="button_core.js"></script> + <script src="button_events.js"></script> + <script src="button_methods.js"></script> + <script src="button_options.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Button 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><button id="button" class="foo">Label</button></div> + +<div id="radio0" style="margin-top: 2em;"> + <input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label> + <input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label> + <input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label> +</div> +<form> + <div id="radio1" style="margin-top: 2em;"> + <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label> + <input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label> + <input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label> + </div> +</form> +<form> + <div id="radio2" style="margin-top: 2em;"> + <input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label> + <input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label> + <input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label> + </div> +</form> +<form> + <div id="radio3"> + <input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label> + <input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label> + <input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label> + </div> +</form> + +<input type="checkbox" id="check"><label for="check">Toggle</label> +<input type="checkbox" id="check2"><label for="check2">Checkbox</label> + +<div><input id="submit" type="submit" value="Label"></div> + +<button id="button1">Button</button> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/button/button_common.js b/apps/it/static/js/ui/tests/unit/button/button_common.js new file mode 100644 index 0000000..ef22d30 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/button_common.js @@ -0,0 +1,14 @@ +TestHelpers.commonWidgetTests( "button", { + defaults: { + disabled: null, + icons: { + primary: null, + secondary: null + }, + label: null, + text: true, + + // callbacks + create: null + } +}); diff --git a/apps/it/static/js/ui/tests/unit/button/button_core.js b/apps/it/static/js/ui/tests/unit/button/button_core.js new file mode 100644 index 0000000..41623e0 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/button_core.js @@ -0,0 +1,212 @@ +/* + * button_core.js + */ + + +(function($) { + +module("button: core"); + +test("checkbox", function() { + expect( 4 ); + var input = $("#check"), + label = $("label[for=check]"); + ok( input.is(":visible") ); + ok( label.is(":not(.ui-button)") ); + input.button(); + ok( input.is(".ui-helper-hidden-accessible") ); + ok( label.is(".ui-button") ); +}); + +test("radios", function() { + expect( 4 ); + var inputs = $("#radio0 input"), + labels = $("#radio0 label"); + ok( inputs.is(":visible") ); + ok( labels.is(":not(.ui-button)") ); + inputs.button(); + ok( inputs.is(".ui-helper-hidden-accessible") ); + ok( labels.is(".ui-button") ); +}); + +function assert(noForm, form1, form2) { + ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") ); + ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") ); + ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") ); +} + +test("radio groups", function() { + expect( 12 ); + $("input[type=radio]").button(); + assert(":eq(0)", ":eq(1)", ":eq(2)"); + + // click outside of forms + $("#radio0 .ui-button:eq(1)").click(); + assert(":eq(1)", ":eq(1)", ":eq(2)"); + + // click in first form + $("#radio1 .ui-button:eq(0)").click(); + assert(":eq(1)", ":eq(0)", ":eq(2)"); + + // click in second form + $("#radio2 .ui-button:eq(0)").click(); + assert(":eq(1)", ":eq(0)", ":eq(0)"); +}); + +test("input type submit, don't create child elements", function() { + expect( 2 ); + var input = $("#submit"); + deepEqual( input.children().length, 0 ); + input.button(); + deepEqual( input.children().length, 0 ); +}); + +test("buttonset", function() { + expect( 6 ); + var set = $("#radio1").buttonset(); + ok( set.is(".ui-buttonset") ); + deepEqual( set.children(".ui-button").length, 3 ); + deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); + ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); + ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); + ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); +}); + +test("buttonset (rtl)", function() { + expect( 6 ); + var set, + parent = $("#radio1").parent(); + // Set to rtl + parent.attr("dir", "rtl"); + + set = $("#radio1").buttonset(); + ok( set.is(".ui-buttonset") ); + deepEqual( set.children(".ui-button").length, 3 ); + deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); + ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); + ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); + ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); +}); + +// TODO: simulated click events don't behave like real click events in IE +// remove this when simulate properly simulates this +// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info +if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) { + asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() { + expect( 3 ); + + $("#check2").button().change( function() { + var lbl = $( this ).button("widget"); + ok( this.checked, "checked ok" ); + ok( lbl.attr("aria-pressed") === "true", "aria ok" ); + ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" ); + }); + + // support: Opera + // Opera doesn't trigger a change event when this is done synchronously. + // This seems to be a side effect of another test, but until that can be + // tracked down, this delay will have to do. + setTimeout(function() { + $("#check2").button("widget").simulate("click"); + start(); + }, 1 ); + }); +} + +test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { + expect( 5 ); + var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" ); + group.find( "input[type=checkbox]" ).button(); + ok( group.find( "label" ).is( ".ui-button" ) ); + + group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" ); + group.filter( "input[type=checkbox]" ).button(); + ok( group.filter( "label" ).is( ".ui-button" ) ); + + group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" ); + group.find( "input[type=checkbox]" ).button(); + ok( group.filter( "label" ).is( ".ui-button" ) ); + + group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" ); + group.find( "input[type=checkbox]" ).button(); + ok( group.find( "label" ).is( ".ui-button" ) ); + + group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" ); + group.filter( "input[type=checkbox]" ).button(); + ok( group.find( "label" ).is( ".ui-button" ) ); +}); + +test( "#5946 - buttonset should ignore buttons that are not :visible", function() { + expect( 2 ); + $( "#radio01" ).next().addBack().hide(); + var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); + ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); + ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); +}); + +test( "#6262 - buttonset not applying ui-corner to invisible elements", function() { + expect( 3 ); + $( "#radio0" ).hide(); + var set = $( "#radio0" ).buttonset(); + ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) ); + ok( set.find( "label:eq(1)" ).is( ".ui-button" ) ); + ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) ); +}); + +asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() { + expect( 2 ); + var form = $( "<form>" + + "<button></button>" + + "<label for='c1'></label><input id='c1' type='checkbox' checked>" + + "</form>" ), + button = form.find( "button" ).button(), + checkbox = form.find( "input[type=checkbox]" ).button(); + + checkbox.prop( "checked", false ).button( "refresh" ); + ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) ); + + form.get( 0 ).reset(); + + // #9213: If a button has been removed, refresh should not be called on it when + // its corresponding form is reset. + button.remove(); + + setTimeout(function() { + ok( checkbox.button( "widget" ).hasClass( "ui-state-active" )); + start(); + }, 1 ); +}); + +asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { + expect( 2 ); + var check = $( "#check" ).button(), + label = $( "label[for='check']" ); + ok( !label.is( ".ui-state-focus" ) ); + check.focus(); + setTimeout(function() { + ok( label.is( ".ui-state-focus" ) ); + start(); + }); +}); + +test( "#7534 - Button label selector works for ids with \":\"", function() { + expect( 1 ); + var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" ); + group.find( "input" ).button(); + ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); +}); + +asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() { + expect( 2 ); + var element = $( "#button1" ).button(); + element[ 0 ].focus(); + setTimeout(function() { + ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" ); + element.button( "disable" ); + ok( !element.hasClass( "ui-state-focus" ), + "button does not have ui-state-focus when disabled" ); + start(); + }); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/button/button_events.js b/apps/it/static/js/ui/tests/unit/button/button_events.js new file mode 100644 index 0000000..2fd0383 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/button_events.js @@ -0,0 +1,36 @@ +/* + * button_events.js + */ +(function($) { + +module("button: events"); + +test("buttonset works with single-quote named elements (#7505)", function() { + expect( 1 ); + $("#radio3").buttonset(); + $("#radio33").click( function(){ + ok( true, "button clicks work with single-quote named elements" ); + }).click(); +}); + +asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() { + expect( 1 ); + + var element = $( "#button" ).button(); + + element.one( "keypress", function() { + element.one( "blur", function() { + ok( !element.is(".ui-state-active"), "button loses active state appropriately" ); + start(); + }).blur(); + }); + + element.focus(); + setTimeout(function() { + element + .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ) + .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } ); + }); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/button/button_methods.js b/apps/it/static/js/ui/tests/unit/button/button_methods.js new file mode 100644 index 0000000..467938f --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/button_methods.js @@ -0,0 +1,52 @@ +/* + * button_methods.js + */ +(function($) { + + +module("button: methods"); + +test("destroy", function() { + expect( 1 ); + domEqual( "#button", function() { + $( "#button" ).button().button( "destroy" ); + }); +}); + +test( "refresh: Ensure disabled state is preserved correctly.", function() { + expect( 8 ); + + var element = $( "<a href='#'></a>" ); + element.button({ disabled: true }).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237 + + element = $( "<div></div>" ); + element.button({ disabled: true }).button( "refresh" ); + ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" ); + + element = $( "<button></button>" ); + element.button( { disabled: true} ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh"); + + element = $( "<input type='checkbox'>" ); + element.button( { disabled: true} ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh"); + + element = $( "<input type='radio'>" ); + element.button( { disabled: true} ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh"); + + element = $( "<button></button>" ); + element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); + ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh."); //See #8828 + + element = $( "<input type='checkbox'>" ); + element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); + ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh."); + + element = $( "<input type='radio'>" ); + element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); + ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh."); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/button/button_options.js b/apps/it/static/js/ui/tests/unit/button/button_options.js new file mode 100644 index 0000000..e1931a5 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/button/button_options.js @@ -0,0 +1,117 @@ +/* + * button_options.js + */ +(function($) { + +module("button: options"); + +test("disabled, explicit value", function() { + expect( 4 ); + $("#radio01").button({ disabled: false }); + deepEqual(false, $("#radio01").button("option", "disabled"), + "disabled option set to false"); + deepEqual(false, $("#radio01").prop("disabled"), "element is disabled"); + + $("#radio02").button({ disabled: true }); + deepEqual(true, $("#radio02").button("option", "disabled"), + "disabled option set to true"); + deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled"); +}); + +test("disabled, null", function() { + expect( 4 ); + $("#radio01").button({ disabled: null }); + deepEqual(false, $("#radio01").button("option", "disabled"), + "disabled option set to false"); + deepEqual(false, $("#radio01").prop("disabled"), "element is disabled"); + + $("#radio02").prop("disabled", true).button({ disabled: null }); + deepEqual(true, $("#radio02").button("option", "disabled"), + "disabled option set to true"); + deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled"); +}); + +test("text false without icon", function() { + expect( 1 ); + $("#button").button({ + text: false + }); + ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") ); + + $("#button").button("destroy"); +}); + +test("text false with icon", function() { + expect( 1 ); + $("#button").button({ + text: false, + icons: { + primary: "iconclass" + } + }); + ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") ); + + $("#button").button("destroy"); +}); + +test("label, default", function() { + expect( 2 ); + $("#button").button(); + deepEqual( $("#button").text(), "Label" ); + deepEqual( $( "#button").button( "option", "label" ), "Label" ); + + $("#button").button("destroy"); +}); + +test("label", function() { + expect( 2 ); + $("#button").button({ + label: "xxx" + }); + deepEqual( $("#button").text(), "xxx" ); + deepEqual( $("#button").button( "option", "label" ), "xxx" ); + + $("#button").button("destroy"); +}); + +test("label default with input type submit", function() { + expect( 2 ); + deepEqual( $("#submit").button().val(), "Label" ); + deepEqual( $("#submit").button( "option", "label" ), "Label" ); +}); + +test("label with input type submit", function() { + expect( 2 ); + var label = $("#submit").button({ + label: "xxx" + }).val(); + deepEqual( label, "xxx" ); + deepEqual( $("#submit").button( "option", "label" ), "xxx" ); +}); + +test("icons", function() { + expect( 1 ); + $("#button").button({ + text: false, + icons: { + primary: "iconclass", + secondary: "iconclass2" + } + }); + ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") ); + + $("#button").button("destroy"); +}); + +test( "#5295 - button does not remove hoverstate if disabled" , function() { + expect( 1 ); + var btn = $("#button").button(); + btn.hover( function() { + btn.button( "disable" ); + }); + btn.trigger( "mouseenter" ); + btn.trigger( "mouseleave" ); + ok( !btn.is( ".ui-state-hover") ); +}); + +})(jQuery); |