diff options
20 files changed, 907 insertions, 641 deletions
diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index c260ef22f..c4eee6b4c 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -25,17 +25,17 @@ var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; }).get(); - same( actual, expected ); + deepEqual( actual, expected ); } - function equalHeights( accordion, min, max ) { + function accordion_equalHeights( accordion, min, max ) { var sizes = []; accordion.find( ".ui-accordion-content" ).each(function() { sizes.push( $( this ).outerHeight() ); }); ok( sizes[ 0 ] >= min && sizes[ 0 ] <= max, "must be within " + min + " and " + max + ", was " + sizes[ 0 ] ); - same( sizes[ 0 ], sizes[ 1 ] ); - same( sizes[ 0 ], sizes[ 2 ] ); + deepEqual( sizes[ 0 ], sizes[ 1 ] ); + deepEqual( sizes[ 0 ], sizes[ 2 ] ); } function accordionSetupTeardown() { var animated = $.ui.accordion.prototype.options.animated; diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 280339c26..ec4ca29d5 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -3,6 +3,7 @@ module( "accordion: core", accordionSetupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { + expect( 4 ); test( "markup structure: " + type, function() { var element = $( selector ).accordion(); ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); @@ -10,13 +11,14 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ ".ui-accordion-header elements exist, correct number" ); equal( element.find( ".ui-accordion-content" ).length, 3, ".ui-accordion-content elements exist, correct number" ); - same( element.find( ".ui-accordion-header" ).next().get(), + deepEqual( element.find( ".ui-accordion-header" ).next().get(), element.find( ".ui-accordion-content" ).get(), "content panels come immediately after headers" ); }); }); test( "handle click on header-descendant", function() { + expect( 1 ); var element = $( "#navigation" ).accordion(); $( "#navigation h2:eq(1) a" ).click(); accordion_state( element, 0, 1, 0 ); @@ -26,7 +28,7 @@ test( "ui-accordion-heading class added to headers anchor", function() { expect( 1 ); var element = $( "#list1" ).accordion(); var anchors = element.find( ".ui-accordion-heading" ); - equals( anchors.length, 3 ); + equal( anchors.length, 3 ); }); test( "accessibility", function () { @@ -34,20 +36,20 @@ test( "accessibility", function () { var element = $( "#list1" ).accordion().accordion( "option", "active", 1 ); var headers = element.find( ".ui-accordion-header" ); - equals( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); - equals( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); - equals( element.attr( "role" ), "tablist", "main role" ); - equals( headers.attr( "role" ), "tab", "tab roles" ); - equals( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); - equals( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); - equals( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); - equals( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equals( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); + equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); + equal( element.attr( "role" ), "tablist", "main role" ); + equal( headers.attr( "role" ), "tab", "tab roles" ); + equal( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); + equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); + equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); element.accordion( "option", "active", 0 ); - equals( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); - equals( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); - equals( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equals( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); + equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_deprecated.html b/tests/unit/accordion/accordion_deprecated.html index e8254f4f3..5bfe7562b 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -22,17 +22,17 @@ var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; }).get(); - same( actual, expected ); + deepEqual( actual, expected ); } - function equalHeights( accordion, min, max ) { + function accordion_equalHeights( accordion, min, max ) { var sizes = []; accordion.find( ".ui-accordion-content" ).each(function() { sizes.push( $( this ).outerHeight() ); }); ok( sizes[ 0 ] >= min && sizes[ 0 ] <= max, "must be within " + min + " and " + max + ", was " + sizes[ 0 ] ); - same( sizes[ 0 ], sizes[ 1 ] ); - same( sizes[ 0 ], sizes[ 2 ] ); + deepEqual( sizes[ 0 ], sizes[ 1 ] ); + deepEqual( sizes[ 0 ], sizes[ 2 ] ); } function accordionSetupTeardown() { var animated = $.ui.accordion.prototype.options.animated; diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 0435f48a7..3a2075b2b 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -3,6 +3,7 @@ module( "accordion (deprecated): expanded active option, activate method", accordionSetupTeardown() ); test( "activate, numeric", function() { + expect( 5 ); var element = $( "#list1" ).accordion({ active: 1 }); accordion_state( element, 0, 1, 0 ); element.accordion( "activate", 2 ); @@ -16,6 +17,7 @@ test( "activate, numeric", function() { }); test( "activate, numeric, collapsible:true", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ collapsible: true }); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -26,6 +28,7 @@ test( "activate, numeric, collapsible:true", function() { }); test( "activate, boolean, collapsible: true", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ collapsible: true }); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -34,6 +37,7 @@ test( "activate, boolean, collapsible: true", function() { }); test( "activate, boolean, collapsible: false", function() { + expect( 2 ); var element = $( "#list1" ).accordion(); element.accordion( "activate", 2 ); accordion_state( element, 0, 0, 1 ); @@ -42,6 +46,7 @@ test( "activate, boolean, collapsible: false", function() { }); test( "activate, string expression", function() { + expect( 4 ); var element = $( "#list1" ).accordion({ active: "h3:last" }); accordion_state( element, 0, 0, 1 ); element.accordion( "activate", ":first" ); @@ -53,6 +58,7 @@ test( "activate, string expression", function() { }); test( "activate, jQuery or DOM element", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); accordion_state( element, 0, 0, 1 ); element.accordion( "activate", $( "#list1 h3:first" ) ); @@ -62,6 +68,7 @@ test( "activate, jQuery or DOM element", function() { }); test( "{ active: Selector }", function() { + expect( 2 ); var element = $("#list1").accordion({ active: "h3:last" }); @@ -71,6 +78,7 @@ test( "{ active: Selector }", function() { }); test( "{ active: Element }", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" )[ 0 ] }); @@ -80,6 +88,7 @@ test( "{ active: Element }", function() { }); test( "{ active: jQuery Object }", function() { + expect( 2 ); var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); @@ -95,14 +104,16 @@ test( "{ active: jQuery Object }", function() { module( "accordion (deprecated) - height options", accordionSetupTeardown() ); test( "{ autoHeight: true }, default", function() { - equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130); + expect( 3 ); + accordion_equalHeights( $( "#navigation" ).accordion({ autoHeight: true }), 95, 130 ); }); -test("{ autoHeight: false }", function() { - var element = $('#navigation').accordion({ autoHeight: false }); +test( "{ autoHeight: false }", function() { + expect( 3 ); + var element = $( "#navigation" ).accordion({ autoHeight: false }); var sizes = []; - element.find(".ui-accordion-content").each(function() { - sizes.push($(this).height()); + element.find( ".ui-accordion-content" ).each(function() { + sizes.push( $(this).height() ); }); ok( sizes[0] >= 70 && sizes[0] <= 105, "was " + sizes[0] ); ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] ); @@ -110,12 +121,14 @@ test("{ autoHeight: false }", function() { }); test( "{ fillSpace: true }", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); test( "{ fillSapce: true } with sibling", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "<p>Lorem Ipsum</p>" ) .css({ @@ -125,10 +138,11 @@ test( "{ fillSapce: true } with sibling", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element , 346, 358); + accordion_equalHeights( element , 346, 358); }); test( "{ fillSpace: true } with multiple siblings", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "<p>Lorem Ipsum</p>" ) .css({ @@ -153,7 +167,7 @@ test( "{ fillSpace: true } with multiple siblings", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( element, 296, 308 ); + accordion_equalHeights( element, 296, 308 ); }); @@ -163,6 +177,7 @@ test( "{ fillSpace: true } with multiple siblings", function() { module( "accordion (deprecated) - icons", accordionSetupTeardown() ); test( "icons, headerSelected", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ icons: { headerSelected: "a1", header: "h1" } }); @@ -179,6 +194,7 @@ test( "icons, headerSelected", function() { module( "accordion (deprecated) - resize", accordionSetupTeardown() ); test( "resize", function() { + expect( 6 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -186,11 +202,11 @@ test( "resize", function() { .accordion({ heightStyle: "fill" }); - equalHeights( element, 246, 258 ); + accordion_equalHeights( element, 246, 258 ); element.parent().height( 500 ); element.accordion( "resize" ); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); @@ -200,6 +216,7 @@ test( "resize", function() { module( "accordion (deprecated) - navigation", accordionSetupTeardown() ); test( "{ navigation: true, navigationFilter: header }", function() { + expect( 2 ); var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { @@ -211,10 +228,11 @@ test( "{ navigation: true, navigationFilter: header }", function() { }); test( "{ navigation: true, navigationFilter: content }", function() { - var element = $("#navigation").accordion({ + expect( 2 ); + var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { - return /\?p=1\.1\.3\.2$/.test(this.href); + return /\?p=1\.1\.3\.2$/.test( this.href ); } }); equal( element.accordion( "option", "active" ), 2 ); @@ -237,11 +255,11 @@ test( "changestart", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); accordion_state( element, 0, 0, 0 ); }); @@ -249,13 +267,13 @@ test( "changestart", function() { accordion_state( element, 1, 0, 0 ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); accordion_state( element, 1, 0, 0 ); }); @@ -263,12 +281,12 @@ test( "changestart", function() { accordion_state( element, 0, 1, 0 ); element.one( "accordionchangestart", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); accordion_state( element, 0, 1, 0 ); }); element.accordion( "option", "active", false ); @@ -285,34 +303,34 @@ test( "change", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); element.accordion( "option", "active", 0 ); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); }); headers.eq( 1 ).click(); element.one( "accordionchange", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); }); element.accordion( "option", "active", false ); }); diff --git a/tests/unit/accordion/accordion_events.js b/tests/unit/accordion/accordion_events.js index 2438f28ea..d704e54c8 100644 --- a/tests/unit/accordion/accordion_events.js +++ b/tests/unit/accordion/accordion_events.js @@ -13,11 +13,11 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); accordion_state( element, 0, 0, 0 ); }); @@ -25,14 +25,14 @@ test( "beforeActivate", function() { accordion_state( element, 1, 0, 0 ); element.one( "accordionbeforeactivate", function( event, ui ) { - equals( event.originalEvent.type, "click" ); - equals( ui.oldHeader.size(), 1 ); + equal( event.originalEvent.type, "click" ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); accordion_state( element, 1, 0, 0 ); }); @@ -41,12 +41,12 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); accordion_state( element, 0, 1, 0 ); }); element.accordion( "option", "active", false ); @@ -54,11 +54,11 @@ test( "beforeActivate", function() { element.one( "accordionbeforeactivate", function( event, ui ) { ok( !( "originalEvent" in event ) ); - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 2 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 2 ] ); event.preventDefault(); accordion_state( element, 0, 0, 0 ); @@ -77,34 +77,34 @@ test( "activate", function() { var content = element.find( ".ui-accordion-content" ); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); + equal( ui.oldHeader.size(), 0 ); + equal( ui.oldContent.size(), 0 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); element.accordion( "option", "active", 0 ); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 0 ] ); - equals( ui.newHeader.size(), 1 ); + equal( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); + equal( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); }); headers.eq( 1 ).click(); element.one( "accordionactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 1 ); + equal( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); - equals( ui.oldContent.size(), 1 ); + equal( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); - equals( ui.newHeader.size(), 0 ); - equals( ui.newContent.size(), 0 ); + equal( ui.newHeader.size(), 0 ); + equal( ui.newContent.size(), 0 ); }); element.accordion( "option", "active", false ); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index d45bde134..c6ba3230a 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -3,13 +3,15 @@ module( "accordion: methods", accordionSetupTeardown() ); test( "destroy", function() { - domEqual("#list1", function() { - $("#list1").accordion().accordion("destroy"); + expect( 1 ); + domEqual( "#list1", function() { + $( "#list1" ).accordion().accordion( "destroy" ); }); }); test( "enable/disable", function() { - var element = $('#list1').accordion(); + expect( 3 ); + var element = $( "#list1" ).accordion(); accordion_state( element, 1, 0, 0 ); element.accordion( "disable" ); element.accordion( "option", "active", 1 ); @@ -20,6 +22,7 @@ test( "enable/disable", function() { }); test( "refresh", function() { + expect( 6 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -27,11 +30,11 @@ test( "refresh", function() { .accordion({ heightStyle: "fill" }); - equalHeights( element, 246, 258 ); + accordion_equalHeights( element, 246, 258 ); element.parent().height( 500 ); element.accordion( "refresh" ); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 7bd6f2e74..80b7f0b39 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -3,23 +3,25 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { + expect( 2 ); var element = $( "#list1" ).accordion(); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); test( "{ active: false }", function() { + expect( 7 ); var element = $( "#list1" ).accordion({ active: false, collapsible: true }); accordion_state( element, 0, 0, 0 ); - equals( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); - equals( element.accordion( "option", "active" ), false ); + equal( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); + equal( element.accordion( "option", "active" ), false ); element.accordion( "option", "collapsible", false ); accordion_state( element, 1, 0, 0 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); element.accordion( "destroy" ); element.accordion({ @@ -30,43 +32,45 @@ test( "{ active: false }", function() { }); test( "{ active: Number }", function() { + expect( 8 ); var element = $( "#list1" ).accordion({ active: 2 }); - equals( element.accordion( "option", "active" ), 2 ); + equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); element.accordion( "option", "active", 0 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", 10 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); }); if ( $.uiBackCompat === false ) { test( "{ active: -Number }", function() { + expect( 8 ); var element = $( "#list1" ).accordion({ active: -1 }); - equals( element.accordion( "option", "active" ), 2 ); + equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); element.accordion( "option", "active", -2 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", -10 ); - equals( element.accordion( "option", "active" ), 1 ); + equal( element.accordion( "option", "active" ), 1 ); accordion_state( element, 0, 1, 0 ); element.accordion( "option", "active", -3 ); - equals( element.accordion( "option", "active" ), 0 ); + equal( element.accordion( "option", "active" ), 0 ); accordion_state( element, 1, 0, 0 ); }); } @@ -74,6 +78,7 @@ if ( $.uiBackCompat === false ) { // TODO: add animation tests test( "{ collapsible: false }", function() { + expect( 4 ); var element = $( "#list1" ).accordion({ active: 1 }); @@ -87,6 +92,7 @@ test( "{ collapsible: false }", function() { }); test( "{ collapsible: true }", function() { + expect( 6 ); var element = $( "#list1" ).accordion({ active: 1, collapsible: true @@ -101,11 +107,12 @@ test( "{ collapsible: true }", function() { accordion_state( element, 0, 1, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( element.accordion( "option", "active" ), false ); + equal( element.accordion( "option", "active" ), false ); accordion_state( element, 0, 0, 0 ); }); test( "{ event: null }", function() { + expect( 5 ); var element = $( "#list1" ).accordion({ event: null }); @@ -122,6 +129,7 @@ test( "{ event: null }", function() { }); test( "{ event: custom }", function() { + expect( 11 ); var element = $( "#list1" ).accordion({ event: "custom1 custom2" }); @@ -153,6 +161,7 @@ test( "{ event: custom }", function() { }); test( "{ header: default }", function() { + expect( 2 ); // default: > li > :first-child,> :not(li):even // > :not(li):even accordion_state( $( "#list1" ).accordion(), 1, 0, 0); @@ -161,6 +170,7 @@ test( "{ header: default }", function() { }); test( "{ header: custom }", function() { + expect( 6 ); var element = $( "#navigationWrapper" ).accordion({ header: "h2" }); @@ -174,11 +184,13 @@ test( "{ header: custom }", function() { }); test( "{ heightStyle: 'auto' }", function() { + expect( 3 ); var element = $( "#navigation" ).accordion({ heightStyle: "auto" }); - equalHeights( element, 95, 130 ); + accordion_equalHeights( element, 95, 130 ); }); test( "{ heightStyle: 'content' }", function() { + expect( 3 ); var element = $( "#navigation" ).accordion({ heightStyle: "content" }); var sizes = element.find( ".ui-accordion-content" ).map(function() { return $( this ).height(); @@ -189,12 +201,14 @@ test( "{ heightStyle: 'content' }", function() { }); test( "{ heightStyle: 'fill' }", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element, 446, 458 ); + accordion_equalHeights( element, 446, 458 ); }); test( "{ heightStyle: 'fill' } with sibling", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "<p>Lorem Ipsum</p>" ) .css({ @@ -204,10 +218,11 @@ test( "{ heightStyle: 'fill' } with sibling", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element , 346, 358); + accordion_equalHeights( element , 346, 358); }); test( "{ heightStyle: 'fill' } with multiple siblings", function() { + expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "<p>Lorem Ipsum</p>" ) .css({ @@ -232,14 +247,15 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { }) .prependTo( "#navigationWrapper" ); var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( element, 296, 308 ); + accordion_equalHeights( element, 296, 308 ); }); test( "{ icons: false }", function() { + expect( 8 ); var element = $( "#list1" ); function icons( on ) { - same( element.find( "span.ui-icon").length, on ? 3 : 0 ); - same( element.hasClass( "ui-accordion-icons" ), on ); + deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 ); + deepEqual( element.hasClass( "ui-accordion-icons" ), on ); } element.accordion(); icons( true ); @@ -254,6 +270,7 @@ test( "{ icons: false }", function() { }); test( "{ icons: hash }", function() { + expect( 3 ); var element = $( "#list1" ).accordion({ icons: { activeHeader: "a1", header: "h1" } }); diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index 8f1d9db9a..a69562d3f 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -1,46 +1,44 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Autocomplete Test Suite</title> - <link type="text/css" href="../../../themes/base/jquery.ui.autocomplete.css" rel="stylesheet" /> - - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script> - - <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> - <script type="text/javascript" src="../../../external/qunit.js"></script> - <script type="text/javascript" src="../../jquery.simulate.js"></script> - <script type="text/javascript" src="../testsuite.js"></script> - - <script type="text/javascript" src="autocomplete_core.js"></script> - <script type="text/javascript" src="autocomplete_defaults.js"></script> - <script type="text/javascript" src="autocomplete_events.js"></script> - <script type="text/javascript" src="autocomplete_methods.js"></script> - <script type="text/javascript" src="autocomplete_options.js"></script> - - <script type="text/javascript" src="../swarminject.js"></script> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.autocomplete.css"> + + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script src="../../../ui/jquery.ui.autocomplete.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + + <script src="autocomplete_defaults.js"></script> + <script src="autocomplete_core.js"></script> + <script src="autocomplete_events.js"></script> + <script src="autocomplete_methods.js"></script> + <script src="autocomplete_options.js"></script> + + <script src="../swarminject.js"></script> </head> -<body id="body"> +<body> <h1 id="qunit-header">jQuery UI Autocomplete Test Suite</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> -<ol id="qunit-tests"> -</ol> - +<ol id="qunit-tests"></ol> <div id="qunit-fixture"> - <div id="ac-wrap1" class="ac-wrap"></div> - <div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div> - <div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div> -</div> +<div id="ac-wrap1" class="ac-wrap"></div> +<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div> +<div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div> +</div> </body> </html> diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index 19f52dc15..3f92aa01f 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -1,73 +1,83 @@ -/* - * autocomplete_core.js - */ +(function( $ ) { +module( "autocomplete: core" ); -(function($) { +asyncTest( "close-on-blur is properly delayed", function() { + expect( 3 ); + var element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); -module("autocomplete: core", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - -test("close-on-blur is properly delayed", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript"] - }).val("ja").autocomplete("search"); - same( $(".ui-menu:visible").length, 1 ); - ac.blur(); - same( $(".ui-menu:visible").length, 1 ); - stop(); + ok( menu.is( ":visible" ) ); + element.blur(); + ok( menu.is( ":visible" ) ); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); + ok( menu.is( ":hidden") ); start(); - }, 200); + }, 200 ); }); -test("close-on-blur is cancelled when starting a search", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript"] - }).val("ja").autocomplete("search"); - same( $(".ui-menu:visible").length, 1 ); - ac.blur(); - same( $(".ui-menu:visible").length, 1 ); - ac.autocomplete("search"); - stop(); +asyncTest( "close-on-blur is cancelled when starting a search", function() { + expect( 3 ); + var element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); + + ok( menu.is( ":visible" ) ); + element.blur(); + ok( menu.is( ":visible" ) ); + element.autocomplete( "search" ); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); + ok( menu.is( ":visible" ) ); start(); - }, 200); + }, 200 ); }); test( "prevent form submit on enter when menu is active", function() { - var event; - var ac = $( "#autocomplete" ).autocomplete({ - source: [ "java", "javascript" ] - }).val( "ja" ).autocomplete( "search" ); - + expect( 2 ); + var event, + element = $( "#autocomplete" ) + .autocomplete({ + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ), + menu = element.autocomplete( "widget" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.DOWN; - ac.trigger( event ); - same( $( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); - + element.trigger( event ); + deepEqual( menu.find( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; - ac.trigger( event ); + element.trigger( event ); ok( event.isDefaultPrevented(), "default action is prevented" ); }); test( "allow form submit on enter when menu is not active", function() { - var event; - var ac = $( "#autocomplete" ).autocomplete({ - autoFocus: false, - source: [ "java", "javascript" ] - }).val( "ja" ).autocomplete( "search" ); - + expect( 1 ); + var event, + element = $( "#autocomplete" ) + .autocomplete({ + autoFocus: false, + source: [ "java", "javascript" ] + }) + .val( "ja" ) + .autocomplete( "search" ); + event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; - ac.trigger( event ); + element.trigger( event ); ok( !event.isDefaultPrevented(), "default action is prevented" ); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/autocomplete_events.js index c884733d6..c6d42ddcc 100644 --- a/tests/unit/autocomplete/autocomplete_events.js +++ b/tests/unit/autocomplete/autocomplete_events.js @@ -1,206 +1,197 @@ -/* - * autocomplete_events.js - */ -(function($) { +(function( $ ) { -module("autocomplete: events", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); +module( "autocomplete: events" ); var data = [ "Clojure", "COBOL", "ColdFusion", "Java", "JavaScript", "Scala", "Scheme" ]; -test("all events", function() { - expect(14); - var ac = $("#autocomplete").autocomplete({ - autoFocus: false, - delay: 0, - source: data, - search: function(event) { - same(event.type, "autocompletesearch"); - }, - response: function(event, ui) { - same(event.type, "autocompleteresponse"); - same(ui.content, [ - { label: "Clojure", value: "Clojure" }, - { label: "Java", value: "Java" }, - { label: "JavaScript", value: "JavaScript" } - ]); - ui.content.splice( 0, 1 ); - }, - open: function(event) { - same(event.type, "autocompleteopen"); - }, - focus: function(event, ui) { - same(event.type, "autocompletefocus"); - same(ui.item, {label:"Java", value:"Java"}); - }, - close: function(event) { - same(event.type, "autocompleteclose"); - same( $(".ui-menu:visible").length, 0 ); - }, - select: function(event, ui) { - same(event.type, "autocompleteselect"); - same(ui.item, {label:"Java", value:"Java"}); - }, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, {label:"Java", value:"Java"}); - same( $(".ui-menu:visible").length, 0 ); - start(); - } - }); - stop(); - ac.focus().val("j").keydown(); +asyncTest( "all events", function() { + expect( 13 ); + var element = $( "#autocomplete" ) + .autocomplete({ + autoFocus: false, + delay: 0, + source: data, + search: function( event ) { + equal( event.originalEvent.type, "keydown", "search originalEvent" ); + }, + response: function( event, ui ) { + deepEqual( ui.content, [ + { label: "Clojure", value: "Clojure" }, + { label: "Java", value: "Java" }, + { label: "JavaScript", value: "JavaScript" } + ], "response ui.content" ); + ui.content.splice( 0, 1 ); + }, + open: function( event ) { + ok( menu.is( ":visible" ), "menu open on open" ); + }, + focus: function( event, ui ) { + equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); + }, + close: function( event ) { + equal( event.originalEvent.type, "menuselect", "close originalEvent" ); + ok( menu.is( ":hidden" ), "menu closed on close" ); + }, + select: function( event, ui ) { + equal( event.originalEvent.type, "menuselect", "select originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); + }, + change: function( event, ui ) { + equal( event.originalEvent.type, "blur", "change originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); + ok( menu.is( ":hidden" ), "menu closed on change" ); + start(); + } + }), + menu = element.autocomplete( "widget" ); + + element.focus().val( "j" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); + ok( menu.is( ":visible" ), "menu is visible after delay" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); // blurring through jQuery causes a bug in IE 6 which causes the // autocompletechange event to occur twice - ac[0].blur(); - }, 50); + element[0].blur(); + }, 50 ); }); -test("all events - contenteditable", function() { - expect(14); - var ac = $("#autocomplete-contenteditable").autocomplete({ - autoFocus: false, - delay: 0, - source: data, - search: function(event) { - same(event.type, "autocompletesearch"); - }, - response: function(event, ui) { - same(event.type, "autocompleteresponse"); - same(ui.content, [ - { label: "Clojure", value: "Clojure" }, - { label: "Java", value: "Java" }, - { label: "JavaScript", value: "JavaScript" } - ]); - ui.content.splice( 0, 1 ); - }, - open: function(event) { - same(event.type, "autocompleteopen"); - }, - focus: function(event, ui) { - same(event.type, "autocompletefocus"); - same(ui.item, {label:"Java", value:"Java"}); - }, - close: function(event) { - same(event.type, "autocompleteclose"); - same( $(".ui-menu:visible").length, 0 ); - }, - select: function(event, ui) { - same(event.type, "autocompleteselect"); - same(ui.item, {label:"Java", value:"Java"}); - }, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, {label:"Java", value:"Java"}); - same( $(".ui-menu:visible").length, 0 ); - start(); - } - }); - stop(); - ac.focus().text("j").keydown(); +asyncTest( "all events - contenteditable", function() { + expect( 13 ); + var element = $( "#autocomplete-contenteditable" ) + .autocomplete({ + autoFocus: false, + delay: 0, + source: data, + search: function( event ) { + equal( event.originalEvent.type, "keydown", "search originalEvent" ); + }, + response: function( event, ui ) { + deepEqual( ui.content, [ + { label: "Clojure", value: "Clojure" }, + { label: "Java", value: "Java" }, + { label: "JavaScript", value: "JavaScript" } + ], "response ui.content" ); + ui.content.splice( 0, 1 ); + }, + open: function( event ) { + ok( menu.is( ":visible" ), "menu open on open" ); + }, + focus: function( event, ui ) { + equal( event.originalEvent.type, "menufocus", "focus originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "focus ui.item" ); + }, + close: function( event ) { + equal( event.originalEvent.type, "menuselect", "close originalEvent" ); + ok( menu.is( ":hidden" ), "menu closed on close" ); + }, + select: function( event, ui ) { + equal( event.originalEvent.type, "menuselect", "select originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "select ui.item" ); + }, + change: function( event, ui ) { + equal( event.originalEvent.type, "blur", "change originalEvent" ); + deepEqual( ui.item, { label: "Java", value: "Java" }, "chnage ui.item" ); + ok( menu.is( ":hidden" ), "menu closed on change" ); + start(); + } + }), + menu = element.autocomplete( "widget" ); + + element.focus().text( "j" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); - // blurring through jQuery causes a bug in IE 6 which causes the + ok( menu.is( ":visible" ), "menu is visible after delay" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + // TODO: blurring through jQuery causes a bug in IE 6 which causes the // autocompletechange event to occur twice - ac[0].blur(); - }, 50); + element[0].blur(); + }, 50 ); }); -test("change without selection", function() { - expect(2); - stop(); - var ac = $("#autocomplete").autocomplete({ +asyncTest( "change without selection", function() { + expect( 1 ); + var element = $( "#autocomplete" ).autocomplete({ delay: 0, source: data, - change: function(event, ui) { - same(event.type, "autocompletechange"); - same(ui.item, null); + change: function( event, ui ) { + strictEqual( ui.item, null ); start(); } }); - ac.triggerHandler("focus"); - ac.val("ja").triggerHandler("blur"); + element.triggerHandler( "focus" ); + element.val( "ja" ).triggerHandler( "blur" ); }); -test("cancel search", function() { - expect(6); - var first = true; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - search: function() { - if (first) { - same( ac.val(), "ja" ); - first = false; - return false; +asyncTest( "cancel search", function() { + expect( 6 ); + var first = true, + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + search: function() { + if ( first ) { + equal( element.val(), "ja", "val on first search" ); + first = false; + return false; + } + equal( element.val(), "java", "val on second search" ); + }, + open: function() { + ok( true, "menu opened" ); } - same( ac.val(), "java" ); - }, - open: function() { - ok(true); - } - }); - stop(); - ac.val("ja").keydown(); + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); - ac.val("java").keydown(); + ok( menu.is( ":hidden" ), "menu is hidden after first search" ); + element.val( "java" ).keydown(); setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - same( $(".ui-menu .ui-menu-item").length, 2 ); + ok( menu.is( ":visible" ), "menu is visible after second search" ); + equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" ); start(); - }, 50); - }, 50); + }, 50 ); + }, 50 ); }); -test("cancel focus", function() { - expect(1); - var customVal = 'custom value'; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - focus: function(event, ui) { - $(this).val(customVal); - return false; - } - }); - stop(); - ac.val("ja").keydown(); +asyncTest( "cancel focus", function() { + expect( 1 ); + var customVal = "custom value"; + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + focus: function( event, ui ) { + $( this ).val( customVal ); + return false; + } + }); + element.val( "ja" ).keydown(); setTimeout(function() { - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - same( ac.val(), customVal ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( element.val(), customVal ); start(); - }, 50); + }, 50 ); }); -test("cancel select", function() { - expect(1); - var customVal = 'custom value'; - var ac = $("#autocomplete").autocomplete({ - delay: 0, - source: data, - select: function(event, ui) { - $(this).val(customVal); - return false; - } - }); - stop(); - ac.val("ja").keydown(); +asyncTest( "cancel select", function() { + expect( 1 ); + var customVal = "custom value", + element = $( "#autocomplete" ).autocomplete({ + delay: 0, + source: data, + select: function( event, ui ) { + $( this ).val( customVal ); + return false; + } + }); + element.val( "ja" ).keydown(); setTimeout(function() { - ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN }); - ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER }); - same( ac.val(), customVal ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( element.val(), customVal ); start(); - }, 50); + }, 50 ); }); /* TODO previous fix broke more than it fixed, disabling this for now - messed up regular menu select event @@ -215,10 +206,10 @@ test("blur without selection", function() { setTimeout(function() { $( ".ui-menu-item" ).first().simulate("mouseover"); ac.simulate("keydown", { keyCode: $.ui.keyCode.TAB }); - same( ac.val(), "j" ); + deepEqual( ac.val(), "j" ); start(); }, 50); }); */ -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_methods.js b/tests/unit/autocomplete/autocomplete_methods.js index 1043e47ba..3fe035d28 100644 --- a/tests/unit/autocomplete/autocomplete_methods.js +++ b/tests/unit/autocomplete/autocomplete_methods.js @@ -1,39 +1,30 @@ -/* - * autocomplete_methods.js - */ -(function($) { +(function( $ ) { +module( "autocomplete: methods" ); -module("autocomplete: methods", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } +test( "destroy", function() { + expect( 1 ); + domEqual( "#autocomplete", function() { + $( "#autocomplete" ).autocomplete().autocomplete( "destroy" ); + }); }); -test("destroy", function() { - domEqual("#autocomplete", function() { - $("#autocomplete").autocomplete().autocomplete("destroy"); - }); -}) +test( "search", function() { + expect( 3 ); + var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ], + element = $( "#autocomplete" ).autocomplete({ + source: data, + minLength: 0 + }), + menu = element.autocomplete( "widget" ); + element.autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).length, data.length, "all items for a blank search" ); -var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; + element.val( "has" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "haskell", "only one item for set input value" ); -test("search", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - minLength: 0 - }); - ac.autocomplete("search"); - same( $(".ui-menu .ui-menu-item").length, data.length, "all items for a blank search" ); - - ac.val("has"); - ac.autocomplete("search") - same( $(".ui-menu .ui-menu-item").text(), "haskell", "only one item for set input value" ); - - ac.autocomplete("search", "ja"); - same( $(".ui-menu .ui-menu-item").length, 2, "only java and javascript for 'ja'" ); - - $("#autocomplete").autocomplete("destroy"); -}) + element.autocomplete( "search", "ja" ); + equal( menu.find( ".ui-menu-item" ).length, 2, "only java and javascript for 'ja'" ); +}); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js index f2da2f4aa..01c4e9fef 100644 --- a/tests/unit/autocomplete/autocomplete_options.js +++ b/tests/unit/autocomplete/autocomplete_options.js @@ -1,247 +1,192 @@ -/* - * autocomplete_options.js - */ -(function($) { - -module("autocomplete: options", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - +(function( $ ) { -/* disabled until autocomplete actually has built-in support for caching -// returns at most 4 items -function source(request) { - ok(true, "handling a request"); - switch(request.term) { - case "cha": - return ["Common Pochard", "Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"] - case "chaf": - case "chaff": - return ["Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"] - case "chaffi": - return ["Common Chaffinch"] - case "schi": - return ["schifpre"] - } -} +module( "autocomplete: options" ); -function search(input) { - var autocomplete = input.data("autocomplete"); - autocomplete.search("cha"); - autocomplete.close(); - autocomplete.search("chaf"); - autocomplete.close(); - autocomplete.search("chaff"); - autocomplete.close(); - autocomplete.search("chaffi"); - autocomplete.close(); - autocomplete.search("schi"); -} - -test("cache: default", function() { - expect(2); - search($("#autocomplete").autocomplete({ - source: source - })); -}); - -test("cache: {limit:4}", function() { - expect(3); - search($("#autocomplete").autocomplete({ - cache: { - limit: 4 - }, - source: source - })); -}); - -test("cache: false", function() { - expect(5); - search($("#autocomplete").autocomplete({ - cache: false, - source: source - })); -}); -*/ - -var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; +var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ]; test( "appendTo", function() { - var ac = $( "#autocomplete" ).autocomplete(); - same( ac.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" ); - ac.autocomplete( "destroy" ); - - ac.autocomplete({ - appendTo: "#ac-wrap2" - }); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap2" )[0], "id" ); - ac.autocomplete( "destroy" ); + expect( 5 ); + var element = $( "#autocomplete" ).autocomplete(); + equal( element.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" ); + element.autocomplete( "destroy" ); - ac.autocomplete({ + element.autocomplete({ appendTo: ".ac-wrap" }); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "class" ); - same( $( "#ac-wrap2 .ui-autocomplete").length, 0, "class - only appends to one element") - ac.autocomplete( "destroy" ); + equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "first found element" ); + equal( $( "#ac-wrap2 .ui-autocomplete" ).length, 0, "only appends to one element" ); + element.autocomplete( "destroy" ); - ac.autocomplete({ + element.autocomplete({ appendTo: null }); - same( ac.autocomplete( "widget" ).parent()[0], document.body, "null" ); - ac.autocomplete( "destroy" ); - - ac.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" ); - same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" ); - ac.autocomplete( "destroy" ); + equal( element.autocomplete( "widget" ).parent()[0], document.body, "null" ); + element.autocomplete( "destroy" ); + + element.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" ); + equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" ); + element.autocomplete( "destroy" ); }); function autoFocusTest( afValue, focusedLength ) { - var ac = $( "#autocomplete" ).autocomplete({ + var element = $( "#autocomplete" ).autocomplete({ autoFocus: afValue, delay: 0, source: data, open: function( event, ui ) { - equal( ac.autocomplete( "widget" ).children( ".ui-menu-item:first .ui-state-focus" ).length, focusedLength, "first item is " + afValue ? "" : "not" + " auto focused" ); - start(); + equal( element.autocomplete( "widget" ).children( ".ui-menu-item:first .ui-state-focus" ).length, + focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" ); + start(); } }); - ac.val( "ja" ).keydown(); + element.val( "ja" ).keydown(); stop(); } test( "autoFocus: false", function() { + expect( 1 ); autoFocusTest( false, 0 ); }); test( "autoFocus: true", function() { + expect( 1 ); autoFocusTest( true, 1 ); }); -test("delay", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - delay: 50 - }); - ac.val("ja").keydown(); - - same( $(".ui-menu:visible").length, 0 ); - - // wait half a second for the default delay to open the menu - stop(); - setTimeout(function() { - same( $(".ui-menu:visible").length, 1 ); - ac.autocomplete("destroy"); - start(); - }, 100); -}); +asyncTest( "delay", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data, + delay: 50 + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); + + ok( menu.is( ":hidden" ), "menu is closed immediately after search" ); -test("disabled", function() { - var ac = $("#autocomplete").autocomplete({ - source: data, - delay: 0, - disabled: true - }); - ac.val("ja").keydown(); - - same( $(".ui-menu:visible").length, 0 ); - - stop(); setTimeout(function() { - same( $(".ui-menu:visible").length, 0 ); - ac.autocomplete("destroy"); + ok( menu.is( ":visible" ), "menu is open after delay" ); start(); - }, 50); + }, 100 ); }); -test("minLength", function() { - var ac = $("#autocomplete").autocomplete({ - source: data - }); - ac.autocomplete("search", ""); - same( $(".ui-menu:visible").length, 0, "blank not enough for minLength: 1" ); - - ac.autocomplete("option", "minLength", 0); - ac.autocomplete("search", ""); - same( $(".ui-menu:visible").length, 1, "blank enough for minLength: 0" ); - ac.autocomplete("destroy"); -}); +asyncTest( "disabled", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data, + delay: 0, + disabled: true + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).keydown(); -test("source, local string array", function() { - var ac = $("#autocomplete").autocomplete({ - source: data - }); - ac.val("ja").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("destroy"); -}); + ok( menu.is( ":hidden" ) ); -function source_test(source, async) { - var ac = $("#autocomplete").autocomplete({ - source: source - }); - ac.val("ja").autocomplete("search"); - function result(){ - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("destroy"); - async && start(); + setTimeout(function() { + ok( menu.is( ":hidden" ) ); + start(); + }, 50 ); +}); + +test( "minLength", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data + }), + menu = element.autocomplete( "widget" ); + element.autocomplete( "search", "" ); + ok( menu.is( ":hidden" ), "blank not enough for minLength: 1" ); + + element.autocomplete( "option", "minLength", 0 ); + element.autocomplete( "search", "" ); + ok( menu.is( ":visible" ), "blank enough for minLength: 0" ); +}); + +test( "source, local string array", function() { + expect( 1 ); + var element = $( "#autocomplete" ).autocomplete({ + source: data + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); +}); + +function sourceTest( source, async ) { + var element = $( "#autocomplete" ).autocomplete({ + source: source + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + function result() { + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); + element.autocomplete( "destroy" ); + if ( async ) { + start(); + } } - if (async) { + if ( async ) { stop(); - $(document).one("ajaxStop", result); + $( document ).one( "ajaxStop", result ); } else { result(); } } -test("source, local object array, only label property", function() { - source_test([ - {label:"java"}, - {label:"php"}, - {label:"coldfusion"}, - {label:"javascript"} +test( "source, local object array, only label property", function() { + expect( 1 ); + sourceTest([ + { label: "java" }, + { label: "php" }, + { label: "coldfusion" }, + { label: "javascript" } ]); }); -test("source, local object array, only value property", function() { - source_test([ - {value:"java"}, - {value:"php"}, - {value:"coldfusion"}, - {value:"javascript"} +test( "source, local object array, only value property", function() { + expect( 1 ); + sourceTest([ + { value: "java" }, + { value: "php" }, + { value: "coldfusion" }, + { value: "javascript" } ]); }); -test("source, url string with remote json string array", function() { - source_test("remote_string_array.txt", true); +test( "source, url string with remote json string array", function() { + expect( 1 ); + sourceTest( "remote_string_array.txt", true ); }); -test("source, url string with remote json object array, only value properties", function() { - source_test("remote_object_array_values.txt", true); +test( "source, url string with remote json object array, only value properties", function() { + expect( 1 ); + sourceTest( "remote_object_array_values.txt", true ); }); -test("source, url string with remote json object array, only label properties", function() { - source_test("remote_object_array_labels.txt", true); +test( "source, url string with remote json object array, only label properties", function() { + expect( 1 ); + sourceTest( "remote_object_array_labels.txt", true ); }); -test("source, custom", function() { - source_test(function(request, response) { - same( request.term, "ja" ); - response(["java", "javascript"]); +test( "source, custom", function() { + expect( 2 ); + sourceTest(function( request, response ) { + equal( request.term, "ja" ); + response( ["java", "javascript"] ); }); }); -test("source, update after init", function() { - var ac = $("#autocomplete").autocomplete({ - source: ["java", "javascript", "haskell"] - }); - ac.val("ja").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "javajavascript" ); - ac.autocomplete("option", "source", ["php", "asp"]); - ac.val("ph").autocomplete("search"); - same( $(".ui-menu .ui-menu-item").text(), "php" ); - ac.autocomplete("destroy"); +test( "source, update after init", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript", "haskell" ] + }), + menu = element.autocomplete( "widget" ); + element.val( "ja" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "javajavascript" ); + element.autocomplete( "option", "source", [ "php", "asp" ] ); + element.val( "ph" ).autocomplete( "search" ); + equal( menu.find( ".ui-menu-item" ).text(), "php" ); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 6956ebcda..e3c6d2f4e 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -28,40 +28,54 @@ <script src="../../jquery.simulate.js"></script> <script src="../testsuite.js"></script> <script src="effects_core.js"></script> - + <script src="effects_scale.js"></script> + <script src="../swarminject.js"></script> <style type="text/css"> - .hidden { - display: none; - } - .test { - background: #000; - border: 0; - width: 100px; - height: 100px; - } - .testAddBorder { - border: 10px solid #000; - } - .testChildren, - .testChangeBackground { - background: #fff; - } - .test h2 { - font-size: 10px; - } - .testChildren h2 { - font-size: 20px; - } - - .relWidth { - width: 50%; - } + #qunit-fixture { + width: 1000px; + height: 1000px; + } + .hidden { + display: none; + } + .test { + background: #000; + border: 0; + width: 100px; + height: 100px; + } + .testAddBorder { + border: 10px solid #000; + } + .testChildren, + .testChangeBackground { + background: #fff; + } + .test h2 { + font-size: 10px; + } + .testChildren h2 { + font-size: 20px; + } + + .relWidth { + width: 50%; + } + + .relHeight { + height: 50%; + } + + .testScale { + border: 5px solid #000; + padding: 5px; + margin: 5px; + width: 50px; + height: 50px; + } - .relHeight { - height: 50%; - } </style> </head> <body> @@ -81,6 +95,8 @@ <div class="relWidth relHeight testAddBorder"> <h2>Slide with relative width</d2> </div> + <div class="testScale"> + </div> </div> </body> diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js new file mode 100644 index 000000000..1436cd030 --- /dev/null +++ b/tests/unit/effects/effects_scale.js @@ -0,0 +1,61 @@ +(function( $ ) { +module( "effect.scale: Scale" ); + +function run( position, v, h, vo, ho ) { + var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")"; + asyncTest( desc, function() { + var test = $( ".testScale" ), + css = { + position: position + }, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + complete: complete, + duration: 1 + }, + target = {}, + relative = position === "relative"; + + css[ h ] = 33; + css[ v ] = 33; + target[ h ] = h === ho ? css[ h ] : ho == "center" ? css[ h ] - 35 : css[ h ] - 70; + target[ v ] = v === vo ? css[ v ] : vo == "middle" ? css[ v ] - 35 : css[ v ] - 70; + if ( relative && h == "right" ) { + target[ h ] += 70; + } + if ( relative && v == "bottom" ) { + target[ v ] += 70; + } + test.css( css ); + test.effect( effect ); + + function complete() { + equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc ); + equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc ); + start(); + } + }); +} + +function suite( position ) { + run( position, "top", "left", "top", "left" ); + run( position, "top", "left", "middle", "center" ); + run( position, "top", "left", "bottom", "right" ); + run( position, "bottom", "right", "top", "left" ); + run( position, "bottom", "right", "middle", "center" ); + run( position, "bottom", "right", "bottom", "right" ); +} + +$(function() { + suite( "absolute" ); + suite( "relative" ); + $.offset.initialize(); + if ( $.offset.supportsFixedPosition ) { + suite( "fixed" ); + } +}); + +})( jQuery ); diff --git a/tests/visual/effects.all.css b/tests/visual/effects/effects.all.css index d2ed94026..1d531b026 100644 --- a/tests/visual/effects.all.css +++ b/tests/visual/effects/effects.all.css @@ -5,6 +5,7 @@ body,html { font-size: 12px; font-family: Arial; background: #191919; + color: #fff; } body { margin: 1em; } diff --git a/tests/visual/effects.all.html b/tests/visual/effects/effects.all.html index fed35de8a..a2f8f62ef 100644 --- a/tests/visual/effects.all.html +++ b/tests/visual/effects/effects.all.html @@ -1,25 +1,25 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css" /> - <script type="text/javascript" src="../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <script type="text/javascript" src="effects.all.js"></script> + <link rel="stylesheet" href="effects.all.css" type="text/css"> + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../ui/jquery.effects.core.js"></script> + <script src="../../../ui/jquery.effects.blind.js"></script> + <script src="../../../ui/jquery.effects.bounce.js"></script> + <script src="../../../ui/jquery.effects.clip.js"></script> + <script src="../../../ui/jquery.effects.drop.js"></script> + <script src="../../../ui/jquery.effects.explode.js"></script> + <script src="../../../ui/jquery.effects.fade.js"></script> + <script src="../../../ui/jquery.effects.fold.js"></script> + <script src="../../../ui/jquery.effects.highlight.js"></script> + <script src="../../../ui/jquery.effects.pulsate.js"></script> + <script src="../../../ui/jquery.effects.scale.js"></script> + <script src="../../../ui/jquery.effects.shake.js"></script> + <script src="../../../ui/jquery.effects.slide.js"></script> + <script src="../../../ui/jquery.effects.transfer.js"></script> + <script src="effects.all.js"></script> </head> <body> diff --git a/tests/visual/effects.all.js b/tests/visual/effects/effects.all.js index a28c41a89..a28c41a89 100644 --- a/tests/visual/effects.all.js +++ b/tests/visual/effects/effects.all.js diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/effects.scale.html new file mode 100644 index 000000000..9521a1872 --- /dev/null +++ b/tests/visual/effects/effects.scale.html @@ -0,0 +1,159 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects Test Suite</title> + <link rel="stylesheet" href="effects.all.css" type="text/css"> + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../ui/jquery.effects.core.js"></script> + <script src="../../../ui/jquery.effects.scale.js"></script> + <script src="effects.all.js"></script> + <script type="text/javascript" charset="utf-8"> + jQuery(function( $ ) { + var test = $( "#testBox" ), + opts = $( ".arg" ), + optsRev = $( opts.get().reverse() ), + doer = $( "#doAnim" ), + current = $( "#current" ), + cleanStyle = test[0].style, + total = 1; + + opts.each(function() { + total *= this.options.length; + }); + + opts.change( doAnim ); + doer.click( doAnim ); + $( "#cyclePrev" ).click(function() { + cycle( -1 ); + }); + $( "#cycleNext" ).click(function() { + cycle( 1 ); + }); + + function cycle( direction ) { + optsRev.each(function() { + var cur = this.selectedIndex, + next = cur + direction, + len = this.options.length; + + this.selectedIndex = ( next + len ) % len; + + if ( ( next+len ) % len === next ) return false; + }); + doAnim(); + } + + + function doAnim() { + var cur = 0; + opts.each(function() { + cur *= this.options.length + cur += this.selectedIndex; + }); + cur++; + current.text( "Configuration: " + cur + " of " + total ); + run.apply(test, opts.map(function() { + return $(this).val(); + }).get()); + } + + function run( position, v, h, vo, ho ) { + var el = this, + style = el[0].style, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + duration: 500 + }; + el.stop(true, true); + if ( typeof style === "object" ) { + style.cssText = ""; + } else { + el[0].style = ""; + } + el.css( "position", position ) + .css( h, 5 ) + .css( v, 5 ) + .delay( 100 ) + .effect( effect ); + } + }); + </script> + <style type="text/css"> + #testArea { +/* border: 5px dashed #777;*/ + width: 200px; + height: 200px; + position: relative; + } + #testBox { + width: 50px; + height: 50px; + background-color: #bada55; + color: black; + border: 10px solid #fff; + margin: 10px; + padding: 10px; + } + label { + display: block; + } + #controls { + position: absolute; + z-index: 300; + left: 50%; + top: 50%; + margin-left: -200px; + width: 400px; + opacity: 0.8; + } + </style> +</head> +<body> + <div id="testArea"> + <div id="testBox"> + </div> + </div> + <div id="controls"> + <label for="pos">Positioning + <select id="pos" class="arg"> + <option value="absolute">absolute</option> + <option value="relative">relative</option> + <option value="fixed">fixed</option> + </select> + </label> + <label for="vertPos">Vertical Positioning + <select id="vertPos" class="arg"> + <option value="top">top</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizPos">Horizontal Positioning + <select id="horizPos" class="arg"> + <option value="left">left</option> + <option value="right">right</option> + </select> + </label> + <label for="vertOrigin">Vertical Origin + <select id="vertOrigin" class="arg"> + <option value="top">top</option> + <option value="middle">middle</option> + <option value="bottom">bottom</option> + </select> + </label> + <label for="horizOrigin">Horizontal Origin + <select id="horizOrigin" class="arg"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right">right</option> + </select> + </label><br /> + <label id="current">jQuery UI Scale Animation Test</label> + <button id="cyclePrev">Back</button> + <button id="doAnim">Run Animation</button> + <button id="cycleNext">Forward</button> + </div> +</body>
\ No newline at end of file diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index fe0c03c53..e00d82497 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -118,8 +118,11 @@ $.effects.effect.size = function( o ) { mode = $.effects.setMode( el, o.mode || 'effect' ), restore = o.restore || mode !== "effect", scale = o.scale || 'both', - origin = o.origin, - original, baseline, factor; + origin = o.origin || [ "middle", "center" ], + original, baseline, factor, + position = el.css( "position" ), + originalVerticalPositioning = el.css( "bottom" ) !== "auto" ? "bottom" : "top"; + originalHorizontalPositioning = el.css( "right" ) !== "auto" ? "right" : "left"; if ( mode === "show" ) { el.show(); @@ -249,7 +252,47 @@ $.effects.effect.size = function( o ) { if( mode == 'hide' ) { el.hide(); } - $.effects.restore( el, restore ? props : props1 ); + $.effects.restore( el, restore ? props : props1 ); + + // we need to recalculate our positioning based on the new scaling + if ( position === "static" ) { + el.css({ + position: "relative", + top: el.to.top, + left: el.to.left + }); + } else { + $.each([ originalVerticalPositioning, originalHorizontalPositioning ], function( idx, pos ) { + el.css( pos, function( _, str ) { + var val = parseInt( str, 10 ), + toRef = idx ? el.to.left : el.to.top, + delta = idx ? el.to.outerWidth - el.from.outerWidth: el.to.outerHeight - el.from.outerHeight, + same = origin[ idx ] === pos, + mid = origin[ idx ] === "middle" || origin[ idx ] === "center", + direction = pos == "left" || pos == "top"; + + // if original was "auto", recalculate the new value from wrapper + if ( str === "auto" ) { + return toRef + "px"; + } + + // if not setting left or top + if ( !direction ) { + + // if the position is relative, bottom/right are reversed meaning + if ( position === "relative" ) { + toRef *= -1; + + // otherwise, if its NOT a midpoint origin, compensate for the outerWidth difference + } else if ( !mid ) { + toRef -= delta * ( same ? -1 : 1 ); + } + } + return val + toRef + "px"; + }); + }); + } + $.effects.removeWrapper( el ); $.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback el.dequeue(); diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js index b4cefc982..951b336ed 100644 --- a/ui/jquery.ui.spinner.js +++ b/ui/jquery.ui.spinner.js @@ -258,12 +258,29 @@ $.widget( "ui.spinner", { : 2 : 1); + // clamp the new value + newVal = this._trimValue( newVal ); + if ( this._trigger( "spin", event, { value: newVal } ) !== false) { this.value( newVal ); this.counter++; } }, + _trimValue: function( value ) { + var options = this.options; + + if ( value > options.max) { + return options.max; + } + + if ( value < options.min ) { + return options.min; + } + + return value; + }, + _stop: function( event ) { this.counter = 0; if ( this.timer ) { @@ -280,13 +297,7 @@ $.widget( "ui.spinner", { _setOption: function( key, value ) { if ( key === "value") { - value = this._parse( value ); - if ( value < this.options.min ) { - value = this.options.min; - } - if ( value > this.options.max ) { - value = this.options.max; - } + value = this._trimValue( this._parse(value) ); } if ( key === "disabled" ) { |