jQuery UI Checkboxradio - Default functionality

+The Rime of the Ancient Mariner (text of 1834) +BY SAMUEL TAYLOR COLERIDGE +Argument + +How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole; +and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and +of the strange things that befell; and in what manner the Ancyent Marinere came back to his own +Country. + +PART I +It is an ancient Mariner, +And he stoppeth one of three. +'By thy long grey beard and glittering eye, +Now wherefore stopp'st thou me? + +The Bridegroom's doors are opened wide, +And I am next of kin; +The guests are met, the feast is set: +May'st hear the merry din.' + +He holds him with his skinny hand, +'There was a ship,' quoth he. +'Hold off! unhand me, grey-beard loon!' +Eftsoons his hand dropt he. + +He holds him with his glittering eyeâ +The Wedding-Guest stood still, +And listens like a three years' child: +The Mariner hath his will. + +The Wedding-Guest sat on a stone: +He cannot choose but hear; +And thus spake on that ancient man, +The bright-eyed Mariner. + +'The ship was cheered, the harbour cleared, +Merrily did we drop +Below the kirk, below the hill, +Below the lighthouse top. + +The Sun came up upon the left, +Out of the sea came he! +And he shone bright, and on the right +Went down into the sea. + +Higher and higher every day, +Till over the mast at noonâ' +The Wedding-Guest here beat his breast, +For he heard the loud bassoon. + +The bride hath paced into the hall, +Red as a rose is she; +Nodding their heads before her goes +The merry minstrelsy. + +The Wedding-Guest he beat his breast, +Yet he cannot choose but hear; +And thus spake on that ancient man, +The bright-eyed Mariner. + +And now the STORM-BLAST came, and he +Was tyrannous and strong: +He struck with his o'ertaking wings, +And chased us south along. + +With sloping masts and dipping prow, +As who pursued with yell and blow +Still treads the shadow of his foe, +And forward bends his head, +The ship drove fast, loud roared the blast, +And southward aye we fled. + +And now there came both mist and snow, +And it grew wondrous cold: +And ice, mast-high, came floating by, +As green as emerald. + +And through the drifts the snowy clifts +Did send a dismal sheen: +Nor shapes of men nor beasts we kenâ +The ice was all between. + +The ice was here, the ice was there, +The ice was all around: +It cracked and growled, and roared and howled, +Like noises in a swound! + +At length did cross an Albatross, +Thorough the fog it came; +As if it had been a Christian soul, +We hailed it in God's name. + +It ate the food it ne'er had eat, +And round and round it flew. +The ice did split with a thunder-fit; +The helmsman steered us through! + +And a good south wind sprung up behind; +The Albatross did follow, +And every day, for food or play, +Came to the mariner's hollo! + +In mist or cloud, on mast or shroud, +It perched for vespers nine; +Whiles all the night, through fog-smoke white, +Glimmered the white Moon-shine.' + +'God save thee, ancient Mariner! +From the fiends, that plague thee thus!â +Why look'st thou so?'âWith my cross-bow +I shot the ALBATROSS. +

" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); + error = new Error( "Can't create checkboxradio on element.nodeName=input and element.type=button" ); + assert.raises( + function() { + $( "" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); +}); +test( "Calling checkboxradio on an input with no label throws an error", function( assert ) { + expect( 1 ); + var error = new Error( "No label found for checkboxradio widget" ); + assert.raises( + function() { + $( "" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); +}); + +} ); diff --git a/tests/unit/checkboxradio/events.js b/tests/unit/checkboxradio/events.js new file mode 100644 index 000000000..e5909a386 --- /dev/null +++ b/tests/unit/checkboxradio/events.js @@ -0,0 +1,113 @@ +define( [ + "jquery", + "ui/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: events" ); + +asyncTest( "form reset / click", function( assert ) { + expect( 35 ); + + var radios = [ + $( "#radio11" ).checkboxradio(), + $( "#radio12" ).checkboxradio(), + $( "#radio13" ).checkboxradio() + ], + widgets = [ + radios[ 0 ].checkboxradio( "widget" ), + radios[ 1 ].checkboxradio( "widget" ), + radios[ 2 ].checkboxradio( "widget" ) + ], + form1 = $( "#form1" ), + form2 = $( "#form2" ); + + // Checkes that only the specified radio is checked in the group + function assertChecked( checked ) { + $.each( widgets, function( index ) { + var method = index === checked ? "hasClasses" : "lacksClasses"; + + assert[ method ]( widgets[ index ], "ui-checkboxradio-checked ui-state-active" ); + } ); + } + + // Checks the form count on each form + function assertFormCount( count ) { + equal( form1.data( "uiCheckboxradioCount" ), count, "Form1 has a count of " + count ); + equal( form2.data( "uiCheckboxradioCount" ), 3, "Form2 has a count of 3" ); + } + + // Run the tests + function testForms( current, start ) { + assertChecked( 2 ); + + if ( !start && current !== 0 ) { + radios[ current - 1 ].checkboxradio( "destroy" ); + } + + assertFormCount( 3 - current ); + + radios[ current ].prop( "checked", true ); + radios[ current ].trigger( "change" ); + assertChecked( current ); + + form1.trigger( "reset" ); + } + + // Recoursivly run the tests in a setTimeout with call back for the resets + function iterate( i ) { + setTimeout( function() { + if ( i < 3 ) { + testForms( i ); + iterate( i + 1 ); + return; + } + radios[ 2 ].checkboxradio( "destroy" ); + assertChecked( false ); + start(); + } ); + } + + $( "#form2 input" ).checkboxradio(); + + // Check the starting state then kick everything off + testForms( 0, true ); + iterate( 0 ); + +} ); + +asyncTest( + "Resetting a checkbox's form should refresh the visual state of the checkbox", + function( assert ) { + expect( 2 ); + var 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..f189c9eea --- /dev/null +++ b/tests/unit/checkboxradio/methods.js @@ -0,0 +1,97 @@ +define( [ + "jquery", + "ui/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(){ + var input = $( "#" + value + "-method-refresh" ), + label = $( "#" + value + "-method-refresh-label" ); + + expect( 1 ); + + 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..11bd072ca --- /dev/null +++ b/tests/unit/checkboxradio/options.js @@ -0,0 +1,189 @@ +define( [ + "jquery", + "ui/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 ) { + var checkbox = $( "#checkbox-option-disabled" ); + expect( 6 ); + 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" ); +} +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( 2 ); + + checkbox.checkboxradio(); + assertIcon( checkbox, false, assert ); +}); +test( "icon", function( assert ){ + var checkbox = $( "#checkbox-option-icon" ); + + expect( 8 ); + + checkbox.prop( "checked", true ); + + checkbox.checkboxradio(); + assertIcon( checkbox, "check", assert ); + + checkbox.checkboxradio( "option", "icon", false ); + assertNoIcon( checkbox ); + + checkbox.checkboxradio( "option", "icon", true ); + assertIcon( checkbox, "check", assert ); + + checkbox.checkboxradio( "option", "icon", false ); + assertNoIcon( checkbox ); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + checkbox.checkboxradio( "option", "icon", true ); + 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( 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( 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 ); + + // We are testing the default here because the default null is a special value which means to check + // the DOM, so we need to make sure this happens correctly checking the options should never return + // null. It should always be true or false + 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( widget.text(), + " checkbox label", "When null is passed on create text from dom is used in dom" ); + +}); + +test( "label", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 4 ); + + 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( 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( widget.text(), + " bar", "When null is passed text from dom is used in dom" ); + +}); + +} ); diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js new file mode 100644 index 000000000..e69de29bb diff --git a/tests/unit/index.html b/tests/unit/index.html index 418cfd34c..fe358cb6c 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -40,6 +40,7 @@

Accordion

Autocomplete

diff --git a/tests/visual/checkboxradio/checkboxradio.html b/tests/visual/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..634e8df81 --- /dev/null +++ b/tests/visual/checkboxradio/checkboxradio.html @@ -0,0 +1,65 @@ + + + + + jQuery UI - Checkboxes + + + + + + + + + + +

+ Easy way to toggle through various combinations of options and states to make sure non lead to + a broken appearence. +

+ + + + + + Icon + Disabled + Label +

+ + + 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 @@

Performance

Checkboxradio

General

Dialog

Animations

" ); + this.iconSpace = $( " " ); + this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" ); + } + + if ( this.type === "checkbox" ) { + toAdd += checked ? "ui-icon-check" : "ui-icon-blank"; + this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" ); + } else { + toAdd += "ui-icon-blank"; + } + this._addClass( this.icon, "ui-checkboxradio-icon", toAdd ); + if ( !checked ) { + this._removeClass( this.icon, null, "ui-icon-check" ); + } + this.icon.prependTo( this.label ).after( this.iconSpace ); + } else if ( this.icon !== undefined ) { + this.icon.remove(); + this.iconSpace.remove(); + delete this.icon; + } + }, + + _updateLabel: function() { + + // Remove the contents of the label ( minus the icon, icon space, and input ) + this.label.contents().not( this.element.add( this.icon ).add( this.iconSpace ) ).remove(); + this.label.append( this.options.label ); + }, + + refresh: function() { + var checked = this.element[ 0 ].checked, + isDisabled = this.element[ 0 ].disabled; + + this._updateIcon( checked ); + this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked ); + if ( this.options.label !== null ) { + this._updateLabel(); + } + + if ( isDisabled !== this.options.disabled ) { + this._setOptions( { "disabled": isDisabled } ); + } + } + +} ); + +return $.ui.checkboxradio; + +} ) ); -- 2.39.5

Checkbox and radio button widgets

Radio Group

Checkbox

Checkbox nested in label

Checkbox and radio button widgets

Radio Group

Checkbox

Checkbox nested in label

1.) Select a brand

2.) Select a shape

3.) Customize

Radio Group

Controlgroup

Split button

+ Easy way to toggle through various combinations of options and states to make sure non lead to + a broken appearence. +

Checkboxradio

Dialog