jQuery UI Controlgroup Test Suite

" ).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( $( "" ).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" ); +}); + +} ); -- cgit v1.2.3