diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 437e52ab1d2..f8898094dc8 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -58,7 +58,9 @@ source: $.proxy( this, "_source" ) }) .tooltip({ - tooltipClass: "ui-state-highlight" + classes: { + "ui-tooltip": "ui-state-highlight" + } }); this._on( this.input, { diff --git a/tests/unit/accordion/accordion_common.js b/tests/unit/accordion/accordion_common.js index ef24cf25ec5..dc2d5395f06 100644 --- a/tests/unit/accordion/accordion_common.js +++ b/tests/unit/accordion/accordion_common.js @@ -2,6 +2,16 @@ TestHelpers.commonWidgetTests( "accordion", { defaults: { active: 0, animate: {}, + classes: { + "ui-accordion": "", + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": "", + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": "", + "ui-accordion-header-icon": "", + "ui-accordion-icons": "" + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 8e0175aeb93..0674275b0a1 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -7,15 +7,23 @@ module( "accordion: core", setupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { test( "markup structure: " + type, function() { - expect( 4 ); - var element = $( selector ).accordion(); - ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); - equal( element.find( ".ui-accordion-header" ).length, 3, + expect( 8 ); + var element = $( selector ).accordion(), + headers = element.find( ".ui-accordion-header" ), + panels = element.find( ".ui-accordion-content" ); + + ok( element.is( ".ui-accordion.ui-widget" ), "main has proper classes" ); + ok( headers.hasClass( "ui-corner-top" ), "header is .ui-corner-top" ); + ok( !headers.eq( 0 ).hasClass( "ui-corner-all" ), "open header is not .ui-corner-all" ); + ok( headers.eq( 1 ).hasClass( "ui-corner-all" ), "closed header is .ui-corner-all" ); + ok( headers.next().is( ".ui-accordion-content.ui-widget-content.ui-corner-bottom" ), + "panel has proper classes" ); + + equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" ); - equal( element.find( ".ui-accordion-content" ).length, 3, + equal( panels.length, 3, ".ui-accordion-content elements exist, correct number" ); - deepEqual( element.find( ".ui-accordion-header" ).next().get(), - element.find( ".ui-accordion-content" ).get(), + deepEqual( headers.next().get(), panels.get(), "content panels come immediately after headers" ); }); }); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index 1e809b310c2..f89ab1c458b 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -7,10 +7,17 @@ var equalHeight = TestHelpers.accordion.equalHeight, module( "accordion: methods", setupTeardown() ); test( "destroy", function() { - expect( 1 ); + expect( 2 ); domEqual( "#list1", function() { $( "#list1" ).accordion().accordion( "destroy" ); }); + + // Animate + domEqual( "#list1", function() { + $( "#list1" ).accordion() + .accordion( "option", "active", 1 ) + .accordion( "destroy" ); + }); }); test( "enable/disable", function() { diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index 63b24d384b9..4e3fbb7c7d1 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/autocomplete_common.js @@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "autocomplete", { defaults: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, disabled: false, messages: { diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index fa3f9abb072..ffdc737acee 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -2,6 +2,15 @@ module( "autocomplete: core" ); +test( "markup structure", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete(), + menu = element.autocomplete( "widget" ); + + ok( element.hasClass( "ui-autocomplete-input" ), "main element is .ui-autocomplete-input" ); + ok( menu.hasClass( "ui-autocomplete" ), "menu is .ui-autocomplete" ); +}); + test( "prevent form submit on enter when menu is active", function() { expect( 2 ); var event, diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index 6f39f7b8afd..adf8d5440e6 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -5,6 +5,9 @@ jQuery UI Dialog Test Suite + diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js index fc10fabaab6..6935c8d7545 100644 --- a/tests/unit/dialog/dialog_common.js +++ b/tests/unit/dialog/dialog_common.js @@ -3,10 +3,22 @@ TestHelpers.commonWidgetTests( "dialog", { appendTo: "body", autoOpen: true, buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-content": "", + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": "", + "ui-dialog-title": "", + "ui-dialog-buttons": "", + "ui-dialog-buttonpane": "", + "ui-dialog-buttonset": "", + "ui-dialog-dragging": "", + "ui-dialog-resizing": "", + "ui-widget-overlay": "" + }, closeOnEscape: true, closeText: "Close", disabled: false, - dialogClass: "", draggable: true, height: "auto", hide: null, diff --git a/tests/unit/dialog/dialog_common_deprecated.js b/tests/unit/dialog/dialog_common_deprecated.js new file mode 100644 index 00000000000..8a21043ca4b --- /dev/null +++ b/tests/unit/dialog/dialog_common_deprecated.js @@ -0,0 +1,56 @@ +TestHelpers.commonWidgetTests( "dialog", { + defaults: { + appendTo: "body", + autoOpen: true, + buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-content": "", + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": "", + "ui-dialog-title": "", + "ui-dialog-buttons": "", + "ui-dialog-buttonpane": "", + "ui-dialog-buttonset": "", + "ui-dialog-dragging": "", + "ui-dialog-resizing": "", + "ui-widget-overlay": "" + }, + closeOnEscape: true, + closeText: "close", + dialogClass: "", + disabled: false, + draggable: true, + height: "auto", + hide: null, + maxHeight: null, + maxWidth: null, + 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, + title: null, + width: 300, + + // callbacks + beforeClose: null, + close: null, + create: null, + drag: null, + dragStart: null, + dragStop: null, + focus: null, + open: null, + resize: null, + resizeStart: null, + resizeStop: null + } +}); diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js index d72fef7b5bf..9b101dbb1cb 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -7,6 +7,37 @@ // TODO add teardown callback to remove dialogs module("dialog: core"); +test( "markup structure", function() { + expect( 7 ); + var element = $("
").dialog({ + buttons: [{ + text: "Ok", + click: $.noop + }] + }), + widget = element.dialog( "widget" ), + titlebar = widget.find( ".ui-dialog-titlebar" ), + close = titlebar.find( "button" ), + buttonpane = widget.find( ".ui-dialog-buttonpane" ); + + ok( widget.is( ".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-dialog-buttons" ), + "Widget has proper classes" ); + + ok( titlebar.is( ".ui-dialog-titlebar.ui-corner-all.ui-widget-header"), + "Titlebar has proper classes"); + + ok( titlebar.find( ".ui-dialog-title" ).length, "Title is .ui-dialog-title" ); + + ok( close.hasClass( "ui-dialog-titlebar-close" ), "Close button is .ui-dialog-titlebar-close" ); + + ok( element.is( ".ui-dialog-content.ui-widget-content" ), "Element is .ui-widget-content" ); + + ok( buttonpane.is( ".ui-dialog-buttonpane.ui-widget-content" ), + "Buttonpane is .ui-widget-content" ); + ok( buttonpane.find( ".ui-dialog-buttonset" ).length, "buttonset is .ui-dialog-buttonset" ); + +}); + test("title id", function() { expect(1); diff --git a/tests/unit/dialog/dialog_deprecated.html b/tests/unit/dialog/dialog_deprecated.html new file mode 100644 index 00000000000..8cf1f5cf614 --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.html @@ -0,0 +1,65 @@ + + + + + jQuery UI Dialog Test Suite + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
...
+
+ Please share some personal information + + +
+
+

Some more (optional) information

+ +
+
+
+
+
+ + diff --git a/tests/unit/dialog/dialog_deprecated.js b/tests/unit/dialog/dialog_deprecated.js new file mode 100644 index 00000000000..5e0093e05dc --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.js @@ -0,0 +1,31 @@ +/* + * dialog_deprecated.js + */ +(function( $ ) { + +module( "dialog (deprecated): options" ); + +test( "dialogClass", function() { + expect( 6 ); + + var element = $( "
" ).dialog(), + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" ); + element.remove(); + + element = $( "
" ).dialog({ dialogClass: "foo" }); + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), true, "dialogClass in init. foo class added"); + element.dialog( "option", "dialogClass", "foobar" ); + equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" ); + equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" ); + element.remove(); + + element = $( "
" ).dialog({ dialogClass: "foo bar" }); + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" ); + equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" ); + element.remove(); +}); + +})( jQuery ); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index 3e5444c67e2..77ca09703a7 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -224,26 +224,6 @@ test("closeText", function() { element.remove(); }); -test("dialogClass", function() { - expect( 6 ); - - var element = $("
").dialog(); - equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added"); - element.remove(); - - element = $("
").dialog({ dialogClass: "foo" }); - equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added"); - element.dialog( "option", "dialogClass", "foobar" ); - equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" ); - equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" ); - element.remove(); - - element = $("
").dialog({ dialogClass: "foo bar" }); - equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added"); - equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added"); - element.remove(); -}); - test("draggable", function() { expect(4); diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index ae0ab988785..2c11f239121 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -1,5 +1,13 @@ TestHelpers.commonWidgetTests( "menu", { defaults: { + classes: { + "ui-menu": "", + "ui-menu-icons": "", + "ui-menu-icon": "", + "ui-menu-item": "", + "ui-menu-item-wrapper": "", + "ui-menu-divider": "" + }, disabled: false, icons: { submenu: "ui-icon-caret-1-e" diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index f02f97fca50..68971549858 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -5,7 +5,7 @@ module( "menu: core" ); test( "markup structure", function() { expect( 6 ); var element = $( "#menu1" ).menu(); - ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" ); + ok( element.hasClass( "ui-menu" ), "main element has proper classes" ); element.children().each(function( index ) { ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" ); }); diff --git a/tests/unit/progressbar/progressbar_common.js b/tests/unit/progressbar/progressbar_common.js index 0768576f568..8bc1ab710cc 100644 --- a/tests/unit/progressbar/progressbar_common.js +++ b/tests/unit/progressbar/progressbar_common.js @@ -1,5 +1,12 @@ TestHelpers.commonWidgetTests( "progressbar", { defaults: { + classes: { + "ui-progressbar": "ui-corner-all", + "ui-progressbar-value": "ui-corner-left", + "ui-progressbar-overlay": "", + "ui-progressbar-indeterminate": "", + "ui-progressbar-complete": "ui-corner-right" + }, disabled: false, max: 100, value: 0, diff --git a/tests/unit/progressbar/progressbar_core.js b/tests/unit/progressbar/progressbar_core.js index 8f4a138ce9c..7f0fc3a4723 100644 --- a/tests/unit/progressbar/progressbar_core.js +++ b/tests/unit/progressbar/progressbar_core.js @@ -1,23 +1,30 @@ module( "progressbar: core" ); test( "markup structure", function() { - expect( 5 ); - var element = $( "#progressbar" ).progressbar(); - ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" ); + expect( 7 ); + var element = $( "#progressbar" ).progressbar(), + value = element.children().eq( 0 ); + ok( element.is( ".ui-progressbar.ui-widget.ui-widget-content.ui-corner-all" ), + "main element has proper classes" ); + ok( !value.is( ".ui-progressbar-complete.ui-corner-right" ), + "value does not have ui-corner-right or ui-progressbar-complete" ); + element.progressbar( "option", "value", 100 ); + ok( value.is( ".ui-progressbar-complete.ui-corner-right.ui-corner-left.ui-widget-header" ), + "value has proper classes" ); + ok( !element.hasClass( "ui-progressbar-indeterminate" ), "main element is not .ui-progressbar-indeterminate" ); equal( element.children().length, 1, "main element contains one child" ); - ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ), + ok( element.children().eq( 0 ).is( ".ui-progressbar-value" ), "child is .ui-progressbar-value" ); equal( element.children().children().length, 0, "no overlay div" ); }); test( "markup structure - indeterminate", function() { - expect( 5 ); + expect( 4 ); var element = $( "#progressbar" ).progressbar({ value: false }); - ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" ); - ok( element.hasClass( "ui-progressbar-indeterminate" ), - "main element is .ui-progressbar-indeterminate" ); + ok( element.is( ".ui-progressbar.ui-progressbar-indeterminate" ), + "main element has proper classes" ); equal( element.children().length, 1, "main element contains one child" ); ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ), "child is .ui-progressbar-value" ); diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/selectmenu_common.js index 10073fe97be..2d3e869fdee 100644 --- a/tests/unit/selectmenu/selectmenu_common.js +++ b/tests/unit/selectmenu/selectmenu_common.js @@ -1,6 +1,15 @@ TestHelpers.commonWidgetTests( "selectmenu", { defaults: { appendTo: null, + classes: { + "ui-selectmenu-button": "", + "ui-selectmenu-button-open": "ui-corner-top", + "ui-selectmenu-button-closed": "ui-corner-all", + "ui-selectmenu-text": "", + "ui-selectmenu-menu": "", + "ui-selectmenu-optgroup": "", + "ui-selectmenu-open": "" + }, disabled: null, icons: { button: "ui-icon-triangle-1-s" diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index b4efb80f2fb..90574a4777c 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -2,6 +2,21 @@ module( "selectmenu: core" ); +test( "markup structure", function() { + var element = $( "#files" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + menuWrap = menu.parent(); + + expect( 4 ); + ok( button.is( ".ui-selectmenu-button.ui-selectmenu-button-closed.ui-widget.ui-state-default" ), + "button has proper classes" ); + ok( !button.hasClass( "ui-selectmenu-button-open" ), "button is not .ui-selectmenu-button-open" ); + + ok( menuWrap.hasClass( "ui-selectmenu-menu" ), "menu is .ui-selectmenu-menu" ); + ok( !menuWrap.hasClass( "ui-selectmenu-menu-open" ), "menu is not .ui-selectmenu-menu-open" ); +}); + asyncTest( "accessibility", function() { var wrappers, button, menu, element = $( "#speed" ).attr( "title", "A demo title" ); diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js index 6d7278de6a2..5457631f08d 100644 --- a/tests/unit/slider/slider_common.js +++ b/tests/unit/slider/slider_common.js @@ -1,6 +1,15 @@ TestHelpers.commonWidgetTests( "slider", { defaults: { animate: false, + classes: { + "ui-slider": "ui-corner-all", + "ui-slider-handle": "ui-corner-all", + "ui-slider-range": "ui-corner-all", + "ui-slider-range-min": "", + "ui-slider-range-max": "", + "ui-slider-horizontal": "", + "ui-slider-vertical": "" + }, cancel: "input,textarea,button,select,option", delay: 0, disabled: false, diff --git a/tests/unit/slider/slider_core.js b/tests/unit/slider/slider_core.js index 3649bded038..597f6fefbca 100644 --- a/tests/unit/slider/slider_core.js +++ b/tests/unit/slider/slider_core.js @@ -12,6 +12,21 @@ function handle() { // Slider Tests module( "slider: core" ); +test( "markup structure", function() { + expect( 3 ); + var element = $( "
" ).slider({ range: true }), + handle = element.find( "span" ), + range = element.find( "div" ); + + ok( element.is( ".ui-slider.ui-widget.ui-widget-content.ui-corner-all" ), + "main element has proper classes" ); + + ok( handle.is( ".ui-slider-handle.ui-corner-all" ), "handle has proper classes" ); + + ok( range.is( ".ui-slider-range.ui-widget-header.ui-corner-all" ), + "range has proper classes" ); +}); + test( "keydown HOME on handle sets value to min", function() { expect( 2 ); element = $( "
" ); diff --git a/tests/unit/spinner/spinner_common.js b/tests/unit/spinner/spinner_common.js index b494e3ca34d..bac05074966 100644 --- a/tests/unit/spinner/spinner_common.js +++ b/tests/unit/spinner/spinner_common.js @@ -1,5 +1,12 @@ TestHelpers.commonWidgetTests( "spinner", { defaults: { + classes: { + "ui-spinner-input": "", + "ui-spinner": "ui-corner-all", + "ui-spinner-button": "", + "ui-spinner-up": "ui-corner-tr", + "ui-spinner-down": "ui-corner-br" + }, culture: null, disabled: false, icons: { diff --git a/tests/unit/spinner/spinner_core.js b/tests/unit/spinner/spinner_core.js index 03088fecdca..076b3b8cfdd 100644 --- a/tests/unit/spinner/spinner_core.js +++ b/tests/unit/spinner/spinner_core.js @@ -4,6 +4,27 @@ var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp; module( "spinner: core" ); +test( "markup structure", function() { + expect( 9 ); + var element = $( "#spin" ).spinner(), + spinner = element.spinner( "widget" ), + up = spinner.find( ".ui-spinner-up" ), + down = spinner.find( ".ui-spinner-down" ); + + ok( element.hasClass( "ui-spinner-input" ), "input is .ui-spinner-input" ); + + ok( spinner.hasClass( "ui-spinner" ), "main element is .ui-spinner" ); + ok( spinner.hasClass( "ui-widget" ), "main element is .ui-widget" ); + ok( spinner.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" ); + ok( spinner.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" ); + + ok( up.hasClass( "ui-spinner-button" ), "up button is .ui-spinner-button" ); + ok( up.hasClass( "ui-corner-tr" ), "up button is .ui-corner-tr" ); + + ok( down.hasClass( "ui-spinner-button" ), "down button is .ui-spinner-button" ); + ok( down.hasClass( "ui-corner-br" ), "down button is .ui-corner-br" ); +}); + test( "keydown UP on input, increases value not greater than max", function() { expect( 5 ); var element = $( "#spin" ).val( 70 ).spinner({ diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js index a589515f806..e75ea420a3d 100644 --- a/tests/unit/tabs/tabs_common.js +++ b/tests/unit/tabs/tabs_common.js @@ -1,6 +1,16 @@ TestHelpers.commonWidgetTests( "tabs", { defaults: { active: null, + classes: { + "ui-tabs": "ui-corner-all", + "ui-tabs-collapsible": "", + "ui-tabs-active": "", + "ui-tabs-nav": "ui-corner-all", + "ui-tab": "ui-corner-top", + "ui-tabs-anchor": "", + "ui-tabs-panel": "ui-corner-bottom", + "ui-tabs-loading": "" + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index 2d18a6f1ab7..26f7aecf37e 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -5,11 +5,25 @@ var state = TestHelpers.tabs.state; 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, + expect( 7 ); + var element = $( "#tabs1" ).tabs(), + ul = element.find( "ul.ui-tabs-nav" ), + tabs = ul.find( "li" ), + active = tabs.eq( 0 ); + + ok( element.is( ".ui-tabs.ui-widget.ui-widget-content.ui-corner-all" ), + "main element has proper classes" ); + ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" ); + + ok( ul.is( ".ui-tabs-nav.ui-widget-header.ui-corner-all" ), "list has proper classes" ); + + ok( tabs.is( ".ui-tab.ui-corner-top.ui-state-default" ), "tabs have proper classes" ); + + ok( element.find( "a" ).hasClass( "ui-tabs-anchor" ), "link item is .ui-tabs-anchor" ); + + ok( active.is( ".ui-tabs-active.ui-state-active" ), "active item has proper classes" ); + + equal( element.find( ".ui-tabs-panel.ui-widget-content.ui-corner-bottom" ).length, 3, ".ui-tabs-panel elements exist, correct number" ); }); @@ -130,17 +144,20 @@ test( "accessibility", function() { }); asyncTest( "accessibility - ajax", function() { - expect( 4 ); + expect( 6 ); var element = $( "#tabs2" ).tabs(), + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panel = $( "#custom-id" ); equal( panel.attr( "aria-live" ), "polite", "remote panel has aria-live" ); equal( panel.attr( "aria-busy" ), null, "does not have aria-busy on init" ); element.tabs( "option", "active", 3 ); equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" ); + ok( tab.hasClass( "ui-tabs-loading" ), "tab is .ui-tabs-loading during load" ); element.one( "tabsload", function() { setTimeout(function() { equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" ); + ok( !tab.hasClass( "ui-tabs-loading" ), "tab is not .ui-tabs-loading after load" ); start(); }, 1 ); }); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index a3d663f272d..c08e9c049fe 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -15,6 +15,22 @@ test( "destroy", function() { }); }); +asyncTest( "destroy - ajax", function() { + expect( 1 ); + domEqual( "#tabs2", function( done ) { + var element = $( "#tabs2" ).tabs({ + load: function() { + setTimeout(function() { + element.tabs( "destroy" ); + done(); + start(); + }); + } + }); + element.tabs( "option", "active", 2 ); + }); +}); + test( "enable", function() { expect( 8 ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index a9632481e8f..8d35eba9357 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -123,12 +123,13 @@ test( "{ collapsible: false }", function() { }); test( "{ collapsible: true }", function() { - expect( 6 ); + expect( 9 ); var element = $( "#tabs1" ).tabs({ active: 1, collapsible: true }); + ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" ); element.tabs( "option", "active", false ); equal( element.tabs( "option", "active" ), false ); @@ -141,6 +142,12 @@ test( "{ collapsible: true }", function() { element.find( ".ui-state-active .ui-tabs-anchor" ).click(); equal( element.tabs( "option", "active" ), false ); state( element, 0, 0, 0 ); + + element.tabs( "option", "collapsible", false ); + ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" ); + + element.tabs( "option", "collapsible", true ); + ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" ); }); test( "disabled", function() { diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index 18bd88c2c98..41babc0a004 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -5,6 +5,9 @@ jQuery UI Tooltip Test Suite + diff --git a/tests/unit/tooltip/tooltip_common.js b/tests/unit/tooltip/tooltip_common.js index 2d6ea91eccd..67f4d0f1b71 100644 --- a/tests/unit/tooltip/tooltip_common.js +++ b/tests/unit/tooltip/tooltip_common.js @@ -1,6 +1,10 @@ TestHelpers.commonWidgetTests( "tooltip", { defaults: { content: function() {}, + classes: { + "ui-tooltip": "ui-corner-all", + "ui-tooltip-content": "" + }, disabled: false, hide: true, items: "[title]:not([disabled])", @@ -10,7 +14,6 @@ TestHelpers.commonWidgetTests( "tooltip", { collision: "flipfit flip" }, show: true, - tooltipClass: null, track: false, // callbacks diff --git a/tests/unit/tooltip/tooltip_common_deprecated.js b/tests/unit/tooltip/tooltip_common_deprecated.js new file mode 100644 index 00000000000..49dafd7c61b --- /dev/null +++ b/tests/unit/tooltip/tooltip_common_deprecated.js @@ -0,0 +1,25 @@ +TestHelpers.commonWidgetTests( "tooltip", { + defaults: { + classes: { + "ui-tooltip": "ui-corner-all", + "ui-tooltip-content": "" + }, + content: function() {}, + disabled: false, + hide: true, + items: "[title]:not([disabled])", + position: { + my: "left top+15", + at: "left bottom", + collision: "flipfit flip" + }, + show: true, + tooltipClass: null, + track: false, + + // callbacks + close: null, + create: null, + open: null + } +}); diff --git a/tests/unit/tooltip/tooltip_deprecated.html b/tests/unit/tooltip/tooltip_deprecated.html new file mode 100644 index 00000000000..20ff3d83bb3 --- /dev/null +++ b/tests/unit/tooltip/tooltip_deprecated.html @@ -0,0 +1,52 @@ + + + + + jQuery UI Tooltip Test Suite + + + + + + + + + + + + + + + + + + + +
+
+ +
+ anchor + + aria-describedby + span + baz +
+ +
+ +
+ +
+ + diff --git a/tests/unit/tooltip/tooltip_deprecated.js b/tests/unit/tooltip/tooltip_deprecated.js new file mode 100644 index 00000000000..abd24f2e61a --- /dev/null +++ b/tests/unit/tooltip/tooltip_deprecated.js @@ -0,0 +1,16 @@ +/* + * dialog_deprecated.js + */ +(function( $ ) { + +module( "tooltip: (deprecated) options" ); + +test( "tooltipClass", function() { + expect( 1 ); + var element = $( "#tooltipped1" ).tooltip({ + tooltipClass: "custom" + }).tooltip( "open" ); + ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); +}); + +}( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index 17f0a423775..4b9d64830a7 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -120,14 +120,6 @@ test( "items", function() { element.tooltip( "destroy" ); }); -test( "tooltipClass", function() { - expect( 1 ); - var element = $( "#tooltipped1" ).tooltip({ - tooltipClass: "custom" - }).tooltip( "open" ); - ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); -}); - test( "track + show delay", function() { expect( 2 ); var event, diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 8d5364d783c..9ca69690e64 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -22,10 +22,14 @@ // custom class, replaces ui-widget-content $( "#context2" ).tooltip({ - tooltipClass: "ui-widget-header" + classes: { + "ui-tooltip": "ui-widget-header" + } }); $( "#right1" ).tooltip({ - tooltipClass: "ui-state-error" + classes: { + "ui-tooltip": "ui-state-error" + } }); // synchronous content @@ -63,7 +67,9 @@ // custom position $( "#right2" ).tooltip({ - tooltipClass: "ui-state-highlight", + classes: { + "ui-tooltip" : "ui-corner-all ui-state-highlight" + }, position: { my: "center top", at: "center bottom+10" diff --git a/ui/accordion.js b/ui/accordion.js index 94643719731..a76de1e34eb 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -29,6 +29,16 @@ return $.widget( "ui.accordion", { options: { active: 0, animate: {}, + classes: { + "ui-accordion": "", + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": "", + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": "", + "ui-accordion-header-icon": "", + "ui-accordion-icons": "" + }, collapsible: false, event: "click", header: "> li > :first-child,> :not(li):even", @@ -62,9 +72,10 @@ return $.widget( "ui.accordion", { _create: function() { var options = this.options; this.prevShow = this.prevHide = $(); - this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ) - // ARIA - .attr( "role", "tablist" ); + this._addClass( "ui-accordion", "ui-widget ui-helper-reset" ); + + // ARIA + this.element.attr( "role", "tablist" ); // don't allow collapsible: false and active: false / null if ( !options.collapsible && (options.active === false || options.active == null) ) { @@ -87,21 +98,21 @@ return $.widget( "ui.accordion", { }, _createIcons: function() { - var icons = this.options.icons; + var icon, + icons = this.options.icons; if ( icons ) { - $( "" ) - .addClass( "ui-accordion-header-icon ui-icon " + icons.header ) - .prependTo( this.headers ); + icon = $( "" ); + this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header ); + icon.prependTo( this.headers ); this.active.children( ".ui-accordion-header-icon" ) .removeClass( icons.header ) .addClass( icons.activeHeader ); - this.headers.addClass( "ui-accordion-icons" ); + this._addClass( this.headers, "ui-accordion-icons" ); } }, _destroyIcons: function() { - this.headers - .removeClass( "ui-accordion-icons" ) + this._removeClass( this.headers, "ui-accordion-icons" ) .children( ".ui-accordion-header-icon" ) .remove(); }, @@ -110,14 +121,13 @@ return $.widget( "ui.accordion", { var contents; // clean up main element - this.element - .removeClass( "ui-accordion ui-widget ui-helper-reset" ) - .removeAttr( "role" ); + this._removeClass( "ui-accordion", "ui-widget ui-helper-reset" ); + this.element.removeAttr( "role" ); // clean up headers + this._removeClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed ui-accordion-header-active", + "ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" ); this.headers - .removeClass( "ui-accordion-header ui-accordion-header-active ui-state-default " + - "ui-corner-all ui-state-active ui-state-disabled ui-corner-top" ) .removeAttr( "role" ) .removeAttr( "aria-expanded" ) .removeAttr( "aria-selected" ) @@ -129,13 +139,13 @@ return $.widget( "ui.accordion", { // clean up content panels contents = this.headers.next() - .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom " + - "ui-accordion-content ui-accordion-content-active ui-state-disabled" ) .css( "display", "" ) .removeAttr( "role" ) .removeAttr( "aria-hidden" ) .removeAttr( "aria-labelledby" ) .removeUniqueId(); + this._removeClass( contents, "ui-accordion-content ui-accordion-content-active", + "ui-helper-reset ui-widget-content ui-state-disabled" ); if ( this.options.heightStyle !== "content" ) { contents.css( "height", "" ); @@ -262,13 +272,13 @@ return $.widget( "ui.accordion", { var prevHeaders = this.headers, prevPanels = this.panels; - this.headers = this.element.find( this.options.header ) - .addClass( "ui-accordion-header ui-state-default ui-corner-all" ); + this.headers = this.element.find( this.options.header ); + this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed", + "ui-state-default" ); - this.panels = this.headers.next() - .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ) - .filter( ":not(.ui-accordion-content-active)" ) - .hide(); + this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide(); + this._addClass( this.panels, "ui-accordion-content", + "ui-helper-reset ui-widget-content" ); // Avoid memory leaks (#10056) if ( prevPanels ) { @@ -283,12 +293,11 @@ return $.widget( "ui.accordion", { heightStyle = options.heightStyle, parent = this.element.parent(); - this.active = this._findActive( options.active ) - .addClass( "ui-accordion-header-active ui-state-active ui-corner-top" ) - .removeClass( "ui-corner-all" ); - this.active.next() - .addClass( "ui-accordion-content-active" ) - .show(); + this.active = this._findActive( options.active ); + this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" ); + this._removeClass( this.active, "ui-accordion-header-collapsed" ); + this._addClass( this.active.next(), "ui-accordion-content-active" ); + this.active.next().show(); this.headers .attr( "role", "tab" ) @@ -440,7 +449,7 @@ return $.widget( "ui.accordion", { // switch classes // corner classes on the previously active header stay after the animation - active.removeClass( "ui-accordion-header-active ui-state-active" ); + this._removeClass( active, "ui-accordion-header-active", "ui-state-active" ); if ( options.icons ) { active.children( ".ui-accordion-header-icon" ) .removeClass( options.icons.activeHeader ) @@ -448,18 +457,15 @@ return $.widget( "ui.accordion", { } if ( !clickedIsActive ) { - clicked - .removeClass( "ui-corner-all" ) - .addClass( "ui-accordion-header-active ui-state-active ui-corner-top" ); + this._removeClass( clicked, "ui-accordion-header-collapsed" ); + this._addClass( clicked, "ui-accordion-header-active", "ui-state-active" ); if ( options.icons ) { clicked.children( ".ui-accordion-header-icon" ) .removeClass( options.icons.header ) .addClass( options.icons.activeHeader ); } - clicked - .next() - .addClass( "ui-accordion-content-active" ); + this._addClass( clicked.next(), "ui-accordion-content-active" ); } }, @@ -565,13 +571,12 @@ return $.widget( "ui.accordion", { }, _toggleComplete: function( data ) { - var toHide = data.oldPanel; + var toHide = data.oldPanel, + prev = toHide.prev(); - toHide - .removeClass( "ui-accordion-content-active" ) - .prev() - .removeClass( "ui-corner-top" ) - .addClass( "ui-corner-all" ); + this._removeClass( toHide, "ui-accordion-content-active" ); + this._removeClass( prev, "ui-accordion-header-active" ); + this._addClass( prev, "ui-accordion-header-collapsed" ); // Work around for rendering bug in IE (#5421) if ( toHide.length ) { diff --git a/ui/autocomplete.js b/ui/autocomplete.js index aa0e546334e..14a4c2e42b4 100644 --- a/ui/autocomplete.js +++ b/ui/autocomplete.js @@ -32,6 +32,11 @@ $.widget( "ui.autocomplete", { options: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, minLength: 1, position: { @@ -79,9 +84,8 @@ $.widget( "ui.autocomplete", { this.valueMethod = this.element[ isTextarea || isInput ? "val" : "text" ]; this.isNewMenu = true; - this.element - .addClass( "ui-autocomplete-input" ) - .attr( "autocomplete", "off" ); + this._addClass( "ui-autocomplete-input" ); + this.element.attr( "autocomplete", "off" ); this._on( this.element, { keydown: function( event ) { @@ -201,9 +205,7 @@ $.widget( "ui.autocomplete", { }); this._initSource(); - this.menu = $( "