diff --git a/.csslintrc b/.csslintrc index 5d9db072cc4..f5859c8c1b2 100644 --- a/.csslintrc +++ b/.csslintrc @@ -7,5 +7,6 @@ "important": false, "outline-none": false, "overqualified-elements": false, - "text-indent": false + "text-indent": false, + "box-sizing": false } diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 437e52ab1d2..f8898094dc8 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -58,7 +58,9 @@ source: $.proxy( this, "_source" ) }) .tooltip({ - tooltipClass: "ui-state-highlight" + classes: { + "ui-tooltip": "ui-state-highlight" + } }); this._on( this.input, { diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html deleted file mode 100644 index 6f2c5ec1533..00000000000 --- a/demos/button/checkbox.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - jQuery UI Button - Checkboxes - - - - - - - - - - - - - -
- - - -
- -
-

A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.

-

This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.

-
- - diff --git a/demos/button/default.html b/demos/button/default.html index 8c16909698a..f4fdd672284 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -11,24 +11,33 @@ +
+

Widget Buttons

+ - + - + An anchor +
+

CSS Buttons

+ + + -An anchor +An anchor

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

+

Buttons can be styled via the button widget for by adding the classes yourself to avoid the javascript overhead if you dont need any of the methods provided by the button widget

p> +

Here you can see examples of both buttons styled with css only and done using the button widget

diff --git a/demos/button/icons.html b/demos/button/icons.html index 76cb1147876..089e669ff75 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -11,37 +11,57 @@ +
+

Widget

+ Button with icon only + + + + +
+
+

CSS

+ + + + + - - - - - +

Some buttons with various combinations of text and icons.

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 441e0a912f2..00000000000 --- a/demos/button/splitbutton.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - jQuery UI Button - Split button - - - - - - - - - - - - - -
-
- - -
- -
- -
-

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 e2eac055c82..00000000000 --- a/demos/button/toolbar.html +++ /dev/null @@ -1,114 +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..0e75bc91573 --- /dev/null +++ b/demos/checkboxradio/default.html @@ -0,0 +1,50 @@ + + + + + jQuery UI Checkboxradio - Default functionality + + + + + + + + + +
+

Checkbox and radio button widgets

+

Checkbox

+
+ Filter by rating + + + + + + + + +
+

Radio Group

+
+ Filter by location: + + + + + +
+
+ +
+

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..75a33ec6136 --- /dev/null +++ b/demos/checkboxradio/icons.html @@ -0,0 +1,53 @@ + + + + + jQuery UI Checkboxradio - Icon functionality + + + + + + + + + +
+

Checkbox and radio button widgets

+

Checkbox

+ +
+ Rating + + + + + + + + +
+

Radio Group

+
+ Location: + + + + + +
+
+ +
+

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

+
+ + diff --git a/demos/checkboxradio/images/jquery-mobile.png b/demos/checkboxradio/images/jquery-mobile.png new file mode 100644 index 00000000000..fe2c36376d4 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 00000000000..651e2e11532 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 00000000000..ff3fdc21db2 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 00000000000..048bcfddbdd 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 00000000000..6145cd8ec48 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 00000000000..ed0c37d4b7b --- /dev/null +++ b/demos/checkboxradio/index.html @@ -0,0 +1,18 @@ + + + + + + jQuery UI Checkboxradio Demos + + + + + + + diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html new file mode 100644 index 00000000000..0f894b7e3f5 --- /dev/null +++ b/demos/checkboxradio/product-selector.html @@ -0,0 +1,126 @@ + + + + + jQuery UI Checkboxradio - Product Selector + + + + + + + + + + + +
+
+

1.) Select a brand

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

2.) Select a shape

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

3.) customize

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

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

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

Radio Group

+
+ Location: + + + + + +
+
+ +
+

Example markup using a controlgroup to create a radio group

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

A Controlgroup featuring various form controls

+
+
+

Controlgroup

