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/Gruntfile.js b/Gruntfile.js index 277169a7217..b08547b256c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -229,6 +229,9 @@ grunt.initConfig({ "qunit/qunit.css": "qunit/qunit/qunit.css", "qunit/MIT-LICENSE.txt": "qunit/MIT-LICENSE.txt", + "qunit-assert-classes/qunit-assert-classes.js": "qunit-assert-classes/qunit-assert-classes.js", + "qunit-assert-classes/LICENSE.txt": "qunit-assert-classes/LICENSE", + "jquery-mousewheel/jquery.mousewheel.js": "jquery-mousewheel/jquery.mousewheel.js", "jquery-mousewheel/LICENSE.txt": "jquery-mousewheel/LICENSE.txt", diff --git a/bower.json b/bower.json index cab4b258e5b..29f884f64d7 100644 --- a/bower.json +++ b/bower.json @@ -15,6 +15,7 @@ "jquery-simulate": "1.0.0", "jshint": "2.4.4", "qunit": "1.17.1", + "qunit-assert-classes": "0.1.5", "jquery-1.7.0": "jquery#1.7.0", "jquery-1.7.1": "jquery#1.7.1", 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..b9b780ace6a 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

+

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

diff --git a/demos/button/icons.html b/demos/button/icons.html index 76cb1147876..85bde00cb1d 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -11,37 +11,56 @@ +
+

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..54e2797e173 --- /dev/null +++ b/demos/checkboxradio/default.html @@ -0,0 +1,51 @@ + + + + + jQuery UI Checkboxradio - Default 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..08e598dbc82 --- /dev/null +++ b/demos/checkboxradio/index.html @@ -0,0 +1,18 @@ + + + + + + jQuery UI Checkboxradio Demos + + + + + + + diff --git a/demos/checkboxradio/no-icons.html b/demos/checkboxradio/no-icons.html new file mode 100644 index 00000000000..b54101c660c --- /dev/null +++ b/demos/checkboxradio/no-icons.html @@ -0,0 +1,52 @@ + + + + + jQuery UI Checkboxradio - No Icons + + + + + + + + + +
+

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, here showing both without icons.

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

1.) Select a brand

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

2.) Select a shape

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

3.) customize

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

Using two sets of radio buttons and one group of checkboxes to implement a product selector.

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

Radio Group

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

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

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

Controlgroup

+
+ Rental Car +
+ + + + + + + + +
+
+
+
+ Rental Car +
+ + + + + + + + +
+
+
+
+

A Controlgroup featuring various form controls, with either a horizontal or vertical layout.

+
+ + 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..554f2d18ab2 --- /dev/null +++ b/demos/controlgroup/splitbutton.html @@ -0,0 +1,53 @@ + + + + + jQuery UI Controlgroup - Split Button + + + + + + + + + + + + + + +
+

Split button

+
+ + +
+
+

Output:

+ +
+
+

A Controlgroup creating a split button

