diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html new file mode 100644 index 000000000..c8f4c5566 --- /dev/null +++ b/demos/checkboxradio/default.html @@ -0,0 +1,70 @@ + + + + + jQuery UI Checkboxradio - Default functionality + + + + + + + + + +
+

Checkbox and radio button widgets

+ +

Radio Group

+
+ Select a Location: + + + + + + +
+ +

Checkbox

+
+ Hotel Ratings: + + + + + + + + +
+ +

Checkbox nested in label

+
+ Bed Type: + + + + +
+
+ +
+

Examples of the markup that can be used with checkboxes and radio buttons.

+
+ + diff --git a/demos/checkboxradio/images/jquery-mobile.png b/demos/checkboxradio/images/jquery-mobile.png new file mode 100644 index 000000000..fe2c36376 Binary files /dev/null and b/demos/checkboxradio/images/jquery-mobile.png differ diff --git a/demos/checkboxradio/images/jquery-ui.png b/demos/checkboxradio/images/jquery-ui.png new file mode 100644 index 000000000..651e2e115 Binary files /dev/null and b/demos/checkboxradio/images/jquery-ui.png differ diff --git a/demos/checkboxradio/images/jquery.png b/demos/checkboxradio/images/jquery.png new file mode 100644 index 000000000..ff3fdc21d Binary files /dev/null and b/demos/checkboxradio/images/jquery.png differ diff --git a/demos/checkboxradio/images/qunit.png b/demos/checkboxradio/images/qunit.png new file mode 100644 index 000000000..048bcfddb Binary files /dev/null and b/demos/checkboxradio/images/qunit.png differ diff --git a/demos/checkboxradio/images/sizzle.png b/demos/checkboxradio/images/sizzle.png new file mode 100644 index 000000000..6145cd8ec Binary files /dev/null and b/demos/checkboxradio/images/sizzle.png differ diff --git a/demos/checkboxradio/index.html b/demos/checkboxradio/index.html new file mode 100644 index 000000000..08e598dbc --- /dev/null +++ b/demos/checkboxradio/index.html @@ -0,0 +1,18 @@ + + + + + + jQuery UI Checkboxradio Demos + + + + + + + diff --git a/demos/checkboxradio/no-icons.html b/demos/checkboxradio/no-icons.html new file mode 100644 index 000000000..64b511246 --- /dev/null +++ b/demos/checkboxradio/no-icons.html @@ -0,0 +1,70 @@ + + + + + jQuery UI Checkboxradio - No Icons + + + + + + + + + +
+

Checkbox and radio button widgets

+ +

Radio Group

+
+ Select a Location: + + + + + + +
+ +

Checkbox

+
+ Hotel Ratings: + + + + + + + + +
+ +

Checkbox nested in label

+
+ Bed Type: + + + + +
+
+ +
+

Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.

+
+ + \ No newline at end of file diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html new file mode 100644 index 000000000..f8da07118 --- /dev/null +++ b/demos/checkboxradio/product-selector.html @@ -0,0 +1,127 @@ + + + + + jQuery UI Checkboxradio - Product Selector + + + + + + + + + + + +
+
+

1.) Select a brand

+
+ + + + + + + + + + +
+
+
+

2.) Select a shape

+
+ + + + + + + + +
+
+
+

3.) Customize

+
+ + + + + + + + +
+
+
+
+ +
+

Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.

+
+ + diff --git a/demos/checkboxradio/radiogroup.html b/demos/checkboxradio/radiogroup.html new file mode 100644 index 000000000..b307db82d --- /dev/null +++ b/demos/checkboxradio/radiogroup.html @@ -0,0 +1,39 @@ + + + + + jQuery UI Checkboxradio - Radio Group + + + + + + + + + + +
+ +

Radio Group

+
+ Select a Location: + + + + + + +
+
+ +
+

Example markup using the controlgroup widget to create a radio group.

+
+ + diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html new file mode 100644 index 000000000..9e4bcdd80 --- /dev/null +++ b/demos/controlgroup/default.html @@ -0,0 +1,90 @@ + + + + + jQuery UI Controlgroup - Default Functionality + + + + + + + + + + + + + + + +
+

A Controlgroup featuring various form controls

+
+
+

Controlgroup

+
+ Rental Car +
+ + + + + + + + +
+
+
+
+ Rental Car +
+ + + + + + + + +
+
+>>>>>>> 423b976... Checkboxradio: Fixed demos and tests +
+ + + diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html new file mode 100644 index 000000000..58e2f7eda --- /dev/null +++ b/demos/controlgroup/index.html @@ -0,0 +1,17 @@ + + + + + + jQuery UI Checkboxradio Demos + + + + + + + diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html new file mode 100644 index 000000000..5d4c7b3ce --- /dev/null +++ b/demos/controlgroup/splitbutton.html @@ -0,0 +1,58 @@ + + + + + jQuery UI Controlgroup - Split Button + + + + + + + + + + + + + + + +
+

A Controlgroup creating a split button

+
+
+

Split button

+
+ + +
+
+
+

A Controlgroup creating a split button

+
+ + diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html new file mode 100644 index 000000000..f90fb3040 --- /dev/null +++ b/demos/controlgroup/toolbar.html @@ -0,0 +1,256 @@ + + + + + jQuery UI Controlgroup - Toolbar + + + + + + + + + + + + + + + +
+

A sample editor toolbar

+

Highlight text and edit it using the buttons and dropdowns in the toolbar

+
+
+ + + + + + + + + + + + +
+

+
+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.
+
+ + diff --git a/demos/index.html b/demos/index.html index f37874a44..4b4d04e06 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,6 +11,7 @@
  • accordion
  • autocomplete
  • button
    • +
  • checkboxradio
  • datepicker
  • dialog
  • draggable
    • diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..92db788c5 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio.html @@ -0,0 +1,69 @@ + + + + + jQuery UI Checkboxradio Test Suite + + + + + + + +
    +
    + +
    + + + +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + diff --git a/tests/unit/checkboxradio/common.js b/tests/unit/checkboxradio/common.js new file mode 100644 index 000000000..6a739435f --- /dev/null +++ b/tests/unit/checkboxradio/common.js @@ -0,0 +1,22 @@ +define( [ + "lib/common", + "ui/checkboxradio" +], function( common ) { + +common.testWidget( "checkboxradio", { + noDefaultElement: true, + defaults: { + disabled: null, + label: null, + icon: true, + classes: { + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-icon": "ui-corner-all" + }, + + // Callbacks + create: null + } +}); + +} ); diff --git a/tests/unit/checkboxradio/core.js b/tests/unit/checkboxradio/core.js new file mode 100644 index 000000000..e70ca58c1 --- /dev/null +++ b/tests/unit/checkboxradio/core.js @@ -0,0 +1,102 @@ +define( [ + "jquery", + "ui/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( "Checkbox creation requires a label, and finds it in all cases", function( assert ) { + expect( 7 ); + var groups = [ + "", + "", + "", + "", + "", + "", + "" + ]; + + $.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 error = new Error( "Can't create checkboxradio on element.nodeName=div and element.type=undefined" ); + assert.raises( + function() { + $( "
    " ).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
  • Button
    • +
  • Checkboxradio
  • Datepicker
  • Dialog
  • Menu
    • 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. +

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

    + +

    Dialog