diff options
Diffstat (limited to 'tests')
70 files changed, 2360 insertions, 2037 deletions
diff --git a/tests/static/menu/all-menus-icons.html b/tests/static/menu/all-menus-icons.html deleted file mode 100644 index e780a2398..000000000 --- a/tests/static/menu/all-menus-icons.html +++ /dev/null @@ -1,172 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Menu Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../static.js"></script> - - <script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script> - <script> - $(document).ready(function(){ - $('#switcher').themeswitcher(); - }); - </script> - - - - <style type="text/css"> -/* styles for this page only */ -.ui-menu { width: 200px; } -#flyout .ui-menu { position: relative; } -#flyout .ui-menu.ui-menu-icons { position: absolute; } - -.ui-menu.ui-menu-icons { position: relative; } -.ui-menu.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; } - -/* left-aligned icon */ -.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } - -/* right-aligned icon */ -.ui-menu .ui-icon.ui-menu-icon { position: static; float: right; } - </style> - -</head> -<body> - -<div id="switcher" style="position: absolute; top: 20px; right: 20px;"></div> - - -<!-- NOTES: - -* Added "ui-menu-icons" class to set a left indent value for all menu items in a single menu - ---> - - -<h2>Default</h2> - -<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-bottom"> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> - <li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-scissors"></span>Addyston really long menu option to show wrap</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-wrench"></span>Adelphi</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-star"></span>Adena</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li> -</ul> - -<br /><br /> - -<div id="drilldown"> - -<h2>Drilldown</h2> - -<ul role="listbox" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"> - <a href="#" tabindex="-1" class="ui-state-hover ui-corner-all"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Amsterdam</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Cologne</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Frankfurt</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-star"></span>Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-heart"></span>Cologne</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-key"></span>Frankfurt</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Munich</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Utrecht</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li> -</ul> - -</div> - -<br /><br /> - -<div id="flyout"> - -<h2>Flyout / nested</h2> - -<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" id="menu"> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-scissors"></span>Amsterdam</a> - <ul style="display: block; top: 88.5px; left: 205px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a> - <ul style="display: block; top: 73px; left: -11px; z-index: 9999;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#">Cologne</a> - <ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-state-hover ui-corner-all" href="#">Frankfurt</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-pencil"></span>Cologne</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clock"></span>Frankfurt</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a> - <ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-lightbulb"></span>Munich</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clipboard"></span>Utrecht</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li> -</ul> - -</div> - - -</body> -</html> diff --git a/tests/static/menu/default.html b/tests/static/menu/default.html deleted file mode 100644 index dd1e0ba7d..000000000 --- a/tests/static/menu/default.html +++ /dev/null @@ -1,39 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Menu Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../static.js"></script> - -</head> -<body> - - -<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-widget ui-widget-content ui-corner-bottom"> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Aberdeen</a></li> - <li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Addyston</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adelphi</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adena</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alexandria</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alger</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alledonia</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alliance</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alpha</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alvada</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alvordton</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amanda</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amelia</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amesville</a></li> -</ul> - -</body> -</html> diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index 65fd16ab6..c260ef22f 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,7 +20,7 @@ <script src="../testsuite.js"></script> <script> - function state( accordion ) { + function accordion_state( accordion ) { var expected = $.makeArray( arguments ).slice( 1 ); var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; @@ -54,7 +54,6 @@ <script src="accordion_events.js"></script> <script src="accordion_methods.js"></script> <script src="accordion_options.js"></script> - <script src="accordion_tickets.js"></script> <script src="../swarminject.js"></script> <style> @@ -130,8 +129,8 @@ <li> <h2><a href="?p=1.1.3">Drums</a></h2> <ul> - <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> - <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.2">Acoustic</a></li> + <li><a href="?p=1.1.3.3">Electronic</a></li> <li><a href="?p=1.1.3.6">Accessories</a></li> </ul> </li> diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 05479faf9..280339c26 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -4,46 +4,46 @@ module( "accordion: core", accordionSetupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { test( "markup structure: " + type, function() { - var ac = $( selector ).accordion(); - ok( ac.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); - equal( ac.find( ".ui-accordion-header" ).length, 3, + var element = $( selector ).accordion(); + ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); + equal( element.find( ".ui-accordion-header" ).length, 3, ".ui-accordion-header elements exist, correct number" ); - equal( ac.find( ".ui-accordion-content" ).length, 3, + equal( element.find( ".ui-accordion-content" ).length, 3, ".ui-accordion-content elements exist, correct number" ); - same( ac.find( ".ui-accordion-header" ).next().get(), - ac.find( ".ui-accordion-content" ).get(), + same( 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() { - var ac = $( "#navigation" ).accordion(); + var element = $( "#navigation" ).accordion(); $( "#navigation h2:eq(1) a" ).click(); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); }); test( "ui-accordion-heading class added to headers anchor", function() { expect( 1 ); - var ac = $( "#list1" ).accordion(); - var anchors = $( ".ui-accordion-heading" ); + var element = $( "#list1" ).accordion(); + var anchors = element.find( ".ui-accordion-heading" ); equals( anchors.length, 3 ); }); test( "accessibility", function () { expect( 13 ); - var ac = $( "#list1" ).accordion().accordion( "option", "active", 1 ); - var headers = $( ".ui-accordion-header" ); + 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( ac.attr( "role" ), "tablist", "main role" ); + 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" ); - ac.accordion( "option", "active", 0 ); + 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" ); diff --git a/tests/unit/accordion/accordion_defaults.js b/tests/unit/accordion/accordion_defaults.js index 95a478057..9aa58e650 100644 --- a/tests/unit/accordion/accordion_defaults.js +++ b/tests/unit/accordion/accordion_defaults.js @@ -10,6 +10,11 @@ commonWidgetTests( "accordion", { icons: { "activeHeader": "ui-icon-triangle-1-s", "header": "ui-icon-triangle-1-e" - } + }, + + // callbacks + activate: null, + beforeActivate: null, + create: null } }); diff --git a/tests/unit/accordion/accordion_defaults_deprecated.js b/tests/unit/accordion/accordion_defaults_deprecated.js index b90b472e2..3f45a1f10 100644 --- a/tests/unit/accordion/accordion_defaults_deprecated.js +++ b/tests/unit/accordion/accordion_defaults_deprecated.js @@ -16,6 +16,13 @@ commonWidgetTests( "accordion", { "headerSelected": "ui-icon-triangle-1-s" }, navigation: false, - navigationFilter: function() {} + navigationFilter: function() {}, + + // callbacks + activate: null, + beforeActivate: null, + change: null, + changestart: null, + create: null } }); diff --git a/tests/unit/accordion/accordio.html b/tests/unit/accordion/accordion_deprecated.html index 4e4df72b4..e8254f4f3 100644 --- a/tests/unit/accordion/accordio.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,7 +17,7 @@ <script src="../testsuite.js"></script> <script> - function state( accordion ) { + function accordion_state( accordion ) { var expected = $.makeArray( arguments ).slice( 1 ); var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; @@ -51,7 +51,6 @@ <script src="accordion_events.js"></script> <script src="accordion_methods.js"></script> <script src="accordion_options.js"></script> - <script src="accordion_tickets.js"></script> <script src="accordion_deprecated.js"></script> <script src="../swarminject.js"></script> @@ -128,8 +127,8 @@ <li> <h2><a href="?p=1.1.3">Drums</a></h2> <ul> - <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> - <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.2">Acoustic</a></li> + <li><a href="?p=1.1.3.3">Electronic</a></li> <li><a href="?p=1.1.3.6">Accessories</a></li> </ul> </li> diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 636404d18..0435f48a7 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -3,89 +3,89 @@ module( "accordion (deprecated): expanded active option, activate method", accordionSetupTeardown() ); test( "activate, numeric", function() { - var ac = $( "#list1" ).accordion({ active: 1 }); - state( ac, 0, 1, 0 ); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", 0 ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", 1 ); - state( ac, 0, 1, 0 ); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); + var element = $( "#list1" ).accordion({ active: 1 }); + accordion_state( element, 0, 1, 0 ); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", 0 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", 1 ); + accordion_state( element, 0, 1, 0 ); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); }); test( "activate, numeric, collapsible:true", function() { - var ac = $( "#list1" ).accordion({ collapsible: true }); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", 0 ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", -1 ); - state( ac, 0, 0, 0 ); + var element = $( "#list1" ).accordion({ collapsible: true }); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", 0 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", -1 ); + accordion_state( element, 0, 0, 0 ); }); test( "activate, boolean, collapsible: true", function() { - var ac = $( "#list1" ).accordion({ collapsible: true }); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", false ); - state( ac, 0, 0, 0 ); + var element = $( "#list1" ).accordion({ collapsible: true }); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", false ); + accordion_state( element, 0, 0, 0 ); }); test( "activate, boolean, collapsible: false", function() { - var ac = $( "#list1" ).accordion(); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", false ); - state( ac, 0, 0, 1 ); + var element = $( "#list1" ).accordion(); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", false ); + accordion_state( element, 0, 0, 1 ); }); test( "activate, string expression", function() { - var ac = $( "#list1" ).accordion({ active: "h3:last" }); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", ":first" ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", ":eq(1)" ); - state( ac, 0, 1, 0 ); - ac.accordion( "activate", ":last" ); - state( ac, 0, 0, 1 ); + var element = $( "#list1" ).accordion({ active: "h3:last" }); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", ":first" ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", ":eq(1)" ); + accordion_state( element, 0, 1, 0 ); + element.accordion( "activate", ":last" ); + accordion_state( element, 0, 0, 1 ); }); test( "activate, jQuery or DOM element", function() { - var ac = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", $( "#list1 h3:first" ) ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", $( "#list1 h3" )[ 1 ] ); - state( ac, 0, 1, 0 ); + var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", $( "#list1 h3:first" ) ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", $( "#list1 h3" )[ 1 ] ); + accordion_state( element, 0, 1, 0 ); }); test( "{ active: Selector }", function() { - var ac = $("#list1").accordion({ + var element = $("#list1").accordion({ active: "h3:last" }); - state( ac, 0, 0, 1 ); - ac.accordion( "option", "active", "h3:eq(1)" ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "option", "active", "h3:eq(1)" ); + accordion_state( element, 0, 1, 0 ); }); test( "{ active: Element }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" )[ 0 ] }); - state( ac, 0, 0, 1 ); - ac.accordion( "option", "active", $( "#list1 h3:eq(1)" )[ 0 ] ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "option", "active", $( "#list1 h3:eq(1)" )[ 0 ] ); + accordion_state( element, 0, 1, 0 ); }); test( "{ active: jQuery Object }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); - state( ac, 0, 0, 1 ); - ac.accordion( "option", "active", $( "#list1 h3:eq(1)" ) ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "option", "active", $( "#list1 h3:eq(1)" ) ); + accordion_state( element, 0, 1, 0 ); }); @@ -99,9 +99,9 @@ test( "{ autoHeight: true }, default", function() { }); test("{ autoHeight: false }", function() { - var accordion = $('#navigation').accordion({ autoHeight: false }); + var element = $('#navigation').accordion({ autoHeight: false }); var sizes = []; - accordion.find(".ui-accordion-content").each(function() { + element.find(".ui-accordion-content").each(function() { sizes.push($(this).height()); }); ok( sizes[0] >= 70 && sizes[0] <= 105, "was " + sizes[0] ); @@ -111,8 +111,8 @@ test("{ autoHeight: false }", function() { test( "{ fillSpace: true }", function() { $( "#navigationWrapper" ).height( 500 ); - var ac = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( ac, 446, 458 ); + var element = $( "#navigation" ).accordion({ fillSpace: true }); + equalHeights( element, 446, 458 ); }); test( "{ fillSapce: true } with sibling", function() { @@ -124,8 +124,8 @@ test( "{ fillSapce: true } with sibling", function() { marginBottom: 30 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( ac , 346, 358); + var element = $( "#navigation" ).accordion({ fillSpace: true }); + equalHeights( element , 346, 358); }); test( "{ fillSpace: true } with multiple siblings", function() { @@ -152,8 +152,8 @@ test( "{ fillSpace: true } with multiple siblings", function() { marginBottom: 15 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( ac, 296, 308 ); + var element = $( "#navigation" ).accordion({ fillSpace: true }); + equalHeights( element, 296, 308 ); }); @@ -163,13 +163,13 @@ test( "{ fillSpace: true } with multiple siblings", function() { module( "accordion (deprecated) - icons", accordionSetupTeardown() ); test( "icons, headerSelected", function() { - var list = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ icons: { headerSelected: "a1", header: "h1" } }); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - list.accordion( "option", "icons", { headerSelected: "a2", header: "h2" } ); - ok( !list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + element.accordion( "option", "icons", { headerSelected: "a2", header: "h2" } ); + ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); }); @@ -179,18 +179,18 @@ test( "icons, headerSelected", function() { module( "accordion (deprecated) - resize", accordionSetupTeardown() ); test( "resize", function() { - var expected = $( "#navigation" ) + var element = $( "#navigation" ) .parent() .height( 300 ) .end() .accordion({ heightStyle: "fill" }); - equalHeights( expected, 246, 258 ); + equalHeights( element, 246, 258 ); - expected.parent().height( 500 ); - expected.accordion( "resize" ); - equalHeights( expected, 446, 458 ); + element.parent().height( 500 ); + element.accordion( "resize" ); + equalHeights( element, 446, 458 ); }); @@ -200,25 +200,25 @@ test( "resize", function() { module( "accordion (deprecated) - navigation", accordionSetupTeardown() ); test( "{ navigation: true, navigationFilter: header }", function() { - var ac = $( "#navigation" ).accordion({ + var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { return /\?p=1\.1\.3$/.test( this.href ); } }); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); }); test( "{ navigation: true, navigationFilter: content }", function() { - var ac = $("#navigation").accordion({ + var element = $("#navigation").accordion({ navigation: true, navigationFilter: function() { return /\?p=1\.1\.3\.2$/.test(this.href); } }); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); }); @@ -229,26 +229,26 @@ module( "accordion (deprecated) - changestart/change events", accordionSetupTear test( "changestart", function() { expect( 26 ); - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionchangestart", function( event, ui ) { + element.one( "accordionchangestart", function( event, ui ) { equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); - state( ac, 0, 0, 0 ); + accordion_state( element, 0, 0, 0 ); }); - ac.accordion( "option", "active", 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", 0 ); + accordion_state( element, 1, 0, 0 ); - ac.one( "accordionchangestart", function( event, ui ) { + element.one( "accordionchangestart", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -257,34 +257,34 @@ test( "changestart", function() { strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); }); headers.eq( 1 ).click(); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); - ac.one( "accordionchangestart", function( event, ui ) { + element.one( "accordionchangestart", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); }); - ac.accordion( "option", "active", false ); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", false ); + accordion_state( element, 0, 0, 0 ); }); test( "change", function() { expect( 20 ); - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionchange", function( event, ui ) { + element.one( "accordionchange", function( event, ui ) { equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); @@ -292,9 +292,9 @@ test( "change", function() { equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); - ac.accordion( "option", "active", 0 ); + element.accordion( "option", "active", 0 ); - ac.one( "accordionchange", function( event, ui ) { + element.one( "accordionchange", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -306,7 +306,7 @@ test( "change", function() { }); headers.eq( 1 ).click(); - ac.one( "accordionchange", function( event, ui ) { + element.one( "accordionchange", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); @@ -314,7 +314,7 @@ test( "change", function() { equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); }); - ac.accordion( "option", "active", false ); + element.accordion( "option", "active", false ); }); })(jQuery); diff --git a/tests/unit/accordion/accordion_events.js b/tests/unit/accordion/accordion_events.js index 0b9f14706..2438f28ea 100644 --- a/tests/unit/accordion/accordion_events.js +++ b/tests/unit/accordion/accordion_events.js @@ -3,27 +3,29 @@ module( "accordion: events", accordionSetupTeardown() ); test( "beforeActivate", function() { - expect( 42 ); - var ac = $( "#list1" ).accordion({ + expect( 38 ); + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionbeforeactivate", function( event, ui ) { + 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 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); - state( ac, 0, 0, 0 ); + accordion_state( element, 0, 0, 0 ); }); - ac.accordion( "option", "active", 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", 0 ); + accordion_state( element, 1, 0, 0 ); - ac.one( "accordionbeforeactivate", function( event, ui ) { + element.one( "accordionbeforeactivate", function( event, ui ) { + equals( event.originalEvent.type, "click" ); equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -32,37 +34,26 @@ test( "beforeActivate", function() { strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); }); headers.eq( 1 ).click(); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); - ac.one( "accordionbeforeactivate", function( event, ui ) { + element.one( "accordionbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ) ); equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); }); - ac.accordion( "option", "active", false ); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", false ); + accordion_state( element, 0, 0, 0 ); - ac.one( "accordionbeforeactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); - strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); - strictEqual( ui.newContent[ 0 ], content[ 1 ] ); - event.preventDefault(); - state( ac, 0, 0, 0 ); - }); - ac.accordion( "option", "active", 1 ); - state( ac, 0, 0, 0 ); - - ac.one( "accordionbeforeactivate", function( event, ui ) { + 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 ); @@ -70,22 +61,22 @@ test( "beforeActivate", function() { equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 2 ] ); event.preventDefault(); - state( ac, 0, 0, 0 ); + accordion_state( element, 0, 0, 0 ); }); - headers.eq( 2 ).click(); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", 2 ); + accordion_state( element, 0, 0, 0 ); }); test( "activate", function() { - expect( 20 ); - var ac = $( "#list1" ).accordion({ + expect( 21 ); + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionactivate", function( event, ui ) { + element.one( "accordionactivate", function( event, ui ) { equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); @@ -93,9 +84,9 @@ test( "activate", function() { equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); - ac.accordion( "option", "active", 0 ); + element.accordion( "option", "active", 0 ); - ac.one( "accordionactivate", function( event, ui ) { + element.one( "accordionactivate", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -107,7 +98,7 @@ test( "activate", function() { }); headers.eq( 1 ).click(); - ac.one( "accordionactivate", function( event, ui ) { + element.one( "accordionactivate", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); @@ -115,7 +106,17 @@ test( "activate", function() { equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); }); - ac.accordion( "option", "active", false ); + element.accordion( "option", "active", false ); + + // prevent activation + element.one( "accordionbeforeactivate", function( event ) { + ok( true ); + event.preventDefault(); + }); + element.one( "accordionactivate", function() { + ok( false ); + }); + element.accordion( "option", "active", 1 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index eade690b1..d45bde134 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -9,29 +9,29 @@ test( "destroy", function() { }); test( "enable/disable", function() { - var accordion = $('#list1').accordion(); - state( accordion, 1, 0, 0 ); - accordion.accordion( "disable" ); - accordion.accordion( "option", "active", 1 ); - state( accordion, 1, 0, 0 ); - accordion.accordion( "enable" ); - accordion.accordion( "option", "active", 1 ); - state( accordion, 0, 1, 0 ); + var element = $('#list1').accordion(); + accordion_state( element, 1, 0, 0 ); + element.accordion( "disable" ); + element.accordion( "option", "active", 1 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "enable" ); + element.accordion( "option", "active", 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "refresh", function() { - var expected = $( "#navigation" ) + var element = $( "#navigation" ) .parent() .height( 300 ) .end() .accordion({ heightStyle: "fill" }); - equalHeights( expected, 246, 258 ); + equalHeights( element, 246, 258 ); - expected.parent().height( 500 ); - expected.accordion( "refresh" ); - equalHeights( expected, 446, 458 ); + element.parent().height( 500 ); + element.accordion( "refresh" ); + equalHeights( element, 446, 458 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 3796d80de..7bd6f2e74 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -3,184 +3,184 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { - var ac = $( "#list1" ).accordion(); - equals( ac.accordion( "option", "active" ), 0 ); - state( ac, 1, 0, 0 ); + var element = $( "#list1" ).accordion(); + equals( element.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); }); test( "{ active: false }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - state( ac, 0, 0, 0 ); - equals( ac.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); - equals( ac.accordion( "option", "active" ), false ); + 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 ); - ac.accordion( "option", "collapsible", false ); - state( ac, 1, 0, 0 ); - equals( ac.accordion( "option", "active" ), 0 ); + element.accordion( "option", "collapsible", false ); + accordion_state( element, 1, 0, 0 ); + equals( element.accordion( "option", "active" ), 0 ); - ac.accordion( "destroy" ); - ac.accordion({ + element.accordion( "destroy" ); + element.accordion({ active: false }); - state( ac, 1, 0, 0 ); - strictEqual( ac.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); + strictEqual( element.accordion( "option", "active" ), 0 ); }); test( "{ active: Number }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: 2 }); - equals( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equals( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.accordion( "option", "active", 0 ); - equals( ac.accordion( "option", "active" ), 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", 0 ); + equals( element.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).click(); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.accordion( "option", "active", 10 ); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", 10 ); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); if ( $.uiBackCompat === false ) { test( "{ active: -Number }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: -1 }); - equals( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equals( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.accordion( "option", "active", -2 ); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", -2 ); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.accordion( "option", "active", -10 ); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", -10 ); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.accordion( "option", "active", -3 ); - equals( ac.accordion( "option", "active" ), 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", -3 ); + equals( element.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); }); } // TODO: add animation tests test( "{ collapsible: false }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: 1 }); - ac.accordion( "option", "active", false ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", false ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).click(); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).click(); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "{ collapsible: true }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: 1, collapsible: true }); - ac.accordion( "option", "active", false ); - equal( ac.accordion( "option", "active" ), false ); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", false ); + equal( element.accordion( "option", "active" ), false ); + accordion_state( element, 0, 0, 0 ); - ac.accordion( "option", "active", 1 ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", 1 ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( ac.accordion( "option", "active" ), false ); - state( ac, 0, 0, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).click(); + equals( element.accordion( "option", "active" ), false ); + accordion_state( element, 0, 0, 0 ); }); test( "{ event: null }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ event: null }); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); - ac.accordion( "option", "active", 1 ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", 1 ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); // ensure default click handler isn't bound - ac.find( ".ui-accordion-header" ).eq( 2 ).click(); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 2 ).click(); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "{ event: custom }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ event: "custom1 custom2" }); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); // ensure default click handler isn't bound - ac.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" ); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.accordion( "option", "event", "custom3" ); + element.accordion( "option", "event", "custom3" ); // ensure old event handlers are unbound - ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "{ header: default }", function() { // default: > li > :first-child,> :not(li):even // > :not(li):even - state( $( "#list1" ).accordion(), 1, 0, 0); + accordion_state( $( "#list1" ).accordion(), 1, 0, 0); // > li > :first-child - state( $( "#navigation" ).accordion(), 1, 0, 0); + accordion_state( $( "#navigation" ).accordion(), 1, 0, 0); }); test( "{ header: custom }", function() { - var ac = $( "#navigationWrapper" ).accordion({ + var element = $( "#navigationWrapper" ).accordion({ header: "h2" }); - ac.find( "h2" ).each(function() { + element.find( "h2" ).each(function() { ok( $( this ).hasClass( "ui-accordion-header" ) ); }); - equal( ac.find( ".ui-accordion-header" ).length, 3 ); - state( ac, 1, 0, 0 ); - ac.accordion( "option", "active", 2 ); - state( ac, 0, 0, 1 ); + equal( element.find( ".ui-accordion-header" ).length, 3 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "option", "active", 2 ); + accordion_state( element, 0, 0, 1 ); }); test( "{ heightStyle: 'auto' }", function() { - var ac = $( "#navigation" ).accordion({ heightStyle: "auto" }); - equalHeights( ac, 95, 130 ); + var element = $( "#navigation" ).accordion({ heightStyle: "auto" }); + equalHeights( element, 95, 130 ); }); test( "{ heightStyle: 'content' }", function() { - var ac = $( "#navigation" ).accordion({ heightStyle: "content" }); - var sizes = ac.find( ".ui-accordion-content" ).map(function() { + var element = $( "#navigation" ).accordion({ heightStyle: "content" }); + var sizes = element.find( ".ui-accordion-content" ).map(function() { return $( this ).height(); }).get(); ok( sizes[ 0 ] >= 70 && sizes[ 0 ] <= 105, "was " + sizes[ 0 ] ); @@ -190,8 +190,8 @@ test( "{ heightStyle: 'content' }", function() { test( "{ heightStyle: 'fill' }", function() { $( "#navigationWrapper" ).height( 500 ); - var ac = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( ac, 446, 458 ); + var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + equalHeights( element, 446, 458 ); }); test( "{ heightStyle: 'fill' } with sibling", function() { @@ -203,8 +203,8 @@ test( "{ heightStyle: 'fill' } with sibling", function() { marginBottom: 30 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( ac , 346, 358); + var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + equalHeights( element , 346, 358); }); test( "{ heightStyle: 'fill' } with multiple siblings", function() { @@ -231,36 +231,36 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { marginBottom: 15 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( ac, 296, 308 ); + var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + equalHeights( element, 296, 308 ); }); test( "{ icons: false }", function() { - var list = $( "#list1" ); + var element = $( "#list1" ); function icons( on ) { - same( list.find( "span.ui-icon").length, on ? 3 : 0 ); - same( list.hasClass( "ui-accordion-icons" ), on ); + same( element.find( "span.ui-icon").length, on ? 3 : 0 ); + same( element.hasClass( "ui-accordion-icons" ), on ); } - list.accordion(); + element.accordion(); icons( true ); - list.accordion( "destroy" ).accordion({ + element.accordion( "destroy" ).accordion({ icons: false }); icons( false ); - list.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } ); + element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } ); icons( true ); - list.accordion( "option", "icons", false ); + element.accordion( "option", "icons", false ); icons( false ); }); test( "{ icons: hash }", function() { - var list = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ icons: { activeHeader: "a1", header: "h1" } }); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - list.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } ); - ok( !list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } ); + ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_tickets.js b/tests/unit/accordion/accordion_tickets.js deleted file mode 100644 index b301051da..000000000 --- a/tests/unit/accordion/accordion_tickets.js +++ /dev/null @@ -1,5 +0,0 @@ -(function( $ ) { - -module( "accordion: tickets", accordionSetupTeardown() ); - -}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index bc6388a75..8f1d9db9a 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -23,7 +23,6 @@ <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="autocomplete_tickets.js"></script> <script type="text/javascript" src="../swarminject.js"></script> </head> diff --git a/tests/unit/autocomplete/autocomplete_defaults.js b/tests/unit/autocomplete/autocomplete_defaults.js index e2196ea9e..ac83eaea4 100644 --- a/tests/unit/autocomplete/autocomplete_defaults.js +++ b/tests/unit/autocomplete/autocomplete_defaults.js @@ -1,19 +1,25 @@ -/* - * autocomplete_defaults.js - */ +commonWidgetTests( "autocomplete", { + defaults: { + appendTo: "body", + autoFocus: false, + delay: 300, + disabled: false, + minLength: 1, + position: { + my: "left top", + at: "left bottom", + collision: "none" + }, + source: null, -var autocomplete_defaults = { - appendTo: "body", - autoFocus: true, - delay: 300, - disabled: false, - minLength: 1, - position: { - my: "left top", - at: "left bottom", - collision: "none" - }, - source: null -}; - -commonWidgetTests('autocomplete', { defaults: autocomplete_defaults }); + // callbacks + change: null, + close: null, + create: null, + focus: null, + open: null, + response: null, + search: null, + select: null + } +}); diff --git a/tests/unit/autocomplete/autocomplete_tickets.js b/tests/unit/autocomplete/autocomplete_tickets.js deleted file mode 100644 index bde9faffd..000000000 --- a/tests/unit/autocomplete/autocomplete_tickets.js +++ /dev/null @@ -1,14 +0,0 @@ -/* - * autocomplete_tickets.js - */ -(function($) { - -module("autocomplete: tickets", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - - - -})(jQuery); diff --git a/tests/unit/button/button_defaults.js b/tests/unit/button/button_defaults.js index b81fa7cbb..96c7e5bfa 100644 --- a/tests/unit/button/button_defaults.js +++ b/tests/unit/button/button_defaults.js @@ -1,15 +1,14 @@ -/* - * button_defaults.js - */ +commonWidgetTests( "button", { + defaults: { + disabled: null, + icons: { + primary: null, + secondary: null + }, + label: null, + text: true, -var button_defaults = { - disabled: null, - text: true, - label: null, - icons: { - primary: null, - secondary: null + // callbacks + create: null } -}; - -commonWidgetTests('button', { defaults: button_defaults }); +}); diff --git a/tests/unit/dialog/dialog_defaults.js b/tests/unit/dialog/dialog_defaults.js index 612fd58c8..9f2e4c6a8 100644 --- a/tests/unit/dialog/dialog_defaults.js +++ b/tests/unit/dialog/dialog_defaults.js @@ -1,35 +1,34 @@ -/* - * dialog_defaults.js - */ +commonWidgetTests( "dialog", { + defaults: { + autoOpen: true, + buttons: {}, + closeOnEscape: true, + closeText: 'close', + disabled: false, + dialogClass: '', + draggable: true, + height: 'auto', + hide: null, + maxHeight: false, + maxWidth: false, + minHeight: 150, + minWidth: 150, + modal: false, + position: { + my: 'center', + at: 'center', + of: window, + collision: 'fit', + using: $.ui.dialog.prototype.options.position.using + }, + resizable: true, + show: null, + stack: true, + title: '', + width: 300, + zIndex: 1000, -var dialog_defaults = { - autoOpen: true, - buttons: {}, - closeOnEscape: true, - closeText: 'close', - disabled: false, - dialogClass: '', - draggable: true, - height: 'auto', - hide: null, - maxHeight: false, - maxWidth: false, - minHeight: 150, - minWidth: 150, - modal: false, - position: { - my: 'center', - at: 'center', - of: window, - collision: 'fit', - using: $.ui.dialog.prototype.options.position.using - }, - resizable: true, - show: null, - stack: true, - title: '', - width: 300, - zIndex: 1000 -}; - -commonWidgetTests('dialog', { defaults: dialog_defaults }); + // callbacks + create: null + } +}); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index fb8dea775..5705da079 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -180,7 +180,7 @@ test("height", function() { expect(3); el = $('<div></div>').dialog(); - equals(dlg().height(), dialog_defaults.minHeight, "default height"); + equals(dlg().height(), 150, "default height"); el.remove(); el = $('<div></div>').dialog({ height: 237 }); @@ -431,7 +431,7 @@ test("width", function() { expect(3); el = $('<div></div>').dialog(); - equals(dlg().width(), dialog_defaults.width, "default width"); + equals(dlg().width(), 300, "default width"); el.remove(); el = $('<div></div>').dialog({width: 437 }); diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index 7ddf53e48..ca5e77e78 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -20,7 +20,6 @@ <script type="text/javascript" src="draggable_events.js"></script> <script type="text/javascript" src="draggable_methods.js"></script> <script type="text/javascript" src="draggable_options.js"></script> - <script type="text/javascript" src="draggable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/draggable/draggable_tickets.js b/tests/unit/draggable/draggable_tickets.js deleted file mode 100644 index 709e55104..000000000 --- a/tests/unit/draggable/draggable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * draggable_tickets.js - */ -(function($) { - -module("draggable: tickets"); - -})(jQuery); diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html index 1655bda63..ebe745836 100644 --- a/tests/unit/droppable/droppable.html +++ b/tests/unit/droppable/droppable.html @@ -21,7 +21,6 @@ <script type="text/javascript" src="droppable_events.js"></script> <script type="text/javascript" src="droppable_methods.js"></script> <script type="text/javascript" src="droppable_options.js"></script> - <script type="text/javascript" src="droppable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/droppable/droppable_tickets.js b/tests/unit/droppable/droppable_tickets.js deleted file mode 100644 index 05eeaa2a3..000000000 --- a/tests/unit/droppable/droppable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * droppable_tickets.js - */ -(function($) { - -module("droppable: tickets"); - -})(jQuery); diff --git a/tests/unit/menu/menu_defaults.js b/tests/unit/menu/menu_defaults.js index 58122fea2..dd182ca09 100644 --- a/tests/unit/menu/menu_defaults.js +++ b/tests/unit/menu/menu_defaults.js @@ -1,13 +1,12 @@ -/* - * menu_defaults.js - */ +commonWidgetTests( "menu", { + defaults: { + disabled: false, + position: { + my: "left top", + at: "right top" + }, -var menu_defaults = { - disabled: false, - position: { - my: "left top", - at: "right top" + // callbacks + create: null } -}; - -commonWidgetTests('menu', { defaults: menu_defaults }); +}); diff --git a/tests/unit/position/positio.html b/tests/unit/position/position_deprecated.html index 156235d7b..156235d7b 100644 --- a/tests/unit/position/positio.html +++ b/tests/unit/position/position_deprecated.html diff --git a/tests/unit/progressbar/progressbar.html b/tests/unit/progressbar/progressbar.html index 02066b37e..8048203f8 100644 --- a/tests/unit/progressbar/progressbar.html +++ b/tests/unit/progressbar/progressbar.html @@ -21,7 +21,6 @@ <script type="text/javascript" src="progressbar_events.js"></script> <script type="text/javascript" src="progressbar_methods.js"></script> <script type="text/javascript" src="progressbar_options.js"></script> - <script type="text/javascript" src="progressbar_tickets.js"></script> <script type="text/javascript" src="../swarminject.js"></script> </head> diff --git a/tests/unit/progressbar/progressbar_defaults.js b/tests/unit/progressbar/progressbar_defaults.js index 925510871..3856e31a0 100644 --- a/tests/unit/progressbar/progressbar_defaults.js +++ b/tests/unit/progressbar/progressbar_defaults.js @@ -1,11 +1,10 @@ -/* - * progressbar_defaults.js - */ +commonWidgetTests( "progressbar", { + defaults: { + disabled: false, + value: 0, + max: 100, -var progressbar_defaults = { - disabled: false, - value: 0, - max: 100 -}; - -commonWidgetTests('progressbar', { defaults: progressbar_defaults }); + //callbacks + create: null + } +}); diff --git a/tests/unit/progressbar/progressbar_options.js b/tests/unit/progressbar/progressbar_options.js index 70ad7abab..230c939ab 100644 --- a/tests/unit/progressbar/progressbar_options.js +++ b/tests/unit/progressbar/progressbar_options.js @@ -10,6 +10,23 @@ test("{ value : 0 }, default", function() { same( 0, $("#progressbar").progressbar("value") ); }); +// Ticket #7231 - valueDiv should be hidden when value is at 0% +test( "value: visibility of valueDiv", function() { + expect( 5 ); + var element = $( "#progressbar" ).progressbar({ + value: 0 + }); + ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value is initialized at 0" ); + element.progressbar( "value", 1 ); + ok( element.children( ".ui-progressbar-value" ).is( ":visible" ), "valueDiv visible when value is set to 1" ); + element.progressbar( "value", 100 ); + ok( element.children( ".ui-progressbar-value" ).is( ":visible" ), "valueDiv visible when value is set to 100" ); + element.progressbar( "value", 0 ); + ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value is set to 0" ); + element.progressbar( "value", -1 ); + ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value set to -1 (normalizes to 0)" ); +}); + test("{ value : 5 }", function() { $("#progressbar").progressbar({ value: 5 diff --git a/tests/unit/progressbar/progressbar_tickets.js b/tests/unit/progressbar/progressbar_tickets.js deleted file mode 100644 index debd62614..000000000 --- a/tests/unit/progressbar/progressbar_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * progressbar_tickets.js - */ -(function($) { - -module("progressbar: tickets"); - -})(jQuery); diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 926201ce3..cb88c6751 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -22,7 +22,6 @@ <script type="text/javascript" src="resizable_events.js"></script> <script type="text/javascript" src="resizable_methods.js"></script> <script type="text/javascript" src="resizable_options.js"></script> - <script type="text/javascript" src="resizable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/resizable/resizable_tickets.js b/tests/unit/resizable/resizable_tickets.js deleted file mode 100644 index 55486655c..000000000 --- a/tests/unit/resizable/resizable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * resizable_tickets.js - */ -(function($) { - -module("resizable: tickets"); - -})(jQuery); diff --git a/tests/unit/selectable/selectable.html b/tests/unit/selectable/selectable.html index 7b739316d..85e843cda 100644 --- a/tests/unit/selectable/selectable.html +++ b/tests/unit/selectable/selectable.html @@ -20,7 +20,6 @@ <script type="text/javascript" src="selectable_events.js"></script> <script type="text/javascript" src="selectable_methods.js"></script> <script type="text/javascript" src="selectable_options.js"></script> - <script type="text/javascript" src="selectable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/selectable/selectable_tickets.js b/tests/unit/selectable/selectable_tickets.js deleted file mode 100644 index da1da46de..000000000 --- a/tests/unit/selectable/selectable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * selectable_tickets.js - */ -(function($) { - -module("selectable: tickets"); - -})(jQuery); diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html index 04234903e..6dc84660b 100644 --- a/tests/unit/slider/slider.html +++ b/tests/unit/slider/slider.html @@ -22,7 +22,6 @@ <script type="text/javascript" src="slider_events.js"></script> <script type="text/javascript" src="slider_methods.js"></script> <script type="text/javascript" src="slider_options.js"></script> - <script type="text/javascript" src="slider_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/slider/slider_defaults.js b/tests/unit/slider/slider_defaults.js index 76e5da8ea..03f2a4f8e 100644 --- a/tests/unit/slider/slider_defaults.js +++ b/tests/unit/slider/slider_defaults.js @@ -1,20 +1,19 @@ -/* - * slider_defaults.js - */ +commonWidgetTests( "slider", { + defaults: { + animate: false, + cancel: function() {}, + delay: 0, + disabled: false, + distance: 0, + max: 100, + min: 0, + orientation: 'horizontal', + range: false, + step: 1, + value: 0, + values: null, -var slider_defaults = { - animate: false, - cancel: function() {}, - delay: 0, - disabled: false, - distance: 0, - max: 100, - min: 0, - orientation: 'horizontal', - range: false, - step: 1, - value: 0, - values: null -}; - -commonWidgetTests('slider', { defaults: slider_defaults }); + // callbacks + create: null + } +}); diff --git a/tests/unit/slider/slider_methods.js b/tests/unit/slider/slider_methods.js index 77ae65148..4b2b0311d 100644 --- a/tests/unit/slider/slider_methods.js +++ b/tests/unit/slider/slider_methods.js @@ -74,7 +74,7 @@ test("value", function() { value: 5 }); equals(el.slider('value'), 5, 'range: ' + this + ' slider method get'); - el.slider('value', 10); + equals(el.slider('value', 10), el, 'value method is chainable'); equals(el.slider('value'), 10, 'range: ' + this + ' slider method set'); el.remove(); }); @@ -85,13 +85,13 @@ test("value", function() { el.slider('option', 'value', -2); equals(el.slider('option', 'value'), -2, 'value option does not respect min'); equals(el.slider('value'), -1, 'value method get respects min'); - el.slider('value', -2); + equals(el.slider('value', -2), el, 'value method is chainable'); equals(el.slider('option', 'value'), -1, 'value method set respects min'); // max with value option vs value method el.slider('option', 'value', 2); equals(el.slider('option', 'value'), 2, 'value option does not respect max'); equals(el.slider('value'), 1, 'value method get respects max'); - el.slider('value', 2); + equals(el.slider('value', 2), el, 'value method is chainable'); equals(el.slider('option', 'value'), 1, 'value method set respects max'); }); diff --git a/tests/unit/slider/slider_tickets.js b/tests/unit/slider/slider_tickets.js deleted file mode 100644 index 7397c60ba..000000000 --- a/tests/unit/slider/slider_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * slider_tickets.js - */ -(function($) { - -module("slider: tickets"); - -})(jQuery); diff --git a/tests/unit/spinner/spinner_defaults.js b/tests/unit/spinner/spinner_defaults.js index 0389ab169..f6081b1f3 100644 --- a/tests/unit/spinner/spinner_defaults.js +++ b/tests/unit/spinner/spinner_defaults.js @@ -1,16 +1,15 @@ -/*
- * spinner_defaults.js
- */
+commonWidgetTests( "spinner", {
+ defaults: {
+ disabled: false,
+ incremental: true,
+ max: null,
+ min: null,
+ numberformat: null,
+ page: 10,
+ step: null,
+ value: null,
-var spinner_defaults = {
- disabled: false,
- incremental: true,
- max: null,
- min: null,
- numberformat: null,
- page: 10,
- step: null,
- value: null
-};
-
-commonWidgetTests('spinner', { defaults: spinner_defaults });
+ // callbacks
+ create: null
+ }
+});
diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index 74855ca9a..565a0b427 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -1,30 +1,88 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs Test Suite</title> - <link type="text/css" href="../../../themes/base/jquery.ui.tabs.css" rel="stylesheet" /> - - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.cookie.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.tabs.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="tabs_core.js"></script> - <script type="text/javascript" src="tabs_defaults.js"></script> - <script type="text/javascript" src="tabs_events.js"></script> - <script type="text/javascript" src="tabs_methods.js"></script> - <script type="text/javascript" src="tabs_options.js"></script> - <script type="text/javascript" src="tabs_tickets.js"></script> - - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.tabs.css"> + + <script src="../../../jquery-1.5.1.js"></script> + <script> + $.uiBackCompat = false; + </script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.tabs.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="tabs_defaults.js"></script> + <script src="tabs_core.js"></script> + <script src="tabs_events.js"></script> + <script src="tabs_methods.js"></script> + <script src="tabs_options.js"></script> + <script src="tabs_tickets.js"></script> + + <script> + function tabs_state( tabs ) { + var expected = $.makeArray( arguments ).slice( 1 ); + var actual = tabs.find( ".ui-tabs-nav li" ).map(function() { + var tab = $( this ), + panel = $( $.ui.tabs.prototype._sanitizeSelector( + "#" + tab.find( "a" ).attr( "aria-controls" ) ) ), + tabIsActive = tab.hasClass( "ui-state-active" ), + panelIsActive = panel.css( "display" ) !== "none"; + + if ( tabIsActive && panelIsActive ) { + return 1; + } + if ( !tabIsActive && !panelIsActive ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( actual, expected ); + } + + function tabs_disabled( tabs, state ) { + var expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) { + if ( typeof state === "boolean" ) { + return state ? 1 : 0; + } else { + return $.inArray( index, state ) !== -1 ? 1 : 0; + } + }); + + var internalState = tabs.tabs( "option", "disabled" ); + if ( internalState === false ) { + internalState = []; + } + if ( internalState === true ) { + internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) { + return index; + }); + } + + var actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) { + var tab = $( this ), + tabIsDisabled = tab.hasClass( "ui-state-disabled" ); + + if ( tabIsDisabled && $.inArray( index, internalState ) !== -1 ) { + return 1; + } + if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( tabs.tabs( "option", "disabled" ), state ); + same( actual, expected ); + } + </script> + <script> // disable this stale testsuite for testswarm only var url = window.location.search; url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); @@ -34,7 +92,7 @@ test("tabs", function() { ok(true, "disabled tabs testsuite"); }); } </script> - <script type="text/javascript" src="../swarminject.js"></script> + <script src="../swarminject.js"></script> </head> <body> @@ -42,80 +100,87 @@ <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="tabs1"> - <ul> - <li><a href="#fragment-1"><span>1</span></a></li> - <li><a href="#fragment-2"><span>2</span></a></li> - <li><a href="#fragment-3"><span>3</span></a></li> - </ul> - <div id="fragment-1"></div> - <div id="fragment-2"></div> - <div id="fragment-3"></div> - </div> - <div id="tabs2"> - <ul> - <li><a href="#colon:test"><span>1</span></a></li> - <li><a href="#inline-style"><span>2</span></a></li> - <li><a href="data/test.html#test"><span>3</span></a></li> - <li><a href="data/test.html" title="∫ßáö Սե"><span>4</span></a></li> - </ul> - <div id="colon:test"></div> - <div style="height: 300px;" id="inline-style"></div> - </div> - <div id="tabs3"> - <div> - <ul id="tabs3-list"> - <li><a href="#tabs3-1">1</a></li> - </ul> - </div> - </div> - <div id="tabs4"> - <ul id="tabs4-list"> - <li><a href="#tabs4-1">1</a></li> - </ul> - <ol> - <li><a href="#tabs4-1">1</a></li> - </ol> - </div> - <div id="tabs4a"> - <ol id="tabs4a-list"> - <li><a href="#tabs4a-1">1</a></li> - </ol> +<div id="tabs1"> + <ul> + <li><a href="#fragment-1"><span>1</span></a></li> + <li><a href="#fragment-2"><span>2</span></a></li> + <li><a href="#fragment-3"><span>3</span></a></li> + </ul> + <div id="fragment-1"></div> + <div id="fragment-2"></div> + <div id="fragment-3"></div> +</div> + +<div id="tabs2"> + <ul> + <li><a href="#colon:test"><span>1</span></a></li> + <li><a href="#inline-style"><span>2</span></a></li> + <li><a href="data/test.html#test"><span>3</span></a></li> + <li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li> + <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li> + </ul> + <div id="colon:test"></div> + <div style="height: 300px;" id="inline-style"></div> +</div> + +<div id="tabs3"> + <div> + <ul id="tabs3-list"> + <li><a href="#tabs3-1">1</a></li> + </ul> + </div> +</div> + +<div id="tabs4"> + <ul id="tabs4-list"> + <li><a href="#tabs4-1">1</a></li> + </ul> + <ol> + <li><a href="#tabs4-1">1</a></li> + </ol> +</div> + +<div id="tabs4a"> + <ol id="tabs4a-list"> + <li><a href="#tabs4a-1">1</a></li> + </ol> + <ul> + <li><a href="#tabs4a-1">1</a></li> + </ul> +</div> + +<div id="tabs5"> + <div> + <ul id="tabs5-list"></ul> + </div> +</div> + +<div id="tabs6"> + <ul id="tabs6-list"> + <li><a href="#tabs6-1">1</a> <ul> - <li><a href="#tabs4a-1">1</a></li> - </ul> - </div> - <div id="tabs5"> - <div> - <ul id="tabs5-list"></ul> - </div> - </div> - <div id="tabs6"> - <ul id="tabs6-list"> - <li><a href="#tabs6-1">1</a> - <ul> - <li><a href="#item6-3">3</a></li> - <li><a href="#item6-4">4</a></li> - </ul> - </li> - <li><a href="#tabs6-2">2</a></li> + <li><a href="#item6-3">3</a></li> + <li><a href="#item6-4">4</a></li> </ul> - <div id="tabs6-1"></div> - <div id="tabs6-2"></div> - </div> - <div id="tabs7"> - <ul id="tabs7-list"> - <li><a href="#tabs7-1">1</a></li> - <li><a href="#tabs7-2">2</a></li> - </ul> - <div id="tabs7-2"></div> - <div id="tabs7-1"></div> - </div> - </div> + </li> + <li><a href="#tabs6-2">2</a></li> + </ul> + <div id="tabs6-1"></div> + <div id="tabs6-2"></div> +</div> + +<div id="tabs7"> + <ul id="tabs7-list"> + <li><a href="#tabs7-1">1</a></li> + <li><a href="#tabs7-2">2</a></li> + </ul> + <div id="tabs7-2"></div> + <div id="tabs7-1"></div> +</div> + +</div> </body> </html> diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index 652788bba..c9b16e3a8 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -1,58 +1,66 @@ -/* - * tabs_core.js - */ -var el; +(function( $ ) { -(function($) { +module( "tabs: core" ); -module("tabs: core"); +test( "markup structure", function() { + expect( 3 ); + var element = $( "#tabs1" ).tabs(); + ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" ); + ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" ); + equal( element.find( ".ui-tabs-panel" ).length, 3, + ".ui-tabs-panel elements exist, correct number" ); +}); + +$.each({ + "deep ul": "#tabs3", + "multiple lists, ul first": "#tabs4", + "multiple lists, ol first": "#tabs5", + "empty list": "#tabs6" +}, function( type, selector ) { + test( "markup structure: " + type, function() { + expect( 2 ); + var element = $( selector ).tabs(); + ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" ); + ok( $( selector + "-list" ).hasClass( "ui-tabs-nav" ), + "list item is .ui-tabs-nav" ); + }); +}); -test('navigation markup', function() { - el = $('#tabs3').tabs(); - ok($('#tabs3-list').hasClass('ui-tabs-nav'), 'custom markup; allow list to be any descendant'); - el.tabs('destroy'); +// #5893 - Sublist in the tab list are considered as tab +test( "nested list", function() { + expect( 1 ); - el = $('#tabs4').tabs(); - ok($('#tabs4-list').hasClass('ui-tabs-nav'), 'first list found becomes nav - ul'); - el.tabs('destroy'); + var element = $( "#tabs6" ).tabs(); + equals( element.data( "tabs" ).anchors.length, 2, "should contain 2 tab" ); +}); - el = $('#tabs4a').tabs(); - ok($('#tabs4a-list').hasClass('ui-tabs-nav'), 'first list found becomes nav - ol'); - el.tabs('destroy'); +test( "disconnected from DOM", function() { + expect( 2 ); - el = $('#tabs5').tabs(); - ok($('#tabs5-list').hasClass('ui-tabs-nav'), 'empty list can be used'); - el.tabs('destroy'); + var element = $( "#tabs1" ).remove().tabs(); + equals( element.find( ".ui-tabs-nav" ).length, 1, "should initialize nav" ); + equals( element.find( ".ui-tabs-panel" ).length, 3, "should initialize panels" ); }); -test('ajax', function() { - expect(4); - stop(); - - el = $('#tabs2'); - - el.tabs({ - selected: 2, - load: function() { - // spinner: default spinner - setTimeout(function() { - equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); - equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); - el.tabs('destroy'); - el.tabs({ - selected: 2, - spinner: '<img src="spinner.gif" alt="">', - load: function() { - // spinner: image - equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); - equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); - start(); - } - }); - }, 1); - } +test( "aria-controls", function() { + expect( 7 ); + var element = $( "#tabs1" ).tabs(), + tabs = element.find( ".ui-tabs-nav a" ); + tabs.each(function() { + var tab = $( this ); + equal( tab.attr( "href" ).substring( 1 ), tab.attr( "aria-controls" ) ); }); - + + element = $( "#tabs2" ).tabs(); + tabs = element.find( ".ui-tabs-nav a" ); + equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" ); + equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" ); + ok( /^ui-tabs-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" ); + equal( tabs.eq( 3 ).attr( "aria-controls" ), "custom-id" ); +}); + +test( "accessibility", function() { + // TODO: add tests }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_defaults.js b/tests/unit/tabs/tabs_defaults.js index ef93c69ee..52b6f8a71 100644 --- a/tests/unit/tabs/tabs_defaults.js +++ b/tests/unit/tabs/tabs_defaults.js @@ -1,27 +1,16 @@ -/* - * tabs_defaults.js - */ +commonWidgetTests( "tabs", { + defaults: { + active: null, + collapsible: false, + disabled: false, + event: "click", + fx: null, -var tabs_defaults = { - add: null, - ajaxOptions: null, - cache: false, - collapsible: false, - cookie: null, - disable: null, - disabled: false, - enable: null, - event: "click", - fx: null, - idPrefix: "ui-tabs-", - load: null, - panelTemplate: "<div></div>", - remove: null, - select: null, - show: null, - spinner: "<em>Loading…</em>", - tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>" -}; - -// FAIL: falsy values break the cookie option -commonWidgetTests( "tabs", { defaults: tabs_defaults } ); + // callbacks + activate: null, + beforeActivate: null, + beforeLoad: null, + create: null, + load: null + } +}); diff --git a/tests/unit/tabs/tabs_defaults_deprecated.js b/tests/unit/tabs/tabs_defaults_deprecated.js new file mode 100644 index 000000000..1a56297e9 --- /dev/null +++ b/tests/unit/tabs/tabs_defaults_deprecated.js @@ -0,0 +1,29 @@ +commonWidgetTests( "tabs", { + defaults: { + active: null, + ajaxOptions: null, + cache: false, + collapsible: false, + cookie: null, + disabled: false, + event: "click", + fx: null, + idPrefix: "ui-tabs-", + panelTemplate: "<div></div>", + spinner: "<em>Loading…</em>", + tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>", + + // callbacks + activate: null, + add: null, + beforeActivate: null, + beforeLoad: null, + create: null, + disable: null, + enable: null, + load: null, + remove: null, + select: null, + show: null + } +}); diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html new file mode 100644 index 000000000..e71fea3d4 --- /dev/null +++ b/tests/unit/tabs/tabs_deprecated.html @@ -0,0 +1,185 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Tabs Test Suite</title> + + <link rel="stylesheet" href="../../../themes/base/jquery.ui.tabs.css"> + + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../external/jquery.cookie.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.tabs.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="tabs_defaults_deprecated.js"></script> + <script src="tabs_core.js"></script> + <script src="tabs_events.js"></script> + <script src="tabs_methods.js"></script> + <script src="tabs_options.js"></script> + <script src="tabs_tickets.js"></script> + <script src="tabs_deprecated.js"></script> + + <script> + function tabs_state( tabs ) { + var expected = $.makeArray( arguments ).slice( 1 ); + var actual = tabs.find( ".ui-tabs-nav li" ).map(function() { + var tab = $( this ), + panel = $( $.ui.tabs.prototype._sanitizeSelector( + "#" + tab.find( "a" ).attr( "aria-controls" ) ) ), + tabIsActive = tab.hasClass( "ui-state-active" ), + panelIsActive = panel.css( "display" ) !== "none"; + + if ( tabIsActive && panelIsActive ) { + return 1; + } + if ( !tabIsActive && !panelIsActive ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( actual, expected ); + } + + function tabs_disabled( tabs, state ) { + var expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) { + if ( typeof state === "boolean" ) { + return state ? 1 : 0; + } else { + return $.inArray( index, state ) !== -1 ? 1 : 0; + } + }); + + var internalState = tabs.tabs( "option", "disabled" ); + if ( internalState === false ) { + internalState = []; + } + if ( internalState === true ) { + internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) { + return index; + }); + } + + var actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) { + var tab = $( this ), + tabIsDisabled = tab.hasClass( "ui-state-disabled" ); + + if ( tabIsDisabled && $.inArray( index, internalState ) !== -1 ) { + return 1; + } + if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( tabs.tabs( "option", "disabled" ), state ); + same( actual, expected ); + } + </script> + <script> + // disable this stale testsuite for testswarm only + var url = window.location.search; + url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); + if ( url && url.indexOf("http") == 0 ) { + // reset config to kill previous tests; make sure testsuite.js is loaded afterwards to init the testswarm script + QUnit.init(); + test("tabs", function() { ok(true, "disabled tabs testsuite"); }); + } + </script> + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Tabs Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +<div id="tabs1"> + <ul> + <li><a href="#fragment-1"><span>1</span></a></li> + <li><a href="#fragment-2"><span>2</span></a></li> + <li><a href="#fragment-3"><span>3</span></a></li> + </ul> + <div id="fragment-1"></div> + <div id="fragment-2"></div> + <div id="fragment-3"></div> +</div> + +<div id="tabs2"> + <ul> + <li><a href="#colon:test"><span>1</span></a></li> + <li><a href="#inline-style"><span>2</span></a></li> + <li><a href="data/test.html#test"><span>3</span></a></li> + <li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li> + <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li> + </ul> + <div id="colon:test"></div> + <div style="height: 300px;" id="inline-style"></div> +</div> + +<div id="tabs3"> + <div> + <ul id="tabs3-list"> + <li><a href="#tabs3-1">1</a></li> + </ul> + </div> +</div> + +<div id="tabs4"> + <ul id="tabs4-list"> + <li><a href="#tabs4-1">1</a></li> + </ul> + <ol> + <li><a href="#tabs4-1">1</a></li> + </ol> +</div> + +<div id="tabs4a"> + <ol id="tabs4a-list"> + <li><a href="#tabs4a-1">1</a></li> + </ol> + <ul> + <li><a href="#tabs4a-1">1</a></li> + </ul> +</div> + +<div id="tabs5"> + <div> + <ul id="tabs5-list"></ul> + </div> +</div> + +<div id="tabs6"> + <ul id="tabs6-list"> + <li><a href="#tabs6-1">1</a> + <ul> + <li><a href="#item6-3">3</a></li> + <li><a href="#item6-4">4</a></li> + </ul> + </li> + <li><a href="#tabs6-2">2</a></li> + </ul> + <div id="tabs6-1"></div> + <div id="tabs6-2"></div> +</div> + +<div id="tabs7"> + <ul id="tabs7-list"> + <li><a href="#tabs7-1">1</a></li> + <li><a href="#tabs7-2">2</a></li> + </ul> + <div id="tabs7-2"></div> + <div id="tabs7-1"></div> +</div> + +</div> +</body> +</html> diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js new file mode 100644 index 000000000..25877e69c --- /dev/null +++ b/tests/unit/tabs/tabs_deprecated.js @@ -0,0 +1,386 @@ +(function( $ ) { + +module("tabs (deprecated): core"); + +test( "panel ids", function() { + expect( 2 ); + + var element = $( "#tabs2" ).tabs(); + + element.one( "tabsbeforeload", function( event, ui ) { + equal( ui.panel.attr( "id" ), "∫ßáö_Սե", "from title attribute" ); + event.preventDefault(); + }); + element.tabs( "option", "active", 4 ); + + element.one( "tabsbeforeload", function( event, ui ) { + ok( /^ui-tabs-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" ); + event.preventDefault(); + }); + element.tabs( "option", "active", 2 ); +}); + +module("tabs (deprecated): options"); + +test('ajaxOptions', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('cache', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('idPrefix', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('tabTemplate', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('panelTemplate', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('cookie', function() { + expect(6); + + el = $('#tabs1'); + var cookieName = 'tabs_test', cookieObj = { name: cookieName }; + $.cookie(cookieName, null); // blank state + var cookie = function() { + return parseInt($.cookie(cookieName), 10); + }; + + el.tabs({ cookie: cookieObj }); + equals(cookie(), 0, 'initial cookie value'); + + el.tabs('destroy'); + el.tabs({ active: 1, cookie: cookieObj }); + equals(cookie(), 1, 'initial cookie value, from active property'); + + el.tabs('option', 'active', 2); + equals(cookie(), 2, 'cookie value updated after activating'); + + el.tabs('destroy'); + $.cookie(cookieName, 1); + el.tabs({ cookie: cookieObj }); + equals(cookie(), 1, 'initial cookie value, from existing cookie'); + + el.tabs('destroy'); + el.tabs({ cookie: cookieObj, collapsible: true }); + el.tabs('option', 'active', false); + equals(cookie(), -1, 'cookie value for all tabs unselected'); + + el.tabs('destroy'); + ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + +}); + + +test('spinner', function() { + expect(4); + stop(); + + el = $('#tabs2'); + + el.tabs({ + selected: 2, + load: function() { + // spinner: default spinner + setTimeout(function() { + equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); + equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); + el.tabs('destroy'); + el.tabs({ + selected: 2, + spinner: '<img src="spinner.gif" alt="">', + load: function() { + // spinner: image + equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); + equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); + start(); + } + }); + }, 1); + } + }); +}); + +test('selected', function() { + expect(10); + + el = $('#tabs1').tabs(); + equals(el.tabs('option', 'selected'), 0, 'should be 0 by default'); + + el.tabs('destroy'); + //set a hash in the url + location.hash = '#fragment-2'; + //selection of tab with divs ordered differently than list + el = $('#tabs1').tabs(); + equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + + el.tabs('destroy'); + //set a hash in the url + location.hash = '#tabs7-2'; + //selection of tab with divs ordered differently than list + el = $('#tabs7').tabs(); + equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + + el.tabs('destroy'); + el = $('#tabs1').tabs({ selected: -1 }); + equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected'); + equals( $('li.ui-tabs-active', el).length, 0, 'no tab should be selected' ); + equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' ); + + el.tabs('destroy'); + el.tabs({ selected: 1 }); + equals(el.tabs('option', 'selected'), 1, 'should be specified tab'); + + el.tabs('destroy'); + el.tabs({ selected: 99 }); + equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index'); + + el.tabs('destroy'); + el.tabs({ collapsible: true }); + el.tabs('option', 'selected', 0); + equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected'); + + el.tabs('destroy'); + el = $('#tabs1').tabs(); + el.tabs('select', 1); + equals(el.tabs('option', 'selected'), 1, 'should select tab'); +}); + +module("tabs (deprecated): events"); + +test('enable', function() { + expect(4); + + var uiObj; + el = $('#tabs1').tabs({ + disabled: [ 0, 1 ], + enable: function (event, ui) { + uiObj = ui; + } + }); + el.tabs('enable', 1); + ok(uiObj !== undefined, 'trigger callback'); + equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); + equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); + equals(uiObj.index, 1, 'contain index'); +}); + +test('disable', function() { + expect(4); + + var uiObj; + el = $('#tabs1').tabs({ + disable: function (event, ui) { + uiObj = ui; + } + }); + el.tabs('disable', 1); + ok(uiObj !== undefined, 'trigger callback'); + equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); + equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); + equals(uiObj.index, 1, 'contain index'); +}); + +test('show', function() { + expect(5); + + var uiObj, eventObj; + el = $('#tabs1').tabs({ + show: function(event, ui) { + uiObj = ui; + eventObj = event; + } + }); + ok(uiObj !== undefined, 'trigger callback after initialization'); + equals(uiObj.tab, $('a', el)[0], 'contain tab as DOM anchor element'); + equals(uiObj.panel, $('div', el)[0], 'contain panel as DOM div element'); + equals(uiObj.index, 0, 'contain index'); + + el.find( "li:eq(1) a" ).simulate( "click" ); + equals( eventObj.originalEvent.type, "click", "show triggered by click" ); + +}); + +test('select', function() { + expect(7); + + var eventObj; + el = $('#tabs1').tabs({ + select: function(event, ui) { + ok(true, 'select triggered after initialization'); + equals(this, el[0], "context of callback"); + equals(event.type, 'tabsselect', 'event type in callback'); + equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element'); + equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element'); + equals(ui.index, 1, 'contain index'); + evenObj = event; + } + }); + el.tabs('select', 1); + + el.find( "li:eq(1) a" ).simulate( "click" ); + equals( evenObj.originalEvent.type, "click", "select triggered by click" ); +}); + +module( "tabs (deprecated): methods" ); + +test( "add", function() { + expect( 27 ); + + var element = $( "#tabs1" ).tabs(); + tabs_state( element, 1, 0, 0 ); + + // add without index + element.one( "tabsadd", function( event, ui ) { + equal( ui.index, 3, "ui.index" ); + equal( $( ui.tab ).text(), "New", "ui.tab" ); + equal( ui.panel.id, "new", "ui.panel" ); + }); + element.tabs( "add", "#new", "New" ); + tabs_state( element, 1, 0, 0, 0 ); + var tab = element.find( ".ui-tabs-nav li" ).last(), + anchor = tab.find( "a" ); + equals( tab.text(), "New", "label" ); + equals( anchor.attr( "href" ), "#new", "href" ); + equals( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + ok( !tab.hasClass( "ui-state-hover" ), "not hovered" ); + anchor.simulate( "mouseover" ); + ok( tab.hasClass( "ui-state-hover" ), "hovered" ); + anchor.simulate( "click" ); + tabs_state( element, 0, 0, 0, 1 ); + + // add remote tab with index + element.one( "tabsadd", function( event, ui ) { + equal( ui.index, 1, "ui.index" ); + equal( $( ui.tab ).text(), "New Remote", "ui.tab" ); + equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" ); + }); + element.tabs( "add", "data/test.html", "New Remote", 1 ); + tabs_state( element, 0, 0, 0, 0, 1 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 1 ); + anchor = tab.find( "a" ); + equals( tab.text(), "New Remote", "label" ); + equals( anchor.attr( "href" ), "data/test.html", "href" ); + ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" ); + ok( !tab.hasClass( "ui-state-hover" ), "not hovered" ); + anchor.simulate( "mouseover" ); + ok( tab.hasClass( "ui-state-hover" ), "hovered" ); + anchor.simulate( "click" ); + tabs_state( element, 0, 1, 0, 0, 0 ); + + // add to empty tab set + element = $( "<div><ul></ul></div>" ).tabs(); + equals( element.tabs( "option", "active" ), false, "active: false on init" ); + element.one( "tabsadd", function( event, ui ) { + equal( ui.index, 0, "ui.index" ); + equal( $( ui.tab ).text(), "First", "ui.tab" ); + equal( ui.panel.id, "first", "ui.panel" ); + }); + element.tabs( "add", "#first", "First" ); + tabs_state( element, 1 ); + equals( element.tabs( "option", "active" ), 0, "active: 0 after add" ); +}); + +test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() { + expect( 2 ); + + var element = $( "#tabs2" ).tabs(); + equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length ); + element.tabs( "add", "/new", "New" ); + equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length ); +}); + +test( "remove", function() { + expect( 17 ); + + var element = $( "#tabs1" ).tabs({ active: 1 }); + tabs_state( element, 0, 1, 0 ); + + element.one( "tabsremove", function( event, ui ) { + equal( ui.index, -1, "ui.index" ); + equal( $( ui.tab ).text(), "2", "ui.tab" ); + equal( ui.panel.id, "fragment-2", "ui.panel" ); + }); + element.tabs( "remove", 1 ); + tabs_state( element, 0, 1 ); + equals( element.tabs( "option", "active" ), 1 ); + equals( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0, + "remove correct list item" ); + equals( element.find( "#fragment-2" ).length, 0, "remove correct panel" ); + + element.one( "tabsremove", function( event, ui ) { + equal( ui.index, -1, "ui.index" ); + equal( $( ui.tab ).text(), "3", "ui.tab" ); + equal( ui.panel.id, "fragment-3", "ui.panel" ); + }); + element.tabs( "remove", 1 ); + tabs_state( element, 1 ); + equals( element.tabs( "option", "active"), 0 ); + + element.one( "tabsremove", function( event, ui ) { + equal( ui.index, -1, "ui.index" ); + equal( $( ui.tab ).text(), "1", "ui.tab" ); + equal( ui.panel.id, "fragment-1", "ui.panel" ); + }); + element.tabs( "remove", 0 ); + equals( element.tabs( "option", "active" ), false ); +}); + +test('select', function() { + expect(6); + + el = $('#tabs1').tabs(); + + el.tabs('select', 1); + equals(el.tabs('option', 'active'), 1, 'should select tab'); + + el.tabs('destroy'); + el.tabs({ collapsible: true }); + el.tabs('select', 0); + equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab'); + + el.tabs('destroy'); + el.tabs({ collapsible: true }); + el.tabs('select', -1); + equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1'); + + el.tabs('destroy'); + el.tabs(); + el.tabs('select', 0); + equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true'); + el.tabs('select', -1); + equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true'); + + el.tabs('select', '#fragment-2'); + equals(el.tabs('option', 'active'), 1, 'should select tab by id'); +}); + +test( "length", function() { + expect( 2 ); + + equals( $( "#tabs1" ).tabs().tabs( "length" ), 3, "basic tabs" ); + equals( $( "#tabs2" ).tabs().tabs( "length" ), 5, "ajax tabs with missing panels" ); +}); + +test( "url", function() { + expect( 2 ); + + var element = $( "#tabs2" ).tabs(), + tab = element.find( "a" ).eq( 3 ); + + element.tabs( "url", 3, "data/test2.html" ); + equals( tab.attr( "href" ), "data/test2.html", "href was updated" ); + element.one( "tabsbeforeload", function( event, ui ) { + equals( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" ); + event.preventDefault(); + }); + element.tabs( "option", "active", 3 ); +}); + +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index 24fb62f9b..28925a2b9 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -1,105 +1,198 @@ -/* - * tabs_events.js - */ -(function($) { - -module("tabs: events"); - -test('select', function() { - expect(7); - - var eventObj; - el = $('#tabs1').tabs({ - select: function(event, ui) { - ok(true, 'select triggered after initialization'); - equals(this, el[0], "context of callback"); - equals(event.type, 'tabsselect', 'event type in callback'); - equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element'); - equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element'); - equals(ui.index, 1, 'contain index'); - evenObj = event; - } +(function( $ ) { + +module( "tabs: events" ); + +test( "beforeActivate", function() { + expect( 38 ); + + var element = $( "#tabs1" ).tabs({ + active: false, + collapsible: true + }), + tabs = element.find( ".ui-tabs-nav a" ), + panels = element.find( ".ui-tabs-panel" ); + + // from collapsed + element.one( "tabsbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 0, "oldTab size" ); + equals( ui.oldPanel.size(), 0, "oldPanel size" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 0 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" ); + tabs_state( element, 0, 0, 0 ); }); - el.tabs('select', 1); - - el.find( "li:eq(1) a" ).simulate( "click" ); - equals( evenObj.originalEvent.type, "click", "select triggered by click" ); -}); - -test('load', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('show', function() { - expect(5); - - var uiObj, eventObj; - el = $('#tabs1').tabs({ - show: function(event, ui) { - uiObj = ui; - eventObj = event; - } + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0, 0 ); + + // switching tabs + element.one( "tabsbeforeactivate", function( event, ui ) { + equals( event.originalEvent.type, "click", "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 0 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 0 ], "oldPanel" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); + tabs_state( element, 1, 0, 0 ); }); - ok(uiObj !== undefined, 'trigger callback after initialization'); - equals(uiObj.tab, $('a', el)[0], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[0], 'contain panel as DOM div element'); - equals(uiObj.index, 0, 'contain index'); - - el.find( "li:eq(1) a" ).simulate( "click" ); - equals( eventObj.originalEvent.type, "click", "show triggered by click" ); - + tabs.eq( 1 ).click(); + tabs_state( element, 0, 1, 0 ); + + // collapsing + element.one( "tabsbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 1 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 1 ], "oldPanel" ); + equals( ui.newTab.size(), 0, "newTab size" ); + equals( ui.newPanel.size(), 0, "newPanel size" ); + tabs_state( element, 0, 1, 0 ); + }); + element.tabs( "option", "active", false ); + tabs_state( element, 0, 0, 0 ); + + // prevent activation + element.one( "tabsbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 0, "oldTab size" ); + equals( ui.oldPanel.size(), 0, "oldTab" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); + event.preventDefault(); + tabs_state( element, 0, 0, 0 ); + }); + element.tabs( "option", "active", 1 ); + tabs_state( element, 0, 0, 0 ); }); -test('add', function() { - - // TODO move to methods, not at all event related... - - var el = $('<div id="tabs"><ul></ul></div>').tabs(); - equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab'); - - el.tabs('add', '#test1', 'Test 1'); - equals(el.tabs('option', 'selected'), 0, 'First tab added should be auto selected'); - - el.tabs('add', '#test2', 'Test 2'); - equals(el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected'); - -}); +test( "activate", function() { + expect( 30 ); + + var element = $( "#tabs1" ).tabs({ + active: false, + collapsible: true + }), + tabs = element.find( ".ui-tabs-nav a" ), + panels = element.find( ".ui-tabs-panel" ); + + // from collapsed + element.one( "tabsactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 0, "oldTab size" ); + equals( ui.oldPanel.size(), 0, "oldPanel size" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 0 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" ); + tabs_state( element, 1, 0, 0 ); + }); + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0, 0 ); + + // switching tabs + element.one( "tabsactivate", function( event, ui ) { + equals( event.originalEvent.type, "click", "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 0 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 0 ], "oldPanel" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); + tabs_state( element, 0, 1, 0 ); + }); + tabs.eq( 1 ).click(); + tabs_state( element, 0, 1, 0 ); + + // collapsing + element.one( "tabsactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 1 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 1 ], "oldPanel" ); + equals( ui.newTab.size(), 0, "newTab size" ); + equals( ui.newPanel.size(), 0, "newPanel size" ); + tabs_state( element, 0, 0, 0 ); + }); + element.tabs( "option", "active", false ); + tabs_state( element, 0, 0, 0 ); -test('remove', function() { - ok(false, "missing test - untested code is broken code."); + // prevent activation + element.one( "tabsbeforeactivate", function( event ) { + ok( true, "tabsbeforeactivate" ); + event.preventDefault(); + }); + element.one( "tabsactivate", function() { + ok( false, "tabsactivate" ); + }); + element.tabs( "option", "active", 1 ); }); -test('enable', function() { - expect(4); - - var uiObj; - el = $('#tabs1').tabs({ - disabled: [ 0, 1 ], - enable: function (event, ui) { - uiObj = ui; - } +test( "beforeLoad", function() { + expect( 21 ); + + var tab, panelId, panel, + element = $( "#tabs2" ).tabs(); + + // TODO: init +// element.one( "tabsbeforeload", function( event, ui ) { +// }); +// element.tabs({ active: 2 }); + + // .option() + element.one( "tabsbeforeload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + ok( !( "originalEvent" in event ), "originalEvent" ); + ok( "abort" in ui.jqXHR, "jqXHR" ); + ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + equals( ui.panel.html(), "", "panel html" ); + event.preventDefault(); + tabs_state( element, 1, 0, 0, 0, 0 ); }); - el.tabs('enable', 1); - ok(uiObj !== undefined, 'trigger callback'); - equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); - equals(uiObj.index, 1, 'contain index'); + element.tabs( "option", "active", 2 ); + tabs_state( element, 0, 0, 1, 0, 0 ); + equals( panel.html(), "", "panel html after" ); + + // click, change panel content + element.one( "tabsbeforeload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + equals( event.originalEvent.type, "click", "originalEvent" ); + ok( "abort" in ui.jqXHR, "jqXHR" ); + ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + ui.panel.html( "<p>testing</p>" ); + event.preventDefault(); + tabs_state( element, 0, 0, 1, 0, 0 ); + }); + element.find( ".ui-tabs-nav a" ).eq( 3 ).click(); + tabs_state( element, 0, 0, 0, 1, 0 ); + equals( panel.html(), "<p>testing</p>", "panel html after" ); }); -test('disable', function() { - expect(4); - - var uiObj; - el = $('#tabs1').tabs({ - disable: function (event, ui) { - uiObj = ui; - } - }); - el.tabs('disable', 1); - ok(uiObj !== undefined, 'trigger callback'); - equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); - equals(uiObj.index, 1, 'contain index'); +test( "load", function() { + ok( false, "missing test - untested code is broken code." ); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 0209af697..361ace45b 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -1,61 +1,6 @@ -/* - * tabs_methods.js - */ -(function($) { - -module("tabs: methods"); - -test('init', function() { - expect(9); - - el = $('#tabs1').tabs(); - - ok(true, '.tabs() called on element'); - ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach classes to container'); - ok( $('ul', el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach classes to list' ); - ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' ); - ok( $('li:eq(0)', el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes to active li'); - ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li'); - equals( el.tabs('option', 'selected'), 0, 'selected option set' ); - equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 0, 'second tab active'); - equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' ); -}); +(function( $ ) { -test('init with hash', function() { - expect(5); - - //set a hash in the url - location.hash = '#fragment-2'; - - //selection of tab with divs ordered differently than list - el = $('#tabs1').tabs(); - - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); - - ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active'); - ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden'); - - ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active'); - ok(!$('#tabs1 div:eq(1)').is('.ui-tabs-hide'), 'second div for second tab should not be hidden'); -}); - -test('init mismatched order with hash', function() { - expect(5); - - //set a hash in the url - location.hash = '#tabs7-2'; - - //selection of tab with divs ordered differently than list - el = $('#tabs7').tabs(); - - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); - - ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active'); - ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden'); - - ok($('#tabs7-list li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active'); - ok(!$('#tabs7 div:eq(0)').is('.ui-tabs-hide'), 'first div for second tab should not be hidden'); -}); +module( "tabs: methods" ); test('destroy', function() { expect(6); @@ -66,148 +11,151 @@ test('destroy', function() { ok( el.is(':not(.ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all, .ui-tabs-collapsible)'), 'remove classes from container'); ok( $('ul', el).is(':not(.ui-tabs-nav, .ui-helper-reset, .ui-helper-clearfix, .ui-widget-header, .ui-corner-all)'), 'remove classes from list' ); - ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom, .ui-tabs-hide)'), 'remove classes to panel' ); - ok( $('li:eq(0)', el).is(':not(.ui-tabs-selected, .ui-state-active, .ui-corner-top)'), 'remove classes from active li'); + ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom)'), 'remove classes to panel' ); + ok( $('li:eq(0)', el).is(':not(.ui-tabs-active, .ui-state-active, .ui-corner-top)'), 'remove classes from active li'); ok( $('li:eq(1)', el).is(':not(.ui-state-default, .ui-corner-top)'), 'remove classes from inactive li'); ok( $('li:eq(2)', el).is(':not(.ui-state-hover, .ui-state-focus)'), 'remove classes from mouseovered or focused li'); }); -test('enable', function() { - expect(8); +test( "enable", function() { + expect( 8 ); - el = $('#tabs1').tabs({ disabled: [ 0, 1 ] }); - el.tabs("enable", 1); - ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li'); - same(el.tabs('option', 'disabled'), [ 0 ], 'update property'); - - // enable all tabs - el.tabs({ disabled: [ 0, 1 ] }); - el.tabs("enable"); - ok( !$('li.ui-state-disabled', el).length, 'enable all'); - same(el.tabs('option', 'disabled'), false, 'update property'); + var element = $( "#tabs1" ).tabs({ disabled: true }); + tabs_disabled( element, true ); + element.tabs( "enable" ); + tabs_disabled( element, false ); + element.tabs( "destroy" ); - el.tabs('destroy'); - // enable all tabs one by one - el.tabs({ disabled: [ 1, 2 ] }); - el.tabs("enable", 1); - ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li'); - same(el.tabs('option', 'disabled'), [ 2 ], 'update property'); - el.tabs("enable", 2); - ok( $('li:eq(2)', el).is(':not(.ui-state-disabled)'), 'remove class from li'); - same( el.tabs('option', 'disabled'), false, 'set to false'); + element.tabs({ disabled: [ 0, 1 ] }); + tabs_disabled( element, [ 0, 1 ] ); + element.tabs( "enable" ); + tabs_disabled( element, false ); }); -test('disable', function() { - expect(12); - - // normal - el = $('#tabs1').tabs(); - el.tabs('disable', 1); - ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), [ 1 ], 'update disabled property'); - - // disable selected - el.tabs('disable', 0); - ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to selected li'); - same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property'); - - // disable all tabs - el.tabs('disable'); - same( $('li.ui-state-disabled', el).length, 3, 'disable all'); - same(el.tabs('option', 'disabled'), true, 'set to true'); - - el.tabs("destroy"); - // disable all tabs one by one - el.tabs(); - el.tabs('disable', 0); - ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), [ 0 ], 'update disabled property'); - el.tabs('disable', 1); - ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property'); - el.tabs('disable', 2); - ok( $('li:eq(2)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), true, 'set to true'); +test( "enable( index )", function() { + expect( 10 ); + + var element = $( "#tabs1" ).tabs({ disabled: true }); + tabs_disabled( element, true ); + // fully disabled -> partially disabled + element.tabs( "enable", 1 ); + tabs_disabled( element, [ 0, 2 ] ); + // partially disabled -> partially disabled + element.tabs( "enable", 2 ); + tabs_disabled( element, [ 0 ] ); + // already enabled tab, no change + element.tabs( "enable", 2 ); + tabs_disabled( element, [ 0 ] ); + // partially disabled -> fully enabled + element.tabs( "enable", 0 ); + tabs_disabled( element, false ); }); -test('add', function() { - expect(4); - - el = $('#tabs1').tabs(); - el.tabs('add', '#new', 'New'); - - var added = $('li:last', el).simulate('mouseover'); - ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab'); - added.simulate('mouseout'); - var other = $('li:first', el).simulate('mouseover'); - ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab'); - other.simulate('mouseout'); +test( "disable", function() { + expect( 8 ); - equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page'); + var element = $( "#tabs1" ).tabs({ disabled: false }); + tabs_disabled( element, false ); + element.tabs( "disable" ); + tabs_disabled( element, true ); + element.tabs( "destroy" ); - ok(false, "missing test - untested code is broken code."); + element.tabs({ disabled: [ 0, 1 ] }); + tabs_disabled( element, [ 0, 1 ] ); + element.tabs( "disable" ); + tabs_disabled( element, true ); }); -test('remove', function() { - expect(4); - - el = $('#tabs1').tabs(); - - el.tabs('remove', 0); - equals(el.tabs('length'), 2, 'remove tab'); - equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item'); - equals($('#fragment-1').length, 0, 'remove associated panel'); - - // TODO delete tab -> focus tab to right - // TODO delete last tab -> focus tab to left - - el.tabs('select', 1); - el.tabs('remove', 1); - equals(el.tabs('option', 'selected'), 0, 'update selected property'); +test( "disable( index )", function() { + expect( 10 ); + + var element = $( "#tabs1" ).tabs({ disabled: false }); + tabs_disabled( element, false ); + // fully enabled -> partially disabled + element.tabs( "disable", 1 ); + tabs_disabled( element, [ 1 ] ); + // partially disabled -> partially disabled + element.tabs( "disable", 2 ); + tabs_disabled( element, [ 1, 2 ] ); + // already disabled tab, no change + element.tabs( "disable", 2 ); + tabs_disabled( element, [ 1, 2 ] ); + // partially disabled -> fully disabled + element.tabs( "disable", 0 ); + tabs_disabled( element, true ); }); -test('select', function() { - expect(6); - - el = $('#tabs1').tabs(); - - el.tabs('select', 1); - equals(el.tabs('option', 'selected'), 1, 'should select tab'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('select', 0); - equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in the already selected tab'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('select', -1); - equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in -1'); - - el.tabs('destroy'); - el.tabs(); - el.tabs('select', 0); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true'); - el.tabs('select', -1); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true'); - - el.tabs('select', '#fragment-2'); - equals(el.tabs('option', 'selected'), 1, 'should select tab by id'); +test( "refersh", function() { + expect( 27 ); + + var element = $( "#tabs1" ).tabs(); + tabs_state( element, 1, 0, 0 ); + tabs_disabled( element, false ); + + // disable tab via markup + element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" ); + element.tabs( "refresh" ); + tabs_state( element, 1, 0, 0 ); + tabs_disabled( element, [ 1 ] ); + + // add remote tab + element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" ); + element.tabs( "refresh" ); + tabs_state( element, 1, 0, 0, 0 ); + tabs_disabled( element, [ 1 ] ); + equals( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1, + "panel added for remote tab" ); + + // remove all tabs + element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove(); + element.tabs( "refresh" ); + tabs_state( element ); + equals( element.tabs( "option", "active" ), false, "no active tab" ); + + // add tabs + element.find( ".ui-tabs-nav" ) + .append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" ) + .append( "<li><a href='#newTab3'>new 3</a></li>" ) + .append( "<li><a href='#newTab4'>new 4</a></li>" ) + .append( "<li><a href='#newTab5'>new 5</a></li>" ); + element + .append( "<div id='newTab2'>new 2</div>" ) + .append( "<div id='newTab3'>new 3</div>" ) + .append( "<div id='newTab4'>new 4</div>" ) + .append( "<div id='newTab5'>new 5</div>" ); + element.tabs( "refresh" ); + tabs_state( element, 0, 0, 0, 0 ); + tabs_disabled( element, [ 0 ] ); + + // activate third tab + element.tabs( "option", "active", 2 ); + tabs_state( element, 0, 0, 1, 0 ); + tabs_disabled( element, [ 0 ] ); + + // remove fourth tab, third tab should stay active + element.find( ".ui-tabs-nav li" ).eq( 3 ).remove(); + element.find( ".ui-tabs-panel" ).eq( 3 ).remove(); + element.tabs( "refresh" ); + tabs_state( element, 0, 0, 1 ); + tabs_disabled( element, [ 0 ] ); + + // remove third (active) tab, second tab should become active + element.find( ".ui-tabs-nav li" ).eq( 2 ).remove(); + element.find( ".ui-tabs-panel" ).eq( 2 ).remove(); + element.tabs( "refresh" ); + tabs_state( element, 0, 1 ); + tabs_disabled( element, [ 0 ] ); + + // remove first tab, previously active tab (now first) should stay active + element.find( ".ui-tabs-nav li" ).eq( 0 ).remove(); + element.find( ".ui-tabs-panel" ).eq( 0 ).remove(); + element.tabs( "refresh" ); + tabs_state( element, 1 ); + tabs_disabled( element, false ); }); test('load', function() { ok(false, "missing test - untested code is broken code."); }); -test('url', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('length', function() { - expect(1); - - el = $('#tabs1').tabs(); - equals(el.tabs('length'), $('ul a', el).length, ' should return length'); -}); - -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index 1c621ac28..884a566c6 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -1,66 +1,134 @@ -/* - * tabs_options.js - */ -(function($) { +(function( $ ) { -module("tabs: options"); +module( "tabs: options" ); -test('ajaxOptions', function() { - ok(false, "missing test - untested code is broken code."); +test( "{ active: default }", function() { + expect( 4 ); + + var element = $( "#tabs1" ).tabs(); + equals( element.tabs( "option", "active" ), 0, "should be 0 by default" ); + tabs_state( element, 1, 0, 0 ); + element.tabs( "destroy" ); + + location.hash = "#fragment-3"; + element = $( "#tabs1" ).tabs(); + equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" ); + tabs_state( element, 0, 0, 1 ); + element.tabs( "destroy" ); }); -test('cache', function() { - ok(false, "missing test - untested code is broken code."); +test( "{ active: false }", function() { + expect( 7 ); + + var element = $( "#tabs1" ).tabs({ + active: false, + collapsible: true + }); + tabs_state( element, 0, 0, 0 ); + equal( element.find( ".ui-tabs-nav .ui-state-active" ).size(), 0, "no tabs selected" ); + strictEqual( element.tabs( "option", "active" ), false ); + + element.tabs( "option", "collapsible", false ); + tabs_state( element, 1, 0, 0 ); + equal( element.tabs( "option", "active" ), 0 ); + + element.tabs( "destroy" ); + element.tabs({ + active: false + }); + tabs_state( element, 1, 0, 0 ); + strictEqual( element.tabs( "option", "active" ), 0 ); }); -test('collapsible', function() { - expect(4); +test( "{ active: Number }", function() { + expect( 8 ); + + var element = $( "#tabs1" ).tabs({ + active: 2 + }); + equals( element.tabs( "option", "active" ), 2 ); + tabs_state( element, 0, 0, 1 ); - el = $('#tabs1'); + element.tabs( "option", "active", 0 ); + equals( element.tabs( "option", "active" ), 0 ); + tabs_state( element, 1, 0, 0 ); - el.tabs({ collapsible: true }); - equals(el.tabs('option', 'collapsible'), true, 'option set'); - ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached'); - el.tabs('select', 0); - equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden'); - el.tabs('option', 'collapsible', false); - ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached'); + element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + element.tabs( "option", "active", 10 ); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); }); -test('cookie', function() { - expect(6); +if ( $.uiBackCompat === false ) { + test( "{ active: -Number }", function() { + var element = $( "#tabs1" ).tabs({ + active: -1 + }); + equals( element.tabs( "option", "active" ), 2 ); + tabs_state( element, 0, 0, 1 ); + + element.tabs( "option", "active", -2 ); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + element.tabs( "option", "active", -10 ); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + element.tabs( "option", "active", -3 ); + equals( element.tabs( "option", "active" ), 0 ); + tabs_state( element, 1, 0, 0 ); + }); +} + +test( "active - mismatched tab/panel order", function() { + expect( 3 ); + + location.hash = "#tabs7-2"; + var element = $( "#tabs7" ).tabs(); + equals( element.tabs( "option", "active" ), 1, "should be 1 based on URL" ); + tabs_state( element, 0, 1 ); + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0 ); +}); - el = $('#tabs1'); - var cookieName = 'tabs_test', cookieObj = { name: cookieName }; - $.cookie(cookieName, null); // blank state - var cookie = function() { - return parseInt($.cookie(cookieName), 10); - }; +test( "{ collapsible: false }", function() { + expect( 4 ); - el.tabs({ cookie: cookieObj }); - equals(cookie(), 0, 'initial cookie value'); + var element = $( "#tabs1" ).tabs({ + active: 1 + }); + element.tabs( "option", "active", false ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); - el.tabs('destroy'); - el.tabs({ selected: 1, cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from selected property'); + element.find( ".ui-state-active a" ).eq( 1 ).click(); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); +}); - el.tabs('select', 2); - equals(cookie(), 2, 'cookie value updated after select'); +test( "{ collapsible: true }", function() { + expect( 6 ); - el.tabs('destroy'); - $.cookie(cookieName, 1); - el.tabs({ cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from existing cookie'); + var element = $( "#tabs1" ).tabs({ + active: 1, + collapsible: true + }); - el.tabs('destroy'); - el.tabs({ cookie: cookieObj, collapsible: true }); - el.tabs('select', 0); - equals(cookie(), -1, 'cookie value for all tabs unselected'); + element.tabs( "option", "active", false ); + equal( element.tabs( "option", "active" ), false ); + tabs_state( element, 0, 0, 0 ); - el.tabs('destroy'); - ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + element.tabs( "option", "active", 1 ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + element.find( ".ui-state-active a" ).click(); + equal( element.tabs( "option", "active" ), false ); + tabs_state( element, 0, 0, 0 ); }); test('disabled', function() { @@ -87,50 +155,4 @@ test('fx', function() { ok(false, "missing test - untested code is broken code."); }); -test('idPrefix', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('panelTemplate', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('selected', function() { - expect(8); - - el = $('#tabs1').tabs(); - equals(el.tabs('option', 'selected'), 0, 'should be 0 by default'); - - el.tabs('destroy'); - el.tabs({ selected: -1 }); - equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected'); - equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' ); - equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' ); - - el.tabs('destroy'); - el.tabs({ selected: null }); - equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected with value null (deprecated)'); - - el.tabs('destroy'); - el.tabs({ selected: 1 }); - equals(el.tabs('option', 'selected'), 1, 'should be specified tab'); - - el.tabs('destroy'); - el.tabs({ selected: 99 }); - equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('option', 'selected', 0); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected'); -}); - -test('spinner', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('tabTemplate', function() { - ok(false, "missing test - untested code is broken code."); -}); - })(jQuery); diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js index 4a09d59e4..d7a59cb5b 100644 --- a/tests/unit/tabs/tabs_tickets.js +++ b/tests/unit/tabs/tabs_tickets.js @@ -5,111 +5,33 @@ module("tabs: tickets"); -test('#2715 - id containing colon', function() { - // http://dev.jqueryui.com/ticket/2715 - expect(4); - - el = $('#tabs2').tabs(); - ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' ); - ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' ); - - el.tabs('select', 1).tabs('select', 0); - ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' ); - ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' ); - -}); - -test('#???? - panel containing inline style', function() { - expect(3); - - var inlineStyle = function(property) { - return $('#inline-style')[0].style[property]; - }; - var expected = inlineStyle('height'); - - el = $('#tabs2').tabs(); - equals(inlineStyle('height'), expected, 'init should not remove inline style'); - - el.tabs('select', 1); - equals(inlineStyle('height'), expected, 'show tab should not remove inline style'); - - el.tabs('select', 0); - equals(inlineStyle('height'), expected, 'hide tab should not remove inline style'); - -}); - test('#3627 - Ajax tab with url containing a fragment identifier fails to load', function() { // http://dev.jqueryui.com/ticket/3627 expect(1); - el = $('#tabs2').tabs(); - - ok(/test.html$/.test( $('a:eq(2)', el).data('load.tabs') ), 'should ignore fragment identifier'); - + el = $('#tabs2').tabs({ + active: 2, + beforeLoad: function( event, ui ) { + event.preventDefault(); + ok(/test.html$/.test( ui.ajaxSettings.url ), 'should ignore fragment identifier'); + } + }); }); test('#4033 - IE expands hash to full url and misinterprets tab as ajax', function() { // http://dev.jqueryui.com/ticket/4033 expect(1); - el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>') - .appendTo('#main').tabs(); - - equals($('a', el).data('load.tabs'), undefined, 'should not create ajax tab'); - -}); - -test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() { - // http://dev.jqueryui.com/ticket/5069 - expect(2); - - el = $('#tabs2').tabs(); - equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs'); - el.tabs('add', '/ajax_html_echo', 'Test'); - equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs'); - -}); - -test('#5893 - Sublist in the tab list are considered as tab', function() { - // http://dev.jqueryui.com/ticket/5893 - expect(1); - - el = $('#tabs6').tabs(); - equals(el.tabs( "length" ), 2, 'should contain 2 tab'); - -}); - -asyncTest( "#4581 - title attribute for remote tabs does not support foreign languages", function() { - expect( 1 ); - - $( "#tabs2" ).tabs({ - selected: 3, - load: function( event, ui ) { - equal( ui.panel.id, "∫ßáö_Սե", "proper title" ); - start(); + el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>'); + el.appendTo('#main'); + el.tabs({ + beforeLoad: function( event, ui ) { + event.preventDefault(); + ok( false, 'should not be an ajax tab'); } }); -}); - -test('#6710 - selectors are global', function() { - // http://bugs.jqueryui.com/ticket/6710 - expect(1); - - var container = $('\ - <div>\ - <div id="tabs_6710">\ - <ul>\ - <li><a href="#tabs-1_6710">Nunc tincidunt</a></li>\ - <li><a href="#tabs-2_6710">Proin dolor</a></li>\ - </ul>\ - <div id="tabs-1_6710"> <p>first</p> </div>\ - <div id="tabs-2_6710"> <p>second</p>\ - </div>\ - </div>'); - container.find('#tabs_6710').tabs(); - ok( container.find('#tabs-2_6710').hasClass('ui-tabs-hide'), 'should find panels and add corresponding classes' ); + equals($('a', el).attr('aria-controls'), 'tab', 'aria-contorls attribute is correct'); }); - })(jQuery); diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index 517b5dfa3..4b273ce78 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -26,8 +26,6 @@ var privateMethods = [ "_createWidget", "destroy", "option", - "enable", - "disable", "_trigger" ]; diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js index 419d7a085..c1fc49f1a 100644 --- a/tests/unit/tooltip/tooltip_defaults.js +++ b/tests/unit/tooltip/tooltip_defaults.js @@ -1,16 +1,15 @@ -/* - * tooltip_defaults.js - */ +commonWidgetTests( "tooltip", { + defaults: { + disabled: false, + items: "[title]", + content: $.ui.tooltip.prototype.options.content, + position: { + my: "left center", + at: "right center", + offset: "15 0" + }, -var tooltip_defaults = { - disabled: false, - items: "[title]", - content: $.ui.tooltip.prototype.options.content, - position: { - my: "left center", - at: "right center", - offset: "15 0" + // callbacks + create: null } -}; - -commonWidgetTests('tooltip', { defaults: tooltip_defaults }); +}); diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html index 910345e4f..e74abb317 100644 --- a/tests/unit/widget/widget.html +++ b/tests/unit/widget/widget.html @@ -14,7 +14,6 @@ <script src="../testsuite.js"></script> <script src="widget_core.js"></script> - <script src="widget_tickets.js"></script> <script src="../swarminject.js"></script> </head> diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index 34f5ef67f..b1c27b104 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -202,6 +202,7 @@ test( "merge multiple option arguments", function() { $.widget( "ui.testWidget", { _create: function() { same( this.options, { + create: null, disabled: false, option1: "value1", option2: "value2", @@ -249,6 +250,7 @@ test( "._getCreateOptions()", function() { }, _create: function() { same( this.options, { + create: null, disabled: false, option1: "override1", option2: "value2", @@ -288,6 +290,45 @@ test( "re-init", function() { same( actions, [ "optionfoo", "init" ], "correct methods called on re-init with options" ); }); +test( "inheritance - options", function() { + // #5830 - Widget: Using inheritance overwrites the base classes options + $.widget( "ui.testWidgetBase", { + options: { + obj: { + key1: "foo", + key2: "bar" + }, + arr: [ "testing" ] + } + }); + + $.widget( "ui.testWidgetExtension", $.ui.testWidgetBase, { + options: { + obj: { + key1: "baz" + }, + arr: [ "alpha", "beta" ] + } + }); + + same( $.ui.testWidgetBase.prototype.options.obj, { + key1: "foo", + key2: "bar" + }, "base class option object not overridden"); + same( $.ui.testWidgetBase.prototype.options.arr, [ "testing" ], + "base class option array not overridden"); + + same( $.ui.testWidgetExtension.prototype.options.obj, { + key1: "baz", + key2: "bar" + }, "extension class option object extends base"); + same( $.ui.testWidgetExtension.prototype.options.arr, [ "alpha", "beta" ], + "extension class option array overwrites base"); + + delete $.ui.testWidgetBase; + delete $.ui.testWidgetExtension; +}); + test( "._super()", function() { expect( 9 ); var instance; @@ -379,6 +420,7 @@ test( ".option() - getter", function() { var options = div.testWidget( "option" ); same( options, { + create: null, disabled: false, foo: "bar", baz: 5, @@ -795,6 +837,55 @@ test( "._trigger() - provide event and ui", function() { .testWidget( "testEvent" ); }); +test( "._trigger() - array as ui", function() { + // #6795 - Widget: handle array arguments to _trigger consistently + expect( 4 ); + + $.widget( "ui.testWidget", { + _create: function() {}, + testEvent: function() { + var ui = { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }; + var extra = { + bar: 5 + }; + this._trigger( "foo", null, [ ui, extra ] ); + } + }); + $( "#widget" ).bind( "testwidgetfoo", function( event, ui, extra ) { + same( ui, { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }, "event: ui hash passed" ); + same( extra, { + bar: 5 + }, "event: extra argument passed" ); + }); + $( "#widget" ).testWidget({ + foo: function( event, ui, extra ) { + same( ui, { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }, "callback: ui hash passed" ); + same( extra, { + bar: 5 + }, "callback: extra argument passed" ); + } + }) + .testWidget( "testEvent" ); +}); + test( "._trigger() - instance as element", function() { expect( 4 ); $.widget( "ui.testWidget", { diff --git a/tests/unit/widget/widget_tickets.js b/tests/unit/widget/widget_tickets.js deleted file mode 100644 index 9c0bddf03..000000000 --- a/tests/unit/widget/widget_tickets.js +++ /dev/null @@ -1,91 +0,0 @@ -(function( $ ) { - -module( "widget: tickets" ); - -test( "#5830 - Widget: Using inheritance overwrites the base classes options", function() { - $.widget( "ui.testWidgetBase", { - options: { - obj: { - key1: "foo", - key2: "bar" - }, - arr: [ "testing" ] - } - }); - - $.widget( "ui.testWidgetExtension", $.ui.testWidgetBase, { - options: { - obj: { - key1: "baz" - }, - arr: [ "alpha", "beta" ] - } - }); - - same( $.ui.testWidgetBase.prototype.options.obj, { - key1: "foo", - key2: "bar" - }, "base class option object not overridden"); - same( $.ui.testWidgetBase.prototype.options.arr, [ "testing" ], - "base class option array not overridden"); - - same( $.ui.testWidgetExtension.prototype.options.obj, { - key1: "baz", - key2: "bar" - }, "extension class option object extends base"); - same( $.ui.testWidgetExtension.prototype.options.arr, [ "alpha", "beta" ], - "extension class option array overwrites base"); - - delete $.ui.testWidgetBase; - delete $.ui.testWidgetExtension; -}); - -test( "#6795 - Widget: handle array arguments to _trigger consistently", function() { - expect( 4 ); - - $.widget( "ui.testWidget", { - _create: function() {}, - testEvent: function() { - var ui = { - foo: "bar", - baz: { - qux: 5, - quux: 20 - } - }; - var extra = { - bar: 5 - }; - this._trigger( "foo", null, [ ui, extra ] ); - } - }); - $( "#widget" ).bind( "testwidgetfoo", function( event, ui, extra ) { - same( ui, { - foo: "bar", - baz: { - qux: 5, - quux: 20 - } - }, "event: ui hash passed" ); - same( extra, { - bar: 5 - }, "event: extra argument passed" ); - }); - $( "#widget" ).testWidget({ - foo: function( event, ui, extra ) { - same( ui, { - foo: "bar", - baz: { - qux: 5, - quux: 20 - } - }, "callback: ui hash passed" ); - same( extra, { - bar: 5 - }, "callback: extra argument passed" ); - } - }) - .testWidget( "testEvent" ); -}); - -}( jQuery ) ); diff --git a/tests/visual/dialog/dialog.html b/tests/visual/dialog/dialog.html deleted file mode 100644 index 92f1bf510..000000000 --- a/tests/visual/dialog/dialog.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.mouse.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog(); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> - Dialog Content - </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_on_page_with_scrollbars.html b/tests/visual/dialog/dialog_on_page_with_scrollbars.html deleted file mode 100644 index ddd730a6a..000000000 --- a/tests/visual/dialog/dialog_on_page_with_scrollbars.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog on page with scrollbars</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog(); - }); - </script> -</head> -<body style="height:2000px;"> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_buttons_OK_Cancel.html b/tests/visual/dialog/dialog_option_buttons_OK_Cancel.html deleted file mode 100644 index 5ff5f45d0..000000000 --- a/tests/visual/dialog/dialog_option_buttons_OK_Cancel.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option buttons OK Cancel</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - buttons: { - "OK": function() { $(this).dialog('close'); }, - "Cancel": function() { $(this).dialog('close'); } - } - }); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> - Dialog Content - </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_closeOnEscape_false.html b/tests/visual/dialog/dialog_option_closeOnEscape_false.html deleted file mode 100644 index 14c525f29..000000000 --- a/tests/visual/dialog/dialog_option_closeOnEscape_false.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option closeOnEscape true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - closeOnEscape: false - }); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_closeOnEscape_true.html b/tests/visual/dialog/dialog_option_closeOnEscape_true.html deleted file mode 100644 index 06b1bc561..000000000 --- a/tests/visual/dialog/dialog_option_closeOnEscape_true.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option closeOnEscape true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - closeOnEscape: true - }); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_modal_false.html b/tests/visual/dialog/dialog_option_modal_false.html deleted file mode 100644 index 80601d0d9..000000000 --- a/tests/visual/dialog/dialog_option_modal_false.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option modal false</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - modal: false - }); - }); - </script> -</head> -<body> -<input /> -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_modal_true.html b/tests/visual/dialog/dialog_option_modal_true.html deleted file mode 100644 index d3b487517..000000000 --- a/tests/visual/dialog/dialog_option_modal_true.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option modal true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - modal: true - }); - }); - </script> -</head> -<body> -<input /> -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_position_right_top.html b/tests/visual/dialog/dialog_option_position_right_top.html deleted file mode 100644 index 34ca3ad48..000000000 --- a/tests/visual/dialog/dialog_option_position_right_top.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option position right top</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - - $("#dialog").dialog({ - position: ['right', 'top'] - }); - - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_ticket_4350.html b/tests/visual/dialog/dialog_ticket_4350.html deleted file mode 100644 index 14925e925..000000000 --- a/tests/visual/dialog/dialog_ticket_4350.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog ticket #4350</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.mouse.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - height: 200 - }); - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4350">#4350 - Dialog: No Scrollbars in IE in Quirksmode</a></h1> - -<input /> -<div id="dialog" title="Dialog Title"> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_ticket_4826.html b/tests/visual/dialog/dialog_ticket_4826.html deleted file mode 100644 index fb4814e16..000000000 --- a/tests/visual/dialog/dialog_ticket_4826.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog ticket #4826</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.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.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - - $('#dialog').dialog({ resizable: false }); - - $('#handle').click(function() { - $('#dialog') - .dialog('option', { - resizable: false - }) - .dialog('open'); - - return false; - }); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4826">#4826 - Setting resizable false toggles resizable on dialog</a></h1> - -<button id="handle">Click me!</button> -<div id="dialog" title="Dialog Title"> - <p id="msg">I should <strong>NEVER</strong> be resizable!</p> -</div> - -</body> -</html>
\ No newline at end of file diff --git a/tests/visual/index.html b/tests/visual/index.html deleted file mode 100644 index 4138e21ba..000000000 --- a/tests/visual/index.html +++ /dev/null @@ -1,62 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI Visual Tests</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" /> -</head> - -<body> - -<h1>jQuery UI Visual Tests</h1> - -<h2>Composites</h2> -<ul> - <li><a href="all.html">All Widgets</a></li> - <li><a href="theme.html">All Widgets with Themes</a></li> - <li><a href="effects.all.html">Effects</a></li> - <li><a href="compound/accordion_tabs.html">Tabs contain Accordion</a></li> - <li><a href="compound/datepicker_dialog.html">Datepicker within a Dialog</a></li> - <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Draggable contains Tabs, contain Accordion, contain Draggables</a></li> - <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> - <li><a href="compound/sortable_accordion_sortable_tabs.html">Accordion within Tabs, both Sortable</a></li> - <li><a href="compound/tabs_tabs.html">Tabs contains Tabs</a></li> - <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> - <li><a href="compound/widgets_in_dialog.html">All Widgets within a Dialog</a></li> -</ul> - - -<h2>Interactions</h2> -<ul> - <li><a href="draggable/draggable.html">Draggable</a></li> - <li><a href="droppable/droppable.html">Droppable</a></li> - <li><a href="resizable/resizable.html">Resizable</a></li> - <li><a href="selectable/selectable.html">Selectable</a></li> - <li><a href="sortable/sortable.html">Sortable</a></li> -</ul> - -<h2>Widgets</h2> -<ul> - <li><a href="accordion/accordion.html">Accordion</a></li> - <li><a href="autocomplete/autocomplete.html">Autocomplete</a></li> - <li><a href="button/button.html">Button</a></li> - <li><a href="datepicker/datepicker.html">Datepicker</a></li> - <li><a href="dialog/dialog.html">Dialog</a></li> - <li> - <a href="menu/menu.html">Menu</a> - <ul> - <li><a href="menu/contextmenu.html">Context Menu</a></li> - <li><a href="menu/flyoutmenu.html">Flyout Menu</a></li> - <li><a href="menu/menubar.html">Menubar</a></li> - <li><a href="menu/drilldown.html">Drilldown Menu</a></li> - </ul> - </li> - <li><a href="progressbar/progressbar.html">Progressbar</a></li> - <li><a href="slider/slider.html">Slider</a></li> - <li><a href="spinner/spinner.html">Spinner</a></li> - <li><a href="tabs/tabs.html">Tabs</a></li> - <li><a href="tooltip/tooltip.html">Tooltip</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index cc1f4a939..1db12f25b 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -25,7 +25,7 @@ }); } - var menus = $("#menu1, #menu2, #menu3"); + var menus = $("#menu1, #menu2, #menu3, #menu4"); create(); $("#toggle-destroy").toggle(function() { @@ -41,7 +41,7 @@ <style> body { font-size:62.5%; } .ui-menu { width: 200px; margin-bottom: 2em; } - #menu3 { height: 200px; overflow: auto; } + #menu4 { height: 200px; overflow: auto; } </style> </head> <body> @@ -56,7 +56,7 @@ <li><a href="#">Salzburg</a></li> </ul> -<ul id="menu1"> +<ul id="menu2"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> @@ -95,6 +95,44 @@ </ul> <ul id="menu3"> + <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> + <li><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li> + <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a> + <ul> + <li> + <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li> + </ul> + </li> + <li><a href="#">Perch</a></li> + </ul> + </li> +</ul> + +<ul id="menu4"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html index 5847c623f..d2185e97c 100644 --- a/tests/visual/menu/menubar.html +++ b/tests/visual/menu/menubar.html @@ -55,6 +55,16 @@ .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } + .ui-menubar { + list-style: none; + margin: 0; + padding-left: 0; + } + + .ui-menubar-item { + float: left; + } + table { border-collapse: collapse; } @@ -66,85 +76,97 @@ </head> <body> -<div id="bar1" class="menubar"> - <a href="#">File</a> - <ul> - <li><a href="#">Open...</a></li> - <li class="ui-state-disabled">Open recent...</li> - <li><a href="#">Save</a></li> - <li><a href="#">Save as...</a></li> - <li><a href="#">Close</a></li> - <li><a href="#">Quit</a></li> - </ul> - <a href="#">Edit</a> - <ul> - <li><a href="#">Copy</a></li> - <li><a href="#">Cut</a></li> - <li class="ui-state-disabled">Paste</li> - </ul> - <a href="#">View</a> - <ul> - <li><a href="#">Fullscreen</a></li> - <li><a href="#">Fit into view</a></li> - <li> - <a href="#">Encoding</a> - <ul> - <li><a href="#">Auto-detect</a></li> - <li><a href="#">UTF-8</a></li> - <li> - <a href="#">UTF-16</a> - <ul> - <li><a href="#">Option 1</a></li> - <li><a href="#">Option 2</a></li> - <li><a href="#">Option 3</a></li> - <li><a href="#">Option 4</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#">Customize...</a></li> - </ul> -</div> +<ul id="bar1" class="menubar"> + <li> + <a href="#">File</a> + <ul> + <li><a href="#">Open...</a></li> + <li class="ui-state-disabled">Open recent...</li> + <li><a href="#">Save</a></li> + <li><a href="#">Save as...</a></li> + <li><a href="#">Close</a></li> + <li><a href="#">Quit</a></li> + </ul> + </li> + <li> + <a href="#">Edit</a> + <ul> + <li><a href="#">Copy</a></li> + <li><a href="#">Cut</a></li> + <li class="ui-state-disabled">Paste</li> + </ul> + </li> + <li> + <a href="#">View</a> + <ul> + <li><a href="#">Fullscreen</a></li> + <li><a href="#">Fit into view</a></li> + <li> + <a href="#">Encoding</a> + <ul> + <li><a href="#">Auto-detect</a></li> + <li><a href="#">UTF-8</a></li> + <li> + <a href="#">UTF-16</a> + <ul> + <li><a href="#">Option 1</a></li> + <li><a href="#">Option 2</a></li> + <li><a href="#">Option 3</a></li> + <li><a href="#">Option 4</a></li> + </ul> + </li> + </ul> + </li> + <li><a href="#">Customize...</a></li> + </ul> + </li> +</ul> -<div id="bar2" class="menubar-icons"> - <a href="#">File</a> - <ul> - <li><a href="#">Open...</a></li> - <li class="ui-state-disabled">Open recent...</li> - <li><a href="#">Save</a></li> - <li><a href="#">Save as...</a></li> - <li><a href="#">Close</a></li> - <li><a href="#">Quit</a></li> - </ul> - <a href="#">Edit</a> - <ul> - <li><a href="#">Copy</a></li> - <li><a href="#">Cut</a></li> - <li class="ui-state-disabled">Paste</li> - </ul> - <a href="#">View</a> - <ul> - <li><a href="#">Fullscreen</a></li> - <li><a href="#">Fit into view</a></li> - <li> - <a href="#">Encoding</a> - <ul> - <li><a href="#">Auto-detect</a></li> - <li><a href="#">UTF-8</a></li> - <li> - <a href="#">UTF-16</a> - <ul> - <li><a href="#">Option 1</a></li> - <li><a href="#">Option 2</a></li> - <li><a href="#">Option 3</a></li> - <li><a href="#">Option 4</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#">Customize...</a></li> - </ul> -</div> +<ul id="bar2" class="menubar-icons"> + <li> + <a href="#">File</a> + <ul> + <li><a href="#">Open...</a></li> + <li class="ui-state-disabled">Open recent...</li> + <li><a href="#">Save</a></li> + <li><a href="#">Save as...</a></li> + <li><a href="#">Close</a></li> + <li><a href="#">Quit</a></li> + </ul> + </li> + <li> + <a href="#">Edit</a> + <ul> + <li><a href="#">Copy</a></li> + <li><a href="#">Cut</a></li> + <li class="ui-state-disabled">Paste</li> + </ul> + </li> + <li> + <a href="#">View</a> + <ul> + <li><a href="#">Fullscreen</a></li> + <li><a href="#">Fit into view</a></li> + <li> + <a href="#">Encoding</a> + <ul> + <li><a href="#">Auto-detect</a></li> + <li><a href="#">UTF-8</a></li> + <li> + <a href="#">UTF-16</a> + <ul> + <li><a href="#">Option 1</a></li> + <li><a href="#">Option 2</a></li> + <li><a href="#">Option 3</a></li> + <li><a href="#">Option 4</a></li> + </ul> + </li> + </ul> + </li> + <li><a href="#">Customize...</a></li> + </ul> + </li> +</ul> <table id="movies" class="ui-widget"> <thead> @@ -161,24 +183,26 @@ <td class="ui-widget-content">1993</td> <td class="ui-widget-content">3.6</td> <td class="ui-widget-content"> - <div class="menubar"> - <a href="#">Options</a> - <ul> - <li><a href="#">Order...</a></li> - <li class="ui-state-disabled">Write a Review...</li> - <li><a href="#">Find Similar Movies...</a></li> - <li> - <a href="#">Rate</a> - <ul> - <li><a href="#">5 stars</a></li> - <li><a href="#">4 stars</a></li> - <li><a href="#">3 stars</a></li> - <li><a href="#">2 stars</a></li> - <li><a href="#">1 stars</a></li> - </ul> - </li> - </ul> - </div> + <ul class="menubar"> + <li> + <a href="#">Options</a> + <ul> + <li><a href="#">Order...</a></li> + <li class="ui-state-disabled">Write a Review...</li> + <li><a href="#">Find Similar Movies...</a></li> + <li> + <a href="#">Rate</a> + <ul> + <li><a href="#">5 stars</a></li> + <li><a href="#">4 stars</a></li> + <li><a href="#">3 stars</a></li> + <li><a href="#">2 stars</a></li> + <li><a href="#">1 stars</a></li> + </ul> + </li> + </ul> + </li> + </ul> </td> </tr> <tr> diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 6c8173cd9..cc3258d4a 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -13,24 +13,31 @@ $.widget("ui.menubar", { }, _create: function() { var self = this; - var items = this.items = this.element.children("button, a"); + var items = this.items = this.element.children("li") + .addClass("ui-menubar-item") + .attr("role", "presentation") + .children("button, a"); items.slice(1).attr("tabIndex", -1); var o = this.options; - this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix'); + this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix').attr("role", "menubar"); this._focusable(items); this._hoverable(items); items.next("ul").each(function(i, elm) { $(elm).menu({ select: function(event, ui) { - ui.item.parents("ul:last").hide() - self.options.select.apply(this, arguments); + ui.item.parents("ul.ui-menu:last").hide(); + self._trigger( "select", event, ui ); + self._close(); + $(event.target).prev().focus(); } - }).hide().keydown(function(event) { + }).hide() + .attr("aria-hidden", "true") + .attr("aria-expanded", "false") + .keydown(function(event) { var menu = $(this); if (menu.is(":hidden")) return; - event.stopPropagation(); switch (event.keyCode) { case $.ui.keyCode.LEFT: self._left(event); @@ -41,9 +48,7 @@ $.widget("ui.menubar", { event.preventDefault(); break; }; - }).blur(function( event ) { - self._close( event ); - }); + }) }); items.each(function() { var input = $(this), @@ -55,12 +60,11 @@ $.widget("ui.menubar", { return; } event.preventDefault(); - event.stopPropagation(); if (event.type == "click" && menu.is(":visible") && self.active && self.active[0] == menu[0]) { self._close(); return; } - if (self.open || event.type == "click") { + if ((self.open && event.type == "mouseenter") || event.type == "click") { self._open(event, menu); } }) @@ -83,6 +87,8 @@ $.widget("ui.menubar", { } }) .addClass("ui-button ui-widget ui-button-text-only ui-menubar-link") + .attr("role", "menuitem") + .attr("aria-haspopup", "true") .wrapInner("<span class='ui-button-text'></span>"); if (o.menuIcon) { @@ -95,35 +101,66 @@ $.widget("ui.menubar", { }; }); - self._bind(document, { - click: function(event) { - if (self.open && !$(event.target).closest(".ui-menubar").length) { - self._close(); - } - } - }) self._bind({ - keyup: function(event) { - if (event.keyCode == $.ui.keyCode.ESCAPE && self.open) { - if (self.active.menu("left", event) !== true) { + keydown: function(event) { + if (event.keyCode == $.ui.keyCode.ESCAPE) { + if (self.active && self.active.menu("left", event) !== true) { var active = self.active; self.active.blur(); + self._close( event ); active.prev().focus(); } } + }, + focusout : function( event ) { + self.closeTimer = setTimeout(function() { + self._close( event ); + }, 100); + }, + focusin :function( event ) { + clearTimeout(self.closeTimer); } }); }, + _destroy : function() { + var items = this.element.children("li") + .removeClass("ui-menubar-item") + .removeAttr("role", "presentation") + .children("button, a"); + + this.element.removeClass('ui-menubar ui-widget-header ui-helper-clearfix').removeAttr("role", "menubar").unbind(".menubar");; + items.unbind("focusin focusout click focus mouseenter keydown"); + + items + .removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default") + .removeAttr("role", "menuitem") + .removeAttr("aria-haspopup", "true") + .children("span.ui-button-text").each(function(i, e) { + var item = $(this); + item.parent().html(item.html()); + }) + .end() + .children(".ui-icon").remove(); + + $(document).unbind(".menubar"); + + this.element.find(":ui-menu").menu("destroy") + .show() + .removeAttr("aria-hidden", "true") + .removeAttr("aria-expanded", "false") + .removeAttr("tabindex") + .unbind("keydown", "blur") + ; + }, + _close: function() { - this.active.menu("closeAll").hide(); + if (!this.active || !this.active.length) + return; + this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false"); this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex"); this.active = null; - var self = this; - // delay for the next focus event to see it as still "open" - self.timer = setTimeout(function() { - self.open = false; - }, 13); + this.open = false; }, _open: function(event, menu) { @@ -133,55 +170,63 @@ $.widget("ui.menubar", { } // almost the same as _close above, but don't remove tabIndex if (this.active) { - this.active.menu("closeAll").hide(); + this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false"); this.active.prev().removeClass("ui-state-active"); } - clearTimeout(this.timer); - this.open = true; // set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus) var button = menu.prev().addClass("ui-state-active").attr("tabIndex", -1); this.active = menu.show().position({ my: "left top", at: "left bottom", of: button - }).focus(); + }) + .removeAttr("aria-hidden").attr("aria-expanded", "true") + .menu("focus", event, menu.children("li").first()) + .focus() + .focusin() + ; + this.open = true; }, _prev: function( event, button ) { button.attr("tabIndex", -1); - var prev = button.prevAll( ".ui-button" ).eq( 0 ); + var prev = button.parent().prevAll("li").children( ".ui-button" ).eq( 0 ); if (prev.length) { prev.removeAttr("tabIndex")[0].focus(); } else { - this.element.children(".ui-button:last").removeAttr("tabIndex")[0].focus(); + var lastItem = this.element.children("li:last").children(".ui-button:last"); + lastItem.removeAttr("tabIndex")[0].focus(); } }, _next: function( event, button ) { button.attr("tabIndex", -1); - var next = button.nextAll( ".ui-button" ).eq( 0 ); + var next = button.parent().nextAll("li").children( ".ui-button" ).eq( 0 ); if (next.length) { next.removeAttr("tabIndex")[0].focus(); } else { - this.element.children(".ui-button:first").removeAttr("tabIndex")[0].focus(); + var firstItem = this.element.children("li:first").children(".ui-button:first"); + firstItem.removeAttr("tabIndex")[0].focus(); } }, _left: function(event) { - var prev = this.active.prevAll( ".ui-menu" ).eq( 0 ); + var prev = this.active.parent().prevAll("li:eq(0)").children( ".ui-menu" ).eq( 0 ); if (prev.length) { this._open(event, prev); } else { - this._open(event, this.element.children(".ui-menu:last")); + var lastItem = this.element.children("li:last").children(".ui-menu:first"); + this._open(event, lastItem); } }, _right: function(event) { - var next = this.active.nextAll( ".ui-menu" ).eq( 0 ); + var next = this.active.parent().nextAll("li:eq(0)").children( ".ui-menu" ).eq( 0 ); if (next.length) { this._open(event, next); } else { - this._open(event, this.element.children(".ui-menu:first")); + var firstItem = this.element.children("li:first").children(".ui-menu:first"); + this._open(event, firstItem); } } }); diff --git a/tests/visual/menu/popup.html b/tests/visual/menu/popup.html new file mode 100644 index 000000000..de9796133 --- /dev/null +++ b/tests/visual/menu/popup.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<html> +<head> + <title>Visual Test for Popup Utility</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> + <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.button.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> + <script type="text/javascript" src="popup.js"></script> + <!-- + <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + --> + <script type="text/javascript"> + $(function() { + $.fn.themeswitcher && $('<div/>').css({ + position: "absolute", + right: 10, + top: 10 + }).appendTo(document.body).themeswitcher(); + + var selected = { + select: function( event, ui ) { + $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); + $(this).hide(); + } + }; + + $("#button1").button(); + $("#menu1").menu(selected).popup(); + + $( "#rerun" ) + .button() + .click(function() { + alert( "Running the last action" ); + }) + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .parent() + .buttonset() + .next() + .menu(selected) + .popup({ + trigger: $("#select") + }); + + $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)"); + $("table .menubar > ul").menu(selected).popup().prev().button(); + }); + </script> + <style type="text/css"> + body { font-size:62.5%; } + + .ui-popup { position: absolute; z-index: 5000; } + .ui-menu { width: 200px; } + + table { + border-collapse: collapse; + } + th, td { + padding: 0.5em; + border: 1px solid black; + } + </style> +</head> +<body> + +<button id="button1">Show context menu 1</button> +<ul id="menu1"> + <li><a href="#">Amsterdam</a></li> + <li><a href="#">Anaheim</a></li> + <li><a href="#">Cologne</a></li> + <li><a href="#">Frankfurt</a></li> + <li><a href="#">Magdeburg</a></li> + <li><a href="#">Munich</a></li> + <li><a href="#">Utrecht</a></li> + <li><a href="#">Zurich</a></li> +</ul> + +<div> + <div> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> + </div> + <ul> + <li><a href="#">Open...</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Delete</a></li> + </ul> +</div> + +<table id="movies" class="ui-widget"> + <thead> + <tr> + <th data-field="Name" class="ui-widget-header">Name</th> + <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th> + <th data-field="AverageRating" class="ui-widget-header">Average Rating</th> + <th class="ui-widget-header"></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td> + <td class="ui-widget-content">1993</td> + <td class="ui-widget-content">3.6</td> + <td class="ui-widget-content"> + <div class="menubar"> + <a href="#">Options</a> + <ul> + <li><a href="#">Order...</a></li> + <li class="ui-state-disabled">Write a Review...</li> + <li><a href="#">Find Similar Movies...</a></li> + <li> + <a href="#">Rate</a> + <ul> + <li><a href="#">5 stars</a></li> + <li><a href="#">4 stars</a></li> + <li><a href="#">3 stars</a></li> + <li><a href="#">2 stars</a></li> + <li><a href="#">1 stars</a></li> + </ul> + </li> + </ul> + </div> + </td> + </tr> + <tr> + <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td> + <td class="ui-widget-content">1991</td> + <td class="ui-widget-content">3.1</td> + </tr> + <tr> + <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td> + <td class="ui-widget-content">1991</td> + <td class="ui-widget-content">3.9</td> + </tr> + <tr> + <td class="ui-widget-content">Spike and Mike's Sick & Twisted Festival of Animation</td> + <td class="ui-widget-content">1997</td> + <td class="ui-widget-content">2.6</td> + </tr> + </tbody> +</table> + +<div class="ui-widget" style="margin-top:2em; font-family:Arial"> + Log: + <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> +</div> + +</body> +</html> diff --git a/tests/visual/menu/popup.js b/tests/visual/menu/popup.js new file mode 100644 index 000000000..f57cba699 --- /dev/null +++ b/tests/visual/menu/popup.js @@ -0,0 +1,124 @@ +/* + * jQuery UI popup utility + */ +(function($) { + +var idIncrement = 0; + +$.widget( "ui.popup", { + options: { + position: { + my: "left top", + at: "left bottom" + } + }, + _create: function() { + if ( !this.options.trigger ) { + this.options.trigger = this.element.prev(); + } + + if ( !this.element.attr( "id" ) ) { + this.element.attr( "id", "ui-popup-" + idIncrement++ ); + this.generatedId = true; + } + + if ( !this.element.attr( "role" ) ) { + // TODO alternatives to tooltip are dialog and menu, all three aren't generic popups + this.element.attr( "role", "tooltip" ); + this.generatedRole = true; + } + + this.options.trigger + .attr( "aria-haspopup", true ) + .attr( "aria-owns", this.element.attr( "id" ) ); + + this.element + .addClass("ui-popup") + this._close(); + + this._bind(this.options.trigger, { + click: function( event ) { + event.preventDefault(); + var that = this; + setTimeout(function() { + that._open( event ); + }, 1); + } + }); + + this._bind(this.element, { + blur: "_close" + }); + + this._bind({ + keyup: function( event ) { + if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) { + this._close( event ); + this.options.trigger.focus(); + } + } + }); + + this._bind(document, { + click: function( event ) { + if (this.open && !$(event.target).closest(".ui-popup").length) { + this._close( event ); + } + } + }) + }, + + _destroy: function() { + this.element + .show() + .removeClass( "ui-popup" ) + .removeAttr( "aria-hidden" ) + .removeAttr( "aria-expanded" ); + + this.options.trigger + .removeAttr( "aria-haspopup" ) + .removeAttr( "aria-owns" ); + + if ( this.generatedId ) { + this.element.removeAttr( "id" ); + } + if ( this.generatedRole ) { + this.element.removeAttr( "role" ); + } + }, + + _open: function( event ) { + var position = $.extend( {}, { + of: this.options.trigger + }, this.options.position ); + + this.element + .show() + .attr( "aria-hidden", false ) + .attr( "aria-expanded", true ) + .position( position ) + .focus(); + + // take trigger out of tab order to allow shift-tab to skip trigger + this.options.trigger.attr("tabindex", -1); + + this.open = true; + this._trigger( "open", event ); + }, + + _close: function( event ) { + this.element + .hide() + .attr( "aria-hidden", true ) + .attr( "aria-expanded", false ); + + this.options.trigger.attr("tabindex", 0); + + this.open = false; + this._trigger( "close", event ); + } + + +}); + +}(jQuery)); diff --git a/tests/visual/sortable/sortable_ticket_4551.html b/tests/visual/sortable/sortable_ticket_4551.html deleted file mode 100644 index 2b83ae42e..000000000 --- a/tests/visual/sortable/sortable_ticket_4551.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Sortable Visual Test : Sortable ticket #4551</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <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.mouse.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript"> - $(function() { - $("#first, #second").sortable({ - connectWith: '.sortable' - }).disableSelection(); - }); - </script> - <style type="text/css"> - .sortable { margin: 0; padding: 0; } - .sortable div { margin: 3px 3px 3px 0; background: #ccc; padding: 1px; border: 1px solid black; float:left; width: 100px; height: 140px; font-size: 1em; text-align: center; } - #second div { background: #acc; } - </style> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4551">#4551 - Sortable connectWith fails if item is floated</a></h1> - -<div id="first" class="sortable"> - <div>1</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> - <div>6</div> - <div>7</div> - <div>8</div> - <div>9</div> - <div>10</div> - <div>11</div> - <div>12</div> -</div> - -<br style="clear:both;"> -<hr /> - -<div id="second" class="sortable"> - <div>12</div> - <div>14</div> -</div> - -</body> -</html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 538b43804..70c850b60 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -10,7 +10,9 @@ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> + <!-- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + --> <script type="text/javascript"> $(function() { $.fn.themeswitcher && $('<div/>').css({ @@ -18,20 +20,22 @@ right: 10, top: 10 }).appendTo(document.body).themeswitcher(); - + function enable() { // default $("#context1, form, #childish").tooltip(); // custom class, replaces ui-widget-content - $("#context2").tooltip().each(function() { - $(this).tooltip("widget").addClass("ui-widget-header"); - }) - $("#right1").tooltip().tooltip("widget").addClass("ui-state-error"); + $("#context2").tooltip({ + tooltipClass: "ui-widget-header" + }); + $("#right1").tooltip({ + tooltipClass: "ui-state-error" + }); // synchronous content $("#footnotes").tooltip({ - items: "[href^=#]", + items: "[href^='#']", content: function() { return $($(this).attr("href")).html(); } @@ -64,12 +68,13 @@ // custom position $("#right2").tooltip({ + tooltipClass: "ui-state-highlight", position: { my: "center top", at: "center bottom", offset: "0 10" } - }).tooltip("widget").addClass("ui-state-highlight"); + }); $("#button1").button(); $("#button2").button({ @@ -94,12 +99,12 @@ enable(); $("#disable").toggle(function() { - $("*").tooltip("disable"); + $(":ui-tooltip").tooltip("disable"); }, function() { - $("*").tooltip("enable"); + $(":ui-tooltip").tooltip("enable"); }); $("#toggle").toggle(function() { - $("*").tooltip("destroy"); + $(":ui-tooltip").tooltip("destroy"); }, function() { enable(); }); |