Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.

diff --git a/demos/button/icons.html b/demos/button/icons.html index 76cb1147876..e52d810bcf0 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -11,39 +11,59 @@ - - - - - -

Some buttons with various combinations of text and icons.

+ +

CSS

+ + + + + +

diff --git a/demos/button/index.html b/demos/button/index.html index 5e1b8b7b300..55eacffd811 100644 --- a/demos/button/index.html +++ b/demos/button/index.html @@ -9,11 +9,7 @@

diff --git a/demos/button/radio.html b/demos/button/radio.html deleted file mode 100644 index 5d1fcdce93c..00000000000 --- a/demos/button/radio.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - jQuery UI Button - Radios - - - - - - - - - - - - -

A set of three radio buttons transformed into a button set.

- - diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html deleted file mode 100644 index de6e2bd2f0e..00000000000 --- a/demos/button/splitbutton.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - jQuery UI Button - Split button - - - - - - - - - - - - - -

- - -

Open...
Save
Delete

- -

An example of a split button built with two buttons: A plain button with just text, one with only a primary icon -and no text. Both are grouped together in a set.

- - diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html deleted file mode 100644 index 4a93c5ccf97..00000000000 --- a/demos/button/toolbar.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - - jQuery UI Button - Toolbar - - - - - - - - - - - - - -

- A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, - an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. -

- - diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html new file mode 100644 index 00000000000..e9e9383e016 --- /dev/null +++ b/demos/checkboxradio/default.html @@ -0,0 +1,43 @@ + + + + + jQuery UI Button - Default functionality + + + + + + + + + + + +

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

+ + diff --git a/demos/checkboxradio/icons.html b/demos/checkboxradio/icons.html new file mode 100644 index 00000000000..4f46bcc8a34 --- /dev/null +++ b/demos/checkboxradio/icons.html @@ -0,0 +1,45 @@ + + + + + jQuery UI Button - Icon functionality + + + + + + + + + + + +

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

+ + diff --git a/demos/checkboxradio/index.html b/demos/checkboxradio/index.html new file mode 100644 index 00000000000..6d6f47fd586 --- /dev/null +++ b/demos/checkboxradio/index.html @@ -0,0 +1,16 @@ + + + + + + jQuery UI Checkboxradio Demos + + + +

Default functionality
Icons

+ + + diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html new file mode 100644 index 00000000000..49592a2bd52 --- /dev/null +++ b/demos/controlgroup/default.html @@ -0,0 +1,131 @@ + + + + + jQuery UI Controlgroup - Default Funstionality + + + + + + + + + + + + + + + +

Some buttons with various combinations of text and icons.

+ +

CSS

+ + + + + +

+
+

+ + + + + +

+ + diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html new file mode 100644 index 00000000000..98ff250cf45 --- /dev/null +++ b/demos/controlgroup/index.html @@ -0,0 +1,16 @@ + + + + + + jQuery UI Checkboxradio Demos + + + +

Default functionality
Toolbar

+ + + diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html new file mode 100644 index 00000000000..d292b3ab424 --- /dev/null +++ b/demos/controlgroup/toolbar.html @@ -0,0 +1,256 @@ + + + + + jQuery UI Controlgroup - Default Funstionality + + + + + + + + + + + + + + + +

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 f37874a4481..89375dde704 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,6 +11,8 @@

diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 56c0fed1e00..21feba9128e 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -10,6 +10,7 @@ + @@ -78,8 +79,10 @@ notify( button ); }); }); - $( ".set" ).buttonset({ - items: "button" + $( ".set" ).controlgroup({ + items: { + "button" : "button" + } }); $( "button.menu" ) diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index c16b3e6ea8e..3d9ee1836fa 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -11,7 +11,7 @@ + + + + + + + + + + + + + + +

+ + + diff --git a/tests/unit/checkboxradio/checkboxradio_common.js b/tests/unit/checkboxradio/checkboxradio_common.js new file mode 100644 index 00000000000..93c74613767 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_common.js @@ -0,0 +1,10 @@ +TestHelpers.commonWidgetTests( "checkboxradio", { + defaults: { + disabled: null, + label: null, + icon: false, + + // Callbacks + create: null + } +}); diff --git a/tests/unit/checkboxradio/checkboxradio_core.js b/tests/unit/checkboxradio/checkboxradio_core.js new file mode 100644 index 00000000000..843fc3ff5f1 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_core.js @@ -0,0 +1,144 @@ +/* + * checkboxradio_core.js + */ + + +(function($) { + +module("Checkboxradio: core"); +test("Checkbox", function() { + expect( 4 ); + var input = $("#check"), + label = $("label[for=check]"); + ok( input.is( ":visible" ) ); + ok( !label.hasClass(".ui-button)") ); + input.checkboxradio(); + strictEqual( input.attr( "class" ), "ui-helper-hidden-accessible ui-checkboxradio" ); + strictEqual( label.attr( "class" ), "ui-button ui-widget ui-corner-all ui-checkbox-label" ); +}); + +test("Radios", function() { + expect( 4 ); + var inputs = $("#radio0 input"), + labels = $("#radio0 label"); + ok( inputs.is(":visible") ); + ok( labels.is(":not(.ui-button)") ); + inputs.checkboxradio(); + ok( inputs.is(".ui-helper-hidden-accessible") ); + ok( labels.is(".ui-button") ); +}); + +function assert(noForm, form1, form2) { + ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") ); + ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") ); + ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") ); +} + +test("radio groups", function() { + expect( 12 ); + $("input[type=radio]").checkboxradio(); + assert(":eq(0)", ":eq(1)", ":eq(2)"); + + // click outside of forms + $("#radio0 .ui-button:eq(1)").simulate("click"); + assert(":eq(1)", ":eq(1)", ":eq(2)"); + + // click in first form + $("#radio1 .ui-button:eq(0)").simulate("click"); + assert(":eq(1)", ":eq(0)", ":eq(2)"); + + // click in second form + $("#radio2 .ui-button:eq(0)").simulate("click"); + assert(":eq(1)", ":eq(0)", ":eq(0)"); +}); + +asyncTest( "Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { + expect( 2 ); + var check = $( "#check" ).checkboxradio(), + label = $( "label[for='check']" ); + ok( !label.is( ".ui-state-focus" ) ); + check.focus(); + setTimeout(function() { + ok( label.is( ".ui-state-focus" ) ); + start(); + }); +}); + +// 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 after single click on checkbox label button", function() { + expect( 2 ); + + $( "#check2" ).checkboxradio().change( function() { + var label = $( this ).checkboxradio( "widget" ); + ok( this.checked, "checked ok" ); + + // The following test is commented out for now because with new markup we are trying to avoid aria + //ok( lbl.attr("aria-pressed") === "true", "aria ok" ); + ok( label.hasClass( "ui-state-active" ), "ui-state-active ok" ); + }); + + // Support: Opera + // Opera doesn't trigger a change event when this is done synchronously. + // This seems to be a side effect of another test, but until that can be + // tracked down, this delay will have to do. + setTimeout(function() { + $( "#check2" ).checkboxradio( "widget" ).simulate( "click" ); + start(); + }, 1 ); + }); +} +test( "Checkbox creation that requires a matching finds label in all cases", function() { + expect( 6 ); + var group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + ok( group.find( "label" ).is( ".ui-button" ) ); + + group = $( "" ); + group.filter( "input[type=checkbox]" ).checkboxradio(); + ok( group.filter( "label" ).is( ".ui-button" ) ); + + group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + ok( group.filter( "label" ).is( ".ui-button" ) ); + + group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + ok( group.find( "label" ).is( ".ui-button" ) ); + + group = $( "" ); + group.filter( "input[type=checkbox]" ).checkboxradio(); + ok( group.find( "label" ).is( ".ui-button" ) ); + + group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + ok( group.find( "label" ).is( ".ui-button" ) ); +}); + +asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() { + expect( 2 ); + var form = $( "" ), + checkbox = form.find( "input[type=checkbox]" ).checkboxradio(); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + ok( !checkbox.checkboxradio( "widget" ).hasClass( "ui-state-active" ) ); + + form.get( 0 ).reset(); + + setTimeout(function() { + ok( checkbox.checkboxradio( "widget" ).hasClass( "ui-state-active" )); + start(); + }, 1 ); +}); +test( "Checkbox label selector works for ids with \":\"", function() { + expect( 1 ); + var group = $( "Label" ); + group.find( "input" ).checkboxradio(); + ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); +}); + +})(jQuery); diff --git a/tests/unit/checkboxradio/checkboxradio_methods.js b/tests/unit/checkboxradio/checkboxradio_methods.js new file mode 100644 index 00000000000..bcec6d9f059 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_methods.js @@ -0,0 +1,131 @@ +/* + * checkboxradio_methods.js + */ + + +(function($) { + +module( "Checkboxradio: methods" ); + test( "Checkbox: refresh", function() { + var checkbox = $( "#checkbox-method-refresh" ), + widget; + expect( 2 ); + checkbox.checkboxradio({ + icon: true + }); + + widget = checkbox.checkboxradio( "widget" ); + delete $(".ui-icon" )[0]; + + checkbox.checkboxradio( "refresh" ); + strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" ); + checkbox.prop( "checked", true ); + checkbox.checkboxradio( "refresh" ); + strictEqual( widget.hasClass( "ui-checkbox-checked" ), true, + "State updated based on checked property" ); + }); + + test( "Checkbox: destroy", function(){ + var checkbox = $( "#checkbox-method-destroy" ), + checkboxClasses = checkbox.attr( "class" ), + label = $( "#checkbox-method-destroy-label" ), + labelClasses = label.attr( "class" ); + + expect( 2 ); + checkbox.checkboxradio(); + checkbox.checkboxradio( "destroy" ); + strictEqual( checkbox.attr( "class"), checkboxClasses, + "checkbox classes match original after destroy" ); + strictEqual( label.attr( "class"), labelClasses, + "label classes match original after destroy" ); + }); + + test( "Checkbox: disable / enable", function(){ + var checkbox = $( "#checkbox-method-disable" ); + + expect( 4 ); + checkbox.checkboxradio(); + checkbox.checkboxradio( "disable" ); + strictEqual( checkbox.checkboxradio( "widget" ).hasClass( "ui-state-disabled" ), true, + "label gets ui-state-disabled when disable is called" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled when disable is called" ); + checkbox.checkboxradio( "enable" ); + strictEqual( checkbox.checkboxradio( "widget" ).hasClass( "ui-state-disabled" ), false, + "label has ui-state-disabled removed when enable is called" ); + strictEqual( checkbox.is( ":disabled" ), false, + "checkbox has disabled prop removed when enable is called" ); + }); + test( "Checkbox: widget returns the label", function(){ + var checkbox = $( "#checkbox-method-refresh" ), + label = $( "#checkbox-method-refresh-label" ); + + expect( 1 ); + + checkbox.checkboxradio(); + strictEqual( checkbox.checkboxradio( "widget" ).attr( "id" ), label.attr( "id" ), + "widget method returns label" ); + }); + + test( "Radio: refresh", function() { + var radio = $( "#radio-method-refresh" ), + widget; + expect( 2 ); + radio.checkboxradio({ + icon: true + }); + + widget = radio.checkboxradio( "widget" ); + delete $(".ui-icon" )[0]; + + radio.checkboxradio( "refresh" ); + strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" ); + radio.prop( "checked", true ); + radio.checkboxradio( "refresh" ); + strictEqual( widget.hasClass( "ui-radio-checked" ), true, + "State updated based on checked property" ); + }); + + test( "Radio: destroy", function(){ + var radio = $( "#radio-method-destroy" ), + radioClasses = radio.attr( "class" ), + label = $( "#radio-method-destroy-label" ), + labelClasses = label.attr( "class" ); + + expect( 2 ); + radio.checkboxradio(); + radio.checkboxradio( "destroy" ); + strictEqual( radio.attr( "class"), radioClasses, + "radio classes match original after destroy" ); + strictEqual( label.attr( "class"), labelClasses, + "label classes match original after destroy" ); + }); + + test( "Radio: disable / enable", function(){ + var radio = $( "#checkbox-method-disable" ); + + expect( 4 ); + radio.checkboxradio(); + radio.checkboxradio( "disable" ); + strictEqual( radio.checkboxradio( "widget" ).hasClass( "ui-state-disabled" ), true, + "label gets ui-state-disabled when disable is called" ); + strictEqual( radio.is( ":disabled" ), true, + "radio is disabled when disable is called" ); + radio.checkboxradio( "enable" ); + strictEqual( radio.checkboxradio( "widget" ).hasClass( "ui-state-disabled" ), false, + "label has ui-state-disabled removed when enable is called" ); + strictEqual( radio.is( ":disabled" ), false, + "radio has disabled prop removed when enable is called" ); + }); + test( "Radio: widget returns the label", function(){ + var radio = $( "#radio-method-refresh" ), + label = $( "#radio-method-refresh-label" ); + + expect( 1 ); + + radio.checkboxradio(); + strictEqual( radio.checkboxradio( "widget" ).attr( "id" ), label.attr( "id" ), + "widget method returns label" ); + }); + +})(jQuery); diff --git a/tests/unit/checkboxradio/checkboxradio_options.js b/tests/unit/checkboxradio/checkboxradio_options.js new file mode 100644 index 00000000000..b372e267064 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_options.js @@ -0,0 +1,173 @@ +/* + * checkboxradio_methods.js + */ + + +(function($) { + +module( "Checkboxradio: checkbox: options" ); + test( "options: disabled", function() { + var checkbox = $( "#checkbox-option-disabled" ), + widget; + expect( 10 ); + checkbox.checkboxradio({ + disabled: true + }); + + widget = checkbox.checkboxradio( "widget" ); + + strictEqual( widget.hasClass( "ui-state-disabled" ), true, + "label gets ui-state-disabled when initial option set to true" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled when inital option is set to true" ); + + checkbox.checkboxradio( "option", "disabled", false ); + + strictEqual( widget.hasClass( "ui-state-disabled" ), false, + "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" ); + + checkbox.checkboxradio( "option", "disabled", true ); + + strictEqual( widget.hasClass( "ui-state-disabled" ), true, + "label gets ui-state-disabled when option set to true" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled when option is set to true" ); + + checkbox.checkboxradio( "destroy" ); + checkbox.prop( "disabled", true ); + checkbox.checkboxradio(); + + strictEqual( widget.hasClass( "ui-state-disabled" ), true, + "label gets ui-state-disabled when checkbox is disabled in dom on startup" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled when checkbox is disabled in dom on startup" ); + + checkbox.checkboxradio( "destroy" ); + checkbox.checkboxradio({ + disabled: null + }); + + strictEqual( widget.hasClass( "ui-state-disabled" ), true, + "passing null to disabled on startup checks the dom" ); + strictEqual( checkbox.is( ":disabled" ), true, + "passing null to disabled on startup checks the dom" ); + }); + test( "options: icon", function() { + var checkbox = $( "#checkbox-option-icon" ), + widget; + + expect( 9 ); + + checkbox.checkboxradio(); + + widget = checkbox.checkboxradio( "widget" ); + + strictEqual( widget.find( "span" ).length, 0, + "Label does not contain a span when created with icon:false" ); + + checkbox.checkboxradio( "destroy" ); + + checkbox.checkboxradio({ + icon: true + }); + + strictEqual( widget.find( "span" ).length, 1, + "Label contains a span when created with icon:true" ); + strictEqual( widget.find( "span" ).attr( "class" ), + "ui-icon ui-icon-background ui-corner-all ui-icon-blank", + "Icon span has proper classes when created not checked" ); + + checkbox.checkboxradio( "destroy" ).prop( "checked", true ); + + checkbox.checkboxradio({ + icon: true + }); + + strictEqual( widget.find( "span" ).attr( "class" ), + "ui-icon ui-icon-background ui-corner-all ui-icon-check", + "Icon span has proper classes when created checked" ); + + checkbox.checkboxradio( "option", "icon", false ); + + strictEqual( widget.find( "span" ).length, 0, + "Label does not contain a span when option set to icon:false and checked" ); + + checkbox.checkboxradio( "option", "icon", true ); + + strictEqual( widget.find( "span" ).attr( "class" ), + "ui-icon ui-icon-background ui-corner-all ui-icon-check", + "Icon span has proper classes when option set to true and :is( checked )" ); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + checkbox.checkboxradio( "option", "icon", false ); + + strictEqual( widget.find( "span" ).length, 0, + "Label does not contain a span when option set to icon:false and not checked" ); + + checkbox.checkboxradio( "option", "icon", true ); + + strictEqual( widget.find( "span" ).attr( "class" ), + "ui-icon ui-icon-background ui-corner-all ui-icon-blank", + "Icon span has proper classes when option set to true and not checked" ); + + checkbox.checkboxradio( "destroy" ); + + strictEqual( widget.find( "span" ).length, 0, + "Label does not contain a span after destroy when icon true" ); + + }); + test( "options: label", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 10 ); + + 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" ); + + checkbox.checkboxradio( "destroy" ); + + checkbox.checkboxradio({ + label: "foo" + }); + + 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" ); + + checkbox.checkboxradio( "destroy" ); + checkbox.checkboxradio({ + label: null + }); + + strictEqual( checkbox.checkboxradio( "option", "label" ), + "foo", "When null is passed on create text from dom is used for option" ); + strictEqual( widget.text(), + "foo", "When null is passed on create text from dom is used in dom" ); + + 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" ); + + }); + +})(jQuery); diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html new file mode 100644 index 00000000000..5b97d5378ec --- /dev/null +++ b/tests/unit/controlgroup/controlgroup.html @@ -0,0 +1,61 @@ + + + + + jQuery UI Controlgroup Test Suite + + + + + + + + + + + + + + + + +

+ + + Checkbox + + + + +

+ + diff --git a/tests/unit/controlgroup/controlgroup_common.js b/tests/unit/controlgroup/controlgroup_common.js new file mode 100644 index 00000000000..53f722b7ce2 --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_common.js @@ -0,0 +1,15 @@ +TestHelpers.commonWidgetTests( "controlgroup", { + defaults: { + disabled: null, + items: { + "button": "input[type=button], input[type=submit], input[type=reset], button, a", + "checkboxradio": "input[type='checkbox'], input[type='radio']", + "selectmenu": "select" + }, + direction: "horizontal", + excludeInvisible: true, + + // Callbacks + create: null + } +}); diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js new file mode 100644 index 00000000000..98c53170f67 --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_core.js @@ -0,0 +1,89 @@ +module( "Controlgroup: Core" ); + +function hasCornerClass( className, element ) { + if ( className ) { + return element.hasClass( className ); + } + + return element.attr( "class" ).match( /ui-corner/g ); +} + +test( "selectmenu: open/close corners", function() { + expect( 1 ); + var element = $( ".controlgroup" ).controlgroup(), + selects = element.find( "select" ), + selectButton = selects.eq( 0 ).selectmenu( "widget" ); + + expect( 12 ); + + selects.eq( 0 ).selectmenu( "open" ); + + strictEqual( selectButton.hasClass( "ui-corner-tl" ), true, + "Horizontal: First selectmenu gets ui-corner-tl when opened" ); + + selects.eq( 0 ).selectmenu( "close" ); + + strictEqual( selectButton.hasClass( "ui-corner-left" ), true, + "Horizontal: First selectmenu gets ui-corner-left when closed" ); + + selectButton = selects.eq( 1 ).selectmenu( "widget" ); + + selects.eq( 1 ).selectmenu( "open" ); + + strictEqual( !!hasCornerClass( false, selectButton ), false, + "Horizontal: Middle selectmenu does not get corner class when opened" ); + + selects.eq( 1 ).selectmenu( "close" ); + + strictEqual( !!hasCornerClass( false, selectButton ), false, + "Horizontal: Middle selectmenu does not get corner class when closed" ); + + selectButton = selects.eq( 2 ).selectmenu( "widget" ); + + selects.eq( 2 ).selectmenu( "open" ); + + strictEqual( selectButton.hasClass( "ui-corner-tr" ), true, + "Horizontal: Last selectmenu gets ui-corner-tr when opened" ); + + selects.eq( 2 ).selectmenu( "close" ); + + strictEqual( selectButton.hasClass( "ui-corner-right" ), true, + "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" ); + + strictEqual( selectButton.hasClass( "ui-corner-top" ), true, + "vertical: First selectmenu gets ui-corner-top when opened" ); + + selects.eq( 0 ).selectmenu( "close" ); + + strictEqual( selectButton.hasClass( "ui-corner-top" ), true, + "vertical: First selectmenu gets ui-corner-top when closed" ); + + selectButton = selects.eq( 1 ).selectmenu( "widget" ); + + selects.eq( 1 ).selectmenu( "open" ); + + strictEqual( !!hasCornerClass( false, selectButton ), false, + "vertical: Middle selectmenu does not get corner class when opened" ); + + selects.eq( 1 ).selectmenu( "close" ); + + strictEqual( !!hasCornerClass( false, selectButton ), false, + "vertical: Middle selectmenu does not get corner class when closed" ); + + selectButton = selects.eq( 2 ).selectmenu( "widget" ); + + selects.eq( 2 ).selectmenu( "open" ); + + strictEqual( !!hasCornerClass( false, selectButton ), false, + "vertical: Last selectmenu does not get corner class when opened" ); + + selects.eq( 2 ).selectmenu( "close" ); + + strictEqual( selectButton.hasClass( "ui-corner-bottom" ), true, + "vertical: Last selectmenu gets ui-corner-bottom when closed" ); +}); \ No newline at end of file diff --git a/tests/unit/controlgroup/controlgroup_methods.js b/tests/unit/controlgroup/controlgroup_methods.js new file mode 100644 index 00000000000..90715055a6e --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_methods.js @@ -0,0 +1,130 @@ +module( "Controlgroup: methods" ); + +test( "destroy", function() { + expect( 1 ); + domEqual( ".controlgroup", function() { + $( ".controlgroup" ).controlgroup().controlgroup( "destroy" ); + }); +}); +test( "disable", function() { + var tests = 1, + element = $( ".controlgroup" ).controlgroup().controlgroup( "disable" ); + strictEqual( element.hasClass( "ui-state-disabled" ), false, + "ui-state-disabled is not present on widget after disabling" ); + $.each( $.ui.controlgroup.prototype.options.items, function( widget, selector ){ + element.children( selector ).each(function(){ + expect( ++tests ); + strictEqual( $( this )[ widget ]( "widget" ).hasClass( "ui-state-disabled"), true, + "Child " + widget + " widgets are disabled" ); + }); + }); +}); + +test( "enable", function() { + var tests = 1, + element = $( ".controlgroup" ).controlgroup().controlgroup( "enable" ); + strictEqual( element.hasClass( "ui-state-disabled" ), false, + "ui-state-disabled is not present on widget after enabling" ); + $.each( $.ui.controlgroup.prototype.options.items, function( widget, selector ){ + element.children( selector ).each(function(){ + expect( ++tests ); + strictEqual( $( this )[ widget ]( "widget" ).hasClass( "ui-state-disabled"), false, + "Child " + widget + " widgets are not disabled" ); + }); + }); +}); + +function hasCornerClass( className, element ) { + if ( className ) { + return element.hasClass( className ); + } + + return element.attr( "class" ).match( /ui-corner/g ); +} +test( "refresh", function() { + var count = 0, + tests = { + "checkboxradio": "", + "selectmenu": "", + "button": " + + + + + Icon + Disabled + Label +

Widget Buttons

CSS Buttons

Widget

CSS

Checkbox and radio button widgets

Checkbox

Radio Group

Checkbox and radio button widgets

Checkbox

Radio Group

Widget

CSS

Widgets

Button

Checkboxradio

Dialog