diff options
Diffstat (limited to 'tests')
43 files changed, 1723 insertions, 588 deletions
diff --git a/tests/lib/bootstrap.js b/tests/lib/bootstrap.js index 4cee83f93..96b707f96 100644 --- a/tests/lib/bootstrap.js +++ b/tests/lib/bootstrap.js @@ -102,7 +102,7 @@ function jqueryUrl() { var version = parseUrl().jquery; var url; - if ( version === "git" || version === "compat-git" ) { + if ( version === "git" ) { url = "http://code.jquery.com/jquery-" + version; } else { url = "../../../external/jquery-" + ( version || "1.11.3" ) + "/jquery"; diff --git a/tests/lib/common.js b/tests/lib/common.js index c3e898535..d0d72ab8a 100644 --- a/tests/lib/common.js +++ b/tests/lib/common.js @@ -70,7 +70,9 @@ exports.testWidget = function( widget, settings ) { exports.testJshint( "/widgets/" + widget ); testWidgetDefaults( widget, settings.defaults ); testWidgetOverrides( widget ); - testBasicUsage( widget ); + if ( !settings.noDefaultElement ) { + testBasicUsage( widget ); + } test( "version", function() { expect( 1 ); ok( "version" in $.ui[ widget ].prototype, "version property exists" ); diff --git a/tests/lib/qunit.js b/tests/lib/qunit.js index b421341ea..e2a6e85c7 100644 --- a/tests/lib/qunit.js +++ b/tests/lib/qunit.js @@ -27,7 +27,7 @@ QUnit.config.urlConfig.push( { "1.11.0", "1.11.1", "1.11.2", "1.11.3", "2.0.0", "2.0.1", "2.0.2", "2.0.3", "2.1.0", "2.1.1", "2.1.2", "2.1.3", - "compat-git", "git", "custom" + "git", "custom" ], tooltip: "Which jQuery Core version to test against" } ); diff --git a/tests/unit/autocomplete/core.js b/tests/unit/autocomplete/core.js index 41be5ae6a..e252970ee 100644 --- a/tests/unit/autocomplete/core.js +++ b/tests/unit/autocomplete/core.js @@ -398,4 +398,28 @@ asyncTest( "Search if the user retypes the same value (#7434)", function() { } ); } ); +asyncTest( "Close on click outside when focus remains", function() { + expect( 2 ); + + var element = $( "#autocomplete" ).autocomplete( { + source: [ "java", "javascript" ], + delay: 0 + } ); + var menu = element.autocomplete( "widget" ); + + $( "body" ).on( "mousedown", function( event ) { + event.preventDefault(); + } ); + + element.val( "j" ).autocomplete( "search", "j" ); + setTimeout( function() { + ok( menu.is( ":visible" ), "menu displays initially" ); + $( "body" ).simulate( "mousedown" ); + setTimeout( function() { + ok( menu.is( ":hidden" ), "menu closes after clicking elsewhere" ); + start(); + } ); + } ); +} ); + } ); diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html index 7ba400645..6cf27fb33 100644 --- a/tests/unit/button/button.html +++ b/tests/unit/button/button.html @@ -6,54 +6,24 @@ <script src="../../../external/requirejs/require.js"></script> <script src="../../lib/css.js" data-modules="core button"></script> - <script src="../../lib/bootstrap.js" data-widget="button"></script> + <script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"> +<form id="form1"> + <div><button id="button">Label</button></div> + <div><button id="button2">label <span>with span</span></button></div> -<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> -<div id="checkbox0"> - <input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label> - <input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label> - <input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">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> + <div><input id="submit" type="submit" value="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> +<form id="form2"> + <button id="button-disabled" disabled>Button</button> + <a href="#" id="anchor-button">Anchor Button</a> +</form> </div> </body> </html> diff --git a/tests/unit/button/common-deprecated.js b/tests/unit/button/common-deprecated.js new file mode 100644 index 000000000..0f03bdba2 --- /dev/null +++ b/tests/unit/button/common-deprecated.js @@ -0,0 +1,27 @@ +define( [ + "lib/common", + "ui/widgets/button" +], function( common ) { + +common.testWidget( "button", { + defaults: { + classes: { + "ui-button": "ui-corner-all" + }, + disabled: null, + icon: null, + iconPosition: "beginning", + icons: { + primary: null, + secondary: null + }, + label: null, + showLabel: true, + text: true, + + // Callbacks + create: null + } +} ); + +} ); diff --git a/tests/unit/button/common.js b/tests/unit/button/common.js index 4ef136fac..91ce1cff9 100644 --- a/tests/unit/button/common.js +++ b/tests/unit/button/common.js @@ -5,14 +5,14 @@ define( [ common.testWidget( "button", { defaults: { - classes: {}, - disabled: null, - icons: { - primary: null, - secondary: null + classes: { + "ui-button": "ui-corner-all" }, + disabled: null, + icon: null, + iconPosition: "beginning", label: null, - text: true, + showLabel: true, // Callbacks create: null diff --git a/tests/unit/button/core.js b/tests/unit/button/core.js index f4e5d35a7..de26b0312 100644 --- a/tests/unit/button/core.js +++ b/tests/unit/button/core.js @@ -1,229 +1,22 @@ define( [ "jquery", + "ui/safe-active-element", "ui/widgets/button" ], function( $ ) { -module( "button: core" ); +module( "Button: core" ); -test( "checkbox", function( assert ) { - expect( 4 ); - var input = $( "#check" ), - label = $( "label[for=check]" ); - ok( input.is( ":visible" ) ); - ok( label.is( ":not(.ui-button)" ) ); - input.button(); - assert.hasClasses( input, "ui-helper-hidden-accessible" ); - assert.hasClasses( label, "ui-button" ); -} ); - -test( "radios", function( assert ) { - expect( 8 ); - var inputs = $( "#radio0 input" ), - labels = $( "#radio0 label" ); - ok( inputs.is( ":visible" ) ); - ok( labels.is( ":not(.ui-button)" ) ); - inputs.button(); - inputs.each( function() { - assert.hasClasses( this, "ui-helper-hidden-accessible" ); - } ); - labels.each( function() { - assert.hasClasses( this, "ui-button" ); - } ); -} ); - -test( "radio groups", function( assert ) { - expect( 12 ); - - function assertClasses( noForm, form1, form2 ) { - assert.hasClasses( $( "#radio0 .ui-button" + noForm ), "ui-state-active" ); - assert.hasClasses( $( "#radio1 .ui-button" + form1 ), "ui-state-active" ); - assert.hasClasses( $( "#radio2 .ui-button" + form2 ), "ui-state-active" ); - } - - $( "input[type=radio]" ).button(); - assertClasses( ":eq(0)", ":eq(1)", ":eq(2)" ); - - // Click outside of forms - $( "#radio0 .ui-button:eq(1)" ).trigger( "click" ); - assertClasses( ":eq(1)", ":eq(1)", ":eq(2)" ); - - // Click in first form - $( "#radio1 .ui-button:eq(0)" ).trigger( "click" ); - assertClasses( ":eq(1)", ":eq(0)", ":eq(2)" ); - - // Click in second form - $( "#radio2 .ui-button:eq(0)" ).trigger( "click" ); - assertClasses( ":eq(1)", ":eq(0)", ":eq(0)" ); -} ); - -test( "radio groups - ignore elements with same name", function() { - expect( 1 ); - var form = $( "form:first" ), - radios = form.find( "[type=radio]" ).button(), - checkbox = $( "<input>", { - type: "checkbox", - name: radios.attr( "name" ) - } ); - - form.append( checkbox ); - radios.button( "refresh" ); - ok( true, "no exception from accessing button instance of checkbox" ); -} ); - -test( "input type submit, don't create child elements", function() { +asyncTest( "Disabled button loses focus", function() { expect( 2 ); - var input = $( "#submit" ); - deepEqual( input.children().length, 0 ); - input.button(); - deepEqual( input.children().length, 0 ); -} ); - -test( "buttonset", function( assert ) { - expect( 6 ); - var set = $( "#radio1" ).buttonset(); - assert.hasClasses( set, "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( assert ) { - expect( 6 ); - var set, - parent = $( "#radio1" ).parent(); - - // Set to rtl - parent.attr( "dir", "rtl" ); - - set = $( "#radio1" ).buttonset(); - assert.hasClasses( set, "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( assert ) { - expect( 3 ); - - $( "#check2" ).button().on( "change", function() { - var lbl = $( this ).button( "widget" ); - ok( this.checked, "checked ok" ); - ok( lbl.attr( "aria-pressed" ) === "true", "aria ok" ); - assert.hasClasses( lbl, "ui-state-active" ); - } ); - - // 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( assert ) { - expect( 5 ); - var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" ); - group.find( "input[type=checkbox]" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button" ); - - group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" ); - group.filter( "input[type=checkbox]" ).button(); - assert.hasClasses( group.filter( "label" ), "ui-button" ); - - group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" ); - group.find( "input[type=checkbox]" ).button(); - assert.hasClasses( group.filter( "label" ), "ui-button" ); - - group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" ); - group.find( "input[type=checkbox]" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button" ); - - group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" ); - group.filter( "input[type=checkbox]" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button" ); -} ); - -test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) { - 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)" ) ); - assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" ); -} ); - -test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) { - expect( 3 ); - $( "#radio0" ).hide(); - var set = $( "#radio0" ).buttonset(); - assert.hasClasses( set.find( "label:eq(0)" ), "ui-button ui-corner-left" ); - assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" ); - assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" ); - -} ); - -asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) { - 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" ); - assert.lacksClasses( checkbox.button( "widget" ), "ui-state-active" ); - - form.get( 0 ).reset(); - - // If a button has been removed, refresh should not be called on it when - // its corresponding form is reset. - button.remove(); + var element = $( "#button" ).button(); + element.focus(); setTimeout( function() { - assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" ); - start(); - }, 1 ); -} ); -asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) { - expect( 2 ); - var check = $( "#check" ).button(), - label = $( "label[for='check']" ); - assert.lacksClasses( label, "ui-state-focus" ); - check.trigger( "focus" ); - setTimeout( function() { - assert.hasClasses( label, "ui-state-focus" ); - start(); - } ); -} ); - -test( "#7534 - Button label selector works for ids with \":\"", function( assert ) { - expect( 1 ); - var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" ); - group.find( "input" ).button(); - assert.hasClasses( group.find( "label" ), "ui-button", "Found an id with a :" ); -} ); + equal( element[ 0 ], $.ui.safeActiveElement( document ), "Button is focused" ); -asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) { - expect( 2 ); - var element = $( "#button1" ).button(); - element[ 0 ].focus(); - setTimeout( function() { - assert.hasClasses( element, "ui-state-focus" ); element.button( "disable" ); - assert.lacksClasses( element, "ui-state-focus", - "button does not have ui-state-focus when disabled" ); + notEqual( element[ 0 ], $.ui.safeActiveElement( document ), "Button has had focus removed" ); start(); } ); } ); diff --git a/tests/unit/button/deprecated.html b/tests/unit/button/deprecated.html new file mode 100644 index 000000000..73f62921c --- /dev/null +++ b/tests/unit/button/deprecated.html @@ -0,0 +1,61 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button Deprecated Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button"></script> + <script src="../../lib/bootstrap.js" data-widget="button" data-deprecated="true"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +<div class="buttonset"><button id="button">Label</button><button>button 2</button></div> +<div><button id="button2">label <span>with span</span></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> +<div id="checkbox0"> + <input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label> + <input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label> + <input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">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="button-disabled" disabled>Button</button> +<button id="button1">Button</button> +<a href="#" id="anchor-button">Anchor Button</a> + +</div> +</body> +</html> diff --git a/tests/unit/button/deprecated.js b/tests/unit/button/deprecated.js new file mode 100644 index 000000000..fac02e2a6 --- /dev/null +++ b/tests/unit/button/deprecated.js @@ -0,0 +1,196 @@ +define( [ + "jquery", + "ui/widgets/button" +], function( $ ) { + +module( "Button (deprecated): core" ); + +test( "Calling button on a checkbox input calls checkboxradio widget", function() { + var checkbox = $( "#checkbox01" ); + + expect( 2 ); + checkbox.button(); + + ok( !!checkbox.checkboxradio( "instance" ), + "Calling button on a checkbox creates checkboxradio instance" ); + ok( !checkbox.checkboxradio( "option", "icon" ), + "Calling button on a checkbox sets the checkboxradio icon option to false" ); +} ); + +test( "Calling buttonset calls controlgroup", function() { + var controlgroup = $( ".buttonset" ); + + expect( 1 ); + controlgroup.buttonset(); + + ok( controlgroup.is( ":ui-controlgroup" ), "Calling buttonset creates controlgroup instance" ); +} ); + +module( "Button (deprecated): methods" ); + +test( "destroy", function( assert ) { + expect( 1 ); + assert.domEqual( "#checkbox02", function() { + $( "#checkbox02" ).button().button( "destroy" ); + } ); +} ); + +test( "refresh: Ensure disabled state is preserved correctly.", function() { + expect( 5 ); + var element = null; + + element = $( "#checkbox02" ); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" ); + ok( element.prop( "disabled" ), "Input remains disabled after refresh" ); + + element = $( "#radio02" ); + element.button( { disabled: true } ).button( "refresh" ); + ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" ); + + element = $( "#checkbox02" ); + 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 = $( "#radio02" ); + 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." ); + +} ); + +module( "button (deprecated): options" ); + +test( "Setting items option on buttonset sets the button properties on the items option", function() { + expect( 2 ); + + var controlgroup = $( ".buttonset" ); + + controlgroup.buttonset( { items: "bar" } ); + equal( controlgroup.controlgroup( "option", "items.button" ), "bar", + "items.button set when setting items option on init on buttonset" ); + + controlgroup.buttonset( "option", "items", "foo" ); + equal( controlgroup.controlgroup( "option", "items.button" ), "foo", + "items.button set when setting items option on buttonset" ); +} ); + +test( "disabled, null", function() { + expect( 2 ); + + $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } ); + deepEqual( $( "#radio02" ).button( "option", "disabled" ), true, + "disabled option set to true" ); + deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" ); +} ); + +test( "text / showLabel options proxied", function() { + expect( 8 ); + var button = $( "#button" ); + button.button( { + text: false, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "showLabel" ), false, + "Setting the text option to false sets the showLabel option to false on init" ); + button.button( "option", "showLabel", true ); + equal( button.button( "option", "text" ), true, + "Setting showLabel true with option method sets text option to true" ); + button.button( "option", "text", false ); + equal( button.button( "option", "showLabel" ), false, + "Setting text false with option method sets showLabel option to false" ); + button.button( "option", "text", true ); + equal( button.button( "option", "showLabel" ), true, + "Setting text true with option method sets showLabel option to true" ); + button.button( "option", "showLabel", false ); + equal( button.button( "option", "text" ), false, + "Setting showLabel false with option method sets text option to false" ); + button.button( "destroy" ); + button.button( { + text: true, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "showLabel" ), true, + "Setting the text option to true sets the showLabel option to true on init" ); + button.button( "destroy" ); + button.button( { + showLabel: true, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "text" ), true, + "Setting the showLabel option to true sets the text option to true on init" ); + button.button( "destroy" ); + button.button( { + showLabel: false, + icon: "ui-icon-gear" + } ); + equal( button.button( "option", "text" ), false, + "Setting the showLabel option to false sets the text option to false on init" ); +} ); + +test( "icon / icons options properly proxied", function() { + expect( 10 ); + + var button = $( "#button" ); + + button.button( { + icon: "foo" + } ); + + equal( button.button( "option", "icons.primary" ), "foo", + "Icon option properly proxied on init" ); + + button.button( { + icon: "bar" + } ); + + equal( button.button( "option", "icons.primary" ), "bar", + "Icon option properly proxied with option method" ); + + button.button( { + icons: { + primary: "foo" + } + } ); + + equal( button.button( "option", "icon" ), "foo", + "Icons primary option properly proxied with option method" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Icons primary option sets iconPosition option to beginning" ); + + button.button( { + icons: { + secondary: "bar" + } + } ); + + equal( button.button( "option", "icon" ), "bar", + "Icons secondary option properly proxied with option method" ); + equal( button.button( "option", "iconPosition" ), "end", + "Icons secondary option sets iconPosition option to end" ); + + button.button( "destroy" ); + + button.button( { + icons: { + primary: "foo" + } + } ); + + equal( button.button( "option", "icon" ), "foo", + "Icons primary option properly proxied on init" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Icons primary option sets iconPosition option to beginning on init" ); + + button.button( { + icons: { + secondary: "bar" + } + } ); + + equal( button.button( "option", "icon" ), "bar", + "Icons secondary option properly proxied on init" ); + equal( button.button( "option", "iconPosition" ), "end", + "Icons secondary option sets iconPosition option to end on init" ); +} ); + +} ); diff --git a/tests/unit/button/events.js b/tests/unit/button/events.js index 15a285046..f780fb494 100644 --- a/tests/unit/button/events.js +++ b/tests/unit/button/events.js @@ -3,34 +3,19 @@ define( [ "ui/widgets/button" ], function( $ ) { -module( "button: events" ); +module( "Button: events" ); -test( "buttonset works with single-quote named elements (#7505)", function() { - expect( 1 ); - $( "#radio3" ).buttonset(); - $( "#radio33" ).on( "click", function() { - ok( true, "button clicks work with single-quote named elements" ); - } ).trigger( "click" ); -} ); - -asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) { +asyncTest( "Anchor recieves click event when spacebar is pressed", function() { expect( 1 ); + var element = $( "#anchor-button" ).button(); - var element = $( "#button" ).button(); - - element.one( "keypress", function() { - element.one( "blur", function() { - assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" ); - start(); - } ).trigger( "blur" ); + element.on( "click", function( event ) { + event.preventDefault(); + ok( true, "click occcured as a result of spacebar" ); + start(); } ); - element.trigger( "focus" ); - setTimeout( function() { - element - .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ) - .simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } ); - } ); + element.trigger( $.Event( "keyup", { keyCode: $.ui.keyCode.SPACE } ) ); } ); } ); diff --git a/tests/unit/button/methods.js b/tests/unit/button/methods.js index 0bafd90f9..09a91bbc0 100644 --- a/tests/unit/button/methods.js +++ b/tests/unit/button/methods.js @@ -3,7 +3,7 @@ define( [ "ui/widgets/button" ], function( $ ) { -module( "button: methods" ); +module( "Button: methods" ); test( "destroy", function( assert ) { expect( 1 ); @@ -13,61 +13,22 @@ test( "destroy", function( assert ) { } ); test( "refresh: Ensure disabled state is preserved correctly.", function() { - expect( 8 ); + expect( 3 ); 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" ); + ok( element.button( "option", "disabled" ), + "Anchor button 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." ); -} ); - -// #8975 -test( "refresh: buttonset should turn added elements into button widgets", function() { - expect( 2 ); - var radioButtonset = $( "#radio0" ).buttonset(), - checkboxButtonset = $( "#checkbox0" ).buttonset(); - - radioButtonset.append( - "<input type='radio' name='radio' id='radio04'>" + - "<label for='radio04'>Choice 4</label>" - ); - checkboxButtonset.append( - "<input type='checkbox' name='checkbox' id='checkbox04'>" + - "<label for='checkbox04'>Choice 4</label>" - ); - - radioButtonset.buttonset( "refresh" ); - checkboxButtonset.buttonset( "refresh" ); + ok( !element.button( "option", "disabled" ), + "Changing a <button>'s disabled property should update the state after refresh." ); - equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" ); - equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" ); } ); } ); diff --git a/tests/unit/button/options.js b/tests/unit/button/options.js index 31542427c..6ef166974 100644 --- a/tests/unit/button/options.js +++ b/tests/unit/button/options.js @@ -6,152 +6,179 @@ define( [ module( "button: options" ); test( "disabled, explicit value", function( assert ) { - expect( 7 ); + expect( 8 ); - var element = $( "#radio01" ).button( { disabled: false } ); - deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" ); - deepEqual( element.prop( "disabled" ), false, "element is disabled" ); + var element = $( "#button" ).button( { disabled: false } ); + + strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" ); + strictEqual( element.prop( "disabled" ), false, "Disabled property is false" ); assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" ); - element = $( "#radio02" ).button( { disabled: true } ); + element = $( "#button" ).button( { disabled: true } ); - ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" ); + assert.hasClasses( element.button( "widget" ), "ui-state-disabled" ); + strictEqual( element.button( "widget" ).attr( "aria-disabled" ), undefined, + "element does not get aria-disabled" ); + assert.hasClasses( element.button( "widget" ), "ui-button-disabled" ); - deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" ); - deepEqual( element.prop( "disabled" ), true, "element is not disabled" ); + strictEqual( element.button( "option", "disabled" ), true, "disabled option set to true" ); + strictEqual( element.prop( "disabled" ), true, "Disabled property is set" ); } ); +// We are testing the default here because the default null is a special value which means to check +// the DOM. We need to make sure this happens correctly. Checking the options should never return +// null, it should always be true or false. 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" ); + var element = $( "#button" ), + elementDisabled = $( "#button-disabled" ); - $( "#radio02" ).prop( "disabled", true ).button( { disabled: null } ); - deepEqual( true, $( "#radio02" ).button( "option", "disabled" ), + element.add( elementDisabled ).button( { disabled: null } ); + strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" ); + strictEqual( element.prop( "disabled" ), false, "element is disabled" ); + strictEqual( elementDisabled.button( "option", "disabled" ), true, "disabled option set to true" ); - deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" ); + strictEqual( elementDisabled.prop( "disabled" ), true, "element is disabled" ); } ); -test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) { - expect( 12 ); - var elements = [ - $( "<input type='button'>" ), - $( "<button></button>" ), - $( "<a></a>" ), - $( "<div></div>" ), - $( "<input type='checkbox' id='checkbox' checked><label for='checkbox'></label>" ), - $( "<input type='radio' id='radio' checked><label for='radio'></label>" ) - ]; - - $.each( elements, function() { - var element = $( this ).first().button(), - buttonElement = element.button( "widget" ), - elementType = element.prop( "nodeName" ).toLowerCase(); - - if ( element.is( "input" ) ) { - elementType += ":" + element.attr( "type" ); - } - - element.trigger( "mousedown" ); - assert.hasClasses( buttonElement, "ui-state-active", - "[" + elementType + "] has ui-state-active class after mousedown." ); - - element.button( "disable" ); - if ( element.is( "[type=checkbox], [type=radio]" ) ) { - assert.hasClasses( buttonElement, "ui-state-active", - "Disabled [" + elementType + "] has ui-state-active class." ); - } else { - assert.lacksClasses( buttonElement, "ui-state-active", - "Disabled [" + elementType + "] does not have ui-state-active class." ); - } - } ); -} ); +test( "showLabel, false, without icon", function( assert ) { + expect( 4 ); -test( "text false without icon", function() { - expect( 1 ); - $( "#button" ).button( { - text: false + var button = $( "#button" ).button( { + showLabel: false } ); - ok( $( "#button" ).is( ".ui-button-text-only:not(.ui-button-icon-only)" ) ); - $( "#button" ).button( "destroy" ); + assert.lacksClasses( button, "ui-button-icon-only" ); + strictEqual( button.button( "option", "showLabel" ), true, + "showLabel false only allowed if icon true" ); + + button.button( "option", "showLabel", false ); + assert.lacksClasses( button, "ui-button-icon-only" ); + strictEqual( button.button( "option", "showLabel" ), true, + "showLabel false only allowed if icon true" ); } ); -test( "text false with icon", function() { +test( "showLabel, false, with icon", function( assert ) { expect( 1 ); - $( "#button" ).button( { - text: false, - icons: { - primary: "iconclass" - } + var button = $( "#button" ).button( { + showLabel: false, + icon: "iconclass" } ); - ok( $( "#button" ).is( ".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)" ) ); - - $( "#button" ).button( "destroy" ); + assert.hasClasses( button, "ui-button ui-corner-all ui-widget ui-button-icon-only" ); } ); test( "label, default", function() { expect( 2 ); - $( "#button" ).button(); - deepEqual( $( "#button" ).text(), "Label" ); - deepEqual( $( "#button" ).button( "option", "label" ), "Label" ); + var button = $( "#button" ).button(); - $( "#button" ).button( "destroy" ); + deepEqual( button.text(), "Label" ); + deepEqual( button.button( "option", "label" ), "Label" ); } ); -test( "label", function() { +test( "label, with html markup", function() { + expect( 3 ); + var button = $( "#button2" ).button(); + + deepEqual( button.text(), "label with span" ); + deepEqual( button.html().toLowerCase(), "label <span>with span</span>" ); + deepEqual( button.button( "option", "label" ).toLowerCase(), "label <span>with span</span>" ); +} ); + +test( "label, explicit value", function() { expect( 2 ); - $( "#button" ).button( { + var button = $( "#button" ).button( { label: "xxx" } ); - deepEqual( $( "#button" ).text(), "xxx" ); - deepEqual( $( "#button" ).button( "option", "label" ), "xxx" ); - $( "#button" ).button( "destroy" ); + deepEqual( button.text(), "xxx" ); + deepEqual( button.button( "option", "label" ), "xxx" ); } ); -test( "label default with input type submit", function() { +test( "label, default, with input type submit", function() { expect( 2 ); - deepEqual( $( "#submit" ).button().val(), "Label" ); - deepEqual( $( "#submit" ).button( "option", "label" ), "Label" ); + var button = $( "#submit" ).button(); + + deepEqual( button.val(), "Label" ); + deepEqual( button.button( "option", "label" ), "Label" ); } ); -test( "label with input type submit", function() { +test( "label, explicit value, with input type submit", function() { expect( 2 ); - var label = $( "#submit" ).button( { + var button = $( "#submit" ).button( { label: "xxx" - } ).val(); - deepEqual( label, "xxx" ); - deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" ); + } ); + + deepEqual( button.val(), "xxx" ); + deepEqual( button.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)" ) ); +test( "icon", function( assert ) { + expect( 4 ); + var button = $( "#button" ).button( { + showLabel: false, + icon: "iconclass" + } ), + icon = button.find( ".ui-icon" ); + + assert.hasClasses( icon, "iconclass" ); + equal( icon.length, 1, "button with icon option set has icon" ); + + button.button( "option", "icon", false ); + equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" ); + + button.button( "option", "icon", "iconclass" ); + ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" ); - $( "#button" ).button( "destroy" ); } ); -test( "#5295 - button does not remove hoverstate if disabled", function( assert ) { - expect( 1 ); - var btn = $( "#button" ).button(); - btn.on( "hover", function() { - btn.button( "disable" ); - } ); - btn.trigger( "mouseenter" ); - btn.trigger( "mouseleave" ); - assert.lacksClasses( btn, "ui-state-hover" ); +test( "icon position", function( assert ) { + expect( 22 ); + + var button = $( "#button" ).button( { + icon: "ui-icon-gear" + } ), + icon = button.find( ".ui-icon" ), + space = button.find( ".ui-button-icon-space" ); + + equal( icon.length, 1, "button with icon option set has icon" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Button has iconPosition beginning by default" ); + equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" ); + equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining" ); + equal( space.length, 1, + "ui-button-icon-space contains a breaking space iconPosition:beginning" ); + assert.lacksClasses( icon, "ui-widget-icon-block" ); + + button.button( "option", "iconPosition", "end" ); + icon = button.find( ".ui-icon" ); + space = button.find( ".ui-button-icon-space" ); + equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" ); + equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" ); + equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" ); + equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end" ); + equal( space.length, 1, + "ui-button-icon-space contains a breaking space iconPosition:beginning" ); + assert.lacksClasses( icon, "ui-widget-icon-block" ); + + button.button( "option", "iconPosition", "top" ); + icon = button.find( ".ui-icon" ); + equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" ); + equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" ); + equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" ); + ok( !button.find( "ui-button-icon-space" ).length, + "Button should not have an iconSpace with position: top" ); + assert.hasClasses( icon, "ui-widget-icon-block" ); + + button.button( "option", "iconPosition", "bottom" ); + icon = button.find( ".ui-icon" ); + equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" ); + equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" ); + equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" ); + ok( !button.find( "ui-button-icon-space" ).length, + "Button should not have an iconSpace with position: bottom" ); + assert.hasClasses( icon, "ui-widget-icon-block" ); + } ); } ); diff --git a/tests/unit/checkboxradio/all.html b/tests/unit/checkboxradio/all.html new file mode 100644 index 000000000..71a65d9ee --- /dev/null +++ b/tests/unit/checkboxradio/all.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Checkboxradio Test Suite</title> + + <script src="../../../external/jquery/jquery.js"></script> + + <link rel="stylesheet" href="../../../external/qunit/qunit.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> + <script src="../../../external/qunit/qunit.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "checkboxradio" ); + </script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..9883e0834 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio.html @@ -0,0 +1,76 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Checkboxradio Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button checkboxradio"></script> + <script src="../../lib/bootstrap.js" data-widget="button"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +<div id="radio0"> + <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 id="form1"> + <div id="radio1"> + <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label> + <input type="radio" id="radio12" name="radio"><label for="radio12">Choice 2</label> + <input type="radio" id="radio13" name="radio" checked="checked"><label for="radio13">Choice 3</label> + </div> +</form> +<form id="form2"> + <div id="radio2"> + <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> +<label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label> +<input type="checkbox" id="checkbox-method-refresh"/> +<label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label> +<input type="checkbox" class="foo" id="checkbox-method-destroy"/> +<label for="checkbox-method-disable">checkbox refresh</label> +<input type="checkbox" class="foo" id="checkbox-method-disable"/> + +<label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label> +<input type="radio" id="radio-method-refresh"/> +<label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label> +<input type="radio" class="foo" id="radio-method-destroy"/> +<label for="radio-method-disable">radio refresh</label> +<input type="radio" class="foo" id="radio-method-disable"/> + +<label for="checkbox-option-disabled">checkbox disabled</label> +<input type="checkbox" class="foo" id="checkbox-option-disabled"/> +<label for="checkbox-option-icon">checkbox icon</label> +<input type="checkbox" class="foo" id="checkbox-option-icon"/> +<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"/></label> +<label> + <input type="checkbox" id="label-with-no-for"/> +</label> + +<form id="form3"></form> +<input type="radio" name="crazy-form" id="crazy-form-1" form="form3" checked="checked"> +<label for="crazy-form-1">Choice 1</label> +<input type="radio" name="crazy-form" id="crazy-form-2" form="form3"> +<label for="crazy-form-2">Choice 2</label> + +</div> +</body> +</html> diff --git a/tests/unit/checkboxradio/common.js b/tests/unit/checkboxradio/common.js new file mode 100644 index 000000000..48c348a3e --- /dev/null +++ b/tests/unit/checkboxradio/common.js @@ -0,0 +1,22 @@ +define( [ + "lib/common", + "ui/widgets/checkboxradio" +], function( common ) { + +common.testWidget( "checkboxradio", { + noDefaultElement: true, + defaults: { + classes: { + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-icon": "ui-corner-all" + }, + disabled: null, + icon: true, + label: null, + + // Callbacks + create: null + } +} ); + +} ); diff --git a/tests/unit/checkboxradio/core.js b/tests/unit/checkboxradio/core.js new file mode 100644 index 000000000..2a9cf9822 --- /dev/null +++ b/tests/unit/checkboxradio/core.js @@ -0,0 +1,136 @@ +define( [ + "jquery", + "ui/widgets/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: core" ); + +test( "Checkbox - Initial class structure", function( assert ) { + expect( 2 ); + var input = $( "#check" ), + label = $( "label[for=check]" ); + + input.checkboxradio(); + assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" ); + assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all" ); +} ); + +test( "Radios - Initial class structure", function( assert ) { + expect( 6 ); + var inputs = $( "#radio0 input" ), + labels = $( "#radio0 label" ); + + inputs.checkboxradio(); + inputs.each( function() { + assert.hasClasses( this, "ui-helper-hidden-accessible" ); + } ); + labels.each( function() { + assert.hasClasses( this, "ui-button" ); + } ); +} ); + +asyncTest( "Ensure checked after single click on checkbox label button", function( assert ) { + expect( 2 ); + + $( "#check2" ).checkboxradio().change( function() { + var label = $( this ).checkboxradio( "widget" ); + ok( this.checked, "checked ok" ); + + assert.hasClasses( label, "ui-state-active" ); + } ); + + // 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" ).checkboxradio( "widget" ).simulate( "click" ); + start(); + } ); +} ); + +test( "Handle form association via form attribute", function( assert ) { + expect( 4 ); + + var radio1 = $( "#crazy-form-1" ).checkboxradio(); + var radio1Label = radio1.checkboxradio( "widget" ); + var radio2 = $( "#crazy-form-2" ).checkboxradio(); + var radio2Label = radio2.checkboxradio( "widget" ); + + radio2.change( function() { + ok( this.checked, "#2 checked" ); + ok( !radio1[ 0 ].checked, "#1 not checked" ); + + assert.hasClasses( radio2Label, "ui-state-active" ); + assert.lacksClasses( radio1Label, "ui-state-active" ); + } ); + + radio2Label.simulate( "click" ); +} ); + +test( "Checkbox creation requires a label, and finds it in all cases", function( assert ) { + expect( 7 ); + var groups = [ + "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>", + "<span><input type='checkbox' id='t7092b'><label for='t7092b'></label></span>", + "<span><span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label></span>", + "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>", + "<span><input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span></span>", + "<span><label><input type='checkbox' id='t7092f'></label></span>", + "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" + ]; + + $.each( groups, function( index, markup ) { + var group = $( markup ); + + group.find( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + } ); +} ); + +test( "Calling checkboxradio on an unsupported element throws an error", function( assert ) { + expect( 2 ); + + var errorMessage = + "Can't create checkboxradio on element.nodeName=div and element.type=undefined"; + var error = new Error( errorMessage ); + assert.raises( + function() { + $( "<div>" ).checkboxradio(); + }, + + // Support: jQuery 1.7.0 only + $.fn.jquery === "1.7" ? errorMessage : error, + "Proper error thrown" + ); + + errorMessage = "Can't create checkboxradio on element.nodeName=input and element.type=button"; + error = new Error( errorMessage ); + assert.raises( + function() { + $( "<input type='button'>" ).checkboxradio(); + }, + + // Support: jQuery 1.7.0 only + $.fn.jquery === "1.7" ? errorMessage : error, + "Proper error thrown" + ); +} ); + +test( "Calling checkboxradio on an input with no label throws an error", function( assert ) { + expect( 1 ); + + var errorMessage = "No label found for checkboxradio widget"; + var error = new Error( errorMessage ); + assert.raises( + function() { + $( "<input type='checkbox'>" ).checkboxradio(); + }, + + // Support: jQuery 1.7.0 only + $.fn.jquery === "1.7" ? errorMessage : error, + "Proper error thrown" + ); +} ); + +} ); diff --git a/tests/unit/checkboxradio/events.js b/tests/unit/checkboxradio/events.js new file mode 100644 index 000000000..838e0ca63 --- /dev/null +++ b/tests/unit/checkboxradio/events.js @@ -0,0 +1,42 @@ +define( [ + "jquery", + "ui/widgets/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: events" ); + +asyncTest( + "Resetting a checkbox's form should refresh the visual state of the checkbox", + function( assert ) { + expect( 2 ); + var form = $( "<form>" + + "<label for='c1'></label><input id='c1' type='checkbox' checked>" + + "</form>" ), + checkbox = form.find( "input[type=checkbox]" ).checkboxradio(), + widget = checkbox.checkboxradio( "widget" ); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + assert.lacksClasses( widget, "ui-state-active" ); + + form.get( 0 ).reset(); + + setTimeout( function() { + assert.hasClasses( widget, "ui-state-active" ); + start(); + }, 1 ); + } +); + +asyncTest( "Checkbox shows focus when using keyboard navigation", function( assert ) { + expect( 2 ); + var check = $( "#check" ).checkboxradio(), + label = $( "label[for='check']" ); + assert.lacksClasses( label, "ui-state-focus" ); + check.focus(); + setTimeout( function() { + assert.hasClasses( label, "ui-state-focus" ); + start(); + } ); +} ); + +} ); diff --git a/tests/unit/checkboxradio/methods.js b/tests/unit/checkboxradio/methods.js new file mode 100644 index 000000000..ec3a3f667 --- /dev/null +++ b/tests/unit/checkboxradio/methods.js @@ -0,0 +1,96 @@ +define( [ + "jquery", + "ui/widgets/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: methods" ); + +$.each( [ "checkbox", "radio" ], function( index, value ) { + test( value + ": refresh", function( assert ) { + var widget, icon, + checkbox = value === "checkbox", + input = $( "#" + value + "-method-refresh" ); + + expect( checkbox ? 11 : 8 ); + + input.checkboxradio(); + + widget = input.checkboxradio( "widget" ); + icon = widget.find( ".ui-icon" ); + strictEqual( icon.length, 1, + "There is initally one icon" ); + + icon.remove(); + input.checkboxradio( "refresh" ); + icon = widget.find( ".ui-icon" ); + strictEqual( icon.length, 1, + "Icon is recreated on refresh if absent" ); + assert.hasClasses( icon, "ui-icon-blank" ); + if ( checkbox ) { + assert.lacksClasses( icon, "ui-icon-check" ); + } + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); + + input.prop( "checked", true ); + input.checkboxradio( "refresh" ); + if ( checkbox ) { + assert.hasClasses( icon, "ui-icon-check" ); + } + assert[ !checkbox ? "hasClasses" : "lacksClasses" ]( icon, "ui-icon-blank" ); + assert.hasClasses( widget, "ui-checkboxradio-checked" ); + + input.prop( "checked", false ); + input.checkboxradio( "refresh" ); + assert.hasClasses( icon, "ui-icon-blank" ); + if ( checkbox ) { + assert.lacksClasses( icon, "ui-icon-check" ); + } + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); + } ); + + test( value + ": destroy", function( assert ) { + expect( 1 ); + assert.domEqual( "#" + value + "-method-destroy", function() { + $( "#" + value + "-method-destroy" ).checkboxradio().checkboxradio( "destroy" ); + } ); + } ); + + test( value + ": disable / enable", function( assert ) { + expect( 4 ); + var input = $( "#" + value + "-method-disable" ), + widget = input.checkboxradio().checkboxradio( "widget" ); + + input.checkboxradio( "disable" ); + assert.hasClasses( widget, "ui-state-disabled" ); + strictEqual( input.is( ":disabled" ), true, + value + " is disabled when disable is called" ); + + input.checkboxradio( "enable" ); + assert.lacksClasses( widget, "ui-state-disabled" ); + strictEqual( input.is( ":disabled" ), false, + value + " has disabled prop removed when enable is called" ); + } ); + + test( value + ": widget returns the label", function() { + expect( 1 ); + + var input = $( "#" + value + "-method-refresh" ), + label = $( "#" + value + "-method-refresh-label" ); + + input.checkboxradio(); + strictEqual( input.checkboxradio( "widget" )[ 0 ], label[ 0 ], + "widget method returns label" ); + } ); +} ); + +test( "Input wrapped in a label preserved on refresh", function() { + var input = $( "#label-with-no-for" ).checkboxradio(), + element = input.checkboxradio( "widget" ); + + expect( 1 ); + + input.checkboxradio( "refresh" ); + strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" ); +} ); + +} ); diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js new file mode 100644 index 000000000..1f862c242 --- /dev/null +++ b/tests/unit/checkboxradio/options.js @@ -0,0 +1,205 @@ +define( [ + "jquery", + "ui/widgets/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: options" ); + +function assertDisabled( checkbox, assert ) { + assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled", + "label gets ui-state-disabled" ); + strictEqual( checkbox.is( ":disabled" ), true, "checkbox is disabled" ); +} + +function assertEnabled( checkbox, assert ) { + assert.lacksClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled", + "label has ui-state-disabled removed when disabled set to false" ); + strictEqual( checkbox.is( ":disabled" ), false, + "checkbox has disabled prop removed when disabled set to false" ); +} + +test( "disabled", function( assert ) { + expect( 6 ); + + var checkbox = $( "#checkbox-option-disabled" ); + checkbox.checkboxradio( { + disabled: true + } ); + + assertDisabled( checkbox, assert ); + + checkbox.checkboxradio( "option", "disabled", false ); + assertEnabled( checkbox, assert ); + + checkbox.checkboxradio( "option", "disabled", true ); + assertDisabled( checkbox, assert ); +} ); + +test( "disabled - prop true on init", function( assert ) { + expect( 2 ); + var checkbox = $( "#checkbox-option-disabled" ); + + checkbox.prop( "disabled", true ); + checkbox.checkboxradio(); + + assertDisabled( checkbox, assert ); +} ); + +test( "disabled - explicit null value, checks the DOM", function( assert ) { + expect( 2 ); + var checkbox = $( "#checkbox-option-disabled" ); + + checkbox.prop( "disabled", true ); + checkbox.checkboxradio( { + disabled: null + } ); + assertDisabled( checkbox, assert ); +} ); + +function assertNoIcon( checkbox ) { + strictEqual( checkbox.checkboxradio( "widget" ).find( "span.ui-icon" ).length, 0, + "Label does not contain an icon" ); +} + +function assertIcon( checkbox, icon, assert ) { + var iconElement = checkbox.checkboxradio( "widget" ).find( ".ui-icon" ); + + icon = icon || "blank"; + strictEqual( iconElement.length, 1, + "Label contains icon" ); + assert.hasClasses( iconElement, "ui-checkboxradio-icon ui-corner-all ui-icon " + + "ui-icon-background ui-icon-" + icon, + "Icon has proper classes" ); + if ( icon === "blank" ) { + assert.lacksClasses( iconElement, "ui-icon-check ui-state-highlight" ); + } +} + +test( "icon - false on init", function() { + var checkbox = $( "#checkbox-option-icon" ); + + expect( 1 ); + + checkbox.checkboxradio( { icon: false } ); + assertNoIcon( checkbox ); +} ); + +test( "icon - default unchecked", function( assert ) { + var checkbox = $( "#checkbox-option-icon" ); + + expect( 3 ); + + checkbox.checkboxradio(); + assertIcon( checkbox, false, assert ); +} ); + +test( "icon - default checked", function( assert ) { + var checkbox = $( "#checkbox-option-icon" ).attr( "checked", true ); + + expect( 2 ); + + checkbox.checkboxradio(); + assertIcon( checkbox, "check ui-state-highlight", assert ); +} ); + +test( "icon", function( assert ) { + var checkbox = $( "#checkbox-option-icon" ); + + expect( 9 ); + + checkbox.prop( "checked", true ); + + checkbox.checkboxradio(); + assertIcon( checkbox, "check ui-state-highlight", assert ); + + checkbox.checkboxradio( "option", "icon", false ); + assertNoIcon( checkbox ); + + checkbox.checkboxradio( "option", "icon", true ); + assertIcon( checkbox, "check ui-state-highlight", assert ); + + checkbox.checkboxradio( "option", "icon", false ); + assertNoIcon( checkbox ); + + checkbox.checkboxradio( "option", "icon", true ); + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + assertIcon( checkbox, false, assert ); +} ); + +test( "label - default", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "checkbox label", "When no value passed on create text from dom is used for option" ); + strictEqual( $.trim( widget.text() ), + "checkbox label", "When no value passed on create text from dom is used in dom" ); +} ); + +test( "label - explicit value", function() { + expect( 5 ); + var checkbox = $( "#checkbox-option-label" ).checkboxradio( { + label: "foo" + } ), + widget = checkbox.checkboxradio( "widget" ), + icon = widget.find( ".ui-icon" ), + iconSpace = widget.find( ".ui-checkboxradio-icon-space" ); + + strictEqual( checkbox.checkboxradio( "option", "label" ), + "foo", "When value is passed on create value is used for option" ); + strictEqual( $.trim( widget.text() ), + "foo", "When value is passed on create value is used in dom" ); + strictEqual( icon.length, 1, + "Icon is preserved when label is set on init when wrapped in label" ); + strictEqual( iconSpace.length, 1, + "Icon space is preserved when label is set on init when wrapped in label" ); + strictEqual( $( "#checkbox-option-label" ).length, 1, + "Element is preserved when label is set on init when wrapped in label" ); +} ); + +test( "label - explicit null value", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + // The default null is a special value which means to check the DOM. + // We need to make sure that the option never return null. + // It should always be true or false after initialization. + checkbox.checkboxradio( { + label: null + } ); + widget = checkbox.checkboxradio( "widget" ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "checkbox label", "When null is passed on create text from dom is used for option" ); + strictEqual( $.trim( widget.text() ), + "checkbox label", "When null is passed on create text from dom is used in dom" ); + +} ); + +test( "label", function() { + expect( 4 ); + + var checkbox = $( "#checkbox-option-label" ), + widget; + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + checkbox.checkboxradio( "option", "label", "bar" ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "bar", "When value is passed value is used for option" ); + strictEqual( $.trim( widget.text() ), + "bar", "When value is passed value is used in dom" ); + + checkbox.checkboxradio( "option", "label", null ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "bar", "When null is passed text from dom is used for option" ); + strictEqual( $.trim( widget.text() ), + "bar", "When null is passed text from dom is used in dom" ); +} ); + +} ); diff --git a/tests/unit/controlgroup/all.html b/tests/unit/controlgroup/all.html new file mode 100644 index 000000000..737144acd --- /dev/null +++ b/tests/unit/controlgroup/all.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Countrolgroup Test Suite</title> + + <script src="../../../external/jquery/jquery.js"></script> + + <link rel="stylesheet" href="../../../external/qunit/qunit.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> + <script src="../../../external/qunit/qunit.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "controlgroup" ); + </script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/tests/unit/controlgroup/common.js b/tests/unit/controlgroup/common.js new file mode 100644 index 000000000..1a62d971b --- /dev/null +++ b/tests/unit/controlgroup/common.js @@ -0,0 +1,28 @@ +define( [ + "lib/common", + "ui/widgets/controlgroup", + "ui/widgets/checkboxradio", + "ui/widgets/selectmenu", + "ui/widgets/button" +], function( common ) { + +common.testWidget( "controlgroup", { + defaults: { + classes: {}, + direction: "horizontal", + disabled: null, + items: { + "button": "input[type=button], input[type=submit], input[type=reset], button, a", + "checkboxradio": "input[type='checkbox'], input[type='radio']", + "selectmenu": "select", + "spinner": ".ui-spinner-input", + "controlgroupLabel": ".ui-controlgroup-label" + }, + onlyVisible: true, + + // Callbacks + create: null + } +} ); + +} ); diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html new file mode 100644 index 000000000..9767381ac --- /dev/null +++ b/tests/unit/controlgroup/controlgroup.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Controlgroup Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button checkboxradio selectmenu spinner controlgroup"></script> + <script src="../../lib/bootstrap.js" data-modules="common core methods options"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + <div class="controlgroup"> + <button style="display:none">Button with icon only</button> + <select> + <option>Fast</option> + <option>Medium</option> + <option>Slow</option> + </select> + <label for="checkbox">Checkbox</label> + <input type="checkbox" value="checkbox" id="checkbox" /> + <select> + <option>Fast</option> + <option>Medium</option> + <option>Slow</option> + </select> + <div class="test"></div> + <button>Button with icon on the bottom</button> + <label for="spinner" class="ui-controlgroup-label"># of cars</label> + <input id="spinner" class="ui-spinner-input"> + <select> + <option>Fast</option> + <option>Medium</option> + <option>Slow</option> + </select> + </div> +</div> +</body> +</html> diff --git a/tests/unit/controlgroup/core.js b/tests/unit/controlgroup/core.js new file mode 100644 index 000000000..775d22ade --- /dev/null +++ b/tests/unit/controlgroup/core.js @@ -0,0 +1,76 @@ +define( [ + "jquery", + "ui/widgets/controlgroup", + "ui/widgets/checkboxradio", + "ui/widgets/selectmenu", + "ui/widgets/button" +], function( $ ) { + +module( "Controlgroup: Core" ); + +test( "selectmenu: open/close corners", function( assert ) { + expect( 12 ); + var element = $( ".controlgroup" ).controlgroup(), + selects = element.find( "select" ), + selectButton = selects.eq( 0 ).selectmenu( "widget" ); + + selects.eq( 0 ).selectmenu( "open" ); + assert.hasClasses( selectButton, "ui-corner-tl", + "Horizontal: First selectmenu gets ui-corner-tl when opened" ); + + selects.eq( 0 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-left", + "Horizontal: First selectmenu gets ui-corner-left when closed" ); + + selectButton = selects.eq( 1 ).selectmenu( "widget" ); + selects.eq( 1 ).selectmenu( "open" ); + assert.lacksClassStart( selectButton, "ui-corner" ); + + selects.eq( 1 ).selectmenu( "close" ); + assert.lacksClassStart( selectButton, "ui-corner" ); + + selectButton = selects.eq( 2 ).selectmenu( "widget" ); + selects.eq( 2 ).selectmenu( "open" ); + assert.hasClasses( selectButton, "ui-corner-tr", + "Horizontal: Last selectmenu gets ui-corner-tr when opened" ); + + selects.eq( 2 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-right", + "Horizontal: Last selectmenu gets ui-corner-right when closed" ); + + element.controlgroup( "option", "direction", "vertical" ); + selectButton = selects.eq( 0 ).selectmenu( "widget" ); + selects.eq( 0 ).selectmenu( "open" ); + assert.hasClasses( selectButton, "ui-corner-top", + "vertical: First selectmenu gets ui-corner-top when opened" ); + + selects.eq( 0 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-top", + "vertical: First selectmenu gets ui-corner-top when closed" ); + + selectButton = selects.eq( 1 ).selectmenu( "widget" ); + selects.eq( 1 ).selectmenu( "open" ); + assert.lacksClassStart( selectButton, "ui-corner" ); + + selects.eq( 1 ).selectmenu( "close" ); + assert.lacksClassStart( selectButton, "ui-corner" ); + + selectButton = selects.eq( 2 ).selectmenu( "widget" ); + selects.eq( 2 ).selectmenu( "open" ); + assert.lacksClassStart( selectButton, "ui-corner" ); + + selects.eq( 2 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-bottom", + "vertical: Last selectmenu gets ui-corner-bottom when closed" ); +} ); + +test( "selectmenu: controlgroupLabel", function( assert ) { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup(); + var label = element.find( ".ui-controlgroup-label" ); + + assert.hasClasses( label, "ui-widget ui-widget-content ui-state-default ui-controlgroup-item" ); + assert.hasClasses( label.find( "span" ), "ui-controlgroup-label-contents" ); +} ); + +} ); diff --git a/tests/unit/controlgroup/methods.js b/tests/unit/controlgroup/methods.js new file mode 100644 index 000000000..4bc384f5e --- /dev/null +++ b/tests/unit/controlgroup/methods.js @@ -0,0 +1,150 @@ +define( [ + "jquery", + "ui/widgets/controlgroup", + "ui/widgets/checkboxradio", + "ui/widgets/selectmenu", + "ui/widgets/button" +], function( $ ) { + +module( "Controlgroup: methods" ); + +test( "destroy", function( assert ) { + expect( 1 ); + assert.domEqual( ".controlgroup", function() { + $( ".controlgroup" ).controlgroup().controlgroup( "destroy" ); + } ); +} ); + +test( "disable", function( assert ) { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup().controlgroup( "disable" ); + assert.lacksClasses( element, "ui-state-disabled", + "The widget does not get the disabled class, because we disable each child widget" ); + strictEqual( element.find( ".ui-state-disabled" ).length, 6, + "Child widgets are disabled" ); +} ); + +test( "enable", function( assert ) { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup().controlgroup( "enable" ); + assert.lacksClasses( element, "ui-state-disabled", + "ui-state-disabled is not present on widget after enabling" ); + strictEqual( element.find( "ui-state-disabled" ).length, 0, + "Child widgets are disabled" ); +} ); + +var tests = { + "checkboxradio": "<input type='checkbox'>", + "selectmenu": "<select><option>foo</option></select>", + "button": "<button>button text</button>" + }, + orientations = { + "horizontal": [ + "ui-corner-left", + false, + false, + "ui-corner-right" + ], + "vertical": [ + "ui-corner-top", + false, + false, + "ui-corner-bottom" + ] + }; + +// Iterate through supported element markup +$.each( tests, function( widget, html ) { + + // Check in both horizontal and vertical orientations + $.each( orientations, function( name, classes ) { + + test( "refresh: " + widget + ": " + name, function( assert ) { + expect( 41 ); + + var i, control, currentClasses, + controls = [], + element = $( "<div>" ).controlgroup( { + direction: name + } ).appendTo( "body" ); + + // checks the elements with in the controlgroup against the expected class list + function checkCornerClasses( classList ) { + for ( var j = 0; j < 4; j++ ) { + if ( classList[ j ] ) { + assert.hasClasses( controls[ j ][ widget ]( "widget" ), classList[ j ] ); + } else { + assert.lacksClassStart( controls[ j ][ widget ]( "widget" ), "ui-corner" ); + } + } + } + + function showElements( index, value ) { + $( value )[ widget ]( "widget" ).show(); + } + + // Hide each element and check the corner classes + function iterateHidden( onlyVisible ) { + for ( i = 0; i < 4; i++ ) { + + $( controls ).each( showElements ); + + controls[ i ][ widget ]( "widget" ).hide(); + + currentClasses = classes.slice( 0 ); + if ( onlyVisible ) { + if ( i === 0 ) { + currentClasses[ i + 1 ] = classes[ i ]; + currentClasses[ i ] = false; + } else if ( i === 3 ) { + currentClasses[ i - 1 ] = classes[ i ]; + currentClasses[ i ] = false; + } + } + element.controlgroup( "refresh" ); + checkCornerClasses( currentClasses ); + } + } + + // Add a label for each element and then append the element to the control group + for ( i = 0; i < 4; i++ ) { + control = $( html ).attr( "id", "id" + i ) + .add( $( "<label>label text</label>" ).clone().attr( "for", "id" + i ) ); + + controls.push( control ); + element.append( control ); + } + + // Refresh the controlgroup now that its populated + element.controlgroup( "refresh" ); + for ( i = 0; i < 4; i++ ) { + strictEqual( controls[ i ].is( ":ui-" + widget ), true, + name + ": " + widget + " " + i + ": is a " + widget + " widget" ); + } + + // Check that we have the right classes + checkCornerClasses( classes ); + + // hide each element and then check its classes + iterateHidden( true ); + + // Set the exclude option to false so we no longer care about hidden + element.controlgroup( "option", "onlyVisible", false ); + + // Iterate hiding the elements again and check their corner classes + iterateHidden(); + + // Disable the first control + controls[ 0 ].prop( "disabled", true ); + + element.controlgroup( "refresh" ); + + assert.hasClasses( controls[ 0 ][ widget ]( "widget" ), "ui-state-disabled" ); + + // remove the controlgroup before we start the next set + element.remove(); + } ); + } ); +} ); + +} ); diff --git a/tests/unit/controlgroup/options.js b/tests/unit/controlgroup/options.js new file mode 100644 index 000000000..565d4b893 --- /dev/null +++ b/tests/unit/controlgroup/options.js @@ -0,0 +1,109 @@ +define( [ + "jquery", + "ui/widgets/controlgroup", + "ui/widgets/checkboxradio", + "ui/widgets/selectmenu", + "ui/widgets/button" +], function( $ ) { + +module( "Controlgroup: options" ); + +test( "disabled", function( assert ) { + expect( 4 ); + var element = $( ".controlgroup" ).controlgroup().controlgroup( "option", "disabled", true ); + assert.lacksClasses( element, "ui-state-disabled" ); + equal( element.find( ".ui-state-disabled" ).length, 6, "Child widgets are disabled" ); + + element.controlgroup( "option", "disabled", false ); + assert.lacksClasses( element, "ui-state-disabled" ); + strictEqual( element.find( ".ui-state-disabled" ).length, 0, "Child widgets are not disabled" ); + +} ); + +test( "items - null", function() { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup( { + items: { + "button": null, + "selectmenu": null, + "checkboxradio": null + } + } ); + + strictEqual( element.children( ".ui-button" ).length, 0, + "Child widgets are not called when selector is null" ); + + element.controlgroup( "option", "items", { + "button": "button" + } ); + strictEqual( element.children( ".ui-button" ).length, 2, + "Correct child widgets are called when selector is updated" ); +} ); + +test( "items: custom selector", function() { + expect( 1 ); + var element = $( ".controlgroup" ).controlgroup( { + items: { + "button": ".button" + } + } ); + strictEqual( element.children( ".ui-button" ).length, 4, + "Correct child widgets are called when custom selector used" ); +} ); + +$.widget( "ui.test", { + _create: function() { + this.element.addClass( "ui-test ui-button" ); + }, + + // Controlgroup requires a refresh method to exist + refresh: $.noop +} ); + +test( "items: custom widget", function() { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup( { + items: { + "test": ".test" + } + } ); + + strictEqual( element.children( ".ui-button" ).length, 7, + "Correct child widgets are called when custom selector used" ); + strictEqual( element.children( ".ui-test" ).length, 1, + "Custom widget called" ); +} ); + +test( "onlyVisible", function( assert ) { + expect( 4 ); + var element = $( ".controlgroup" ).controlgroup( { + onlyVisible: false + } ), + buttons = element.children( ".ui-button" ); + + assert.lacksClassStart( buttons.eq( 1 ), "ui-corner" ); + assert.hasClasses( buttons.eq( 0 ), "ui-corner-left", + "onlyVisible: false: First button hidden second button doesn't get a corner class" ); + + element.controlgroup( "option", "onlyVisible", true ); + assert.lacksClassStart( buttons.eq( 0 ), "ui-corner" ); + assert.hasClasses( buttons.eq( 1 ), "ui-corner-left", + "onlyVisible: true: First button is hidden second button get corner class" ); +} ); + +test( "direction", function( assert ) { + expect( 6 ); + var element = $( ".controlgroup" ).controlgroup(), + buttons = element.children( ".ui-button" ).filter( ":visible" ); + + assert.hasClasses( element, "ui-controlgroup-horizontal" ); + assert.hasClasses( buttons.first(), "ui-corner-left" ); + assert.hasClasses( buttons.last(), "ui-corner-right" ); + + element.controlgroup( "option", "direction", "vertical" ); + assert.hasClasses( element, "ui-controlgroup-vertical" ); + assert.hasClasses( buttons.first(), "ui-corner-top" ); + assert.hasClasses( buttons.last(), "ui-corner-bottom" ); +} ); + +} ); diff --git a/tests/unit/date/core.js b/tests/unit/date/core.js index b04531593..2c32c70d2 100644 --- a/tests/unit/date/core.js +++ b/tests/unit/date/core.js @@ -154,7 +154,7 @@ test( "Months", 5, function() { ok( lastMonth.last ); ok( !lastMonth.first ); - ok( firstMonth.month() === lastMonth.month() - 1 ); + equal( firstMonth.month(), lastMonth.month() - 1 ); } ); test( "Equal", 4, function() { diff --git a/tests/unit/dialog/options.js b/tests/unit/dialog/options.js index 7565799c4..ab9ace259 100644 --- a/tests/unit/dialog/options.js +++ b/tests/unit/dialog/options.js @@ -156,10 +156,8 @@ test( "buttons - advanced", function( assert ) { click: function() { equal( this, element[ 0 ], "correct context" ); }, - icons: { - primary: "ui-icon-cancel" - }, - showText: false + icon: "ui-icon-cancel", + showLabel: false } ] } ); @@ -167,10 +165,10 @@ test( "buttons - advanced", function( assert ) { buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); equal( buttons.length, 1, "correct number of buttons" ); equal( buttons.attr( "id" ), "my-button-id", "correct id" ); - equal( buttons.text(), "a button", "correct label" ); + equal( $.trim( buttons.text() ), "a button", "correct label" ); assert.hasClasses( buttons, "additional-class" ); - deepEqual( buttons.button( "option", "icons" ), { primary: "ui-icon-cancel", secondary: null } ); - equal( buttons.button( "option", "text" ), false ); + deepEqual( buttons.button( "option", "icon" ), "ui-icon-cancel" ); + equal( buttons.button( "option", "showLabel" ), false ); buttons.trigger( "click" ); element.remove(); @@ -208,22 +206,27 @@ test( "closeOnEscape", function() { } ); test( "closeText", function() { - expect( 3 ); + expect( 4 ); var element = $( "<div></div>" ).dialog(); - equal( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close span" ).text(), "Close", + equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "Close", "default close text" ); element.remove(); element = $( "<div></div>" ).dialog( { closeText: "foo" } ); - equal( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close span" ).text(), "foo", + equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "foo", "closeText on init" ); element.remove(); element = $( "<div></div>" ).dialog().dialog( "option", "closeText", "bar" ); - equal( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close span" ).text(), "bar", + equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "bar", "closeText via option method" ); element.remove(); + + element = $( "<div></div>" ).dialog( { closeText: "<span>foo</span>" } ); + equal( $.trim( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).text() ), "<span>foo</span>", + "closeText is escaped" ); + element.remove(); } ); test( "draggable", function() { diff --git a/tests/unit/draggable/core.js b/tests/unit/draggable/core.js index 8bc751e0e..61d8503ea 100644 --- a/tests/unit/draggable/core.js +++ b/tests/unit/draggable/core.js @@ -345,4 +345,27 @@ test( "ui-draggable-handle managed correctly in nested draggables", function( as assert.hasClasses( child, "ui-draggable-handle", "child retains class name on destroy" ); } ); +// Support: IE 8 only +// IE 8 implements DOM Level 2 Events which only has events bubble up to the document. +// We skip this test since it would be impossible for it to pass in such an environment. +QUnit[ document.documentMode === 8 ? "skip" : "test" ]( + "does not stop propagation to window", + function( assert ) { + expect( 1 ); + var element = $( "#draggable1" ).draggable(); + + var handler = function() { + assert.ok( true, "mouseup propagates to window" ); + }; + $( window ).on( "mouseup", handler ); + + element.simulate( "drag", { + dx: 10, + dy: 10 + } ); + + $( window ).off( "mouseup", handler ); + } +); + } ); diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index 0971b2325..53468a3a9 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -48,7 +48,7 @@ } .sortable { position: relative; - top: 8000px; + top: 800px; left: 10px; width: 300px; padding: 0; @@ -81,17 +81,17 @@ <div style="width: 1px; height: 1000px;"></div> <div style="position: absolute; width: 1px; height: 2000px;"></div> <ul id="sortable" class="sortable"> - <li id="draggableSortable">Item 0</li> - <li id="draggableSortable2">Item 1</li> - <li>Item 2</li> - <li>Item 3</li> - </ul> - <ul id="sortable2" class="sortable"> - <li id="draggableSortableClone" class="sortable2Item">Item 0</li> - <li>Item 1</li> - <li>Item 2</li> - <li>Item 3</li> - </ul> + <li id="draggableSortable">Item 0</li> + <li id="draggableSortable2">Item 1</li> + <li>Item 2</li> + <li>Item 3</li> + </ul> + <ul id="sortable2" class="sortable"> + <li id="draggableSortableClone" class="sortable2Item">Item 0</li> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3</li> + </ul> </div> </body> diff --git a/tests/unit/draggable/options.js b/tests/unit/draggable/options.js index 2c8de5a0a..2aa5a1ae1 100644 --- a/tests/unit/draggable/options.js +++ b/tests/unit/draggable/options.js @@ -6,6 +6,8 @@ define( [ "ui/widgets/sortable" ], function( $, testHelper ) { +module( "draggable: options" ); + // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: 'parent' }, default, no clone", function() { expect( 4 ); diff --git a/tests/unit/index.html b/tests/unit/index.html index d6c214fa5..9f793141e 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -41,6 +41,8 @@ <li><a href="autocomplete/autocomplete.html">Autocomplete</a></li> <li><a href="calendar/calendar.html">Calendar</a></li> <li><a href="button/button.html">Button</a></li> + <li><a href="checkboxradio/checkboxradio.html">Checkboxradio</a></li> + <li><a href="controlgroup/controlgroup.html">Controlgroup</a></li> <li><a href="datepicker/datepicker.html">Datepicker</a></li> <li><a href="dialog/dialog.html">Dialog</a></li> <li><a href="menu/menu.html">Menu</a></li> diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js index 5431d689d..1c1a6b622 100644 --- a/tests/unit/selectmenu/core.js +++ b/tests/unit/selectmenu/core.js @@ -15,7 +15,7 @@ test( "markup structure", function( assert ) { assert.hasClasses( button, "ui-selectmenu-button ui-selectmenu-button-closed ui-widget" ); - assert.lacksClasses( button, "ui-selectmenu-button-open" ); + assert.lacksClasses( button, "ui-selectmenu-button-open ui-selectmenu-open" ); assert.hasClasses( menuWrap, "ui-selectmenu-menu" ); assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" ); } ); @@ -89,8 +89,8 @@ test( "_renderButtonItem()", function() { element.selectmenu( "refresh" ); option = element.find( "option:selected" ); equal( + $.trim( button.text() ), option.text() + element[ 0 ].selectedIndex, - button.text(), "refresh: button item text" ); @@ -98,8 +98,8 @@ test( "_renderButtonItem()", function() { menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" ); option = element.find( "option" ).last(); equal( + $.trim( button.text() ), option.text() + element[ 0 ].selectedIndex, - button.text(), "click: button item text" ); } ); @@ -146,7 +146,7 @@ $.each( [ selected.val(), "original select state" ); - equal( button.text(), selected.text(), "button text" ); + equal( $.trim( button.text() ), selected.text(), "button text" ); start(); } ); } ); @@ -181,7 +181,7 @@ $.each( [ selected.val(), "original select state" ); - equal( button.text(), selected.text(), "button text" ); + equal( $.trim( button.text() ), selected.text(), "button text" ); start(); }, 1 ); } ); @@ -222,7 +222,7 @@ $.each( [ "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" ); + equal( $.trim( button.text() ), options.eq( 1 ).text(), "button text" ); start(); } ); } ); @@ -329,4 +329,22 @@ $.each( [ } ); } ); + asyncTest( "Selectmenu should reset when its parent form resets", function() { + expect( 2 ); + + var element = $( "#speed" ).selectmenu(), + widget = element.selectmenu( "widget" ), + initialValue = element.val(), + form = element.closest( "form" ); + + element.val( "Slower" ); + element.selectmenu( "refresh" ); + equal( $.trim( widget.text() ), "Slower" ); + form[ 0 ].reset(); + setTimeout( function() { + equal( $.trim( widget.text() ), initialValue ); + start(); + } ); + } ); + } ); diff --git a/tests/unit/selectmenu/methods.js b/tests/unit/selectmenu/methods.js index e49da50f5..e8f2d2d37 100644 --- a/tests/unit/selectmenu/methods.js +++ b/tests/unit/selectmenu/methods.js @@ -81,21 +81,21 @@ asyncTest( "refresh - change selected option", function() { var element = $( "#speed" ).selectmenu(), button = element.selectmenu( "widget" ); - equal( element.find( "option:selected" ).text(), button.text(), "button text after init" ); + equal( $.trim( button.text() ), "Medium", "button text after init" ); button.simulate( "focus" ); + setTimeout( function() { - equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" ); + equal( $.trim( button.text() ), "Medium", "button text after focus" ); element[ 0 ].selectedIndex = 0; element.selectmenu( "refresh" ); - equal( element.find( "option:selected" ).text(), button.text(), - "button text after changing selected option" ); + equal( $.trim( button.text() ), "Slower", "button text after changing selected option" ); element.find( "option" ).prop( "selected", false ); element.append( "<option selected value=\"selected_option\">Selected option</option>" ); element.selectmenu( "refresh" ); - equal( "Selected option", button.text(), "button text after adding selected option" ); + equal( $.trim( button.text() ), "Selected option", "button text after adding selected option" ); start(); } ); @@ -180,7 +180,7 @@ test( "widget and menuWidget", function( assert ) { menu = element.selectmenu( "menuWidget" ); equal( button.length, 1, "button: one element" ); - assert.hasClasses( button, "ui-selectmenu-button" ); + assert.hasClasses( button, "ui-button" ); equal( menu.length, 1, "Menu Widget: one element" ); ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" ); diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html index 16e0f15a7..be8b826c8 100644 --- a/tests/unit/selectmenu/selectmenu.html +++ b/tests/unit/selectmenu/selectmenu.html @@ -3,9 +3,8 @@ <head> <meta charset="utf-8"> <title>jQuery UI Selectmenu Test Suite</title> - <script src="../../../external/requirejs/require.js"></script> - <script src="../../lib/css.js" data-modules="core menu selectmenu"></script> + <script src="../../lib/css.js" data-modules="core menu selectmenu button"></script> <script src="../../lib/bootstrap.js" data-widget="selectmenu"></script> </head> <body> @@ -14,7 +13,7 @@ <div id="qunit-fixture"> <div id="selectmenu-wrap1" class="selectmenu-wrap"></div> - <div id="selectmenu-wrap2" class="selectmenu-wrap"> + <form id="selectmenu-wrap2" class="selectmenu-wrap"> <label for="speed">Select a speed:</label> <select name="speed" id="speed"> <option value="Slower">Slower</option> @@ -23,7 +22,7 @@ <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> - </div> + </form> <label for="number">Select a number:</label> <select name="number" id="number"> diff --git a/tests/unit/slider/methods.js b/tests/unit/slider/methods.js index 15b2e8726..5c0cbb7bd 100644 --- a/tests/unit/slider/methods.js +++ b/tests/unit/slider/methods.js @@ -111,8 +111,54 @@ test( "value", function() { equal( element.slider( "value" ), 460, "value is restricted to maximum valid step" ); } ); -//test( "values", function() { -// ok(false, "missing test - untested code is broken code." ); -//}); +test( "values, single step", function() { + expect( 8 ); + + var element = $( "<div></div>" ).slider( { + range: false, + min: 10, + max: 100, + step: 1, + values: [ 20 ] + } ); + + deepEqual( element.slider( "values" ), [ 20 ], "range: false, values - get value for handle" ); + equal( element.slider( "values", 0 ), 20, "values (index) - get value of handle" ); + + element.slider( "values", 0, 5 ); + equal( element.slider( "values", 0 ), 10, "values (index) - restrict against min" ); + + element.slider( "values", 0, 110 ); + equal( element.slider( "values", 0 ), 100, "values (index) - restrict against max" ); + + element.slider( "option", "range", true ); + element.slider( "values", [ 20, 90 ] ); + + deepEqual( element.slider( "values" ), [ 20, 90 ], "range: true, values - get value for all handles" ); + equal( element.slider( "values", 0 ), 20, "values (index) - 1st handle" ); + equal( element.slider( "values", 1 ), 90, "values (index) - 2nd handle" ); + + element.slider( "values", [ 5, 110 ] ); + deepEqual( element.slider( "values" ), [ 10, 100 ], "values - restricted against min and max" ); + element.slider( "destroy" ); +} ); + +test( "values, multi step", function() { + expect( 2 ); + + var element = $( "<div></div>" ).slider( { + range: false, + min: 9, + max: 20, + step: 3, + values: [ 9, 12 ] + } ); + deepEqual( element.slider( "values" ), [ 9, 12 ], "values - evenly divisible by step" ); + + element.slider( "values", [ 10, 20 ] ); + deepEqual( element.slider( "values" ), [ 9, 18 ], "values - not evenly divisible by step" ); + + element.slider( "destroy" ); +} ); } ); diff --git a/tests/unit/sortable/options.js b/tests/unit/sortable/options.js index cdb932af3..ba3a70d99 100644 --- a/tests/unit/sortable/options.js +++ b/tests/unit/sortable/options.js @@ -87,7 +87,6 @@ asyncTest( "#7415: Incorrect revert animation with axis: 'y'", function() { element = $( "#sortable" ).sortable( { axis: "y", revert: true, - stop: start, sort: function() { expectedLeft = item.css( "left" ); } @@ -103,6 +102,7 @@ asyncTest( "#7415: Incorrect revert animation with axis: 'y'", function() { var top = parseFloat( item.css( "top" ) ); equal( item.css( "left" ), expectedLeft, "left not animated" ); ok( top > 0 && top < 300, "top is animated" ); + start(); }, 100 ); } ); diff --git a/tests/unit/subsuite.js b/tests/unit/subsuite.js index 31a279c28..498f60a0b 100644 --- a/tests/unit/subsuite.js +++ b/tests/unit/subsuite.js @@ -6,7 +6,7 @@ var versions = [ "1.9.0", "1.9.1", "1.10.0", "1.10.1", "1.10.2", "1.11.0", "1.11.1", "1.11.2", "1.11.3", - "compat-git" + "git" ], additionalTests = { diff --git a/tests/unit/tabs/helper.js b/tests/unit/tabs/helper.js index 073895f5f..8c102ec60 100644 --- a/tests/unit/tabs/helper.js +++ b/tests/unit/tabs/helper.js @@ -47,7 +47,10 @@ return $.extend( helper, { equalHeight: function( tabs, height ) { tabs.find( ".ui-tabs-panel" ).each( function() { - equal( $( this ).outerHeight(), height ); + + // Handle overly-precise values + var actualHeight = parseFloat( $( this ).outerHeight().toFixed( 1 ) ); + equal( actualHeight, height ); } ); }, diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html deleted file mode 100644 index 1d82cf665..000000000 --- a/tests/visual/button/button.html +++ /dev/null @@ -1,89 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Button Visual Test</title> - <link rel="stylesheet" href="../../../themes/base/all.css"> - <script src="../../../external/requirejs/require.js"></script> - <script src="../../../demos/bootstrap.js"> - $( ".buttons" ).each(function() { - $( this ).children() - .eq( 0 ) - .button({ - text: false, - icons: { - primary: "ui-icon-help" - } - }) - .end() - .eq( 1 ) - .button({ - icons: { - primary: "ui-icon-help" - }, - disabled: true - }) - .end() - .eq( 2 ) - .button(); - }); - </script> -</head> -<body> - -<div class="buttons"> - <button>button</button> - <button>button</button> - <button>button</button> -</div> - -<div class="buttons"> - <button type="button">button button</button> - <button type="button">button button</button> - <button type="button">button button</button> -</div> - -<div class="buttons"> - <button type="submit">button submit</button> - <button type="submit">button submit</button> - <button type="submit">button submit</button> -</div> - -<div class="buttons"> - <input type="button" value="input button"> - <input type="button" value="input button"> - <input type="button" value="input button"> -</div> - -<div class="buttons"> - <input type="submit" value="input submit"> - <input type="submit" value="input submit"> - <input type="submit" value="input submit"> -</div> - -<div class="buttons"> - <input type="checkbox" id="input-checkbox0"> - <input type="checkbox" id="input-checkbox1"> - <input type="checkbox" id="input-checkbox2"> - <label for="input-checkbox0">input checkbox</label> - <label for="input-checkbox1">input checkbox</label> - <label for="input-checkbox2">input checkbox</label> -</div> - -<div class="buttons"> - <input type="radio" id="input-radio0" name="radio"> - <input type="radio" id="input-radio1" name="radio"> - <input type="radio" id="input-radio2" name="radio"> - <label for="input-radio0">input radio</label> - <label for="input-radio1">input radio</label> - <label for="input-radio2">input radio</label> -</div> - -<div class="buttons"> - <a href="#">anchor</a> - <a href="#">anchor</a> - <a href="#">anchor</a> -</div> - -</body> -</html> diff --git a/tests/visual/button/performance.html b/tests/visual/button/performance.html deleted file mode 100644 index 0d807d167..000000000 --- a/tests/visual/button/performance.html +++ /dev/null @@ -1,21 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Button Visual Test: Initialization Performance</title> - <link rel="stylesheet" href="../../../themes/base/all.css"> - <script src="../../../external/requirejs/require.js"></script> - <script src="../../../demos/bootstrap.js"> - var start, - html = new Array( 500 ).join( "<button>button</button>" ); - $( html ).appendTo( "body" ); - - start = $.now(); - $( "button" ).button(); - $( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" ); - </script> -</head> -<body> - -</body> -</html> diff --git a/tests/visual/checkboxradio/checkboxradio.html b/tests/visual/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..a472c9df2 --- /dev/null +++ b/tests/visual/checkboxradio/checkboxradio.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI - Checkboxes</title> + <link rel="stylesheet" href="../../../themes/base/all.css"> + <script src="../../../external/jquery/jquery.js"></script> + <script src="../../../ui/core.js"></script> + <script src="../../../ui/widget.js"></script> + <script src="../../../ui/button.js"></script> + <script src="../../../ui/checkboxradio.js"></script> + <script> + $(function() { + var checkboxes = $( "form input" ).checkboxradio(); + + $( ".controls input, .controls select" ).on( "change keyup", function() { + var option = $( this ).attr( "name" ), + value = $( this ).val(); + + if ( $( this ).is( "[type=checkbox]" ) ) { + value = $( this ).is( ":checked" ); + } + if ( option != "label" || value !== "" ) { + checkboxes.checkboxradio( "option", option, value ); + } + }); + $( ".controls > button" ).click( function() { + if ( this.id !== "create" ) { + checkboxes.checkboxradio( this.id ); + } else { + checkboxes.checkboxradio(); + } + }); + }); + </script> + <style> + #format { margin-top: 2em; } + </style> +</head> +<body> +<h2> + Easy way to toggle through various combinations of options and states to make sure none lead to + a broken appearence. +</h2> +<div class="controls"> + <button id="create">Create</button> + <button id="destroy">Destroy</button> + <button id="enable">Enable</button> + <button id="disable">Disable</button> + <button id="refresh">Refresh</button> + <input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label> + <input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label> + <label for="label">Label<input type="text" id="label" name="label"></label> +</div> +<form> + <input type="checkbox" id="checkbox-1"> + <label for="checkbox-1">Checkbox widget sample</label> + <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label> + + <label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label> + <input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label> + <button type="reset">Reset</button> +</form> +</body> +</html> diff --git a/tests/visual/index.html b/tests/visual/index.html index 98753c827..39168c9f4 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -31,6 +31,11 @@ <li><a href="button/performance.html">Performance</a></li> </ul> + <h2>Checkboxradio</h2> + <ul> + <li><a href="checkboxradio/checkboxradio.html">General</a></li> + </ul> + <h2>Dialog</h2> <ul> <li><a href="dialog/animated.html">Animations</a></li> |