+
+ + diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html new file mode 100644 index 00000000000..be2949c9810 --- /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/external/qunit-assert-classes/LICENSE.txt b/external/qunit-assert-classes/LICENSE.txt new file mode 100644 index 00000000000..938db036815 --- /dev/null +++ b/external/qunit-assert-classes/LICENSE.txt @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Alexander Schmitz + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/external/qunit-assert-classes/qunit-assert-classes.js b/external/qunit-assert-classes/qunit-assert-classes.js new file mode 100644 index 00000000000..f61046bc85b --- /dev/null +++ b/external/qunit-assert-classes/qunit-assert-classes.js @@ -0,0 +1,47 @@ +( function( QUnit ) { + function inArray( haystack, needle ) { + for ( var i = 0; i < haystack.length; i++ ) { + if ( haystack[ i ] === needle ) { + return true; + } + } + return false; + } + function check( element, classes, stateVal, message ) { + var i, result, classAttribute, elementClassArray, + classArray = classes.split( " " ), + missing = [], + found = []; + + if ( element.jquery && element.length !== 1 ) { + throw( "Class checks can only be performed on a single element on a collection" ); + } + element = element.jquery ? element[ 0 ] : element; + classAttribute = element.getAttribute( "class" ); + message = message || "Element must " + ( stateVal? "" : "not " ) + "have classes"; + if ( classAttribute ) { + elementClassArray = classAttribute.split( " " ); + for( i = 0; i < classArray.length; i++ ) { + if ( !inArray( elementClassArray, classArray[ i ] ) ) { + missing.push( classArray[ i ] ); + } else { + found.push( classArray[ i ] ); + } + } + } else { + missing = classArray; + } + + result = stateVal ? !missing.length : !found.length; + QUnit.push( result, classes, result ? classes : found.join( " " ), message ); + } + + QUnit.extend( QUnit.assert, { + hasClasses: function( element, classes, message ) { + check( element, classes, true, message ); + }, + lacksClasses: function( element, classes, message ) { + check( element, classes, false, message ); + } + }); +})( QUnit ); \ No newline at end of file diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index 0a8755fd34b..9ea2d364539 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -9,6 +9,7 @@ + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    + +
    + + + +
    +
    + + + +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + + +
    + + + +
    + + diff --git a/tests/unit/button/button_events.js b/tests/unit/button/button_events.js index 2fd03832562..a3a1c212ef4 100644 --- a/tests/unit/button/button_events.js +++ b/tests/unit/button/button_events.js @@ -3,24 +3,17 @@ */ (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( assert ) { 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" ); + assert.lacksClasses( element, "ui-state-active", + "button loses active state appropriately" ); start(); }).blur(); }); @@ -33,4 +26,4 @@ asyncTest( "when button loses focus, ensure active state is removed (#8559)", fu }); }); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/tests/unit/button/button_methods.js b/tests/unit/button/button_methods.js index d4d92cead09..a1705d95411 100644 --- a/tests/unit/button/button_methods.js +++ b/tests/unit/button/button_methods.js @@ -3,9 +3,10 @@ */ (function($) { -module("button: methods"); -test("destroy", function() { +module( "Button: methods" ); + +test( "destroy", function() { expect( 1 ); domEqual( "#button", function() { $( "#button" ).button().button( "destroy" ); @@ -13,61 +14,28 @@ test("destroy", function() { }); test( "refresh: Ensure disabled state is preserved correctly.", function() { - expect( 8 ); + expect( 4 ); var element = $( "" ); element.button({ disabled: true }).button( "refresh" ); - ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237 + ok( element.button( "option", "disabled" ), + "Anchor button should remain disabled after refresh" ); element = $( "
    " ); element.button({ disabled: true }).button( "refresh" ); - ok( element.button( "option", "disabled" ), "
    buttons should remain disabled after refresh" ); + ok( element.button( "option", "disabled" ), + "
    buttons should remain disabled after refresh" ); element = $( "" ); 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( element.prop("disabled"), false, "element is disabled"); + strictEqual( elementDisabled.button("option", "disabled"), true, + "disabled option set to false"); + strictEqual( elementDisabled.prop("disabled"), true, "element is disabled"); }); -test("text false without icon", function() { +test( "showLabel, false, without icon", function( assert ) { expect( 1 ); - $("#button").button({ - text: false + + var button = $( "#button" ); + button.button({ + showLabel: false }); - ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") ); + assert.hasClasses( button, "ui-corner-all ui-widget" ); - $("#button").button("destroy"); + button.button( "destroy" ); }); -test("text false with icon", function() { +test( "showLabel, false, with icon", function( assert ) { 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"); + assert.hasClasses( $( "#button" ), "ui-button ui-corner-all ui-widget ui-button-icon-only", + true, "Button has correct classes" ); }); -test("label, default", function() { +test( "label, default", function() { expect( 2 ); - $("#button").button(); - deepEqual( $("#button").text(), "Label" ); - deepEqual( $( "#button").button( "option", "label" ), "Label" ); - - $("#button").button("destroy"); + $( "#button" ).button(); + deepEqual( $( "#button" ).text(), "Label" ); + deepEqual( $( "#button" ).button( "option", "label" ), "Label" ); }); -test("label", function() { +test( "label, explicit value", function() { expect( 2 ); - $("#button").button({ + $( "#button" ).button({ label: "xxx" }); - deepEqual( $("#button").text(), "xxx" ); - deepEqual( $("#button").button( "option", "label" ), "xxx" ); - - $("#button").button("destroy"); + deepEqual( $( "#button" ).text(), "xxx" ); + deepEqual( $( "#button" ).button( "option", "label" ), "xxx" ); }); -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, explicit value, 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( "icon", function() { expect( 1 ); $("#button").button({ - text: false, - icons: { - primary: "iconclass", - secondary: "iconclass2" - } - }); - ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") ); - - $("#button").button("destroy"); -}); - -test( "#5295 - button does not remove hoverstate if disabled" , function() { - expect( 1 ); - var btn = $("#button").button(); - btn.hover( function() { - btn.button( "disable" ); + showLabel: false, + icon: "iconclass" }); - btn.trigger( "mouseenter" ); - btn.trigger( "mouseleave" ); - ok( !btn.is( ".ui-state-hover") ); + strictEqual( $( "#button" ).find( "span.ui-icon.iconclass" ).length, 1 ); }); -})(jQuery); +})(jQuery); \ No newline at end of file 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..00d7c166cc9 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio.html @@ -0,0 +1,89 @@ + + + + + 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..e4ce2d205e1 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_common.js @@ -0,0 +1,15 @@ +TestHelpers.commonWidgetTests( "checkboxradio", { + noDefaultElement: true, + defaults: { + disabled: null, + label: null, + icon: true, + classes: { + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-icon": "ui-corner-all" + }, + + // Callbacks + create: null + } +}); diff --git a/tests/unit/checkboxradio/checkboxradio_core.js b/tests/unit/checkboxradio/checkboxradio_core.js new file mode 100644 index 00000000000..c02be6be2ad --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_core.js @@ -0,0 +1,196 @@ +/* + * checkboxradio_core.js + */ + + +(function($) { + +module("Checkboxradio: core"); +test( "Checkbox - Initial class structure", function( assert ) { + expect( 4 ); + var input = $("#check"), + label = $("label[for=check]"); + ok( input.is( ":visible" ) ); + assert.lacksClasses( label, "ui-button" ); + input.checkboxradio(); + assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" ); + assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all", + true, "Label has proper classes" ); +}); + +test( "Radios - Initial class structure", function( assert ) { + expect( 10 ); + var inputs = $( "#radio0 input" ), + labels = $( "#radio0 label" ); + ok( inputs.is( ":visible" ) ); + labels.each( function() { + assert.lacksClasses( this, "ui-button" ); + }); + inputs.checkboxradio(); + inputs.each( function() { + assert.hasClasses( this, "ui-helper-hidden-accessible" ); + }); + labels.each( function() { + assert.hasClasses( this, "ui-button" ); + }); +}); + +function assert(noForm, form1, form2) { + var others, + noFormElement = $( "#radio0 .ui-button" + noForm ), + form1Element = $( "#radio1 .ui-button" + form1 ), + form2Element = $( "#radio2 .ui-button" + form2 ); + + QUnit.assert.hasClasses( noFormElement, "ui-state-active" ); + $( "#radio0" ).find( ".ui-button" ).not( noFormElement ).each( function(){ + QUnit.assert.lacksClasses( this, "ui-state-active" ); + }); + + QUnit.assert.hasClasses( form1Element, "ui-state-active" ); + others = $( "#radio1" ).find( ".ui-button" ).not( form1Element ); + others.each( function(){ + QUnit.assert.lacksClasses( this, "ui-state-active" ); + }); + QUnit.assert.hasClasses( form2Element, "ui-state-active" ); + $( "#radio2" ).find( ".ui-button" ).not( form2Element ).each( function(){ + QUnit.assert.lacksClasses( this, "ui-state-active" ); + }); +} + +test("radio groups", function() { + expect( 36 ); + $("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( assert ) { + expect( 2 ); + var check = $( "#check" ).checkboxradio(), + label = $( "label[for='check']" ); + assert.lacksClasses( label, "ui-state-focus" ); + check.focus(); + setTimeout(function() { + assert.hasClasses( label, "ui-state-focus" ); + start(); + }); + } +); + +asyncTest( "Ensure checked after single click on checkbox label button", function( assert ) { + expect( 2 ); + + $( "#check2" ).checkboxradio().change( function() { + var label = $( this ).checkboxradio( "widget" ); + ok( this.checked, "checked ok" ); + + // 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" ); + assert.hasClasses( label, "ui-state-active" ); + }); + + // Support: Opera + // Opera doesn't trigger a change event when this is done synchronously. + // This seems to be a side effect of another test, but until that can be + // tracked down, this delay will have to do. + setTimeout(function() { + $( "#check2" ).checkboxradio( "widget" ).simulate( "click" ); + start(); + }); +}); +test( "Checkbox creation that requires a matching finds label in all cases", function( assert ) { + expect( 7 ); + var group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + + group = $( "" ); + group.filter( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.filter( "label" ), "ui-button" ); + + group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.filter( "label" ), "ui-button" ); + + group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + + group = $( "" ); + group.filter( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + + group = $( "" ); + group.find( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + + group = $( "" ); + group.find( "input" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button", "Found an label with id containing a :" ); +}); + +asyncTest( + "Resetting a button's form should refresh, the visual state of the button to match.", + function( assert ) { + expect( 2 ); + var form = $( "
    " + + "" + + "
    " ), + checkbox = form.find( "input[type=checkbox]" ).checkboxradio(); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + assert.lacksClasses( checkbox.checkboxradio( "widget" ), "ui-state-active" ); + + form.get( 0 ).reset(); + + setTimeout(function() { + assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-active" ); + start(); + }, 1 ); + } +); + +test( "Calling checkboxradio on an unsupported element throws an error", function( assert ) { + expect( 2 ); + var error = new Error( "Can't create checkboxradio on element.nodeName=div and element.type=undefined" ); + assert.raises( + function() { + $( "
    " ).checkboxradio(); + }, + error, + "Proper error thrown" + ); + error = new Error( "Can't create checkboxradio on element.nodeName=input and element.type=button" ); + assert.raises( + function() { + $( "" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); +}); +test( "Calling checkboxradio on an input with no label throws an error", function( assert ) { + expect( 1 ); + var error = new Error( "No label found for checkboxradio widget" ); + assert.raises( + function() { + $( "" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); +}); +})(jQuery); diff --git a/tests/unit/checkboxradio/checkboxradio_methods.js b/tests/unit/checkboxradio/checkboxradio_methods.js new file mode 100644 index 00000000000..288c231c270 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_methods.js @@ -0,0 +1,147 @@ +/* +* checkboxradio_methods.js +*/ + + +(function($) { + +module( "Checkboxradio: methods" ); +test( "Checkbox: refresh", function( assert ) { + var widget, icon, + checkbox = $( "#checkbox-method-refresh" ); + expect( 11 ); + checkbox.checkboxradio(); + + widget = checkbox.checkboxradio( "widget" ); + strictEqual( widget.find( ".ui-icon" ).length, 1, + "There is initally one icon" ); + widget.find( ".ui-icon" ).eq( 0 ).remove(); + checkbox.checkboxradio( "refresh" ); + icon = widget.find( ".ui-icon" ); + strictEqual( icon.length, 1, + "Icon is recreated on refresh if absent" ); + + assert.hasClasses( icon, "ui-icon-blank" ); + assert.lacksClasses( icon, "ui-icon-check" ); + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); + + checkbox.prop( "checked", true ); + checkbox.checkboxradio( "refresh" ); + assert.hasClasses( icon, "ui-icon-check" ); + assert.lacksClasses( icon, "ui-icon-blank" ); + assert.hasClasses( widget, "ui-checkboxradio-checked" ); + + checkbox.prop( "checked", false ); + checkbox.checkboxradio( "refresh" ); + assert.hasClasses( icon, "ui-icon-blank" ); + assert.lacksClasses( icon, "ui-icon-check" ); + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); +}); + +test( "Checkbox: destroy", function(){ + expect( 1 ); + domEqual( "#checkbox-method-destroy", function() { + $( "#checkbox-method-destroy" ).checkboxradio().checkboxradio( "destroy" ); + }); +}); + +test( "Checkbox: disable / enable", function( assert ) { + var checkbox = $( "#checkbox-method-disable" ), + widget = checkbox.checkboxradio().checkboxradio( "widget" ); + + expect( 4 ); + checkbox.checkboxradio( "disable" ); + assert.hasClasses( widget, "ui-state-disabled", + "label gets ui-state-disabled when disable is called" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled when disable is called" ); + checkbox.checkboxradio( "enable" ); + assert.lacksClasses( widget, "ui-state-disabled", + "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" )[ 0 ], label[ 0 ], + "widget method returns label" ); +}); + +test( "Radio: refresh", function( assert ) { + var radio = $( "#radio-method-refresh" ), + widget, icon; + expect( 8 ); + radio.checkboxradio(); + + widget = radio.checkboxradio( "widget" ); + strictEqual( widget.find( ".ui-icon" ).length, 1, + "There is initally one icon" ); + widget.find( ".ui-icon" ).eq( 0 ).remove(); + radio.checkboxradio( "refresh" ); + icon = widget.find( ".ui-icon" ); + strictEqual( icon.length, 1, + "Icon is recreated on refresh if absent" ); + + assert.hasClasses( icon, "ui-icon-blank" ); + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); + + radio.prop( "checked", true ); + radio.checkboxradio( "refresh" ); + assert.hasClasses( icon, "ui-icon-blank" ); + assert.hasClasses( widget, "ui-checkboxradio-checked" ); + + radio.prop( "checked", false ); + radio.checkboxradio( "refresh" ); + assert.hasClasses( icon, "ui-icon-blank" ); + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); +}); + +test( "Radio: destroy", function(){ + expect( 1 ); + domEqual( "#radio-method-destroy", function() { + $( "#radio-method-destroy" ).checkboxradio().checkboxradio( "destroy" ); + }); +}); + +test( "Radio: disable / enable", function( assert ) { + var radio = $( "#radio-method-disable" ), + widget = radio.checkboxradio().checkboxradio( "widget" ); + + expect( 4 ); + radio.checkboxradio( "disable" ); + assert.hasClasses( widget, "ui-state-disabled", + "label gets ui-state-disabled when disable is called" ); + strictEqual( radio.is( ":disabled" ), true, + "checkbox is disabled when disable is called" ); + radio.checkboxradio( "enable" ); + assert.lacksClasses( widget, "ui-state-disabled", + "label has ui-state-disabled removed when enable is called" ); + strictEqual( radio.is( ":disabled" ), false, + "checkbox 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" )[ 0 ], label[ 0 ], + "widget method returns label" ); +}); +test( "Input wrapped in a label preserved on refresh", function() { + var input = $( "#label-with-no-for" ).checkboxradio(), + element = input.checkboxradio( "widget" ); + + expect( 1 ); + + input.checkboxradio( "refresh" ); + strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" ); +}); + +})(jQuery); diff --git a/tests/unit/checkboxradio/checkboxradio_options.js b/tests/unit/checkboxradio/checkboxradio_options.js new file mode 100644 index 00000000000..fda305fafd5 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio_options.js @@ -0,0 +1,224 @@ +/* +* checkboxradio_methods.js +*/ + +(function($) { + +module( "Checkboxradio: options" ); + +function assertDisabled( widget, checkbox ) { + QUnit.assert.hasClasses( widget, "ui-state-disabled", + "label gets ui-state-disabled" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled" ); +} + +function assertEnabled( widget, checkbox ) { + QUnit.assert.lacksClasses( widget, "ui-state-disabled", + "label has ui-state-disabled removed when disabled set to false" ); + strictEqual( checkbox.is( ":disabled" ), false, + "checkbox has disabled prop removed when disabled set to false" ); +} + +test( "disabled", function() { + var checkbox = $( "#checkbox-option-disabled" ), + widget; + expect( 6 ); + checkbox.checkboxradio({ + disabled: true + }); + + widget = checkbox.checkboxradio( "widget" ); + + assertDisabled( widget, checkbox ); + + checkbox.checkboxradio( "option", "disabled", false ); + + assertEnabled( widget, checkbox ); + + checkbox.checkboxradio( "option", "disabled", true ); + + assertDisabled( widget, checkbox ); +}); +test( "disabled - prop true on init", function() { + expect( 2 ); + var checkbox = $( "#checkbox-option-disabled" ), + widget; + + checkbox.prop( "disabled", true ); + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + + assertDisabled( widget, checkbox ); +}); +test( "disabled - explicit null value", function() { + expect( 2 ); + var checkbox = $( "#checkbox-option-disabled" ), + widget; + + checkbox.prop( "disabled", true ); + + checkbox.checkboxradio({ + disabled: null + }); + widget = checkbox.checkboxradio( "widget" ); + + assertDisabled( widget, checkbox ); +}); + +function assertNoIcon( widget ) { + strictEqual( widget.find( "span.ui-icon" ).length, 0, + "Label does not contain an icon" ); +} +function assertIcon( widget, icon ) { + icon = icon || "blank"; + strictEqual( widget.find( ".ui-icon" ).length, 1, + "Label contains icon" ); + QUnit.assert.hasClasses( widget.find( ".ui-icon" ), "ui-checkboxradio-icon ui-corner-all ui-icon " + + "ui-icon-background ui-icon-" + icon, + "Icon has proper classes" ); +} +test( "icon - false on init", function() { + var checkbox = $( "#checkbox-option-icon" ), + widget; + + expect( 1 ); + + checkbox.checkboxradio({ icon: false }); + + widget = checkbox.checkboxradio( "widget" ); + + assertNoIcon( widget ); +}); + +test( "icon - default unchecked", function() { + var checkbox = $( "#checkbox-option-icon" ), + widget; + + expect( 2 ); + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + + assertIcon( widget ); +}); +test( "icon", function(){ + var checkbox = $( "#checkbox-option-icon" ), + widget; + + expect( 8 ); + + checkbox.prop( "checked", true ); + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + + assertIcon( widget, "check" ); + + checkbox.checkboxradio( "option", "icon", false ); + + assertNoIcon( widget ); + + checkbox.checkboxradio( "option", "icon", true ); + + assertIcon( widget, "check" ); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + checkbox.checkboxradio( "option", "icon", false ); + + assertNoIcon( widget ); + + checkbox.checkboxradio( "option", "icon", true ); + + assertIcon( widget ); + +}); +function getLabelText( label, element ) { + var text = ""; + label.contents().not( element ).each( function() { + text += ( this.nodeType === 3 ) ? $( this ).text() : ""; + }); + return text; +} +test( "label - default", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + checkbox.checkboxradio(); + + widget = checkbox.checkboxradio( "widget" ); + + strictEqual( checkbox.checkboxradio( "option", "label" ), + "checkbox label", "When no value passed on create text from dom is used for option" ); + strictEqual( getLabelText( widget, checkbox ), + "checkbox label", "When no value passed on create text from dom is used in dom" ); +}); +test( "label - explicit value", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + checkbox.checkboxradio({ + label: "foo" + }); + + widget = checkbox.checkboxradio( "widget" ); + + 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" ); + +}); + +test( "label - explicit null value", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + // We are testing the default here because the default null is a special value which means to check + // the DOM, so we need to make sure this happens correctly checking the options should never return + // null. It should always be true or false + checkbox.checkboxradio({ + label: null + }); + + widget = checkbox.checkboxradio( "widget" ); + + strictEqual( checkbox.checkboxradio( "option", "label" ), + "checkbox label", "When null is passed on create text from dom is used for option" ); + strictEqual( getLabelText( widget, checkbox ), + "checkbox label", "When null is passed on create text from dom is used in dom" ); + +}); + +test( "label", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 4 ); + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + + checkbox.checkboxradio( "option", "label", "bar" ); + + strictEqual( checkbox.checkboxradio( "option", "label" ), + "bar", "When value is passed value is used for option" ); + strictEqual( 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..11e1955655d --- /dev/null +++ b/tests/unit/controlgroup/controlgroup.html @@ -0,0 +1,63 @@ + + + + + jQuery UI Controlgroup Test Suite + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + +
    + + +
    +
    + + diff --git a/tests/unit/controlgroup/controlgroup_common.js b/tests/unit/controlgroup/controlgroup_common.js new file mode 100644 index 00000000000..1df62e53d5f --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_common.js @@ -0,0 +1,16 @@ +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: {}, + + // 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..b3f803044b2 --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_core.js @@ -0,0 +1,77 @@ +module( "Controlgroup: Core" ); + +function hasCornerClass( element ) { + return !!element.attr( "class" ).match( /ui-corner/g ); +} + +test( "selectmenu: open/close corners", function( assert ) { + expect( 1 ); + var element = $( ".controlgroup" ).controlgroup(), + selects = element.find( "select" ), + selectButton = selects.eq( 0 ).selectmenu( "widget" ); + + expect( 12 ); + + selects.eq( 0 ).selectmenu( "open" ); + assert.hasClasses( selectButton, "ui-corner-tl", + "Horizontal: First selectmenu gets ui-corner-tl when opened" ); + + selects.eq( 0 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-left", + "Horizontal: First selectmenu gets ui-corner-left when closed" ); + + selectButton = selects.eq( 1 ).selectmenu( "widget" ); + selects.eq( 1 ).selectmenu( "open" ); + strictEqual( hasCornerClass( selectButton ), false, + "Horizontal: Middle selectmenu does not get corner class when opened" ); + + selects.eq( 1 ).selectmenu( "close" ); + strictEqual( hasCornerClass( selectButton ), false, + "Horizontal: Middle selectmenu does not get corner class when closed" ); + + selectButton = selects.eq( 2 ).selectmenu( "widget" ); + selects.eq( 2 ).selectmenu( "open" ); + assert.hasClasses( selectButton, "ui-corner-tr", + "Horizontal: Last selectmenu gets ui-corner-tr when opened" ); + + selects.eq( 2 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-right", + "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" ); + assert.hasClasses( selectButton, "ui-corner-top", + "vertical: First selectmenu gets ui-corner-top when opened" ); + + selects.eq( 0 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-top", + "vertical: First selectmenu gets ui-corner-top when closed" ); + + selectButton = selects.eq( 1 ).selectmenu( "widget" ); + selects.eq( 1 ).selectmenu( "open" ); + strictEqual( hasCornerClass( selectButton ), false, + "vertical: Middle selectmenu does not get corner class when opened" ); + + selects.eq( 1 ).selectmenu( "close" ); + strictEqual( hasCornerClass( 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( selectButton ), false, + "vertical: Last selectmenu does not get corner class when opened" ); + + selects.eq( 2 ).selectmenu( "close" ); + assert.hasClasses( selectButton, "ui-corner-bottom", + "vertical: Last selectmenu gets ui-corner-bottom when closed" ); +}); +test( "invisibles excluded from corner classes", function( assert ) { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup(), + buttons = element.children( ".ui-button" ); + strictEqual( hasCornerClass( buttons.eq( 0 ) ), false, + "ExcludeInvisible: true: Hidden first element does not get a corner class" ); + assert.hasClasses( buttons.eq( 1 ), "ui-corner-left", + "ExcludeInvisible: true: First button is hidden second button get corner class" ); +}); \ 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..d44d83e211e --- /dev/null +++ b/tests/unit/controlgroup/controlgroup_methods.js @@ -0,0 +1,120 @@ +module( "Controlgroup: methods" ); + +test( "destroy", function() { + expect( 1 ); + domEqual( ".controlgroup", function() { + $( ".controlgroup" ).controlgroup().controlgroup( "destroy" ); + }); +}); +test( "disable", function( assert ) { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup().controlgroup( "disable" ); + assert.lacksClasses( element, "ui-state-disabled", + "ui-state-disabled is not present on widget after disabling" ); + strictEqual( element.find( ".ui-state-disabled" ).length, 6, + "Child widgets are disabled" ); +}); + +test( "enable", function( assert ) { + expect( 2 ); + var element = $( ".controlgroup" ).controlgroup().controlgroup( "enable" ); + assert.lacksClasses( element, "ui-state-disabled", + "ui-state-disabled is not present on widget after enabling" ); + strictEqual( element.find( "ui-state-disabled" ).length, 0, + "Child widgets are disabled" ); +}); + +function hasCornerClass( element, className ) { + 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 0c9b14da8d2..a24f4f1b4eb 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -31,6 +31,11 @@

    Button

  • Performance
    • +

    Checkboxradio

    + +

    Dialog