diff options
Diffstat (limited to 'tests/unit/checkboxradio')
| -rw-r--r-- | tests/unit/checkboxradio/all.html | 26 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/checkboxradio.html | 76 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/common.js | 22 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/core.js | 136 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/events.js | 42 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/methods.js | 96 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/options.js | 205 |
7 files changed, 603 insertions, 0 deletions
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" ); +} ); + +} ); |