aboutsummaryrefslogtreecommitdiffstats
path: root/tests/unit/controlgroup
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-08-22 23:39:35 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit40a9d1dfdb6a341904ae7bcd4600b0ef201d14df (patch)
treeb4eaf29211bd94d9f947e8f0613f7798efe98126 /tests/unit/controlgroup
parent6e2bbcaa5e19bb933d8024ff5d6fcff34f91e034 (diff)
downloadjquery-ui-40a9d1dfdb6a341904ae7bcd4600b0ef201d14df.tar.gz
jquery-ui-40a9d1dfdb6a341904ae7bcd4600b0ef201d14df.zip
Controlgroup: Inital commit of new widget
This widget replaces the buttonset widget
Diffstat (limited to 'tests/unit/controlgroup')
-rw-r--r--tests/unit/controlgroup/common.js26
-rw-r--r--tests/unit/controlgroup/controlgroup.html39
-rw-r--r--tests/unit/controlgroup/controlgroup_core.js77
-rw-r--r--tests/unit/controlgroup/core.js69
-rw-r--r--tests/unit/controlgroup/methods.js150
-rw-r--r--tests/unit/controlgroup/options.js108
6 files changed, 469 insertions, 0 deletions
diff --git a/tests/unit/controlgroup/common.js b/tests/unit/controlgroup/common.js
new file mode 100644
index 000000000..421e92e71
--- /dev/null
+++ b/tests/unit/controlgroup/common.js
@@ -0,0 +1,26 @@
+define( [
+ "lib/common",
+ "ui/controlgroup",
+ "ui/checkboxradio",
+ "ui/selectmenu",
+ "ui/button"
+], function( common ) {
+
+common.testWidget( "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.html b/tests/unit/controlgroup/controlgroup.html
new file mode 100644
index 000000000..df77ed64d
--- /dev/null
+++ b/tests/unit/controlgroup/controlgroup.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Controlgroup Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../lib/css.js" data-modules="core button checboxradio selectmenu controlgroup"></script>
+ <script src="../../lib/bootstrap.js" data-modules="common core methods options"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+ <div class="controlgroup">
+ <button style="display:none">Button with icon only</button>
+ <select>
+ <option>Fast</option>
+ <option>Medium</option>
+ <option>Slow</option>
+ </select>
+ <label for="checkbox">Checkbox</label>
+ <input type="checkbox" value="checkbox" id="checkbox" />
+ <select>
+ <option>Fast</option>
+ <option>Medium</option>
+ <option>Slow</option>
+ </select>
+ <div class="test"></div>
+ <button>Button with icon on the bottom</button>
+ <select>
+ <option>Fast</option>
+ <option>Medium</option>
+ <option>Slow</option>
+ </select>
+ </div>
+</div>
+</body>
+</html>
diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js
index e69de29bb..2177c767b 100644
--- a/tests/unit/controlgroup/controlgroup_core.js
+++ 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/core.js b/tests/unit/controlgroup/core.js
new file mode 100644
index 000000000..f84136b2f
--- /dev/null
+++ b/tests/unit/controlgroup/core.js
@@ -0,0 +1,69 @@
+define( [
+ "jquery",
+ "ui/controlgroup",
+ "ui/checkboxradio",
+ "ui/selectmenu",
+ "ui/button"
+], function( $ ) {
+
+module( "Controlgroup: Core" );
+
+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" );
+ assert.lacksClassStart( selectButton, "ui-corner" );
+
+ selects.eq( 1 ).selectmenu( "close" );
+ assert.lacksClassStart( selectButton, "ui-corner" );
+
+ 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" );
+ assert.lacksClassStart( selectButton, "ui-corner" );
+
+ selects.eq( 1 ).selectmenu( "close" );
+ assert.lacksClassStart( selectButton, "ui-corner" );
+
+ selectButton = selects.eq( 2 ).selectmenu( "widget" );
+ selects.eq( 2 ).selectmenu( "open" );
+ assert.lacksClassStart( selectButton, "ui-corner" );
+
+ selects.eq( 2 ).selectmenu( "close" );
+ assert.hasClasses( selectButton, "ui-corner-bottom",
+ "vertical: Last selectmenu gets ui-corner-bottom when closed" );
+});
+
+} );
diff --git a/tests/unit/controlgroup/methods.js b/tests/unit/controlgroup/methods.js
new file mode 100644
index 000000000..c691e4c46
--- /dev/null
+++ b/tests/unit/controlgroup/methods.js
@@ -0,0 +1,150 @@
+define( [
+ "jquery",
+ "ui/controlgroup",
+ "ui/checkboxradio",
+ "ui/selectmenu",
+ "ui/button"
+], function( $ ) {
+
+module( "Controlgroup: methods" );
+
+test( "destroy", function( assert ) {
+ expect( 1 );
+ assert.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",
+ "The widget does not get the disabled class, because we disable each child widget" );
+ 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" );
+});
+
+var tests = {
+ "checkboxradio": "<input type='checkbox'>",
+ "selectmenu": "<select><option>foo</option></select>",
+ "button": "<button>"
+ },
+ orientations = {
+ "horizontal": [
+ "ui-corner-left",
+ false,
+ false,
+ "ui-corner-right"
+ ],
+ "vertical": [
+ "ui-corner-top",
+ false,
+ false,
+ "ui-corner-bottom"
+ ]
+ };
+
+// Iterate through supported element markup
+$.each( tests, function( widget, html ) {
+
+ // Check in both horizontal and vertical orientations
+ $.each( orientations, function( name, classes ) {
+
+ test( "refresh: " + widget + ": " + name, function( assert ) {
+ expect( 41 );
+
+ var i, control, currentClasses,
+ controls = [],
+ element = $( "<div>" ).controlgroup({
+ direction: name
+ }).appendTo( "body" );
+
+ // checks the elements with in the controlgroup against the expected class list
+ function checkCornerClasses( classList ) {
+ for ( var j = 0; j < 4; j++ ) {
+ if ( classList[ j ] ) {
+ assert.hasClasses( controls[ j ][ widget ]( "widget" ), classList[ j ] );
+ } else {
+ assert.lacksClassStart( controls[ j ][ widget ]( "widget" ), "ui-corner" );
+ }
+ }
+ }
+
+ function showElements( index, value ) {
+ $( value )[ widget ]( "widget" ).show();
+ }
+
+ // Hide each element and check the corner classes
+ function iterateHidden( excludeInvisible ) {
+ for ( i = 0; i < 4; i++ ) {
+
+ $( controls ).each( showElements );
+
+ controls[ i ][ widget ]( "widget" ).hide();
+
+ currentClasses = classes.slice( 0 );
+ if ( excludeInvisible ) {
+ if ( i === 0 ) {
+ currentClasses[ i + 1 ] = classes[ i ];
+ currentClasses[ i ] = false;
+ } else if ( i === 3 ) {
+ currentClasses[ i - 1 ] = classes[ i ];
+ currentClasses[ i ] = false;
+ }
+ }
+ element.controlgroup( "refresh" );
+ checkCornerClasses( currentClasses );
+ }
+ }
+
+ // Add a label for each element and then append the element to the control group
+ for ( i = 0; i < 4; i++ ) {
+ control = $( html ).attr( "id", "id" + i )
+ .add( $( "<label>" ).clone().attr( "for", "id" + i ) );
+
+ controls.push( control );
+ element.append( control );
+ }
+
+ // Refresh the controlgroup now that its populated
+ element.controlgroup( "refresh" );
+ for ( i = 0; i < 4; i++ ) {
+ strictEqual( controls[ i ].is( ":ui-" + widget ), true,
+ name + ": " + widget + " " + i + ": is a " + widget + " widget" );
+ }
+
+ // Check that we have the right classes
+ checkCornerClasses( classes );
+
+ // hide each element and then check its classes
+ iterateHidden( true );
+
+ // Set the exclude option to false so we no longer care about hidden
+ element.controlgroup( "option", "excludeInvisible", false );
+
+ // Iterate hiding the elements again and check their corner classes
+ iterateHidden();
+
+ // Disable the first control
+ controls[ 0 ].prop( "disabled", true );
+
+ element.controlgroup( "refresh" );
+
+ assert.hasClasses( controls[ 0 ][ widget ]( "widget" ), "ui-state-disabled" );
+
+ // remove the controlgroup before we start the next set
+ element.remove();
+
+ });
+ });
+});
+
+} );
diff --git a/tests/unit/controlgroup/options.js b/tests/unit/controlgroup/options.js
new file mode 100644
index 000000000..82375381a
--- /dev/null
+++ b/tests/unit/controlgroup/options.js
@@ -0,0 +1,108 @@
+define( [
+ "jquery",
+ "ui/controlgroup",
+ "ui/checkboxradio",
+ "ui/selectmenu",
+ "ui/button"
+], function( $ ) {
+
+module( "Controlgroup: options" );
+
+test( "disabled", function( assert ) {
+ expect( 4 );
+ var element = $( ".controlgroup" ).controlgroup().controlgroup( "option", "disabled", true );
+ assert.lacksClasses( element, "ui-state-disabled" );
+ equal( element.find( ".ui-state-disabled" ).length, 6, "Child widgets are disabled" );
+
+ element.controlgroup( "option", "disabled", false );
+ assert.lacksClasses( element, "ui-state-disabled" );
+ strictEqual( element.find( ".ui-state-disabled" ).length, 0, "Child widgets are not disabled" );
+
+});
+
+test( "items - null", function() {
+ expect( 2 );
+ var element = $( ".controlgroup" ).controlgroup({
+ items: {
+ "button": null,
+ "selectmenu": null,
+ "checkboxradio": null
+ }
+ });
+
+ strictEqual( element.children( ".ui-button" ).length, 0,
+ "Child widgets are not called when selector is null" );
+
+ element.controlgroup( "option", "items", {
+ "button": "button"
+ });
+ strictEqual( element.children( ".ui-button" ).length, 2,
+ "Correct child widgets are called when selector is updated" );
+});
+
+test( "items: custom selector", function() {
+ expect( 1 );
+ var element = $( ".controlgroup" ).controlgroup({
+ items: {
+ "button": ".button"
+ }
+ });
+ strictEqual( element.children( ".ui-button" ).length, 4,
+ "Correct child widgets are called when custom selector used" );
+});
+
+$.widget( "ui.test", {
+ _create: function (){
+ this.element.addClass( "ui-test ui-button" );
+ },
+
+ // Controlgroup requires a refresh method to exist
+ refresh: $.noop
+});
+test( "items: custom widget", function() {
+ expect( 2 );
+ var element = $( ".controlgroup" ).controlgroup({
+ items: {
+ "test": ".test"
+ }
+ });
+
+ strictEqual( element.children( ".ui-button" ).length, 7,
+ "Correct child widgets are called when custom selector used" );
+ strictEqual( element.children( ".ui-test" ).length, 1,
+ "Custom widget called" );
+});
+
+test( "excludeInvisible", function( assert ) {
+ expect( 4 );
+ var element = $( ".controlgroup" ).controlgroup({
+ excludeInvisible: false
+ }),
+ buttons = element.children( ".ui-button" );
+
+ assert.lacksClassStart( buttons.eq( 1 ), "ui-corner" );
+ assert.hasClasses( buttons.eq( 0 ), "ui-corner-left",
+ "ExcludeInvisible: false: First button hidden second button doesn't get a corner class" );
+
+ element.controlgroup( "option", "excludeInvisible", true );
+ assert.lacksClassStart( buttons.eq( 0 ), "ui-corner" );
+ assert.hasClasses( buttons.eq( 1 ), "ui-corner-left",
+ "ExcludeInvisible: true: First button is hidden second button get corner class" );
+});
+
+test( "direction", function( assert ) {
+ expect( 6 );
+ var element = $( ".controlgroup" ).controlgroup(),
+ buttons = element.children( ".ui-button" ).filter( ":visible" );
+
+ assert.hasClasses( element, "ui-controlgroup-horizontal" );
+ assert.hasClasses( buttons.first(), "ui-corner-left" );
+ assert.hasClasses( buttons.last(), "ui-corner-right" );
+
+ element.controlgroup( "option", "direction", "vertical" );
+ assert.hasClasses( element, "ui-controlgroup-vertical" );
+ assert.hasClasses( buttons.first(), "ui-corner-top" );
+ assert.hasClasses( buttons.last(), "ui-corner-bottom" );
+});
+
+} );
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-12 04:09:32 +0000