+
+ Rental Car +
+ + + + + + + + +
+
+
+
+ Rental Car +
+ + + + + + + + +
+
+
+ + diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html new file mode 100644 index 00000000000..58e2f7eda7a --- /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 00000000000..eeedb02ea06 --- /dev/null +++ b/demos/controlgroup/splitbutton.html @@ -0,0 +1,55 @@ + + + + + jQuery UI Controlgroup - 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 00000000000..8f1e42bffef --- /dev/null +++ b/demos/controlgroup/toolbar.html @@ -0,0 +1,257 @@ + + + + + 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 f37874a4481..89375dde704 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,6 +11,8 @@
  • accordion
  • autocomplete
  • button
    • +
  • checkboxradio
    • +
  • controlgroup
  • datepicker
  • dialog
  • draggable
    • diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 23747bb204f..986be0d25da 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_common.js b/tests/unit/accordion/accordion_common.js index ef24cf25ec5..dc2d5395f06 100644 --- a/tests/unit/accordion/accordion_common.js +++ b/tests/unit/accordion/accordion_common.js @@ -2,6 +2,16 @@ TestHelpers.commonWidgetTests( "accordion", { defaults: { active: 0, animate: {}, + classes: { + "ui-accordion": "", + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": "", + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": "", + "ui-accordion-header-icon": "", + "ui-accordion-icons": "" + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 8e0175aeb93..0674275b0a1 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -7,15 +7,23 @@ module( "accordion: core", setupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { test( "markup structure: " + type, function() { - expect( 4 ); - var element = $( selector ).accordion(); - ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); - equal( element.find( ".ui-accordion-header" ).length, 3, + expect( 8 ); + var element = $( selector ).accordion(), + headers = element.find( ".ui-accordion-header" ), + panels = element.find( ".ui-accordion-content" ); + + ok( element.is( ".ui-accordion.ui-widget" ), "main has proper classes" ); + ok( headers.hasClass( "ui-corner-top" ), "header is .ui-corner-top" ); + ok( !headers.eq( 0 ).hasClass( "ui-corner-all" ), "open header is not .ui-corner-all" ); + ok( headers.eq( 1 ).hasClass( "ui-corner-all" ), "closed header is .ui-corner-all" ); + ok( headers.next().is( ".ui-accordion-content.ui-widget-content.ui-corner-bottom" ), + "panel has proper classes" ); + + equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" ); - equal( element.find( ".ui-accordion-content" ).length, 3, + equal( panels.length, 3, ".ui-accordion-content elements exist, correct number" ); - deepEqual( element.find( ".ui-accordion-header" ).next().get(), - element.find( ".ui-accordion-content" ).get(), + deepEqual( headers.next().get(), panels.get(), "content panels come immediately after headers" ); }); }); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index 1e809b310c2..643a20123cc 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -7,10 +7,16 @@ var equalHeight = TestHelpers.accordion.equalHeight, module( "accordion: methods", setupTeardown() ); test( "destroy", function() { - expect( 1 ); + expect( 2 ); domEqual( "#list1", function() { $( "#list1" ).accordion().accordion( "destroy" ); }); + // Animate + domEqual( "#list1", function() { + $( "#list1" ).accordion() + .accordion( "option", "active", 1 ) + .accordion( "destroy" ); + }); }); test( "enable/disable", function() { diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index 63b24d384b9..4e3fbb7c7d1 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/autocomplete_common.js @@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "autocomplete", { defaults: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, disabled: false, messages: { diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index fa3f9abb072..ffdc737acee 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -2,6 +2,15 @@ module( "autocomplete: core" ); +test( "markup structure", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete(), + menu = element.autocomplete( "widget" ); + + ok( element.hasClass( "ui-autocomplete-input" ), "main element is .ui-autocomplete-input" ); + ok( menu.hasClass( "ui-autocomplete" ), "menu is .ui-autocomplete" ); +}); + test( "prevent form submit on enter when menu is active", function() { expect( 2 ); var event, diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html index abda5c987f0..d8a5df9c5b1 100644 --- a/tests/unit/button/button.html +++ b/tests/unit/button/button.html @@ -5,6 +5,9 @@ jQuery UI Button Test Suite + @@ -33,7 +36,7 @@
    -
    +
    diff --git a/tests/unit/button/button_common.js b/tests/unit/button/button_common.js index ef22d30114f..4be5db881b3 100644 --- a/tests/unit/button/button_common.js +++ b/tests/unit/button/button_common.js @@ -1,14 +1,17 @@ TestHelpers.commonWidgetTests( "button", { defaults: { disabled: null, - icons: { - primary: null, - secondary: null - }, + showLabel: true, label: null, - text: true, + icon: null, + iconPosition: "beginning", + classes: { + "ui-button": "ui-corner-all", + "ui-button-icon-only": "", + "ui-button-icon": "" + }, - // callbacks + // Callbacks create: null } }); diff --git a/tests/unit/button/button_common_deprecated.js b/tests/unit/button/button_common_deprecated.js new file mode 100644 index 00000000000..cfcccb38d94 --- /dev/null +++ b/tests/unit/button/button_common_deprecated.js @@ -0,0 +1,22 @@ +TestHelpers.commonWidgetTests( "button", { + defaults: { + disabled: null, + showLabel: true, + label: null, + icon: null, + iconPosition: "beginning", + text: true, + icons: { + primary: null, + secondary: null + }, + classes: { + "ui-button": "ui-corner-all", + "ui-button-icon-only": "", + "ui-button-icon": "" + }, + + // Callbacks + create: null + } +}); diff --git a/tests/unit/button/button_core.js b/tests/unit/button/button_core.js index f647cdc26b1..eb0a43c14e1 100644 --- a/tests/unit/button/button_core.js +++ b/tests/unit/button/button_core.js @@ -5,69 +5,9 @@ (function($) { -module("button: core"); +module( "Button: core" ); -test("checkbox", function() { - expect( 4 ); - var input = $("#check"), - label = $("label[for=check]"); - ok( input.is(":visible") ); - ok( label.is(":not(.ui-button)") ); - input.button(); - ok( input.is(".ui-helper-hidden-accessible") ); - ok( label.is(".ui-button") ); -}); - -test("radios", function() { - expect( 4 ); - var inputs = $("#radio0 input"), - labels = $("#radio0 label"); - ok( inputs.is(":visible") ); - ok( labels.is(":not(.ui-button)") ); - inputs.button(); - 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]").button(); - assert(":eq(0)", ":eq(1)", ":eq(2)"); - - // click outside of forms - $("#radio0 .ui-button:eq(1)").click(); - assert(":eq(1)", ":eq(1)", ":eq(2)"); - - // click in first form - $("#radio1 .ui-button:eq(0)").click(); - assert(":eq(1)", ":eq(0)", ":eq(2)"); - - // click in second form - $("#radio2 .ui-button:eq(0)").click(); - assert(":eq(1)", ":eq(0)", ":eq(0)"); -}); - -test( "radio groups - ignore elements with same name", function() { - expect( 1 ); - var form = $( "form:first" ), - radios = form.find( "[type=radio]" ).button(), - checkbox = $( "", { - type: "checkbox", - name: radios.attr( "name" ) - }); - - form.append( checkbox ); - radios.button( "refresh" ); - ok( true, "no exception from accessing button instance of checkbox" ); -}); - -test("input type submit, don't create child elements", function() { +test( "Input type submit, don't create child elements", function() { expect( 2 ); var input = $("#submit"); deepEqual( input.children().length, 0 ); @@ -75,150 +15,17 @@ test("input type submit, don't create child elements", function() { deepEqual( input.children().length, 0 ); }); -test("buttonset", function() { - expect( 6 ); - var set = $("#radio1").buttonset(); - ok( set.is(".ui-buttonset") ); - deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); - ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); - ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); - ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); -}); - -test("buttonset (rtl)", function() { - expect( 6 ); - var set, - parent = $("#radio1").parent(); - // Set to rtl - parent.attr("dir", "rtl"); - - set = $("#radio1").buttonset(); - ok( set.is(".ui-buttonset") ); - deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); - ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); - ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); - ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); -}); - -// TODO: simulated click events don't behave like real click events in IE -// remove this when simulate properly simulates this -// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info -if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) { - asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() { - expect( 3 ); - - $("#check2").button().change( function() { - var lbl = $( this ).button("widget"); - ok( this.checked, "checked ok" ); - ok( lbl.attr("aria-pressed") === "true", "aria ok" ); - ok( lbl.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").button("widget").simulate("click"); - start(); - }, 1 ); - }); -} - -test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { - expect( 5 ); - var group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.filter( "input[type=checkbox]" ).button(); - ok( group.filter( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - ok( group.filter( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.find( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); - - group = $( "" ); - group.filter( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); -}); - -test( "#5946 - buttonset should ignore buttons that are not :visible", function() { - expect( 2 ); - $( "#radio01" ).next().addBack().hide(); - var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); - ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); - ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); -}); - -test( "#6262 - buttonset not applying ui-corner to invisible elements", function() { - expect( 3 ); - $( "#radio0" ).hide(); - var set = $( "#radio0" ).buttonset(); - ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) ); - ok( set.find( "label:eq(1)" ).is( ".ui-button" ) ); - ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) ); -}); - -asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() { - expect( 2 ); - var form = $( "
    " + - "" + - "" + - "
    " ), - button = form.find( "button" ).button(), - checkbox = form.find( "input[type=checkbox]" ).button(); - - checkbox.prop( "checked", false ).button( "refresh" ); - ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) ); - - form.get( 0 ).reset(); - - // #9213: If a button has been removed, refresh should not be called on it when - // its corresponding form is reset. - button.remove(); - - setTimeout(function() { - ok( checkbox.button( "widget" ).hasClass( "ui-state-active" )); - start(); - }, 1 ); -}); - -asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { - expect( 2 ); - var check = $( "#check" ).button(), - label = $( "label[for='check']" ); - ok( !label.is( ".ui-state-focus" ) ); - check.focus(); - setTimeout(function() { - ok( label.is( ".ui-state-focus" ) ); - start(); - }); -}); - -test( "#7534 - Button label selector works for ids with \":\"", function() { +asyncTest( "Disabled button maintains ui-state-focus", function() { expect( 1 ); - var group = $( "" ); - group.find( "input" ).button(); - ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); -}); - -asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() { - expect( 2 ); var element = $( "#button1" ).button(); - element[ 0 ].focus(); + element.simulate( "focus" ); setTimeout(function() { - ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" ); + + // Todo: figure out why this fails in phantom put passes in browser + // ok( element.is( ":focus" ), "Button is focused" ); element.button( "disable" ); - ok( !element.hasClass( "ui-state-focus" ), - "button does not have ui-state-focus when disabled" ); + ok( !element.is( ":focus" ), + "Button has had focus removed" ); start(); }); }); diff --git a/tests/unit/button/button_core_deprecated.js b/tests/unit/button/button_core_deprecated.js new file mode 100644 index 00000000000..bdba0cf1d81 --- /dev/null +++ b/tests/unit/button/button_core_deprecated.js @@ -0,0 +1,30 @@ +/* + * button_core.js + */ + + +(function($) { + +module( "Button: core deprecated" ); + +test( "Calling button on a checkbox input calls checkboxradio widget", function(){ + var checkbox = $( "#checkbox01" ); + + expect( 2 ); + checkbox.button(); + + equal( checkbox.is( ":ui-checkboxradio" ), true, + "Calling button on a checkbox creats checkboxradio instance" ); + equal( checkbox.checkboxradio( "option", "icon" ), false, + "Calling button on a checkbox sets the checkboxradio icon option to false" ); +}); +test( "Calling buttonset calls controlgroup", function(){ + var controlgroup = $( ".buttonset" ); + + expect( 1 ); + controlgroup.buttonset(); + + equal( controlgroup.is( ":ui-controlgroup" ), true, + "Calling buttonset creats controlgroup instance" ); +}); +})(jQuery); diff --git a/tests/unit/button/button_deprecated.html b/tests/unit/button/button_deprecated.html new file mode 100644 index 00000000000..02c05fcc9ca --- /dev/null +++ b/tests/unit/button/button_deprecated.html @@ -0,0 +1,83 @@ + + + + + jQuery UI Button Test Suite + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    + +
    + + + +
    +
    + + + +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + + +
    + + + +
    + + diff --git a/tests/unit/button/button_events.js b/tests/unit/button/button_events.js index 2fd03832562..d24aa866660 100644 --- a/tests/unit/button/button_events.js +++ b/tests/unit/button/button_events.js @@ -3,24 +3,16 @@ */ (function($) { -module("button: events"); +module( "Button: events" ); -test("buttonset works with single-quote named elements (#7505)", function() { - expect( 1 ); - $("#radio3").buttonset(); - $("#radio33").click( function(){ - ok( true, "button clicks work with single-quote named elements" ); - }).click(); -}); - -asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() { +asyncTest( "When button loses focus, ensure active state is removed", function() { expect( 1 ); var element = $( "#button" ).button(); element.one( "keypress", function() { element.one( "blur", function() { - ok( !element.is(".ui-state-active"), "button loses active state appropriately" ); + ok( !element.is( ".ui-state-active" ), "button loses active state appropriately" ); start(); }).blur(); }); diff --git a/tests/unit/button/button_methods.js b/tests/unit/button/button_methods.js index 1c781c87e22..8e2a8b8a05d 100644 --- a/tests/unit/button/button_methods.js +++ b/tests/unit/button/button_methods.js @@ -4,9 +4,9 @@ (function($) { -module("button: methods"); +module( "Button: methods" ); -test("destroy", function() { +test( "destroy", function() { expect( 1 ); domEqual( "#button", function() { $( "#button" ).button().button( "destroy" ); @@ -14,7 +14,7 @@ test("destroy", function() { }); test( "refresh: Ensure disabled state is preserved correctly.", function() { - expect( 8 ); + expect( 4 ); var element = $( "" ); element.button({ disabled: true }).button( "refresh" ); @@ -28,47 +28,11 @@ test( "refresh: Ensure disabled state is preserved correctly.", function() { element.button( { disabled: true} ).button( "refresh" ); ok( element.button( "option", "disabled" ), "" ); element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" ); ok( !element.button( "option", "disabled" ), "Changing a " ), - $( "" ), - $( "
    " ), - $( "" ), - $( "" ) - ]; - - $.each( elements, function() { - var element = $( this ).first().button(), - buttonElement = element.button( "widget" ), - elementType = element.prop( "nodeName" ).toLowerCase(); - - if ( element.is( "input" ) ) { - elementType += ":" + element.attr( "type" ); - } - - element.trigger( "mousedown" ); - ok( buttonElement.hasClass( "ui-state-active" ), - "[" + elementType + "] has ui-state-active class after mousedown." ); - - element.button( "disable" ); - if ( element.is( "[type=checkbox], [type=radio]" ) ) { - ok( buttonElement.hasClass( "ui-state-active" ), - "Disabled [" + elementType + "] has ui-state-active class." ); - } else { - ok( !buttonElement.hasClass( "ui-state-active" ), - "Disabled [" + elementType + "] does not have ui-state-active class." ); - } - }); + strictEqual( $("#button").prop("disabled"), false, "element is disabled"); }); -test("text false without icon", function() { +test( "showLabel false without icon", function() { expect( 1 ); - $("#button").button({ - text: false + $( "#button" ).button({ + showLabel: false }); - ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") ); + strictEqual( $( "#button" ).is( ":ui-button.ui-corner-all.ui-widget" ), true, + "Button has correct classes" ); - $("#button").button("destroy"); + $( "#button" ).button( "destroy" ); }); -test("text false with icon", function() { +test("showLabel false with icon", function() { expect( 1 ); $("#button").button({ - text: false, - icons: { - primary: "iconclass" - } + showLabel: false, + icon: "iconclass" }); - ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") ); - - $("#button").button("destroy"); + strictEqual( $( "#button" ).is( ".ui-button.ui-corner-all.ui-widget.ui-button-icon-only" ), + true, "Button has correct classes" ); + $( "#button" ).button( "destroy" ); }); -test("label, default", function() { +test( "label, default", function() { expect( 2 ); - $("#button").button(); - deepEqual( $("#button").text(), "Label" ); - deepEqual( $( "#button").button( "option", "label" ), "Label" ); + $( "#button" ).button(); + deepEqual( $( "#button" ).text(), "Label" ); + deepEqual( $( "#button" ).button( "option", "label" ), "Label" ); - $("#button").button("destroy"); + $( "#button" ).button( "destroy" ); }); -test("label", function() { +test( "label", function() { expect( 2 ); - $("#button").button({ + $( "#button" ).button({ label: "xxx" }); - deepEqual( $("#button").text(), "xxx" ); - deepEqual( $("#button").button( "option", "label" ), "xxx" ); + deepEqual( $( "#button" ).text(), "xxx" ); + deepEqual( $( "#button" ).button( "option", "label" ), "xxx" ); - $("#button").button("destroy"); + $( "#button" ).button( "destroy" ); }); -test("label default with input type submit", function() { +test( "label default with input type submit", function() { expect( 2 ); - deepEqual( $("#submit").button().val(), "Label" ); - deepEqual( $("#submit").button( "option", "label" ), "Label" ); + deepEqual( $( "#submit" ).button().val(), "Label" ); + deepEqual( $( "#submit" ).button( "option", "label" ), "Label" ); }); -test("label with input type submit", function() { +test( "label with input type submit", function() { expect( 2 ); - var label = $("#submit").button({ + var label = $( "#submit" ).button({ label: "xxx" }).val(); deepEqual( label, "xxx" ); - deepEqual( $("#submit").button( "option", "label" ), "xxx" ); + deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" ); }); -test("icons", function() { +test( "icons", function() { expect( 1 ); $("#button").button({ - text: false, - icons: { - primary: "iconclass", - secondary: "iconclass2" - } + showLabel: false, + icon: "iconclass" }); - ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") ); - - $("#button").button("destroy"); -}); + strictEqual( $( "#button" ).find( "span.ui-icon.iconclass" ).length, 1 ); -test( "#5295 - button does not remove hoverstate if disabled" , function() { - expect( 1 ); - var btn = $("#button").button(); - btn.hover( function() { - btn.button( "disable" ); - }); - btn.trigger( "mouseenter" ); - btn.trigger( "mouseleave" ); - ok( !btn.is( ".ui-state-hover") ); + $( "#button" ).button( "destroy" ); }); })(jQuery); diff --git a/tests/unit/button/button_options_deprecated.js b/tests/unit/button/button_options_deprecated.js new file mode 100644 index 00000000000..3ddcea82075 --- /dev/null +++ b/tests/unit/button/button_options_deprecated.js @@ -0,0 +1,141 @@ +/* + * button_options_deprecated.js + */ +(function($) { + +module( "button: options deprecated" ); + +test( "Setting items option on button set sets the button properties on the items option", function() { + expect( 2 ); + + var controlgroup = $( ".buttonset" ); + + controlgroup.buttonset({ items: "bar" }); + equal( controlgroup.controlgroup( "option", "items.button" ), "bar", + "items.button set when setting items option on init on buttonset" ); + + controlgroup.buttonset( "option", "items", "foo" ); + equal( controlgroup.controlgroup( "option", "items.button" ), "foo", + "items.button set when setting items option on buttonset" ); +}); + +test( "disabled, null", function() { + expect( 2 ); + + $( "#radio02" ).prop( "disabled", true ).button({ disabled: null }); + deepEqual( true, $( "#radio02" ).button( "option", "disabled" ), + "disabled option set to true" ); + deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" ); +}); + +test( "text and showLabel options proxied", function(){ + expect( 8 ); + var button = $( "#button" ); + button.button({ + "text": false, + "icon": "ui-icon-gear" + }); + equal( button.button( "option", "showLabel" ), false, + "Setting the text option to false sets the showLabel option to false on init" ); + button.button( "option", "showLabel", true ); + equal( button.button( "option", "text" ), true, + "Setting showLabel true with option method sets text option to true" ); + button.button( "option", "text", false ); + equal( button.button( "option", "showLabel" ), false, + "Setting text false with option method sets showLabel option to false" ); + button.button( "option", "text", true ); + equal( button.button( "option", "showLabel" ), true, + "Setting text true with option method sets showLabel option to true" ); + button.button( "option", "showLabel", false ); + equal( button.button( "option", "text" ), false, + "Setting showLabel false with option method sets text option to false" ); + button.button( "destroy" ); + button.button({ + "text": true, + "icon": "ui-icon-gear" + }); + equal( button.button( "option", "showLabel" ), true, + "Setting the text option to false sets the showLabel option to true on init" ); + button.button( "destroy" ); + button.button({ + "showLabel": true, + "icon": "ui-icon-gear" + }); + equal( button.button( "option", "text" ), true, + "Setting the showLabel option to true sets the text option to true on init" ); + button.button( "destroy" ); + button.button({ + "showLabel": false, + "icon": "ui-icon-gear" + }); + equal( button.button( "option", "text" ), false, + "Setting the showLabel option to false sets the text option to false on init" ); +}); + +test( "icon and icons options properly proxied", function(){ + expect( 10 ); + + var button = $( "#button" ); + + button.button({ + "icon": "foo" + }); + + equal( button.button( "option", "icons.primary" ), "foo", + "Icon option properly proxied on init" ); + + button.button({ + "icon": "bar" + }); + + equal( button.button( "option", "icons.primary" ), "bar", + "Icon option properly proxied with option method" ); + + button.button({ + "icons": { + primary: "foo" + } + }); + + equal( button.button( "option", "icon" ), "foo", + "Icons primary option properly proxied with option method" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Icons primary option sets iconPosition option to beginning" ); + + button.button({ + "icons": { + secondary: "bar" + } + }); + + equal( button.button( "option", "icon" ), "bar", + "Icons secondary option properly proxied with option method" ); + equal( button.button( "option", "iconPosition" ), "end", + "Icons secondary option sets iconPosition option to end" ); + + button.button( "destroy" ); + + button.button({ + "icons": { + primary: "foo" + } + }); + + equal( button.button( "option", "icon" ), "foo", + "Icons primary option properly proxied on init" ); + equal( button.button( "option", "iconPosition" ), "beginning", + "Icons primary option sets iconPosition option to beginning on init" ); + + button.button({ + "icons": { + secondary: "bar" + } + }); + + equal( button.button( "option", "icon" ), "bar", + "Icons secondary option properly proxied on init" ); + equal( button.button( "option", "iconPosition" ), "end", + "Icons secondary option sets iconPosition option to end on init" ); +}); + +})(jQuery); \ No newline at end of file diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html new file mode 100644 index 00000000000..2f651a2cff5 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio.html @@ -0,0 +1,88 @@ + + + + + jQuery UI Checkboxradio Test Suite + + + + + + + + + + + + + + + + +
    +
    + +
    + + + +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    + + diff --git a/tests/unit/checkboxradio/checkboxradio_common.js b/tests/unit/checkboxradio/checkboxradio_common.js new file mode 100644 index 00000000000..d46aca55436 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_common.js @@ -0,0 +1,18 @@ +TestHelpers.commonWidgetTests( "checkboxradio", { + noDefaultElement: true, + defaults: { + disabled: null, + label: null, + icon: true, + classes: { + "ui-checkboxradio": "", + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-radio-label": "", + "ui-checkboxradio-icon": "ui-corner-all", + "ui-checkboxradio-checked": "" + }, + + // 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..ed7e1330be0 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_core.js @@ -0,0 +1,153 @@ +/* + * 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-icon-beginning ui-button ui-widget" + + " ui-checkboxradio-label ui-corner-all" ); +}); + +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(); + }); + }); +} +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 = $( "" ); + group.find( "input" ).checkboxradio(); + ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); +}); + +test( "Calling checkboxradio on an unsupported element throws an error", function() { + expect( 1 ); + throws( $( "
    " ).checkboxradio, "Error thrown" ); +}); +test( "Calling checkboxradio oan input with no label throws an error", function() { + expect( 1 ); + throws( $( "" ).checkboxradio, "Error thrown" ); +}); +})(jQuery); diff --git a/tests/unit/checkboxradio/checkboxradio_methods.js b/tests/unit/checkboxradio/checkboxradio_methods.js new file mode 100644 index 00000000000..618f254b449 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_methods.js @@ -0,0 +1,140 @@ +/* + * 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-checkboxradio-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-checkboxradio-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" ); + }); + 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().is( element ), true, "Input preserved" ); + }); + +})(jQuery); diff --git a/tests/unit/checkboxradio/checkboxradio_options.js b/tests/unit/checkboxradio/checkboxradio_options.js new file mode 100644 index 00000000000..46fd9e904b0 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_options.js @@ -0,0 +1,180 @@ +-/* + * 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({ icon: false }); + + 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" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." + + "ui-icon-background.ui-icon-blank" ), true, + "Icon span has proper classes when created not checked" ); + + checkbox.checkboxradio( "destroy" ).prop( "checked", true ); + + checkbox.checkboxradio({ + icon: true + }); + + strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." + + "ui-icon-background.ui-icon-check" ), true, + "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" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." + + "ui-icon-background.ui-icon-check" ), true, + "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" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." + + "ui-icon-background.ui-icon-blank" ), true, + "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" ); + + }); + function getLabelText( label, element ) { + var text = ""; + label.contents().not( element ).each( function() { + text += ( this.nodeType === 3 ) ? $( this ).text() : ""; + }); + return text; + } + 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( getLabelText( widget, checkbox ), + "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( getLabelText( widget, checkbox ), + "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( getLabelText( widget, checkbox ), + "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( getLabelText( widget, checkbox ), + "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( getLabelText( widget, checkbox ), + "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..91e59d6779d --- /dev/null +++ b/tests/unit/controlgroup/controlgroup.html @@ -0,0 +1,104 @@ + + + + + jQuery UI Controlgroup Test Suite + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + + + +
    +
    + + + + + + Button with icon on the bottom + +
    +
    + + +
    + + + + Button with icon on the bottom + +
    +
    + + diff --git a/tests/unit/controlgroup/controlgroup_common.js b/tests/unit/controlgroup/controlgroup_common.js new file mode 100644 index 00000000000..21acab744ac --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_common.js @@ -0,0 +1,20 @@ +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, + classes: { + "ui-controlgroup": "", + "ui-controlgroup-horizontal": "", + "ui-controlgroup-vertical": "" + }, + + // 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": " + + + + + + + +
    +
    + + + + + + + +
    + + diff --git a/tests/visual/index.html b/tests/visual/index.html index f7d516f2072..5529c1dfda9 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -31,6 +31,11 @@

    Button

  • Performance
    • +

    Checkboxradio

    + +

    Dialog