diff options
author | Scott González <scott.gonzalez@gmail.com> | 2015-07-15 09:40:38 -0400 |
---|---|---|
committer | Scott González <scott.gonzalez@gmail.com> | 2015-07-15 09:40:38 -0400 |
commit | 71d8f16ad4bc60d8946cf73f4b0c0bc99840e6ab (patch) | |
tree | a48489064648b2cbb59772d8a62f4fb66496ed4f /tests | |
parent | a3df6dd8a8e363a276392acd7744f7db1e75eb61 (diff) | |
parent | de4984da244289c259e8fc8d1106898908b6ffce (diff) | |
download | jquery-ui-71d8f16ad4bc60d8946cf73f4b0c0bc99840e6ab.tar.gz jquery-ui-71d8f16ad4bc60d8946cf73f4b0c0bc99840e6ab.zip |
Merge branch 'master' into datepicker
Diffstat (limited to 'tests')
-rw-r--r-- | tests/.jshintrc | 7 | ||||
-rw-r--r-- | tests/jquery.js | 24 | ||||
-rw-r--r-- | tests/lib/bootstrap.js | 150 | ||||
-rw-r--r-- | tests/lib/common.js | 133 | ||||
-rw-r--r-- | tests/lib/css.js | 23 | ||||
-rw-r--r-- | tests/lib/helper.js | 33 | ||||
-rw-r--r-- | tests/lib/qunit-assert-domequal.js | 123 | ||||
-rw-r--r-- | tests/lib/qunit.js | 48 | ||||
-rw-r--r-- | tests/unit/accordion/accordion.html | 27 | ||||
-rw-r--r-- | tests/unit/accordion/accordion_common.js | 20 | ||||
-rw-r--r-- | tests/unit/accordion/all.html | 4 | ||||
-rw-r--r-- | tests/unit/accordion/common.js | 32 | ||||
-rw-r--r-- | tests/unit/accordion/core.js (renamed from tests/unit/accordion/accordion_core.js) | 122 | ||||
-rw-r--r-- | tests/unit/accordion/events.js (renamed from tests/unit/accordion/accordion_events.js) | 16 | ||||
-rw-r--r-- | tests/unit/accordion/helper.js (renamed from tests/unit/accordion/accordion_test_helpers.js) | 16 | ||||
-rw-r--r-- | tests/unit/accordion/methods.js (renamed from tests/unit/accordion/accordion_methods.js) | 25 | ||||
-rw-r--r-- | tests/unit/accordion/options.js (renamed from tests/unit/accordion/accordion_options.js) | 34 | ||||
-rw-r--r-- | tests/unit/all.html | 5 | ||||
-rw-r--r-- | tests/unit/autocomplete/all.html | 4 | ||||
-rw-r--r-- | tests/unit/autocomplete/autocomplete.html | 28 | ||||
-rw-r--r-- | tests/unit/autocomplete/common.js (renamed from tests/unit/autocomplete/autocomplete_common.js) | 10 | ||||
-rw-r--r-- | tests/unit/autocomplete/core.js (renamed from tests/unit/autocomplete/autocomplete_core.js) | 26 | ||||
-rw-r--r-- | tests/unit/autocomplete/events.js (renamed from tests/unit/autocomplete/autocomplete_events.js) | 33 | ||||
-rw-r--r-- | tests/unit/autocomplete/methods.js (renamed from tests/unit/autocomplete/autocomplete_methods.js) | 15 | ||||
-rw-r--r-- | tests/unit/autocomplete/options.js (renamed from tests/unit/autocomplete/autocomplete_options.js) | 29 | ||||
-rw-r--r-- | tests/unit/button/all.html | 4 | ||||
-rw-r--r-- | tests/unit/button/button.html | 26 | ||||
-rw-r--r-- | tests/unit/button/common.js (renamed from tests/unit/button/button_common.js) | 10 | ||||
-rw-r--r-- | tests/unit/button/core.js (renamed from tests/unit/button/button_core.js) | 121 | ||||
-rw-r--r-- | tests/unit/button/events.js (renamed from tests/unit/button/button_events.js) | 22 | ||||
-rw-r--r-- | tests/unit/button/methods.js (renamed from tests/unit/button/button_methods.js) | 14 | ||||
-rw-r--r-- | tests/unit/button/options.js (renamed from tests/unit/button/button_options.js) | 34 | ||||
-rw-r--r-- | tests/unit/calendar/all.html | 6 | ||||
-rw-r--r-- | tests/unit/calendar/calendar.html | 31 | ||||
-rw-r--r-- | tests/unit/calendar/common.js (renamed from tests/unit/calendar/calendar_common.js) | 11 | ||||
-rw-r--r-- | tests/unit/calendar/core.js (renamed from tests/unit/calendar/calendar_core.js) | 63 | ||||
-rw-r--r-- | tests/unit/calendar/events.js (renamed from tests/unit/calendar/calendar_events.js) | 0 | ||||
-rw-r--r-- | tests/unit/calendar/helper.js (renamed from tests/unit/calendar/calendar_test_helpers.js) | 11 | ||||
-rw-r--r-- | tests/unit/calendar/methods.js (renamed from tests/unit/calendar/calendar_methods.js) | 28 | ||||
-rw-r--r-- | tests/unit/calendar/options.js (renamed from tests/unit/calendar/calendar_options.js) | 24 | ||||
-rw-r--r-- | tests/unit/core/all.html | 4 | ||||
-rw-r--r-- | tests/unit/core/core.html | 95 | ||||
-rw-r--r-- | tests/unit/core/core.js | 77 | ||||
-rw-r--r-- | tests/unit/core/selector.js | 14 | ||||
-rw-r--r-- | tests/unit/date/all.html | 14 | ||||
-rw-r--r-- | tests/unit/date/core.js (renamed from tests/unit/date/date_core.js) | 8 | ||||
-rw-r--r-- | tests/unit/date/date.html | 29 | ||||
-rw-r--r-- | tests/unit/datepicker/all.html | 4 | ||||
-rw-r--r-- | tests/unit/datepicker/common.js (renamed from tests/unit/datepicker/datepicker_common.js) | 11 | ||||
-rw-r--r-- | tests/unit/datepicker/core.js (renamed from tests/unit/datepicker/datepicker_core.js) | 35 | ||||
-rw-r--r-- | tests/unit/datepicker/datepicker.html | 33 | ||||
-rw-r--r-- | tests/unit/datepicker/events.js (renamed from tests/unit/datepicker/datepicker_events.js) | 16 | ||||
-rw-r--r-- | tests/unit/datepicker/helper.js (renamed from tests/unit/datepicker/datepicker_test_helpers.js) | 12 | ||||
-rw-r--r-- | tests/unit/datepicker/methods.js (renamed from tests/unit/datepicker/datepicker_methods.js) | 24 | ||||
-rw-r--r-- | tests/unit/datepicker/options.js (renamed from tests/unit/datepicker/datepicker_options.js) | 22 | ||||
-rw-r--r-- | tests/unit/dialog/all.html | 4 | ||||
-rw-r--r-- | tests/unit/dialog/common-deprecated.js (renamed from tests/unit/dialog/dialog_common.js) | 15 | ||||
-rw-r--r-- | tests/unit/dialog/common.js | 53 | ||||
-rw-r--r-- | tests/unit/dialog/core.js (renamed from tests/unit/dialog/dialog_core.js) | 168 | ||||
-rw-r--r-- | tests/unit/dialog/deprecated.html | 34 | ||||
-rw-r--r-- | tests/unit/dialog/deprecated.js | 30 | ||||
-rw-r--r-- | tests/unit/dialog/dialog.html | 36 | ||||
-rw-r--r-- | tests/unit/dialog/events.js (renamed from tests/unit/dialog/dialog_events.js) | 43 | ||||
-rw-r--r-- | tests/unit/dialog/helper.js (renamed from tests/unit/dialog/dialog_test_helpers.js) | 16 | ||||
-rw-r--r-- | tests/unit/dialog/methods.js (renamed from tests/unit/dialog/dialog_methods.js) | 37 | ||||
-rw-r--r-- | tests/unit/dialog/options.js (renamed from tests/unit/dialog/dialog_options.js) | 167 | ||||
-rw-r--r-- | tests/unit/draggable/all.html | 4 | ||||
-rw-r--r-- | tests/unit/draggable/common.js (renamed from tests/unit/draggable/draggable_common.js) | 12 | ||||
-rw-r--r-- | tests/unit/draggable/core.js (renamed from tests/unit/draggable/draggable_core.js) | 103 | ||||
-rw-r--r-- | tests/unit/draggable/draggable.html | 144 | ||||
-rw-r--r-- | tests/unit/draggable/events.js (renamed from tests/unit/draggable/draggable_events.js) | 10 | ||||
-rw-r--r-- | tests/unit/draggable/helper.js (renamed from tests/unit/draggable/draggable_test_helpers.js) | 53 | ||||
-rw-r--r-- | tests/unit/draggable/methods.js (renamed from tests/unit/draggable/draggable_methods.js) | 33 | ||||
-rw-r--r-- | tests/unit/draggable/options.js (renamed from tests/unit/draggable/draggable_options.js) | 272 | ||||
-rw-r--r-- | tests/unit/droppable/all.html | 4 | ||||
-rw-r--r-- | tests/unit/droppable/common-deprecated.js (renamed from tests/unit/droppable/droppable_common.js) | 10 | ||||
-rw-r--r-- | tests/unit/droppable/common.js | 26 | ||||
-rw-r--r-- | tests/unit/droppable/core.js (renamed from tests/unit/droppable/droppable_core.js) | 14 | ||||
-rw-r--r-- | tests/unit/droppable/deprecated.html | 23 | ||||
-rw-r--r-- | tests/unit/droppable/deprecated.js | 1 | ||||
-rw-r--r-- | tests/unit/droppable/droppable.html | 30 | ||||
-rw-r--r-- | tests/unit/droppable/events.js (renamed from tests/unit/droppable/droppable_events.js) | 11 | ||||
-rw-r--r-- | tests/unit/droppable/helper.js (renamed from tests/unit/droppable/droppable_test_helpers.js) | 12 | ||||
-rw-r--r-- | tests/unit/droppable/methods.js (renamed from tests/unit/droppable/droppable_methods.js) | 33 | ||||
-rw-r--r-- | tests/unit/droppable/options.js (renamed from tests/unit/droppable/droppable_options.js) | 25 | ||||
-rw-r--r-- | tests/unit/effects/all.html | 4 | ||||
-rw-r--r-- | tests/unit/effects/core.js (renamed from tests/unit/effects/effects_core.js) | 56 | ||||
-rw-r--r-- | tests/unit/effects/effects.html | 34 | ||||
-rw-r--r-- | tests/unit/effects/scale.js (renamed from tests/unit/effects/effects_scale.js) | 14 | ||||
-rw-r--r-- | tests/unit/form-reset-mixin/all.html | 26 | ||||
-rw-r--r-- | tests/unit/form-reset-mixin/core.js | 95 | ||||
-rw-r--r-- | tests/unit/form-reset-mixin/form-reset-mixin.html | 26 | ||||
-rw-r--r-- | tests/unit/menu/all.html | 4 | ||||
-rw-r--r-- | tests/unit/menu/common.js (renamed from tests/unit/menu/menu_common.js) | 10 | ||||
-rw-r--r-- | tests/unit/menu/core.js (renamed from tests/unit/menu/menu_core.js) | 44 | ||||
-rw-r--r-- | tests/unit/menu/events.js (renamed from tests/unit/menu/menu_events.js) | 114 | ||||
-rw-r--r-- | tests/unit/menu/helper.js (renamed from tests/unit/menu/menu_test_helpers.js) | 11 | ||||
-rw-r--r-- | tests/unit/menu/menu.html | 41 | ||||
-rw-r--r-- | tests/unit/menu/methods.js (renamed from tests/unit/menu/menu_methods.js) | 44 | ||||
-rw-r--r-- | tests/unit/menu/options.js (renamed from tests/unit/menu/menu_options.js) | 60 | ||||
-rw-r--r-- | tests/unit/position/all.html | 4 | ||||
-rw-r--r-- | tests/unit/position/core.js (renamed from tests/unit/position/position_core.js) | 10 | ||||
-rw-r--r-- | tests/unit/position/position.html | 36 | ||||
-rw-r--r-- | tests/unit/progressbar/all.html | 4 | ||||
-rw-r--r-- | tests/unit/progressbar/common.js | 24 | ||||
-rw-r--r-- | tests/unit/progressbar/core.js | 64 | ||||
-rw-r--r-- | tests/unit/progressbar/events.js (renamed from tests/unit/progressbar/progressbar_events.js) | 7 | ||||
-rw-r--r-- | tests/unit/progressbar/methods.js (renamed from tests/unit/progressbar/progressbar_methods.js) | 17 | ||||
-rw-r--r-- | tests/unit/progressbar/options.js (renamed from tests/unit/progressbar/progressbar_options.js) | 7 | ||||
-rw-r--r-- | tests/unit/progressbar/progressbar.html | 26 | ||||
-rw-r--r-- | tests/unit/progressbar/progressbar_common.js | 12 | ||||
-rw-r--r-- | tests/unit/progressbar/progressbar_core.js | 53 | ||||
-rw-r--r-- | tests/unit/qunit-composite.css | 13 | ||||
-rw-r--r-- | tests/unit/qunit-composite.js | 112 | ||||
-rw-r--r-- | tests/unit/resizable/all.html | 4 | ||||
-rw-r--r-- | tests/unit/resizable/common.js (renamed from tests/unit/resizable/resizable_common.js) | 14 | ||||
-rw-r--r-- | tests/unit/resizable/core.js (renamed from tests/unit/resizable/resizable_core.js) | 60 | ||||
-rw-r--r-- | tests/unit/resizable/events.js (renamed from tests/unit/resizable/resizable_events.js) | 29 | ||||
-rw-r--r-- | tests/unit/resizable/helper.js (renamed from tests/unit/resizable/resizable_test_helpers.js) | 11 | ||||
-rw-r--r-- | tests/unit/resizable/methods.js (renamed from tests/unit/resizable/resizable_methods.js) | 16 | ||||
-rw-r--r-- | tests/unit/resizable/options.js (renamed from tests/unit/resizable/resizable_options.js) | 160 | ||||
-rw-r--r-- | tests/unit/resizable/resizable.html | 30 | ||||
-rw-r--r-- | tests/unit/selectable/all.html | 4 | ||||
-rw-r--r-- | tests/unit/selectable/common.js (renamed from tests/unit/selectable/selectable_common.js) | 12 | ||||
-rw-r--r-- | tests/unit/selectable/core.js (renamed from tests/unit/selectable/selectable_core.js) | 0 | ||||
-rw-r--r-- | tests/unit/selectable/events.js (renamed from tests/unit/selectable/selectable_events.js) | 13 | ||||
-rw-r--r-- | tests/unit/selectable/methods.js (renamed from tests/unit/selectable/selectable_methods.js) | 17 | ||||
-rw-r--r-- | tests/unit/selectable/options.js (renamed from tests/unit/selectable/selectable_options.js) | 10 | ||||
-rw-r--r-- | tests/unit/selectable/selectable.html | 27 | ||||
-rw-r--r-- | tests/unit/selectmenu/all.html | 4 | ||||
-rw-r--r-- | tests/unit/selectmenu/common.js (renamed from tests/unit/selectmenu/selectmenu_common.js) | 15 | ||||
-rw-r--r-- | tests/unit/selectmenu/core.js (renamed from tests/unit/selectmenu/selectmenu_core.js) | 30 | ||||
-rw-r--r-- | tests/unit/selectmenu/events.js (renamed from tests/unit/selectmenu/selectmenu_events.js) | 7 | ||||
-rw-r--r-- | tests/unit/selectmenu/methods.js (renamed from tests/unit/selectmenu/selectmenu_methods.js) | 26 | ||||
-rw-r--r-- | tests/unit/selectmenu/options.js (renamed from tests/unit/selectmenu/selectmenu_options.js) | 33 | ||||
-rw-r--r-- | tests/unit/selectmenu/selectmenu.html | 28 | ||||
-rw-r--r-- | tests/unit/slider/all.html | 4 | ||||
-rw-r--r-- | tests/unit/slider/common.js | 35 | ||||
-rw-r--r-- | tests/unit/slider/core.js (renamed from tests/unit/slider/slider_core.js) | 22 | ||||
-rw-r--r-- | tests/unit/slider/events.js (renamed from tests/unit/slider/slider_events.js) | 86 | ||||
-rw-r--r-- | tests/unit/slider/methods.js (renamed from tests/unit/slider/slider_methods.js) | 53 | ||||
-rw-r--r-- | tests/unit/slider/options.js (renamed from tests/unit/slider/slider_options.js) | 77 | ||||
-rw-r--r-- | tests/unit/slider/slider.html | 38 | ||||
-rw-r--r-- | tests/unit/slider/slider_common.js | 23 | ||||
-rw-r--r-- | tests/unit/sortable/all.html | 4 | ||||
-rw-r--r-- | tests/unit/sortable/common.js (renamed from tests/unit/sortable/sortable_common.js) | 12 | ||||
-rw-r--r-- | tests/unit/sortable/core.js | 42 | ||||
-rw-r--r-- | tests/unit/sortable/events.js (renamed from tests/unit/sortable/sortable_events.js) | 16 | ||||
-rw-r--r-- | tests/unit/sortable/helper.js (renamed from tests/unit/sortable/sortable_test_helpers.js) | 11 | ||||
-rw-r--r-- | tests/unit/sortable/methods.js (renamed from tests/unit/sortable/sortable_methods.js) | 29 | ||||
-rw-r--r-- | tests/unit/sortable/options.js (renamed from tests/unit/sortable/sortable_options.js) | 54 | ||||
-rw-r--r-- | tests/unit/sortable/sortable.html | 81 | ||||
-rw-r--r-- | tests/unit/sortable/sortable_core.js | 40 | ||||
-rw-r--r-- | tests/unit/spinner/all.html | 4 | ||||
-rw-r--r-- | tests/unit/spinner/common-deprecated.js (renamed from tests/unit/spinner/spinner_common.js) | 14 | ||||
-rw-r--r-- | tests/unit/spinner/common.js | 35 | ||||
-rw-r--r-- | tests/unit/spinner/core.js (renamed from tests/unit/spinner/spinner_core.js) | 33 | ||||
-rw-r--r-- | tests/unit/spinner/deprecated.html | 21 | ||||
-rw-r--r-- | tests/unit/spinner/deprecated.js | 41 | ||||
-rw-r--r-- | tests/unit/spinner/events.js (renamed from tests/unit/spinner/spinner_events.js) | 34 | ||||
-rw-r--r-- | tests/unit/spinner/helper.js (renamed from tests/unit/spinner/spinner_test_helpers.js) | 11 | ||||
-rw-r--r-- | tests/unit/spinner/methods.js (renamed from tests/unit/spinner/spinner_methods.js) | 29 | ||||
-rw-r--r-- | tests/unit/spinner/options.js (renamed from tests/unit/spinner/spinner_options.js) | 33 | ||||
-rw-r--r-- | tests/unit/spinner/spinner.html | 30 | ||||
-rw-r--r-- | tests/unit/subsuite.js | 3 | ||||
-rw-r--r-- | tests/unit/swarminject.js | 10 | ||||
-rw-r--r-- | tests/unit/tabs/all.html | 4 | ||||
-rw-r--r-- | tests/unit/tabs/common.js (renamed from tests/unit/tabs/tabs_common.js) | 15 | ||||
-rw-r--r-- | tests/unit/tabs/core.js (renamed from tests/unit/tabs/tabs_core.js) | 155 | ||||
-rw-r--r-- | tests/unit/tabs/events.js (renamed from tests/unit/tabs/tabs_events.js) | 18 | ||||
-rw-r--r-- | tests/unit/tabs/helper.js (renamed from tests/unit/tabs/tabs_test_helpers.js) | 12 | ||||
-rw-r--r-- | tests/unit/tabs/methods.js (renamed from tests/unit/tabs/tabs_methods.js) | 38 | ||||
-rw-r--r-- | tests/unit/tabs/options.js (renamed from tests/unit/tabs/tabs_options.js) | 81 | ||||
-rw-r--r-- | tests/unit/tabs/tabs.html | 27 | ||||
-rw-r--r-- | tests/unit/testsuite.js | 341 | ||||
-rw-r--r-- | tests/unit/tooltip/all.html | 4 | ||||
-rw-r--r-- | tests/unit/tooltip/common-deprecated.js (renamed from tests/unit/tooltip/tooltip_common.js) | 12 | ||||
-rw-r--r-- | tests/unit/tooltip/common.js | 30 | ||||
-rw-r--r-- | tests/unit/tooltip/core.js (renamed from tests/unit/tooltip/tooltip_core.js) | 51 | ||||
-rw-r--r-- | tests/unit/tooltip/deprecated.html | 30 | ||||
-rw-r--r-- | tests/unit/tooltip/deprecated.js | 16 | ||||
-rw-r--r-- | tests/unit/tooltip/events.js (renamed from tests/unit/tooltip/tooltip_events.js) | 15 | ||||
-rw-r--r-- | tests/unit/tooltip/methods.js (renamed from tests/unit/tooltip/tooltip_methods.js) | 21 | ||||
-rw-r--r-- | tests/unit/tooltip/options.js (renamed from tests/unit/tooltip/tooltip_options.js) | 39 | ||||
-rw-r--r-- | tests/unit/tooltip/tooltip.html | 27 | ||||
-rw-r--r-- | tests/unit/widget/all.html | 4 | ||||
-rw-r--r-- | tests/unit/widget/animation.js (renamed from tests/unit/widget/widget_animation.js) | 6 | ||||
-rw-r--r-- | tests/unit/widget/classes.js | 146 | ||||
-rw-r--r-- | tests/unit/widget/core.js (renamed from tests/unit/widget/widget_core.js) | 174 | ||||
-rw-r--r-- | tests/unit/widget/extend.js (renamed from tests/unit/widget/widget_extend.js) | 7 | ||||
-rw-r--r-- | tests/unit/widget/widget.html | 21 | ||||
-rw-r--r-- | tests/visual/compound/dialog_widgets.html | 2 | ||||
-rw-r--r-- | tests/visual/dialog/animated.html | 2 | ||||
-rw-r--r-- | tests/visual/dialog/complex-dialogs.html | 8 | ||||
-rw-r--r-- | tests/visual/dialog/form.html | 4 | ||||
-rw-r--r-- | tests/visual/dialog/performance.html | 2 | ||||
-rw-r--r-- | tests/visual/draggable/replaced.html | 2 | ||||
-rw-r--r-- | tests/visual/effects/clip.html | 6 | ||||
-rw-r--r-- | tests/visual/effects/effects.js | 16 | ||||
-rw-r--r-- | tests/visual/effects/scale.html | 8 | ||||
-rw-r--r-- | tests/visual/effects/shake.html | 2 | ||||
-rw-r--r-- | tests/visual/index.html | 5 | ||||
-rw-r--r-- | tests/visual/position/position.html | 6 | ||||
-rw-r--r-- | tests/visual/position/position_feedback.html | 2 | ||||
-rw-r--r-- | tests/visual/selectmenu/selectmenu.html | 18 | ||||
-rw-r--r-- | tests/visual/slider/range_slider.html | 47 | ||||
-rw-r--r-- | tests/visual/tooltip/tooltip.html | 16 |
207 files changed, 4306 insertions, 2794 deletions
diff --git a/tests/.jshintrc b/tests/.jshintrc index aeb3150a2..04d5371fc 100644 --- a/tests/.jshintrc +++ b/tests/.jshintrc @@ -6,7 +6,6 @@ "expr": true, "immed": true, "noarg": true, - "onevar": true, "quotmark": "double", "smarttabs": true, "trailing": true, @@ -20,9 +19,8 @@ "globals": { "asyncTest": false, - "closeEnough": false, "deepEqual": false, - "domEqual": false, + "define": false, "equal": false, "expect": false, "Globalize": false, @@ -32,11 +30,12 @@ "notStrictEqual": false, "ok": false, "QUnit": true, + "require": true, + "requirejs": true, "start": false, "strictEqual": false, "stop": false, "test": false, - "TestHelpers": true, "JSHINT": false } } diff --git a/tests/jquery.js b/tests/jquery.js deleted file mode 100644 index 67511667d..000000000 --- a/tests/jquery.js +++ /dev/null @@ -1,24 +0,0 @@ -(function() { - -var current, version, url, - parts = document.location.search.slice( 1 ).split( "&" ), - length = parts.length, - i = 0; - -for ( ; i < length; i++ ) { - current = parts[ i ].split( "=" ); - if ( current[ 0 ] === "jquery" ) { - version = current[ 1 ]; - break; - } -} - -if ( version === "git" ) { - url = "http://code.jquery.com/jquery-git.js"; -} else { - url = "../../../external/jquery-" + ( version || "1.10.2" ) + "/jquery.js"; -} - -document.write( "<script src='" + url + "'></script>" ); - -}() ); diff --git a/tests/lib/bootstrap.js b/tests/lib/bootstrap.js new file mode 100644 index 000000000..2829c6639 --- /dev/null +++ b/tests/lib/bootstrap.js @@ -0,0 +1,150 @@ +( function() { + +requirejs.config({ + paths: { + "date": "../../../external/date", + "globalize": "../../../external/globalize/globalize", + "globalize-locales": "../../../external/localization", + "globalize-old": "../../../external/globalize-old/globalize", + "globalize-old/ja-JP": "../../../external/globalize-old/globalize.culture.ja-JP", + "jquery": jqueryUrl(), + "jquery-simulate": "../../../external/jquery-simulate/jquery.simulate", + "jshint": "../../../external/jshint/jshint", + "lib": "../../lib", + "phantom-bridge": "../../../node_modules/grunt-contrib-qunit/phantomjs/bridge", + "qunit-assert-classes": "../../../external/qunit-assert-classes/qunit-assert-classes", + "qunit-assert-close": "../../../external/qunit-assert-close/qunit-assert-close", + "qunit": "../../../external/qunit/qunit", + "testswarm": "http://swarm.jquery.org/js/inject.js?" + (new Date()).getTime(), + "ui": "../../../ui" + }, + shim: { + "date": [ "globalize-locales" ], + "globalize-old/ja-JP": [ "globalize-old" ], + "jquery-simulate": [ "jquery" ], + "qunit-assert-close": [ "qunit" ], + "testswarm": [ "qunit" ] + } +}); + +// Create a module that disables back compat for UI modules +define( "jquery-no-back-compat", [ "jquery" ], function( $ ) { + $.uiBackCompat = false; + + return $; +} ); + +// Create a dummy bridge if we're not actually testing in PhantomJS +if ( !/PhantomJS/.test( navigator.userAgent ) ) { + define( "phantom-bridge", function() {} ); +} + +// Load all modules in series +function requireModules( dependencies, callback, modules ) { + if ( !dependencies.length ) { + if ( callback ) { + callback.apply( null, modules ); + } + return; + } + + if ( !modules ) { + modules = []; + } + + var dependency = dependencies.shift(); + require( [ dependency ], function( module ) { + modules.push( module ); + requireModules( dependencies, callback, modules ); + } ); +} + +// Load a set of test file along with the required test infrastructure +function requireTests( dependencies, noBackCompat ) { + dependencies = [ + "lib/qunit", + noBackCompat ? "jquery-no-back-compat" : "jquery", + "jquery-simulate" + ].concat( dependencies ); + + // Load the TestSwarm injector, if necessary + if ( parseUrl().swarmURL ) { + dependencies.push( "testswarm" ); + } + + requireModules( dependencies, function( QUnit ) { + QUnit.start(); + } ); +} + +// Parse the URL into key/value pairs +function parseUrl() { + var data = {}; + var parts = document.location.search.slice( 1 ).split( "&" ); + var length = parts.length; + var i = 0; + var current; + + for ( ; i < length; i++ ) { + current = parts[ i ].split( "=" ); + data[ current[ 0 ] ] = current[ 1 ]; + } + + return data; +} + +function jqueryUrl() { + var version = parseUrl().jquery; + var url; + + if ( version === "git" || version === "compat-git" ) { + url = "http://code.jquery.com/jquery-" + version; + } else { + url = "../../../external/jquery-" + ( version || "1.11.3" ) + "/jquery"; + } + + return url; +} + +// Load test modules based on data attributes +// - data-modules: list of test modules to load +// - data-widget: A widget to load test modules for +// - Automatically loads common, core, events, methods, and options +// - data-deprecated: Loads the deprecated test modules for a widget +// - data-no-back-compat: Set $.uiBackCompat to false +(function() { + + // Find the script element + var scripts = document.getElementsByTagName( "script" ); + var script = scripts[ scripts.length - 1 ]; + + // Read the modules + var modules = script.getAttribute( "data-modules" ); + if ( modules ) { + modules = modules + .replace( /^\s+|\s+$/g, "" ) + .split( /\s+/ ); + } else { + modules = []; + } + var widget = script.getAttribute( "data-widget" ); + var deprecated = !!script.getAttribute( "data-deprecated" ); + var noBackCompat = !!script.getAttribute( "data-no-back-compat" ); + + if ( widget ) { + modules = modules.concat([ + ( deprecated ? "common-deprecated" : "common" ), + "core", + "events", + "methods", + "options" + ]); + if ( deprecated ) { + modules = modules.concat( "deprecated" ); + } + } + + requireTests( modules, noBackCompat ); +} )(); + +} )(); diff --git a/tests/lib/common.js b/tests/lib/common.js new file mode 100644 index 000000000..9faa4e246 --- /dev/null +++ b/tests/lib/common.js @@ -0,0 +1,133 @@ +define([ + "jquery" +], function( $ ) { + +var exports = {}; + +function testWidgetDefaults( widget, defaults ) { + var pluginDefaults = $.ui[ widget ].prototype.options; + + // Ensure that all defaults have the correct value + test( "defined defaults", function() { + var count = 0; + $.each( defaults, function( key, val ) { + expect( ++count ); + if ( $.isFunction( val ) ) { + ok( $.isFunction( pluginDefaults[ key ] ), key ); + return; + } + deepEqual( pluginDefaults[ key ], val, key ); + }); + }); + + // Ensure that all defaults were tested + test( "tested defaults", function() { + var count = 0; + $.each( pluginDefaults, function( key ) { + expect( ++count ); + ok( key in defaults, key ); + }); + }); +} + +function testWidgetOverrides( widget ) { + if ( $.uiBackCompat === false ) { + test( "$.widget overrides", function() { + expect( 4 ); + $.each([ + "_createWidget", + "destroy", + "option", + "_trigger" + ], function( i, method ) { + strictEqual( $.ui[ widget ].prototype[ method ], + $.Widget.prototype[ method ], "should not override " + method ); + }); + }); + } +} + +function testBasicUsage( widget ) { + test( "basic usage", function() { + expect( 3 ); + + var defaultElement = $.ui[ widget ].prototype.defaultElement; + $( defaultElement ).appendTo( "body" )[ widget ]().remove(); + ok( true, "initialized on element" ); + + $( defaultElement )[ widget ]().remove(); + ok( true, "initialized on disconnected DOMElement - never connected" ); + + // Ensure manipulating removed elements works (#3664) + $( defaultElement ).appendTo( "body" ).remove()[ widget ]().remove(); + ok( true, "initialized on disconnected DOMElement - removed" ); + }); +} + +exports.testWidget = function( widget, settings ) { + module( widget + ": common widget" ); + + exports.testJshint( widget ); + testWidgetDefaults( widget, settings.defaults ); + testWidgetOverrides( widget ); + testBasicUsage( widget ); + test( "version", function() { + expect( 1 ); + ok( "version" in $.ui[ widget ].prototype, "version property exists" ); + }); +}; + +exports.testJshint = function( module ) { + + // Function.prototype.bind check is needed because JSHint doesn't work in ES3 browsers anymore + // https://github.com/jshint/jshint/issues/1384 + if ( QUnit.urlParams.nojshint || !Function.prototype.bind ) { + return; + } + + asyncTest( "JSHint", function() { + require( [ "jshint" ], function() { + expect( 1 ); + + $.when( + $.ajax( { + url: "../../../ui/.jshintrc", + dataType: "json" + } ), + $.ajax( { + url: "../../../ui/" + module + ".js", + dataType: "text" + } ) + ) + .done( function( hintArgs, srcArgs ) { + var globals, passed, errors, + jshintrc = hintArgs[ 0 ], + source = srcArgs[ 0 ]; + + globals = jshintrc.globals || {}; + delete jshintrc.globals; + passed = JSHINT( source, jshintrc, globals ); + errors = $.map( JSHINT.errors, function( error ) { + + // JSHINT may report null if there are too many errors + if ( !error ) { + return; + } + + return "[L" + error.line + ":C" + error.character + "] " + + error.reason + "\n" + error.evidence + "\n"; + } ).join( "\n" ); + ok( passed, errors ); + start(); + } ) + .fail(function( hintError, srcError ) { + ok( false, "error loading source: " + ( hintError || srcError ).statusText ); + start(); + } ); + }); + }); +}; + +return exports; + +}); diff --git a/tests/lib/css.js b/tests/lib/css.js new file mode 100644 index 000000000..37353e912 --- /dev/null +++ b/tests/lib/css.js @@ -0,0 +1,23 @@ +(function() { + +function includeStyle( url ) { + document.write( "<link rel='stylesheet' href='../../../" + url + "'>" ); +} + +// Find the script element +var scripts = document.getElementsByTagName( "script" ); +var script = scripts[ scripts.length - 1 ]; + +// Load the modules +var modules = script.getAttribute( "data-modules" ); +if ( modules ) { + modules = modules.split( /\s+/ ); + for ( var i = 0; i < modules.length; i++ ) { + includeStyle( "themes/base/" + modules[ i ] + ".css" ); + } +} + +// Load the QUnit stylesheet +includeStyle( "external/qunit/qunit.css" ); + +} )(); diff --git a/tests/lib/helper.js b/tests/lib/helper.js new file mode 100644 index 000000000..cc7d8c000 --- /dev/null +++ b/tests/lib/helper.js @@ -0,0 +1,33 @@ +define([ + "jquery" +], function( $ ) { + +var exports = {}; + +exports.forceScrollableWindow = function( appendTo ) { + + // The main testable area is 10000x10000 so to enforce scrolling, + // this DIV must be greater than 10000 to work + return $( "<div>" ) + .css({ + height: "11000px", + width: "11000px" + }) + .appendTo( appendTo || "#qunit-fixture" ); +}; + +exports.onFocus = function( element, onFocus ) { + var fn = function( event ) { + if ( !event.originalEvent ) { + return; + } + element.off( "focus", fn ); + onFocus(); + }; + + element.on( "focus", fn )[ 0 ].focus(); +}; + +return exports; + +}); diff --git a/tests/lib/qunit-assert-domequal.js b/tests/lib/qunit-assert-domequal.js new file mode 100644 index 000000000..ba516453d --- /dev/null +++ b/tests/lib/qunit-assert-domequal.js @@ -0,0 +1,123 @@ +/* + * Experimental assertion for comparing DOM objects. + * + * Serializes an element and some properties and attributes and its children if any, + * otherwise the text. Then compares the result using deepEqual(). + */ +define( [ + "qunit", + "jquery" +], function( QUnit, $ ) { + +var domEqual = QUnit.assert.domEqual = function( selector, modifier, message ) { + + var assert = this; + + // Get current state prior to modifier + var expected = extract( selector, message ); + + function done() { + var actual = extract( selector, message ); + assert.push( QUnit.equiv( actual, expected ), actual, expected, message ); + } + + // Run modifier (async or sync), then compare state via done() + if ( modifier.length ) { + modifier( done ); + } else { + modifier(); + done(); + } +}; + +domEqual.properties = [ + "disabled", + "readOnly" +]; + +domEqual.attributes = [ + "autocomplete", + "aria-activedescendant", + "aria-controls", + "aria-describedby", + "aria-disabled", + "aria-expanded", + "aria-haspopup", + "aria-hidden", + "aria-labelledby", + "aria-pressed", + "aria-selected", + "aria-valuemax", + "aria-valuemin", + "aria-valuenow", + "class", + "href", + "id", + "nodeName", + "role", + "tabIndex", + "title" +]; + +function getElementStyles( elem ) { + var styles = {}; + var style = elem.ownerDocument.defaultView ? + elem.ownerDocument.defaultView.getComputedStyle( elem, null ) : + elem.currentStyle; + var key, len; + + if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) { + len = style.length; + while ( len-- ) { + key = style[ len ]; + if ( typeof style[ key ] === "string" ) { + styles[ $.camelCase( key ) ] = style[ key ]; + } + } + + // Support: Opera, IE <9 + } else { + for ( key in style ) { + if ( typeof style[ key ] === "string" ) { + styles[ key ] = style[ key ]; + } + } + } + + return styles; +} + +function extract( selector, message ) { + var elem = $( selector ); + if ( !elem.length ) { + QUnit.push( false, null, null, + "domEqual failed, can't extract " + selector + ", message was: " + message ); + return; + } + + var result = {}; + var children; + $.each( domEqual.properties, function( index, attr ) { + var value = elem.prop( attr ); + result[ attr ] = value != null ? value : ""; + }); + $.each( domEqual.attributes, function( index, attr ) { + var value = elem.attr( attr ); + result[ attr ] = value != null ? value : ""; + }); + result.style = getElementStyles( elem[ 0 ] ); + result.events = $._data( elem[ 0 ], "events" ); + result.data = $.extend( {}, elem.data() ); + delete result.data[ $.expando ]; + children = elem.children(); + if ( children.length ) { + result.children = elem.children().map(function() { + return extract( $( this ) ); + }).get(); + } else { + result.text = elem.text(); + } + return result; +} + +} ); diff --git a/tests/lib/qunit.js b/tests/lib/qunit.js new file mode 100644 index 000000000..87ef8b662 --- /dev/null +++ b/tests/lib/qunit.js @@ -0,0 +1,48 @@ +define( [ + "qunit", + "jquery", + "qunit-assert-classes", + "qunit-assert-close", + "lib/qunit-assert-domequal", + "phantom-bridge" +], function( QUnit, $ ) { + +QUnit.config.autostart = false; +QUnit.config.requireExpects = true; + +QUnit.config.urlConfig.push({ + id: "nojshint", + label: "Skip JSHint", + tooltip: "Skip running JSHint, e.g., within TestSwarm, where Jenkins runs it already" +}); + +QUnit.config.urlConfig.push({ + id: "jquery", + label: "jQuery version", + value: [ + "1.7.0", "1.7.1", "1.7.2", + "1.8.0", "1.8.1", "1.8.2", "1.8.3", + "1.9.0", "1.9.1", + "1.10.0", "1.10.1", "1.10.2", + "1.11.0", "1.11.1", "1.11.2", "1.11.3", + "2.0.0", "2.0.1", "2.0.2", "2.0.3", + "2.1.0", "2.1.1", "2.1.2", "2.1.3", + "compat-git", "git", "custom" + ], + tooltip: "Which jQuery Core version to test against" +}); + +QUnit.reset = ( function( reset ) { + return function() { + + // Ensure jQuery events and data on the fixture are properly removed + $( "#qunit-fixture" ).empty(); + + // Let QUnit reset the fixture + reset.apply( this, arguments ); + }; +} )( QUnit.reset ); + +return QUnit; + +} ); diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index 0a8755fd3..683b87456 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -4,30 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Accordion Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "accordion" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/accordion.js" - ] - }); - </script> - - <script src="accordion_test_helpers.js"></script> - <script src="accordion_common.js"></script> - <script src="accordion_core.js"></script> - <script src="accordion_events.js"></script> - <script src="accordion_methods.js"></script> - <script src="accordion_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core accordion"></script> + <script src="../../lib/bootstrap.js" data-widget="accordion"></script> <style> #list, #list1 *, #navigation, #navigation * { margin: 0; diff --git a/tests/unit/accordion/accordion_common.js b/tests/unit/accordion/accordion_common.js deleted file mode 100644 index ef24cf25e..000000000 --- a/tests/unit/accordion/accordion_common.js +++ /dev/null @@ -1,20 +0,0 @@ -TestHelpers.commonWidgetTests( "accordion", { - defaults: { - active: 0, - animate: {}, - collapsible: false, - disabled: false, - event: "click", - header: "> li > :first-child,> :not(li):even", - heightStyle: "auto", - 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/all.html b/tests/unit/accordion/all.html index 7b0bf8558..3c247cdae 100644 --- a/tests/unit/accordion/all.html +++ b/tests/unit/accordion/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/accordion/common.js b/tests/unit/accordion/common.js new file mode 100644 index 000000000..8a859f0ca --- /dev/null +++ b/tests/unit/accordion/common.js @@ -0,0 +1,32 @@ +define( [ + "lib/common", + "ui/accordion" +], function( common ) { + +common.testWidget( "accordion", { + defaults: { + active: 0, + animate: {}, + classes: { + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom" + }, + collapsible: false, + disabled: false, + event: "click", + header: "> li > :first-child, > :not(li):even", + heightStyle: "auto", + 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_core.js b/tests/unit/accordion/core.js index dc0649b3b..0a3931162 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/core.js @@ -1,19 +1,34 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/accordion" +], function( $, testHelper ) { -var setupTeardown = TestHelpers.accordion.setupTeardown, - state = TestHelpers.accordion.state; +var setupTeardown = testHelper.setupTeardown, + state = testHelper.state; 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, - ".ui-accordion-header elements exist, correct number" ); - equal( element.find( ".ui-accordion-content" ).length, 3, - ".ui-accordion-content elements exist, correct number" ); + test( "markup structure: " + type, function( assert ) { + expect( 10 ); + var element = $( selector ).accordion(), + headers = element.find( ".ui-accordion-header" ), + content = headers.next(); + + assert.hasClasses( element, "ui-accordion ui-widget" ); + equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" ); + assert.hasClasses( headers[ 0 ], + "ui-accordion-header ui-accordion-header-active ui-accordion-icons" ); + assert.hasClasses( headers[ 1 ], + "ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" ); + assert.hasClasses( headers[ 2 ], + "ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" ); + equal( content.length, 3, ".ui-accordion-content elements exist, correct number" ); + assert.hasClasses( content[ 0 ], + "ui-accordion-content ui-widget-content ui-accordion-content-active" ); + assert.hasClasses( content[ 1 ], "ui-accordion-content ui-widget-content" ); + assert.hasClasses( content[ 2 ], "ui-accordion-content ui-widget-content" ); deepEqual( element.find( ".ui-accordion-header" ).next().get(), element.find( ".ui-accordion-content" ).get(), "content panels come immediately after headers" ); @@ -23,7 +38,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ test( "handle click on header-descendant", function() { expect( 1 ); var element = $( "#navigation" ).accordion(); - $( "#navigation h2:eq(1) a" ).click(); + $( "#navigation h2:eq(1) a" ).trigger( "click" ); state( element, 0, 1, 0 ); }); @@ -102,7 +117,7 @@ test( "accessibility", function () { }); -asyncTest( "keyboard support", function() { +asyncTest( "keyboard support", function( assert ) { expect( 13 ); var element = $( "#list1" ).accordion(), headers = element.find( ".ui-accordion-header" ), @@ -110,38 +125,83 @@ asyncTest( "keyboard support", function() { keyCode = $.ui.keyCode; equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" ); headers.eq( 0 ).simulate( "focus" ); - setTimeout(function() { - ok( headers.eq( 0 ).is( ".ui-state-focus" ), "first header has focus" ); + setTimeout( step1 ); + + function step1() { + assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "first header has focus" ); headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); - ok( headers.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next header" ); + setTimeout( step2 ); + } + + // Support: IE 11 with jQuery 1.7 - 1.8 only + // All of the setTimeouts() from keydowns aren't necessary with newer jQuery. + // Only the explicit focus simulations require them. + function step2() { + assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "DOWN moves focus to next header" ); headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } ); - ok( headers.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next header" ); + setTimeout( step3 ); + } + + function step3() { + assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next header" ); headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); - ok( headers.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first header" ); + setTimeout( step4 ); + } + function step4() { + assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first header" ); headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } ); - ok( headers.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last header" ); + setTimeout( step5 ); + } + + function step5() { + assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "UP wraps focus to last header" ); headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } ); - ok( headers.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous header" ); + setTimeout( step6 ); + } + function step6() { + assert.hasClasses( headers.eq( 1 ), + "ui-state-focus", "LEFT moves focus to previous header" ); headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } ); - ok( headers.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first header" ); + setTimeout( step7 ); + } + + function step7() { + assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "HOME moves focus to first header" ); headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } ); - ok( headers.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last header" ); + setTimeout( step8 ); + } + function step8() { + assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "END moves focus to last header" ); headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } ); + setTimeout( step9 ); + } + + function step9() { equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" ); headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } ); - equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" ); + setTimeout( step10 ); + } + function step10() { + equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" ); anchor.simulate( "focus" ); - setTimeout(function() { - ok( !headers.eq( 1 ).is( ".ui-state-focus" ), "header loses focus when focusing inside the panel" ); - anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } ); - ok( headers.eq( 1 ).is( ".ui-state-focus" ), "CTRL+UP moves focus to header" ); - start(); - }, 1 ); - }, 1 ); + setTimeout( step11 ); + } + + function step11() { + assert.lacksClasses( headers.eq( 1 ), "ui-state-focus", + "header loses focus when focusing inside the panel" ); + anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } ); + setTimeout( step12 ); + } + + function step12() { + assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "CTRL+UP moves focus to header" ); + start(); + } }); -}( jQuery ) ); +} ); diff --git a/tests/unit/accordion/accordion_events.js b/tests/unit/accordion/events.js index 5f6cfa8bc..fef1a0aac 100644 --- a/tests/unit/accordion/accordion_events.js +++ b/tests/unit/accordion/events.js @@ -1,7 +1,11 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/accordion" +], function( $, testHelper ) { -var setupTeardown = TestHelpers.accordion.setupTeardown, - state = TestHelpers.accordion.state; +var setupTeardown = testHelper.setupTeardown, + state = testHelper.state; module( "accordion: events", setupTeardown() ); @@ -78,7 +82,7 @@ test( "beforeActivate", function() { strictEqual( ui.newPanel[ 0 ], content[ 1 ] ); state( element, 1, 0, 0 ); }); - headers.eq( 1 ).click(); + headers.eq( 1 ).trigger( "click" ); state( element, 0, 1, 0 ); element.one( "accordionbeforeactivate", function( event, ui ) { @@ -138,7 +142,7 @@ test( "activate", function() { equal( ui.newPanel.length, 1 ); strictEqual( ui.newPanel[ 0 ], content[ 1 ] ); }); - headers.eq( 1 ).click(); + headers.eq( 1 ).trigger( "click" ); element.one( "accordionactivate", function( event, ui ) { equal( ui.oldHeader.length, 1 ); @@ -161,4 +165,4 @@ test( "activate", function() { element.accordion( "option", "active", 1 ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/accordion/accordion_test_helpers.js b/tests/unit/accordion/helper.js index 643f8e283..5eb3a4bc3 100644 --- a/tests/unit/accordion/accordion_test_helpers.js +++ b/tests/unit/accordion/helper.js @@ -1,4 +1,10 @@ -TestHelpers.accordion = { +define( [ + "jquery", + "lib/helper", + "ui/accordion" +], function( $, helper ) { + +return $.extend( helper, { equalHeight: function( accordion, height ) { accordion.find( ".ui-accordion-content" ).each(function() { equal( $( this ).outerHeight(), height ); @@ -20,8 +26,10 @@ TestHelpers.accordion = { state: function( accordion ) { var expected = $.makeArray( arguments ).slice( 1 ), actual = accordion.find( ".ui-accordion-content" ).map(function() { - return $( this ).css( "display" ) === "none" ? 0 : 1; - }).get(); + return $( this ).css( "display" ) === "none" ? 0 : 1; + }).get(); QUnit.push( QUnit.equiv(actual, expected), actual, expected ); } -}; +} ); + +} ); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/methods.js index 1e809b310..efabfed10 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/methods.js @@ -1,27 +1,32 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/accordion" +], function( $, testHelper ) { -var equalHeight = TestHelpers.accordion.equalHeight, - setupTeardown = TestHelpers.accordion.setupTeardown, - state = TestHelpers.accordion.state; +var equalHeight = testHelper.equalHeight, + setupTeardown = testHelper.setupTeardown, + state = testHelper.state; module( "accordion: methods", setupTeardown() ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#list1", function() { + assert.domEqual( "#list1", function() { $( "#list1" ).accordion().accordion( "destroy" ); }); }); -test( "enable/disable", function() { +test( "enable/disable", function( assert ) { expect( 7 ); var element = $( "#list1" ).accordion(); state( element, 1, 0, 0 ); element.accordion( "disable" ); - ok( element.hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" ); + assert.hasClasses( element, "ui-state-disabled" ); + equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" ); - ok( element.hasClass( "ui-accordion-disabled" ), "element gets ui-accordion-disabled" ); + assert.hasClasses( element, "ui-accordion-disabled" ); // event does nothing element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); @@ -128,4 +133,4 @@ test( "widget", function() { strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/options.js index 214753e40..52d54ed32 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/options.js @@ -1,8 +1,12 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/accordion" +], function( $, testHelper ) { -var equalHeight = TestHelpers.accordion.equalHeight, - setupTeardown = TestHelpers.accordion.setupTeardown, - state = TestHelpers.accordion.state; +var equalHeight = testHelper.equalHeight, + setupTeardown = testHelper.setupTeardown, + state = testHelper.state; module( "accordion: options", setupTeardown() ); @@ -56,7 +60,7 @@ test( "{ active: Number }", function() { equal( element.accordion( "option", "active" ), 0 ); state( element, 1, 0, 0 ); - element.find( ".ui-accordion-header" ).eq( 1 ).click(); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -265,7 +269,7 @@ test( "{ collapsible: false }", function() { equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-accordion-header" ).eq( 1 ).click(); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -285,7 +289,7 @@ test( "{ collapsible: true }", function() { equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-accordion-header" ).eq( 1 ).click(); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); equal( element.accordion( "option", "active" ), false ); state( element, 0, 0, 0 ); }); @@ -302,7 +306,7 @@ test( "{ event: null }", function() { state( element, 0, 1, 0 ); // ensure default click handler isn't bound - element.find( ".ui-accordion-header" ).eq( 2 ).click(); + element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -349,13 +353,13 @@ test( "{ header: default }", function() { state( $( "#navigation" ).accordion(), 1, 0, 0); }); -test( "{ header: custom }", function() { +test( "{ header: custom }", function( assert ) { expect( 6 ); var element = $( "#navigationWrapper" ).accordion({ header: "h2" }); element.find( "h2" ).each(function() { - ok( $( this ).hasClass( "ui-accordion-header" ) ); + assert.hasClasses( this, "ui-accordion-header" ); }); equal( element.find( ".ui-accordion-header" ).length, 3 ); state( element, 1, 0, 0 ); @@ -449,15 +453,15 @@ test( "{ icons: false }", function() { icons( false ); }); -test( "{ icons: hash }", function() { +test( "{ icons: hash }", function( assert ) { expect( 3 ); var element = $( "#list1" ).accordion({ icons: { activeHeader: "a1", header: "h1" } }); - ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "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" ) ); + assert.lacksClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1"); + assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a2" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/all.html b/tests/unit/all.html index fc22e0e99..f06dad6d9 100644 --- a/tests/unit/all.html +++ b/tests/unit/all.html @@ -7,9 +7,9 @@ <script src="../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../external/qunit/qunit.css"> - <link rel="stylesheet" href="qunit-composite.css"> + <link rel="stylesheet" href="../../external/qunit-composite/qunit-composite.css"> <script src="../../external/qunit/qunit.js"></script> - <script src="qunit-composite.js"></script> + <script src="../../external/qunit-composite/qunit-composite.js"></script> <script> (function() { @@ -26,6 +26,7 @@ "draggable/draggable.html", "droppable/droppable.html", "effects/effects.html", + "form-reset-mixin/form-reset-mixin.html", "menu/menu.html", "position/position.html", "progressbar/progressbar.html", diff --git a/tests/unit/autocomplete/all.html b/tests/unit/autocomplete/all.html index 854b2beb4..4ff90fe3c 100644 --- a/tests/unit/autocomplete/all.html +++ b/tests/unit/autocomplete/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index e7ce6f6d5..484f2d957 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -4,31 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Autocomplete Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "menu", "autocomplete" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/position.js", - "ui/menu.js", - "ui/autocomplete.js" - ] - }); - </script> - - <script src="autocomplete_common.js"></script> - <script src="autocomplete_core.js"></script> - <script src="autocomplete_events.js"></script> - <script src="autocomplete_methods.js"></script> - <script src="autocomplete_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core menu autocomplete"></script> + <script src="../../lib/bootstrap.js" data-widget="autocomplete"></script> </head> <body> diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/common.js index 63b24d384..5ee7cdda0 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/common.js @@ -1,7 +1,13 @@ -TestHelpers.commonWidgetTests( "autocomplete", { +define( [ + "lib/common", + "ui/autocomplete" +], function( common ) { + +common.testWidget( "autocomplete", { defaults: { appendTo: null, autoFocus: false, + classes: {}, delay: 300, disabled: false, messages: { @@ -27,3 +33,5 @@ TestHelpers.commonWidgetTests( "autocomplete", { select: null } }); + +} ); diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/core.js index 669cefb86..184bcdbf4 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/core.js @@ -1,7 +1,19 @@ -(function( $ ) { +define( [ + "jquery", + "ui/autocomplete" +], function( $ ) { module( "autocomplete: core" ); +test( "markup structure", function( assert ) { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete(), + menu = element.autocomplete( "widget" ); + + assert.hasClasses( element, "ui-autocomplete-input" ); + assert.hasClasses( menu, "ui-autocomplete ui-widget ui-widget-content" ); +}); + test( "prevent form submit on enter when menu is active", function() { expect( 2 ); var event, @@ -155,7 +167,7 @@ test( "allow form submit on enter when menu is not active", function() { delay: 0, minLength: 0 }); - element.bind( "keypress", function( e ) { + element.on( "keypress", function( e ) { didMove = !e.isDefaultPrevented(); }); element.simulate( "keydown", { keyCode: ( isKeyUp ? $.ui.keyCode.UP : $.ui.keyCode.DOWN ) } ); @@ -187,7 +199,7 @@ asyncTest( "past end of menu in multiline autocomplete", function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( element.text(), customVal ); start(); - }, 50 ); + }); }); asyncTest( "ESCAPE in multiline autocomplete", function() { @@ -213,7 +225,7 @@ asyncTest( "ESCAPE in multiline autocomplete", function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); equal( element.text(), customVal ); start(); - }, 50 ); + }); }); asyncTest( "handle race condition", function() { @@ -226,8 +238,8 @@ asyncTest( "handle race condition", function() { equal( count, 1, "request with 1 character is first" ); setTimeout(function() { response([ "one" ]); - setTimeout( checkResults, 1 ); - }, 1 ); + setTimeout( checkResults ); + }); return; } equal( count, 2, "request with 2 characters is second" ); @@ -386,4 +398,4 @@ asyncTest( "Search if the user retypes the same value (#7434)", function() { }); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/events.js index fb1cf73a6..8f96fb77f 100644 --- a/tests/unit/autocomplete/autocomplete_events.js +++ b/tests/unit/autocomplete/events.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/autocomplete" +], function( $ ) { module( "autocomplete: events" ); @@ -63,7 +66,7 @@ $.each([ }), menu = element.autocomplete( "widget" ); - element.simulate( "focus" )[ settings.valueMethod ]( "j" ).keydown(); + element.simulate( "focus" )[ settings.valueMethod ]( "j" ).trigger( "keydown" ); setTimeout(function() { ok( menu.is( ":visible" ), "menu is visible after delay" ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); @@ -71,8 +74,8 @@ $.each([ // blur must be async for IE to handle it properly setTimeout(function() { element.simulate( "blur" ); - }, 1 ); - }, 50 ); + }); + }); }); }); @@ -109,16 +112,16 @@ asyncTest( "cancel search", function() { } }), menu = element.autocomplete( "widget" ); - element.val( "ja" ).keydown(); + element.val( "ja" ).trigger( "keydown" ); setTimeout(function() { ok( menu.is( ":hidden" ), "menu is hidden after first search" ); - element.val( "java" ).keydown(); + element.val( "java" ).trigger( "keydown" ); setTimeout(function() { ok( menu.is( ":visible" ), "menu is visible after second search" ); equal( menu.find( ".ui-menu-item" ).length, 2, "# of menu items" ); start(); - }, 50 ); - }, 50 ); + }); + }); }); asyncTest( "cancel focus", function() { @@ -132,12 +135,12 @@ asyncTest( "cancel focus", function() { return false; } }); - element.val( "ja" ).keydown(); + element.val( "ja" ).trigger( "keydown" ); setTimeout(function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( element.val(), customVal ); start(); - }, 50 ); + }); }); asyncTest( "cancel select", function() { @@ -151,13 +154,13 @@ asyncTest( "cancel select", function() { return false; } }); - element.val( "ja" ).keydown(); + element.val( "ja" ).trigger( "keydown" ); setTimeout(function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); equal( element.val(), customVal ); start(); - }, 50 ); + }); }); asyncTest( "blur during remote search", function() { @@ -170,13 +173,13 @@ asyncTest( "blur during remote search", function() { setTimeout(function() { response([ "result" ]); start(); - }, 100 ); + }, 25); }, open: function() { ok( false, "opened after a blur" ); } }); - ac.val( "ro" ).keydown(); + ac.val( "ro" ).trigger( "keydown" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/autocomplete/autocomplete_methods.js b/tests/unit/autocomplete/methods.js index 1bfa10554..32080207a 100644 --- a/tests/unit/autocomplete/autocomplete_methods.js +++ b/tests/unit/autocomplete/methods.js @@ -1,10 +1,13 @@ -(function( $ ) { +define( [ + "jquery", + "ui/autocomplete" +], function( $ ) { module( "autocomplete: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#autocomplete", function() { + assert.domEqual( "#autocomplete", function() { $( "#autocomplete" ).autocomplete().autocomplete( "destroy" ); }); }); @@ -34,12 +37,12 @@ test( "search, close", function() { ok( menu.is( ":hidden" ), "menu is hidden after close" ); }); -test( "widget", function() { +test( "widget", function( assert ) { expect( 2 ); var element = $( "#autocomplete" ).autocomplete(), widgetElement = element.autocomplete( "widget" ); equal( widgetElement.length, 1, "one element" ); - ok( widgetElement.is( ".ui-menu" ), "menu element" ); + assert.hasClasses( widgetElement, "ui-menu" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/options.js index 8215dbe61..06c75722b 100644 --- a/tests/unit/autocomplete/autocomplete_options.js +++ b/tests/unit/autocomplete/options.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/autocomplete" +], function( $ ) { module( "autocomplete: options" ); @@ -84,7 +87,7 @@ function autoFocusTest( afValue, focusedLength ) { start(); } }); - element.val( "ja" ).keydown(); + element.val( "ja" ).trigger( "keydown" ); stop(); } @@ -102,38 +105,38 @@ asyncTest( "delay", function() { expect( 2 ); var element = $( "#autocomplete" ).autocomplete({ source: data, - delay: 50 + delay: 25 }), menu = element.autocomplete( "widget" ); - element.val( "ja" ).keydown(); + element.val( "ja" ).trigger( "keydown" ); ok( menu.is( ":hidden" ), "menu is closed immediately after search" ); setTimeout(function() { ok( menu.is( ":visible" ), "menu is open after delay" ); start(); - }, 100 ); + }, 50 ); }); -asyncTest( "disabled", function() { +asyncTest( "disabled", function( assert ) { expect( 5 ); var element = $( "#autocomplete" ).autocomplete({ source: data, delay: 0 }), menu = element.autocomplete( "disable" ).autocomplete( "widget" ); - element.val( "ja" ).keydown(); + element.val( "ja" ).trigger( "keydown" ); ok( menu.is( ":hidden" ) ); - ok( !element.is( ".ui-state-disabled" ), "element doesn't get ui-state-disabled" ); + assert.lacksClasses( element, "ui-state-disabled" ); + assert.hasClasses( menu, "ui-autocomplete-disabled" ); ok( !element.attr( "aria-disabled" ), "element doesn't get aria-disabled" ); - ok( menu.is( ".ui-autocomplete-disabled" ), "element gets ui-autocomplete-disabled" ); setTimeout(function() { ok( menu.is( ":hidden" ) ); start(); - }, 50 ); + }); }); test( "minLength", function() { @@ -158,7 +161,7 @@ asyncTest( "minLength, exceed then drop below", function() { equal( req.term, "12", "correct search term" ); setTimeout(function() { res([ "item" ]); - }, 1 ); + }); } }), menu = element.autocomplete( "widget" ); @@ -172,7 +175,7 @@ asyncTest( "minLength, exceed then drop below", function() { setTimeout(function() { ok( menu.is( ":hidden" ), "menu is hidden after searches" ); start(); - }, 50 ); + }); }); test( "minLength, exceed then drop below then exceed", function() { @@ -311,4 +314,4 @@ test( "source, update after init", function() { equal( menu.find( ".ui-menu-item" ).text(), "php" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/button/all.html b/tests/unit/button/all.html index 33b1ad457..c370837b8 100644 --- a/tests/unit/button/all.html +++ b/tests/unit/button/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html index abda5c987..7ba400645 100644 --- a/tests/unit/button/button.html +++ b/tests/unit/button/button.html @@ -4,29 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Button Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "button" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/button.js" - ] - }); - </script> - - <script src="button_common.js"></script> - <script src="button_core.js"></script> - <script src="button_events.js"></script> - <script src="button_methods.js"></script> - <script src="button_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button"></script> + <script src="../../lib/bootstrap.js" data-widget="button"></script> </head> <body> diff --git a/tests/unit/button/button_common.js b/tests/unit/button/common.js index ef22d3011..d376f4f05 100644 --- a/tests/unit/button/button_common.js +++ b/tests/unit/button/common.js @@ -1,5 +1,11 @@ -TestHelpers.commonWidgetTests( "button", { +define( [ + "lib/common", + "ui/button" +], function( common ) { + +common.testWidget( "button", { defaults: { + classes: {}, disabled: null, icons: { primary: null, @@ -12,3 +18,5 @@ TestHelpers.commonWidgetTests( "button", { create: null } }); + +} ); diff --git a/tests/unit/button/button_core.js b/tests/unit/button/core.js index 340f25402..8539464ba 100644 --- a/tests/unit/button/button_core.js +++ b/tests/unit/button/core.js @@ -1,55 +1,59 @@ -/* - * button_core.js - */ - -(function($) { +define( [ + "jquery", + "ui/button" +], function( $ ) { module("button: core"); -test("checkbox", function() { +test("checkbox", function( assert ) { expect( 4 ); var input = $("#check"), label = $("label[for=check]"); ok( input.is(":visible") ); ok( label.is(":not(.ui-button)") ); input.button(); - ok( input.is(".ui-helper-hidden-accessible") ); - ok( label.is(".ui-button") ); + assert.hasClasses( input, "ui-helper-hidden-accessible" ); + assert.hasClasses( label, "ui-button" ); }); -test("radios", function() { - expect( 4 ); +test("radios", function( assert ) { + expect( 8 ); var inputs = $("#radio0 input"), labels = $("#radio0 label"); ok( inputs.is(":visible") ); ok( labels.is(":not(.ui-button)") ); inputs.button(); - ok( inputs.is(".ui-helper-hidden-accessible") ); - ok( labels.is(".ui-button") ); + inputs.each(function() { + assert.hasClasses( this, "ui-helper-hidden-accessible" ); + }); + labels.each(function() { + assert.hasClasses( this, "ui-button" ); + }); }); -function assert(noForm, form1, form2) { - ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") ); - ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") ); - ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") ); -} - -test("radio groups", function() { +test("radio groups", function( assert ) { expect( 12 ); + + function assertClasses(noForm, form1, form2) { + assert.hasClasses( $("#radio0 .ui-button" + noForm ), "ui-state-active" ); + assert.hasClasses( $("#radio1 .ui-button" + form1 ), "ui-state-active" ); + assert.hasClasses( $("#radio2 .ui-button" + form2 ), "ui-state-active" ); + } + $("input[type=radio]").button(); - assert(":eq(0)", ":eq(1)", ":eq(2)"); + assertClasses(":eq(0)", ":eq(1)", ":eq(2)"); // click outside of forms - $("#radio0 .ui-button:eq(1)").click(); - assert(":eq(1)", ":eq(1)", ":eq(2)"); + $("#radio0 .ui-button:eq(1)").trigger( "click" ); + assertClasses(":eq(1)", ":eq(1)", ":eq(2)"); // click in first form - $("#radio1 .ui-button:eq(0)").click(); - assert(":eq(1)", ":eq(0)", ":eq(2)"); + $("#radio1 .ui-button:eq(0)").trigger( "click" ); + assertClasses(":eq(1)", ":eq(0)", ":eq(2)"); // click in second form - $("#radio2 .ui-button:eq(0)").click(); - assert(":eq(1)", ":eq(0)", ":eq(0)"); + $("#radio2 .ui-button:eq(0)").trigger( "click" ); + assertClasses(":eq(1)", ":eq(0)", ":eq(0)"); }); test( "radio groups - ignore elements with same name", function() { @@ -74,10 +78,10 @@ test("input type submit, don't create child elements", function() { deepEqual( input.children().length, 0 ); }); -test("buttonset", function() { +test("buttonset", function( assert ) { expect( 6 ); var set = $("#radio1").buttonset(); - ok( set.is(".ui-buttonset") ); + assert.hasClasses( set, "ui-buttonset" ); deepEqual( set.children(".ui-button").length, 3 ); deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); @@ -85,7 +89,7 @@ test("buttonset", function() { ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); }); -test("buttonset (rtl)", function() { +test("buttonset (rtl)", function( assert ) { expect( 6 ); var set, parent = $("#radio1").parent(); @@ -93,7 +97,7 @@ test("buttonset (rtl)", function() { parent.attr("dir", "rtl"); set = $("#radio1").buttonset(); - ok( set.is(".ui-buttonset") ); + assert.hasClasses( set, "ui-buttonset" ); deepEqual( set.children(".ui-button").length, 3 ); deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); @@ -105,14 +109,14 @@ test("buttonset (rtl)", function() { // remove this when simulate properly simulates this // see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) { - asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() { + asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) { expect( 3 ); - $("#check2").button().change( function() { + $("#check2").button().on( "change", function() { var lbl = $( this ).button("widget"); ok( this.checked, "checked ok" ); ok( lbl.attr("aria-pressed") === "true", "aria ok" ); - ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" ); + assert.hasClasses( lbl, "ui-state-active" ); }); // support: Opera @@ -126,47 +130,48 @@ if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) { }); } -test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { +test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) { expect( 5 ); var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" ); group.find( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); + assert.hasClasses( group.find( "label" ), "ui-button" ); group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" ); group.filter( "input[type=checkbox]" ).button(); - ok( group.filter( "label" ).is( ".ui-button" ) ); + assert.hasClasses( group.filter( "label" ), "ui-button" ); group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" ); group.find( "input[type=checkbox]" ).button(); - ok( group.filter( "label" ).is( ".ui-button" ) ); + assert.hasClasses( group.filter( "label" ), "ui-button" ); group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" ); group.find( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); + assert.hasClasses( group.find( "label" ), "ui-button" ); group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" ); group.filter( "input[type=checkbox]" ).button(); - ok( group.find( "label" ).is( ".ui-button" ) ); + assert.hasClasses( group.find( "label" ), "ui-button" ); }); -test( "#5946 - buttonset should ignore buttons that are not :visible", function() { +test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) { expect( 2 ); $( "#radio01" ).next().addBack().hide(); var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); - ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); + assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" ); }); -test( "#6262 - buttonset not applying ui-corner to invisible elements", function() { +test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) { expect( 3 ); $( "#radio0" ).hide(); var set = $( "#radio0" ).buttonset(); - ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) ); - ok( set.find( "label:eq(1)" ).is( ".ui-button" ) ); - ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) ); + assert.hasClasses( set.find( "label:eq(0)" ), "ui-button ui-corner-left" ); + assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" ); + assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" ); + }); -asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() { +asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) { expect( 2 ); var form = $( "<form>" + "<button></button>" + @@ -176,7 +181,7 @@ asyncTest( "Resetting a button's form should refresh the visual state of the but checkbox = form.find( "input[type=checkbox]" ).button(); checkbox.prop( "checked", false ).button( "refresh" ); - ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) ); + assert.lacksClasses( checkbox.button( "widget" ), "ui-state-active" ); form.get( 0 ).reset(); @@ -185,41 +190,41 @@ asyncTest( "Resetting a button's form should refresh the visual state of the but button.remove(); setTimeout(function() { - ok( checkbox.button( "widget" ).hasClass( "ui-state-active" )); + assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" ); start(); }, 1 ); }); -asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { +asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) { expect( 2 ); var check = $( "#check" ).button(), label = $( "label[for='check']" ); - ok( !label.is( ".ui-state-focus" ) ); - check.focus(); + assert.lacksClasses( label, "ui-state-focus" ); + check.trigger( "focus" ); setTimeout(function() { - ok( label.is( ".ui-state-focus" ) ); + assert.hasClasses( label, "ui-state-focus" ); start(); }); }); -test( "#7534 - Button label selector works for ids with \":\"", function() { +test( "#7534 - Button label selector works for ids with \":\"", function( assert ) { expect( 1 ); var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" ); group.find( "input" ).button(); - ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); + assert.hasClasses( group.find( "label" ), "ui-button" , "Found an id with a :" ); }); -asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() { +asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) { expect( 2 ); var element = $( "#button1" ).button(); element[ 0 ].focus(); setTimeout(function() { - ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" ); + assert.hasClasses( element, "ui-state-focus" ); element.button( "disable" ); - ok( !element.hasClass( "ui-state-focus" ), + assert.lacksClasses( element, "ui-state-focus", "button does not have ui-state-focus when disabled" ); start(); }); }); -})(jQuery); +} ); diff --git a/tests/unit/button/button_events.js b/tests/unit/button/events.js index 2fd038325..63550e2f8 100644 --- a/tests/unit/button/button_events.js +++ b/tests/unit/button/events.js @@ -1,31 +1,31 @@ -/* - * button_events.js - */ -(function($) { +define( [ + "jquery", + "ui/button" +], function( $ ) { module("button: events"); test("buttonset works with single-quote named elements (#7505)", function() { expect( 1 ); $("#radio3").buttonset(); - $("#radio33").click( function(){ + $("#radio33").on( "click", function(){ ok( true, "button clicks work with single-quote named elements" ); - }).click(); + }).trigger( "click" ); }); -asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() { +asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) { expect( 1 ); var element = $( "#button" ).button(); element.one( "keypress", function() { element.one( "blur", function() { - ok( !element.is(".ui-state-active"), "button loses active state appropriately" ); + assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" ); start(); - }).blur(); + }).trigger( "blur" ); }); - element.focus(); + element.trigger( "focus" ); setTimeout(function() { element .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ) @@ -33,4 +33,4 @@ asyncTest( "when button loses focus, ensure active state is removed (#8559)", fu }); }); -})(jQuery); +} ); diff --git a/tests/unit/button/button_methods.js b/tests/unit/button/methods.js index d4d92cead..be36096b2 100644 --- a/tests/unit/button/button_methods.js +++ b/tests/unit/button/methods.js @@ -1,13 +1,13 @@ -/* - * button_methods.js - */ -(function($) { +define( [ + "jquery", + "ui/button" +], function( $ ) { module("button: methods"); -test("destroy", function() { +test("destroy", function( assert ) { expect( 1 ); - domEqual( "#button", function() { + assert.domEqual( "#button", function() { $( "#button" ).button().button( "destroy" ); }); }); @@ -70,4 +70,4 @@ test( "refresh: buttonset should turn added elements into button widgets", funct equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" ); }); -})(jQuery); +} ); diff --git a/tests/unit/button/button_options.js b/tests/unit/button/options.js index 834a64dcf..23020fc10 100644 --- a/tests/unit/button/button_options.js +++ b/tests/unit/button/options.js @@ -1,25 +1,23 @@ -/* - * button_options.js - */ -(function($) { +define( [ + "jquery", + "ui/button" +], function( $ ) { module( "button: options" ); -test( "disabled, explicit value", function() { - expect( 9 ); +test( "disabled, explicit value", function( assert ) { + expect( 7 ); var element = $( "#radio01" ).button({ disabled: false }); deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" ); deepEqual( element.prop( "disabled" ), false, "element is disabled" ); - ok( !element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" ); - ok( !element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" ); + assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" ); element = $( "#radio02" ).button({ disabled: true }); - ok( element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" ); ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - ok( element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" ); + assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" ); deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" ); deepEqual( element.prop( "disabled" ), true, "element is not disabled" ); @@ -38,7 +36,7 @@ test("disabled, null", function() { deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled"); }); -test( "disabled, ui-state-active is removed unless checkbox or radio", function() { +test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) { expect( 12 ); var elements = [ $( "<input type='button'>" ), @@ -59,15 +57,15 @@ test( "disabled, ui-state-active is removed unless checkbox or radio", function( } element.trigger( "mousedown" ); - ok( buttonElement.hasClass( "ui-state-active" ), + assert.hasClasses( buttonElement, "ui-state-active", "[" + elementType + "] has ui-state-active class after mousedown." ); element.button( "disable" ); if ( element.is( "[type=checkbox], [type=radio]" ) ) { - ok( buttonElement.hasClass( "ui-state-active" ), + assert.hasClasses( buttonElement, "ui-state-active", "Disabled [" + elementType + "] has ui-state-active class." ); } else { - ok( !buttonElement.hasClass( "ui-state-active" ), + assert.lacksClasses( buttonElement, "ui-state-active", "Disabled [" + elementType + "] does not have ui-state-active class." ); } }); @@ -145,15 +143,15 @@ test("icons", function() { $("#button").button("destroy"); }); -test( "#5295 - button does not remove hoverstate if disabled" , function() { +test( "#5295 - button does not remove hoverstate if disabled" , function( assert ) { expect( 1 ); var btn = $("#button").button(); - btn.hover( function() { + btn.on( "hover", function() { btn.button( "disable" ); }); btn.trigger( "mouseenter" ); btn.trigger( "mouseleave" ); - ok( !btn.is( ".ui-state-hover") ); + assert.lacksClasses( btn, "ui-state-hover" ); }); -})(jQuery); +} ); diff --git a/tests/unit/calendar/all.html b/tests/unit/calendar/all.html index 5b22b0470..65f71988b 100644 --- a/tests/unit/calendar/all.html +++ b/tests/unit/calendar/all.html @@ -4,12 +4,12 @@ <meta charset="utf-8"> <title>jQuery UI Calendar Test Suite</title> - <script src="../../jquery.js"></script> + <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/calendar/calendar.html b/tests/unit/calendar/calendar.html index 4c97eec86..0d28b6351 100644 --- a/tests/unit/calendar/calendar.html +++ b/tests/unit/calendar/calendar.html @@ -4,34 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Calendar Test Suite</title> - <script src="../../jquery.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../../../external/globalize/globalize.js"></script> - <script src="../../../external/localization.js"></script> - <script src="../../../external/date.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "calendar" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/button.js", - "ui/calendar.js" - ] - }); - </script> - - <script src="calendar_common.js"></script> - <script src="calendar_core.js"></script> - <script src="calendar_events.js"></script> - <script src="calendar_methods.js"></script> - <script src="calendar_options.js"></script> - <script src="calendar_test_helpers.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core calendar"></script> + <script src="../../lib/bootstrap.js" data-widget="datepicker"></script> </head> <body> diff --git a/tests/unit/calendar/calendar_common.js b/tests/unit/calendar/common.js index a669fdfc2..bb0f64d0d 100644 --- a/tests/unit/calendar/calendar_common.js +++ b/tests/unit/calendar/common.js @@ -1,6 +1,13 @@ -TestHelpers.commonWidgetTests( "calendar", { +define( [ + "lib/common", + "ui/calendar", + "globalize-locales" +], function( common ) { + +common.testWidget( "calendar", { defaults: { buttons: [], + classes: {}, dateFormat: { date: "short" }, disabled: false, eachDay: $.noop, @@ -15,3 +22,5 @@ TestHelpers.commonWidgetTests( "calendar", { select: null } }); + +} ); diff --git a/tests/unit/calendar/calendar_core.js b/tests/unit/calendar/core.js index dbcdda8ea..92753748f 100644 --- a/tests/unit/calendar/calendar_core.js +++ b/tests/unit/calendar/core.js @@ -1,9 +1,12 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "globalize", + "ui/calendar" +], function( $, testHelper, Globalize ) { module( "calendar: core" ); -TestHelpers.testJshint( "calendar" ); - test( "base structure", function() { expect( 26 ); @@ -135,12 +138,12 @@ asyncTest( "keyboard handling", function() { function step1() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar + testHelper .focusGrid( element ) .simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2013, 12 - 1, 31 ), "Keystroke left to switch to previous day" @@ -153,11 +156,11 @@ asyncTest( "keyboard handling", function() { function step2() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ) + testHelper.focusGrid( element ) .simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ) .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 1 - 1, 2 ), "Keystroke right to switch to next day" @@ -168,10 +171,10 @@ asyncTest( "keyboard handling", function() { function step3() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + testHelper.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2013, 12 - 1, 25 ), "Keystroke up to move to the previous week" @@ -184,10 +187,10 @@ asyncTest( "keyboard handling", function() { function step4() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + testHelper.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 1 - 1, 8 ), "Keystroke down to move to the next week" @@ -200,10 +203,10 @@ asyncTest( "keyboard handling", function() { function step5() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + testHelper.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2013, 12 - 1, 1 ), "Keystroke Page Up moves date to previous month" @@ -216,11 +219,11 @@ asyncTest( "keyboard handling", function() { function step6() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ) + testHelper.focusGrid( element ) .simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP, altKey: true } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2013, 1 - 1, 1 ), "Keystroke Page Up + ALT moves date to previous year" @@ -233,10 +236,10 @@ asyncTest( "keyboard handling", function() { function step7() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + testHelper.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 2 - 1, 1 ), "Keystroke Page Down moves date to next month" @@ -249,11 +252,11 @@ asyncTest( "keyboard handling", function() { function step8() { element.calendar({ value: new Date( 2014, 1 - 1, 1 ) }); - TestHelpers.calendar.focusGrid( element ) + testHelper.focusGrid( element ) .simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN, altKey: true } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2015, 1 - 1, 1 ), "Keystroke Page Down + ALT moves date to next year" @@ -267,10 +270,10 @@ asyncTest( "keyboard handling", function() { function step9() { element.calendar({ value: new Date( 2014, 3 - 1, 31 ) }); - TestHelpers.calendar.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + testHelper.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 2 - 1, 28 ), "Keystroke Page Up and short months" @@ -283,10 +286,10 @@ asyncTest( "keyboard handling", function() { function step10() { element.calendar({ value: new Date( 2016, 1 - 1, 30 ) }); - TestHelpers.calendar.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + testHelper.focusGrid( element ).simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); setTimeout(function() { $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2016, 2 - 1, 29 ), "Keystroke Page Down and leap years" @@ -308,7 +311,7 @@ asyncTest( "mouse", function() { function step1() { $( "tbody button:contains(10)", element ).simulate( "mousedown" ); date.setDate( 10 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date, "Mouse click" @@ -316,7 +319,7 @@ asyncTest( "mouse", function() { element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) ); $( ".ui-calendar-calendar tbody button:contains(12)", element ).simulate( "mousedown" ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 2 - 1, 12 ), "Mouse click - preset" @@ -326,7 +329,7 @@ asyncTest( "mouse", function() { element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) ); $( ".ui-calendar-prev", element ).simulate( "click" ); $( ".ui-calendar-calendar tbody button:contains(16)", element ).simulate( "mousedown" ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 1 - 1, 16 ), "Mouse click - previous" @@ -335,7 +338,7 @@ asyncTest( "mouse", function() { element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) ); $( ".ui-calendar-next", element ).simulate( "click" ); $( ".ui-calendar-calendar tbody button:contains(18)", element ).simulate( "mousedown" ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 3 - 1, 18 ), "Mouse click - next" @@ -355,7 +358,7 @@ asyncTest( "mouse", function() { $( ".ui-calendar-prev", element ).simulate( "click" ); $( "tbody button:contains(16)", element ).simulate( "mousedown" ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 2 - 1, 16 ), "Mouse click - previous + min/max" @@ -373,7 +376,7 @@ asyncTest( "mouse", function() { $( ".ui-calendar-next", element ).simulate( "click" ); $( "tbody button:contains(18)", element ).simulate( "mousedown" ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 2 - 1, 18 ), "Mouse click - next + min/max" @@ -384,4 +387,4 @@ asyncTest( "mouse", function() { step1(); }); -})( jQuery ); +} ); diff --git a/tests/unit/calendar/calendar_events.js b/tests/unit/calendar/events.js index e69de29bb..e69de29bb 100644 --- a/tests/unit/calendar/calendar_events.js +++ b/tests/unit/calendar/events.js diff --git a/tests/unit/calendar/calendar_test_helpers.js b/tests/unit/calendar/helper.js index 630fff350..a82e96705 100644 --- a/tests/unit/calendar/calendar_test_helpers.js +++ b/tests/unit/calendar/helper.js @@ -1,4 +1,9 @@ -TestHelpers.calendar = { +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { + +return $.extend( helper, { addMonths: function( date, offset ) { var maxDay = 32 - new Date( date.getFullYear(), date.getMonth() + offset, 32 ).getDate(); date.setDate( Math.min( date.getDate(), maxDay ) ); @@ -21,4 +26,6 @@ TestHelpers.calendar = { return $( document.activeElement ); } -}; +} ); + +} ); diff --git a/tests/unit/calendar/calendar_methods.js b/tests/unit/calendar/methods.js index d447e4eab..e28d30d6b 100644 --- a/tests/unit/calendar/calendar_methods.js +++ b/tests/unit/calendar/methods.js @@ -1,11 +1,15 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/calendar" +], function( $, testHelper ) { module( "calendar: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#calendar", function() { + assert.domEqual( "#calendar", function() { $( "#calendar" ).calendar().calendar( "destroy" ); }); }); @@ -65,7 +69,7 @@ test( "valueAsDate", function() { .hasClass( "ui-state-active" ), "First day marked as selected" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" ); element.calendar( "destroy" ); @@ -73,7 +77,7 @@ test( "valueAsDate", function() { equal( element.calendar( "valueAsDate" ), null, "Set date - default" ); element.calendar( "valueAsDate", date1 ); - TestHelpers.calendar.equalsDate(element.calendar( "valueAsDate" ), date1, "Set date - 2008-06-04" ); + testHelper.equalsDate(element.calendar( "valueAsDate" ), date1, "Set date - 2008-06-04" ); // With minimum/maximum element = $( "#calendar" ).calendar(); @@ -85,13 +89,13 @@ test( "valueAsDate", function() { element .calendar( "option", { min: minDate } ) .calendar( "valueAsDate", date2 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date2, "Set date min/max - value > min" ); element.calendar( "valueAsDate", date1 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date2, "Set date min/max - value < min" @@ -100,14 +104,14 @@ test( "valueAsDate", function() { element .calendar( "option", { max: maxDate, min: null } ) .calendar( "valueAsDate", date1 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value < max" ); element.calendar( "valueAsDate", date2 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value > max" @@ -116,14 +120,14 @@ test( "valueAsDate", function() { element .calendar( "option", { min: minDate } ) .calendar( "valueAsDate", date1 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value < min" ); element.calendar( "valueAsDate", date2 ); - TestHelpers.calendar.equalsDate( + testHelper.equalsDate( element.calendar( "valueAsDate" ), date1, "Set date min/max - value > max" ); @@ -138,4 +142,4 @@ test( "valueAsDate", function() { ); }); -})( jQuery ); +} ); diff --git a/tests/unit/calendar/calendar_options.js b/tests/unit/calendar/options.js index f8e942e03..c6049fce3 100644 --- a/tests/unit/calendar/calendar_options.js +++ b/tests/unit/calendar/options.js @@ -1,4 +1,8 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/calendar" +], function( $, testHelper ) { module( "calendar: options" ); @@ -197,44 +201,44 @@ test( "min / max", function() { element .calendar( "option", { min: minDate } ) .calendar( "value", "6/4/08" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min" ); element .calendar( "option", { min: minDate } ) .calendar( "value", "1/4/08" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" ); element .calendar( "option", { min: null } ) .calendar( "value", "6/4/08" ) .calendar( "option", { max: maxDate } ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < max" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < max" ); element .calendar( "option", { max: maxDate } ) .calendar( "value", "1/4/09" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - setDate > max" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - setDate > max" ); element .calendar( "option", { min: minDate, max: maxDate } ) .calendar( "value", "1/4/08" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < min" ); element .calendar( "option", { min: minDate, max: maxDate } ) .calendar( "value", "6/4/08" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min, < max" ); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min, < max" ); element .calendar( "option", { min: minDate, max: maxDate } ) .calendar( "value", "1/4/09" ); - TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > max" );}); + testHelper.equalsDate( element.calendar( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > max" );}); /* // TODO: Move this to $.date, Globalize or calendar widget test( "daylightSaving", function() { expect( 25 ); - var inp = TestHelpers.calendar.init( "#inp" ), + var inp = testHelper.init( "#inp" ), dp = $( "#ui-datepicker-div" ); ok(true, "Daylight saving - " + new Date()); // Australia, Sydney - AM change, southern hemisphere @@ -316,4 +320,4 @@ test( "daylightSaving", function() { }); */ -})(jQuery); +} ); diff --git a/tests/unit/core/all.html b/tests/unit/core/all.html index fc8d2eadb..c7834b81a 100644 --- a/tests/unit/core/all.html +++ b/tests/unit/core/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html index f846d6e10..366eecebe 100644 --- a/tests/unit/core/core.html +++ b/tests/unit/core/core.html @@ -4,21 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Core Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - js: [ "ui/core.js" ] - }); - </script> - - <script src="core.js"></script> - <script src="selector.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js"></script> + <script src="../../lib/bootstrap.js" data-modules="core selector"></script> <style> .zindex { z-index: 100; @@ -120,6 +108,83 @@ <div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div> +<div id="labels-fragment"> + <label for="test">1</label> + <div> + <div> + <form> + <label for="test">2</label> + <label>3 + <input id="test"> + </label> + <label for="test">4</label> + </form> + <label for="test">5</label> + </div> + <div> + <div> + <form> + <label for="test">6</label> + </form> + </div> + </div> + </div> + <div> + <div> + <form> + <label for="test">7</label> + <label> + </label> + <label for="test">8</label> + </form> + <label for="test">9</label> + </div> + <div> + <div> + <form> + <input id="test-2"> + <label for="test">10</label> + </form> + </div> + </div> + </div> +</div> + +<div id="weird-['x']-id"></div> +</div> + +<!-- This is intentionally outside the test fixture. We don't want this +markup to be removed and reinserted between tests, as it will remove saved +refrences in the tests. --> +<div id="form-test"> + <input id="body:_implicit_form"> + <input id="body:_explicit_form" form="form-1"> + <form id="form-1"> + <input id="form-1:_implicit_form"> + <input id="form-1:_explicit_form" form="form-1"> + </form> + <form id="form-2"> + <input id="form-2:_implicit_form"> + <input id="form-2:_explicit_form_other_form" form="form-1"> + </form> +</div> +<div id="form-test-detached"> + <input id="fragment:_implicit_form"> + + <!-- Support: Chrome > 33 + When an input with a form attribute is inside a fragment, and not contained by any form, + the form property returns the proper form. However resetting the form does not reset the + input. The following input is commented out to stop the test from failing in this case. + <input id="fragment:_explicit_form" form="form-3"> + --> + <form id="form-3"> + <input id="form-3:_implicit_form"> + <input id="form-3:_explicit_form" form="form-3"> + </form> + <form id="form-4"> + <input id="form-4:_implicit_form"> + <input id="form-4:_explicit_form_other_form" form="form-3"> + </form> </div> </body> </html> diff --git a/tests/unit/core/core.js b/tests/unit/core/core.js index 2f3657605..ac9f28e00 100644 --- a/tests/unit/core/core.js +++ b/tests/unit/core/core.js @@ -1,8 +1,12 @@ -(function( $ ) { +define( [ + "jquery", + "lib/common", + "ui/core" +], function( $, common ) { module( "core - jQuery extensions" ); -TestHelpers.testJshint( "core" ); +common.testJshint( "core" ); test( "innerWidth - getter", function() { expect( 2 ); @@ -127,11 +131,74 @@ test( "outerHeight(true) - setter", function() { test( "uniqueId / removeUniqueId", function() { expect( 3 ); var el = $( "img" ).eq( 0 ); - strictEqual( el.attr( "id" ), undefined, "element has no initial id" ); + equal( el.attr( "id" ), null, "element has no initial id" ); el.uniqueId(); ok( /ui-id-\d+$/.test( el.attr( "id" ) ), "element has generated id" ); el.removeUniqueId(); - strictEqual( el.attr( "id" ), undefined, "unique id has been removed from element" ); + equal( el.attr( "id" ), null, "unique id has been removed from element" ); }); -})( jQuery ); +test( "Labels", function() { + expect( 2 ); + + var expected = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" ]; + var dom = $( "#labels-fragment" ); + + function testLabels( testType ) { + var labels = dom.find( "#test" ).labels(); + var found = labels.map( function() { + + // Support: Core 1.9 Only + // We use $.trim() because core 1.9.x silently fails when white space is present + return $.trim( $( this ).text() ); + } ).get(); + + deepEqual( found, expected, + ".labels() finds all labels in " + testType + ", and sorts them in DOM order" ); + } + + testLabels( "the DOM" ); + + // Detach the dom to test on a fragment + dom.detach(); + testLabels( "document fragments" ); +} ); + +( function() { + var domAttached = $( "#form-test" ); + var domDetached = $( "#form-test-detached" ).detach(); + + function testForm( name, dom ) { + var inputs = dom.find( "input" ); + + inputs.each( function() { + var input = $( this ); + + asyncTest( name + this.id.replace( /_/g, " " ), function() { + expect( 1 ); + var form = input.form(); + + // If input has a form the value should reset to "" if not it should be "changed" + var value = form.length ? "" : "changed"; + + input.val( "changed" ); + + // If there is a form we reset just that. If there is not a form, reset every form. + // The idea is if a form is found resetting that form should reset the input. + // If no form is found no amount of resetting should change the value. + ( form.length ? form : dom.find( "form" ).addBack( "form" ) ).each( function() { + this.reset(); + } ); + + setTimeout( function() { + equal( input.val(), value, "Proper form found for #" + input.attr( "id" ) ); + start(); + } ); + } ); + } ); + } + + testForm( "form: attached: ", domAttached ); + testForm( "form: detached: ", domDetached ); +} )(); +} ); diff --git a/tests/unit/core/selector.js b/tests/unit/core/selector.js index 739eec559..ff4bb064a 100644 --- a/tests/unit/core/selector.js +++ b/tests/unit/core/selector.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/core" +], function( $ ) { module( "core - selectors" ); @@ -251,4 +254,11 @@ test( "tabbable - dimensionless parent with overflow", function() { isTabbable( "#dimensionlessParent", "input" ); }); -})( jQuery ); +test( "escapeSelector", function() { + expect( 1 ); + + equal( $( "#" + $.ui.escapeSelector( "weird-['x']-id" ) ).length, 1, + "properly escapes selectors to use as an id" ); +} ); + +} ); diff --git a/tests/unit/date/all.html b/tests/unit/date/all.html index 8f31592f1..5248d7ace 100644 --- a/tests/unit/date/all.html +++ b/tests/unit/date/all.html @@ -4,25 +4,21 @@ <meta charset="utf-8"> <title>jQuery UI Date Test Suite</title> - <script src="../../../jquery.js"></script> + <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> - testAllVersions( "date" ); + testAllVersions( "date" ); </script> </head> <body> -<h1 id="qunit-header">jQuery UI Datepicker 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"></div> <div id="qunit-fixture"> </div> diff --git a/tests/unit/date/date_core.js b/tests/unit/date/core.js index 65665431c..e6dc16dcf 100644 --- a/tests/unit/date/date_core.js +++ b/tests/unit/date/core.js @@ -1,3 +1,9 @@ +define( [ + "jquery", + "globalize", + "date" +], function( $, Globalize ) { + module( "date: core" ); test( "Instantiation", function() { @@ -187,3 +193,5 @@ test( "Format", 4, function() { equal( date.format({ pattern: "MMMM dd, yyyy" }), "October 16, 2012", "Checking MMMM dd, yyyy format" ); }); + +} ); diff --git a/tests/unit/date/date.html b/tests/unit/date/date.html index b2dd2c41e..1d9ee6c1f 100644 --- a/tests/unit/date/date.html +++ b/tests/unit/date/date.html @@ -4,37 +4,16 @@ <meta charset="utf-8"> <title>jQuery UI Date Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - js: [ - "external/globalize/globalize.js", - "external/localization.js", - "external/date.js" - ] - }); - </script> - - <script src="date_core.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js"></script> + <script src="../../lib/bootstrap.js" data-modules="core"></script> </head> <body> -<h1 id="qunit-header">jQuery UI Date 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"></div> <div id="qunit-fixture"> - <div><input type="text" id="inp"><input type="text" id="alt"><div id="inl"></div></div> <p><input type="text" id="inp2"></p> - </div> </body> </html> diff --git a/tests/unit/datepicker/all.html b/tests/unit/datepicker/all.html index 65398542a..d2299a0f5 100644 --- a/tests/unit/datepicker/all.html +++ b/tests/unit/datepicker/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/datepicker/datepicker_common.js b/tests/unit/datepicker/common.js index 25c6d4298..bd7aca89e 100644 --- a/tests/unit/datepicker/datepicker_common.js +++ b/tests/unit/datepicker/common.js @@ -1,7 +1,14 @@ -TestHelpers.commonWidgetTests( "datepicker", { +define( [ + "lib/common", + "ui/datepicker", + "globalize-locales" +], function( common ) { + +common.testWidget( "datepicker", { defaults: { appendTo: null, buttons: [], + classes: {}, dateFormat: { date: "short" }, disabled: false, eachDay: $.noop, @@ -24,3 +31,5 @@ TestHelpers.commonWidgetTests( "datepicker", { select: null } }); + +} ); diff --git a/tests/unit/datepicker/datepicker_core.js b/tests/unit/datepicker/core.js index f7b508d7a..a9f5b0abf 100644 --- a/tests/unit/datepicker/datepicker_core.js +++ b/tests/unit/datepicker/core.js @@ -1,9 +1,11 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/datepicker" +], function( $, testHelper ) { module( "datepicker: core" ); -TestHelpers.testJshint( "datepicker" ); - test( "input's value determines starting date", function() { expect( 3 ); @@ -22,7 +24,7 @@ test( "input's value determines starting date", function() { asyncTest( "base structure", function() { expect( 5 ); - var input = TestHelpers.datepicker.initNewInput(), + var input = testHelper.initNewInput(), widget = input.datepicker( "widget" ); input.focus(); @@ -45,7 +47,7 @@ asyncTest( "Keyboard handling: input", function() { input = $( "#datepicker" ).datepicker(); function step1() { - TestHelpers.datepicker.init( input ); + testHelper.init( input ); picker = input.datepicker( "widget" ); ok( !picker.is( ":visible" ), "datepicker closed" ); @@ -59,7 +61,7 @@ asyncTest( "Keyboard handling: input", function() { } function step2() { - TestHelpers.datepicker.init( input ); + testHelper.init( input ); picker = input.datepicker( "widget" ); ok( !picker.is( ":visible" ), "datepicker closed" ); @@ -73,7 +75,7 @@ asyncTest( "Keyboard handling: input", function() { } function step3() { - TestHelpers.datepicker.init( input ); + testHelper.init( input ); instance = input.datepicker( "instance" ); // Enter = Select preset date @@ -82,7 +84,7 @@ asyncTest( "Keyboard handling: input", function() { .datepicker( "refresh" ) .datepicker( "open" ) .simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Keystroke enter - preset" ); input @@ -97,7 +99,7 @@ asyncTest( "Keyboard handling: input", function() { .val( "1/1/14" ) .datepicker( "open" ) .simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Keystroke esc - preset" ); input @@ -105,13 +107,13 @@ asyncTest( "Keyboard handling: input", function() { .datepicker( "open" ) .simulate( "keydown", { ctrlKey: true, keyCode: $.ui.keyCode.PAGE_UP } ) .simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Keystroke esc - abandoned" ); input .val( "1/2/14" ) .simulate( "keyup" ); - TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 2 ), + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 2 ), "Picker updated as user types into input" ); input.datepicker( "destroy" ); @@ -129,7 +131,7 @@ test( "ARIA", function() { asyncTest( "mouse", function() { expect( 4 ); - var input = TestHelpers.datepicker.init( $( "#datepicker" ).val( "" ) ), + var input = testHelper.init( $( "#datepicker" ).val( "" ) ), picker = input.datepicker( "widget" ); input.datepicker( "open" ); @@ -137,7 +139,7 @@ asyncTest( "mouse", function() { setTimeout(function() { input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" ); $( ".ui-calendar-calendar tbody button:contains(12)", picker ).simulate( "mousedown", {} ); - TestHelpers.datepicker.equalsDate( + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 4 - 1, 12 ), "Mouse click - preset" @@ -149,7 +151,7 @@ asyncTest( "mouse", function() { input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" ); input.simulate( "click" ); - TestHelpers.datepicker.equalsDate( + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 4 - 1, 4 ), "Mouse click - close + preset" @@ -158,7 +160,7 @@ asyncTest( "mouse", function() { input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" ); picker.find( "a.ui-calendar-prev" ).simulate( "click" ); input.simulate( "click" ); - TestHelpers.datepicker.equalsDate( + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2008, 4 - 1, 4 ), "Mouse click - abandoned" @@ -168,5 +170,4 @@ asyncTest( "mouse", function() { }, 100 ); }); -})( jQuery ); - +} ); diff --git a/tests/unit/datepicker/datepicker.html b/tests/unit/datepicker/datepicker.html index 24593a7ff..3b20272b1 100644 --- a/tests/unit/datepicker/datepicker.html +++ b/tests/unit/datepicker/datepicker.html @@ -4,36 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Datepicker Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../../../external/globalize/globalize.js"></script> - <script src="../../../external/date.js"></script> - <script src="../../../external/localization.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "calendar", "datepicker" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/button.js", - "ui/calendar.js", - "ui/position.js", - "ui/datepicker.js" - ] - }); - </script> - - <script src="datepicker_common.js"></script> - <script src="datepicker_core.js"></script> - <script src="datepicker_events.js"></script> - <script src="datepicker_methods.js"></script> - <script src="datepicker_options.js"></script> - <script src="datepicker_test_helpers.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core calendar datepicker"></script> + <script src="../../lib/bootstrap.js" data-widget="datepicker"></script> </head> <body> diff --git a/tests/unit/datepicker/datepicker_events.js b/tests/unit/datepicker/events.js index 35720ebf6..dcadfecf9 100644 --- a/tests/unit/datepicker/datepicker_events.js +++ b/tests/unit/datepicker/events.js @@ -1,11 +1,15 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/datepicker" +], function( $, testHelper ) { module( "datepicker: events" ); test( "beforeOpen", function() { expect( 3 ); - var input = TestHelpers.datepicker.init( "#datepicker", { + var input = testHelper.init( "#datepicker", { beforeOpen: function() { ok( true, "beforeOpen event fired before open" ); ok( input.datepicker( "widget" ).is( ":hidden" ), "calendar hidden on beforeOpen" ); @@ -33,7 +37,7 @@ test( "close", function() { expect( 4 ); var shouldFire, - input = TestHelpers.datepicker.init( "#datepicker", { + input = testHelper.init( "#datepicker", { close: function() { ok( shouldFire, "close event fired" ); } @@ -63,7 +67,7 @@ test( "close", function() { test( "open", function() { expect( 2 ); - var input = TestHelpers.datepicker.init( "#datepicker", { + var input = testHelper.init( "#datepicker", { open: function() { ok( true, "open event fired on open" ); ok( widget.is( ":visible" ), "calendar open on open" ); @@ -77,7 +81,7 @@ test( "open", function() { asyncTest( "select", function() { expect( 4 ); - var input = TestHelpers.datepicker.init( "#datepicker", { + var input = testHelper.init( "#datepicker", { select: function( event ) { ok( true, "select event fired " + message ); equal( @@ -131,4 +135,4 @@ asyncTest( "select", function() { step1(); }); -})( jQuery ); +} ); diff --git a/tests/unit/datepicker/datepicker_test_helpers.js b/tests/unit/datepicker/helper.js index 3548f6ea3..7cc21bb66 100644 --- a/tests/unit/datepicker/datepicker_test_helpers.js +++ b/tests/unit/datepicker/helper.js @@ -1,4 +1,10 @@ -TestHelpers.datepicker = { +define( [ + "jquery", + "lib/helper", + "ui/datepicker" +], function( $, helper ) { + +return $.extend( helper, { addMonths: function( date, offset ) { var maxDay = 32 - new Date( date.getFullYear(), date.getMonth() + offset, 32 ).getDate(); date.setDate( Math.min( date.getDate(), maxDay ) ); @@ -23,4 +29,6 @@ TestHelpers.datepicker = { return $( "<input>" ).datepicker( options ) .appendTo( "#qunit-fixture" ); } -}; +} ); + +} ); diff --git a/tests/unit/datepicker/datepicker_methods.js b/tests/unit/datepicker/methods.js index b969c00f4..db3762fff 100644 --- a/tests/unit/datepicker/datepicker_methods.js +++ b/tests/unit/datepicker/methods.js @@ -1,12 +1,16 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/datepicker" +], function( $, testHelper ) { module( "datepicker: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 3 ); var input = $( "#datepicker" ); - domEqual( input, function() { + assert.domEqual( input, function() { input.datepicker(); ok( input.attr( "aria-owns" ), "aria-owns attribute added" ); ok( input.attr( "aria-haspopup" ), "aria-haspopup attribute added" ); @@ -17,7 +21,7 @@ test( "destroy", function() { test( "enable / disable", function() { expect( 10 ); - var input = TestHelpers.datepicker.init( "#datepicker" ), + var input = testHelper.init( "#datepicker" ), calendar = input.datepicker( "widget" ); input.datepicker( "disable" ); @@ -46,7 +50,7 @@ test( "widget", function() { test( "open / close", function() { expect( 7 ); - var input = TestHelpers.datepicker.initNewInput({ show: false, hide: false }), + var input = testHelper.initNewInput({ show: false, hide: false }), calendar = input.datepicker( "widget" ); ok( calendar.is( ":hidden" ), "calendar hidden on init" ); @@ -85,7 +89,7 @@ test( "value", function() { test( "valueAsDate", function() { expect( 6 ); - var input = TestHelpers.datepicker.init( "#datepicker" ), + var input = testHelper.init( "#datepicker" ), picker = input.datepicker( "widget" ), date1 = new Date( 2008, 6 - 1, 4 ); @@ -95,17 +99,17 @@ test( "valueAsDate", function() { picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "First day marked as selected" ); - TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" ); + testHelper.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" ); input.val( "a/b/c" ); equal( input.datepicker( "valueAsDate" ), null, "Invalid dates return null" ); input.val( "" ).datepicker( "destroy" ); - input = TestHelpers.datepicker.init( "#datepicker" ); + input = testHelper.init( "#datepicker" ); strictEqual( input.datepicker( "valueAsDate" ), null, "Set date - default" ); input.datepicker( "valueAsDate", date1 ); - TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), date1, "Set date - 2008-06-04" ); + testHelper.equalsDate( input.datepicker( "valueAsDate" ), date1, "Set date - 2008-06-04" ); }); test( "isValid", function() { @@ -121,4 +125,4 @@ test( "isValid", function() { input.datepicker( "destroy" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/options.js index fefd4d55f..32979eac8 100644 --- a/tests/unit/datepicker/datepicker_options.js +++ b/tests/unit/datepicker/options.js @@ -1,4 +1,8 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/datepicker" +], function( $, testHelper ) { module( "datepicker: options" ); @@ -71,7 +75,7 @@ test( "Pass-through options", function() { }); }); -asyncTest( "position", function() { +asyncTest( "position", function(assert) { expect( 3 ); var input = $( "<input>" ).datepicker().appendTo( "body" ).css({ position: "absolute", @@ -82,8 +86,8 @@ asyncTest( "position", function() { input.datepicker( "open" ); setTimeout(function() { - closeEnough( input.offset().left, container.offset().left, 1, "left sides line up by default" ); - closeEnough( container.offset().top, input.offset().top + input.outerHeight(), 1, + assert.close( input.offset().left, container.offset().left, 1, "left sides line up by default" ); + assert.close( container.offset().top, input.offset().top + input.outerHeight(), 1, "datepicker directly under input by default" ); // Change the position option using option() @@ -91,7 +95,7 @@ asyncTest( "position", function() { my: "left top", at: "right bottom" }); - closeEnough( container.offset().left, input.offset().left + input.outerWidth(), 1, + assert.close( container.offset().left, input.offset().left + input.outerWidth(), 1, "datepicker on right hand side of input after position change" ); input.remove(); @@ -102,7 +106,7 @@ asyncTest( "position", function() { test( "Stop datepicker from appearing with beforeOpen event handler", function() { expect( 3 ); - var input = TestHelpers.datepicker.init( "#datepicker", { + var input = testHelper.init( "#datepicker", { beforeOpen: function() {} }); @@ -110,7 +114,7 @@ test( "Stop datepicker from appearing with beforeOpen event handler", function() ok( input.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns nothing" ); input.datepicker( "close" ).datepicker( "destroy" ); - input = TestHelpers.datepicker.init( "#datepicker", { + input = testHelper.init( "#datepicker", { beforeOpen: function() { return true; } @@ -119,7 +123,7 @@ test( "Stop datepicker from appearing with beforeOpen event handler", function() ok( input.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns true" ); input.datepicker( "close" ).datepicker( "destroy" ); - input = TestHelpers.datepicker.init( "#datepicker", { + input = testHelper.init( "#datepicker", { beforeOpen: function() { return false; } @@ -129,4 +133,4 @@ test( "Stop datepicker from appearing with beforeOpen event handler", function() input.datepicker( "destroy" ); }); -})(jQuery); +} ); diff --git a/tests/unit/dialog/all.html b/tests/unit/dialog/all.html index b298c2c30..009b4a38d 100644 --- a/tests/unit/dialog/all.html +++ b/tests/unit/dialog/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/common-deprecated.js index fc10fabaa..7b0091277 100644 --- a/tests/unit/dialog/dialog_common.js +++ b/tests/unit/dialog/common-deprecated.js @@ -1,12 +1,21 @@ -TestHelpers.commonWidgetTests( "dialog", { +define( [ + "lib/common", + "ui/dialog" +], function( common ) { + +common.testWidget( "dialog", { defaults: { appendTo: "body", autoOpen: true, buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-titlebar": "ui-corner-all" + }, closeOnEscape: true, closeText: "Close", - disabled: false, dialogClass: "", + disabled: false, draggable: true, height: "auto", hide: null, @@ -41,3 +50,5 @@ TestHelpers.commonWidgetTests( "dialog", { resizeStop: null } }); + +} ); diff --git a/tests/unit/dialog/common.js b/tests/unit/dialog/common.js new file mode 100644 index 000000000..389b2ddff --- /dev/null +++ b/tests/unit/dialog/common.js @@ -0,0 +1,53 @@ +define( [ + "lib/common", + "ui/dialog" +], function( common ) { + +common.testWidget( "dialog", { + defaults: { + appendTo: "body", + autoOpen: true, + buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-titlebar": "ui-corner-all" + }, + closeOnEscape: true, + closeText: "Close", + 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/core.js index d72fef7b5..770d9f543 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/core.js @@ -1,17 +1,65 @@ -/* - * dialog_core.js - */ - -(function($) { +define( [ + "jquery", + "ui/dialog" +], function( $ ) { // TODO add teardown callback to remove dialogs module("dialog: core"); +test( "markup structure", function( assert ) { + expect( 11 ); + + var element = $( "<div>" ).dialog({ + buttons: [ { + text: "Ok", + click: $.noop + } ] + }), + widget = element.dialog( "widget" ), + titlebar = widget.find( ".ui-dialog-titlebar" ), + title = titlebar.find( ".ui-dialog-title" ), + close = titlebar.find( ".ui-dialog-titlebar-close" ), + buttonpane = widget.find( ".ui-dialog-buttonpane" ), + buttonset = widget.find( ".ui-dialog-buttonset" ), + buttons = buttonset.find( ".ui-button" ); + + assert.hasClasses( widget, "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" ); + assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" ); + equal( titlebar.length, 1, "Dialog has exactly one titlebar" ); + assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" ); + equal( close.length, 1, "Titlebar has exactly one close button" ); + equal( title.length, 1, "Titlebar has exactly one title" ); + assert.hasClasses( element, "ui-dialog-content ui-widget-content" ); + assert.hasClasses( buttonpane, "ui-dialog-buttonpane ui-widget-content" ); + equal( buttonpane.length, 1, "Dialog has exactly one buttonpane" ); + equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" ); + equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" ); + +}); + +test( "markup structure - no buttons", function( assert ) { + expect( 7 ); + + var element = $( "<div>" ).dialog(), + widget = element.dialog( "widget" ), + titlebar = widget.find( ".ui-dialog-titlebar" ), + title = titlebar.find( ".ui-dialog-title" ), + close = titlebar.find( ".ui-dialog-titlebar-close" ); + + assert.hasClasses( widget, "ui-dialog ui-widget ui-widget-content" ); + assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" ); + equal( titlebar.length, 1, "Dialog has exactly one titlebar" ); + assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" ); + equal( close.length, 1, "Titlebar has exactly one close button" ); + equal( title.length, 1, "Titlebar has exactly one title" ); + assert.hasClasses( element, "ui-dialog-content ui-widget-content" ); +}); + test("title id", function() { expect(1); var titleId, - element = $("<div></div>").dialog(); + element = $("<div>").dialog(); titleId = element.dialog("widget").find(".ui-dialog-title").attr("id"); ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id"); @@ -21,7 +69,7 @@ test("title id", function() { test( "ARIA", function() { expect( 4 ); - var element = $( "<div></div>" ).dialog(), + var element = $( "<div>" ).dialog(), wrapper = element.dialog( "widget" ); equal( wrapper.attr( "role" ), "dialog", "dialog role" ); equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) ); @@ -29,7 +77,7 @@ test( "ARIA", function() { element.remove(); element = $("<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>").dialog(); - strictEqual( element.dialog( "widget" ).attr( "aria-describedby" ), undefined, "no aria-describedby added, as already present in markup" ); + equal( element.dialog( "widget" ).attr( "aria-describedby" ), null, "no aria-describedby added, as already present in markup" ); element.remove(); }); @@ -55,94 +103,98 @@ asyncTest( "focus tabbable", function() { // Support: IE8 // For some reason the focus doesn't get set properly if we don't // focus the body first. - $( "body" ).focus(); + $( "body" ).trigger( "focus" ); element = $( markup ).dialog( options ); setTimeout(function() { - testFn(); - element.remove(); - setTimeout( next ); + testFn(function done() { + element.remove(); + setTimeout( next ); + }); }); } function step1() { - element = $( "<div><input><input></div>" ).dialog( options ); - setTimeout(function() { - var input = element.find( "input:last" ).focus().blur(); + checkFocus( "<div><input><input></div>", options, function( done ) { + var input = element.find( "input:last" ).trigger( "focus" ).trigger( "blur" ); element.dialog( "instance" )._focusTabbable(); setTimeout(function() { equal( document.activeElement, input[ 0 ], "1. an element that was focused previously." ); - element.remove(); - setTimeout( step2 ); + done(); }); - }); + }, step2 ); } function step2() { - checkFocus( "<div><input><input autofocus></div>", options, function() { + checkFocus( "<div><input><input autofocus></div>", options, function( done ) { equal( document.activeElement, element.find( "input" )[ 1 ], "2. first element inside the dialog matching [autofocus]" ); + done(); }, step3 ); } function step3() { - checkFocus( "<div><input><input></div>", options, function() { + checkFocus( "<div><input><input></div>", options, function( done ) { equal( document.activeElement, element.find( "input" )[ 0 ], "3. tabbable element inside the content element" ); + done(); }, step4 ); } function step4() { - checkFocus( "<div>text</div>", options, function() { + checkFocus( "<div>text</div>", options, function( done ) { equal( document.activeElement, element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ], "4. tabbable element inside the buttonpane" ); + done(); }, step5 ); } function step5() { - checkFocus( "<div>text</div>", {}, function() { + checkFocus( "<div>text</div>", {}, function( done ) { equal( document.activeElement, element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], "5. the close button" ); + done(); }, step6 ); } function step6() { - element = $( "<div>text</div>" ).dialog({ - autoOpen: false - }); - element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); - element.dialog( "open" ); - setTimeout(function() { - equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" ); - element.remove(); - setTimeout( step7 ); - }); + checkFocus( "<div>text</div>", { autoOpen: false }, function( done ) { + element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); + element.dialog( "open" ); + setTimeout(function() { + equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" ); + done(); + }); + }, step7 ); } function step7() { - element = $( "<div><input name='0'><input name='1' autofocus></div>" ).dialog({ - open: function() { - var inputs = $( this ).find( "input" ); - inputs.last().keydown(function( event ) { - event.preventDefault(); - inputs.first().focus(); - }); - } - }); - setTimeout(function() { - var inputs = element.find( "input" ); - equal( document.activeElement, inputs[ 1 ], "Focus starts on second input" ); - inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB }); - setTimeout(function() { - equal( document.activeElement, inputs[ 0 ], - "Honor preventDefault, allowing custom focus management" ); - element.remove(); - start(); - }, 50 ); - }); + checkFocus( + "<div><input><input autofocus></div>", + { + open: function() { + var inputs = $( this ).find( "input" ); + inputs.last().on( "keydown",function( event ) { + event.preventDefault(); + inputs.first().trigger( "focus" ); + }); + } + }, + function( done ) { + var inputs = element.find( "input" ); + equal( document.activeElement, inputs[ 1 ], "Focus starts on second input" ); + inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB }); + setTimeout(function() { + equal( document.activeElement, inputs[ 0 ], + "Honor preventDefault, allowing custom focus management" ); + done(); + }, 50 ); + }, + start + ); } step1(); @@ -201,7 +253,7 @@ asyncTest( "#9048: multiple modal dialogs opened and closed in different order", $( "#dialog1" ).dialog( "close" ); setTimeout(function() { $( "#dialog2" ).dialog( "close" ); - $( "#favorite-animal" ).focus(); + $( "#favorite-animal" ).trigger( "focus" ); ok( true, "event handlers cleaned up (no errors thrown)" ); start(); }); @@ -225,20 +277,20 @@ asyncTest( "interaction between overlay and other dialogs", function() { // Support: IE8 // For some reason the focus doesn't get set properly if we don't // focus the body first. - $( "body" ).focus(); + $( "body" ).trigger( "focus" ); // Wait for the modal to init setTimeout(function() { second.testWidget( "open" ); // Simulate user tabbing from address bar to an element outside the dialog - $( "#favorite-animal" ).focus(); + $( "#favorite-animal" ).trigger( "focus" ); setTimeout(function() { equal( document.activeElement, secondInput[ 0 ] ); // Last active dialog must receive focus - firstInput.focus(); - $( "#favorite-animal" ).focus(); + firstInput.trigger( "focus" ); + $( "#favorite-animal" ).trigger( "focus" ); setTimeout(function() { equal( document.activeElement, firstInput[ 0 ] ); @@ -253,4 +305,4 @@ asyncTest( "interaction between overlay and other dialogs", function() { }); }); -})(jQuery); +} ); diff --git a/tests/unit/dialog/deprecated.html b/tests/unit/dialog/deprecated.html new file mode 100644 index 000000000..50bab180d --- /dev/null +++ b/tests/unit/dialog/deprecated.html @@ -0,0 +1,34 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button dialog"></script> + <script src="../../lib/bootstrap.js" data-widget="dialog" data-deprecated="true"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + <div id="dialog1"></div> + <div id="dialog2"></div> + <div id="form-dialog" title="Profile Information"> + <!-- create a spacer to ensure there's enough space to scroll --> + <div style="height: 250px;">...</div> + <fieldset> + <legend>Please share some personal information</legend> + <label for="favorite-animal">Your favorite animal</label><input id="favorite-animal"> + <label for="favorite-color">Your favorite color</label><input id="favorite-color"> + </fieldset> + <div role="group" aria-describedby="section2"> + <p id="section2">Some more (optional) information</p> + <label for="favorite-food">Favorite food</label><input id="favorite-food"> + </div> + </div> + <div class="wrap" id="wrap1"></div> + <div class="wrap" id="wrap2"></div> +</div> +</body> +</html> diff --git a/tests/unit/dialog/deprecated.js b/tests/unit/dialog/deprecated.js new file mode 100644 index 000000000..1f7087c57 --- /dev/null +++ b/tests/unit/dialog/deprecated.js @@ -0,0 +1,30 @@ +define( [ + "jquery", + "ui/dialog" +], function( $ ) { + +module( "dialog (deprecated): options" ); + +test( "dialogClass", function( assert ) { + expect( 5 ); + + var element = $( "<div>" ).dialog(), + widget = element.dialog( "widget" ); + assert.lacksClasses( widget, "foo", "dialogClass not specified. class not added" ); + element.remove(); + + element = $( "<div>" ).dialog({ dialogClass: "foo" }); + widget = element.dialog( "widget" ); + assert.hasClasses( widget, "foo", "dialogClass in init, foo class added" ); + element.dialog( "option", "dialogClass", "foobar" ); + assert.lacksClasses( widget, "foo", "dialogClass changed, previous one was removed" ); + assert.hasClasses( widget, "foobar", "dialogClass changed, new one was added" ); + element.remove(); + + element = $( "<div>" ).dialog({ dialogClass: "foo bar" }); + widget = element.dialog( "widget" ); + assert.hasClasses( widget, "foo bar", "dialogClass in init, two classes." ); + element.remove(); +}); + +} ); diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index 6f39f7b8a..bdba5e11c 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -4,39 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Dialog Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "dialog" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/position.js", - "ui/mouse.js", - "ui/draggable.js", - "ui/resizable.js", - "ui/button.js", - "ui/effect.js", - "ui/effect-blind.js", - "ui/effect-clip.js", - "ui/effect-explode.js", - "ui/dialog.js" - ] - }); - </script> - - <script src="dialog_common.js"></script> - <script src="dialog_core.js"></script> - <script src="dialog_events.js"></script> - <script src="dialog_methods.js"></script> - <script src="dialog_options.js"></script> - <script src="dialog_test_helpers.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button dialog"></script> + <script src="../../lib/bootstrap.js" data-widget="dialog" data-no-back-compat="true"></script> </head> <body> diff --git a/tests/unit/dialog/dialog_events.js b/tests/unit/dialog/events.js index 49b93bdd1..0e48b7afa 100644 --- a/tests/unit/dialog/dialog_events.js +++ b/tests/unit/dialog/events.js @@ -1,7 +1,8 @@ -/* - * dialog_events.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/dialog" +], function( $, testHelper ) { module("dialog: events"); @@ -29,7 +30,7 @@ test("open", function() { equal(ev.type, "dialogopen", "event type in callback"); deepEqual(ui, {}, "ui hash in callback"); } - }).bind("dialogopen", function(ev, ui) { + }).on("dialogopen", function(ev, ui) { ok(element.dialog( "instance" )._isOpen, "interal _isOpen flag is set"); ok(true, "dialog('open') fires open event"); equal(this, element[0], "context of event"); @@ -69,7 +70,7 @@ test( "focus", function() { other.dialog( "moveToTop" ); element.dialog( "moveToTop" ); - element.bind( "dialogfocus", function() { + element.on( "dialogfocus", function() { ok( true, "when mousedown anywhere on the dialog and it wasn't on top" ); }); other.dialog( "moveToTop" ); @@ -95,7 +96,7 @@ test("dragStart", function() { ok(ui.position !== undefined, "ui.position in callback"); ok(ui.offset !== undefined, "ui.offset in callback"); } - }).bind("dialogdragstart", function(ev, ui) { + }).on("dialogdragstart", function(ev, ui) { ok(true, "dragging fires dialogdragstart event"); equal(this, element[0], "context of event"); ok(ui.position !== undefined, "ui.position in callback"); @@ -103,7 +104,7 @@ test("dragStart", function() { }); handle = $(".ui-dialog-titlebar", element.dialog("widget")); - TestHelpers.dialog.drag(element, handle, 50, 50); + testHelper.drag(element, handle, 50, 50); element.remove(); }); @@ -131,7 +132,7 @@ test("drag", function() { }); handle = $(".ui-dialog-titlebar", element.dialog("widget")); - TestHelpers.dialog.drag(element, handle, 50, 50); + testHelper.drag(element, handle, 50, 50); element.remove(); }); @@ -147,7 +148,7 @@ test("dragStop", function() { ok(ui.position !== undefined, "ui.position in callback"); ok(ui.offset !== undefined, "ui.offset in callback"); } - }).bind("dialogdragstop", function(ev, ui) { + }).on("dialogdragstop", function(ev, ui) { ok(true, "dragging fires dialogdragstop event"); equal(this, element[0], "context of event"); ok(ui.position !== undefined, "ui.position in callback"); @@ -155,7 +156,7 @@ test("dragStop", function() { }); handle = $(".ui-dialog-titlebar", element.dialog("widget")); - TestHelpers.dialog.drag(element, handle, 50, 50); + testHelper.drag(element, handle, 50, 50); element.remove(); }); @@ -173,7 +174,7 @@ test("resizeStart", function() { ok(ui.position !== undefined, "ui.position in callback"); ok(ui.size !== undefined, "ui.size in callback"); } - }).bind("dialogresizestart", function(ev, ui) { + }).on("dialogresizestart", function(ev, ui) { ok(true, "resizing fires dialogresizestart event"); equal(this, element[0], "context of event"); ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); @@ -183,7 +184,7 @@ test("resizeStart", function() { }); handle = $(".ui-resizable-se", element.dialog("widget")); - TestHelpers.dialog.drag(element, handle, 50, 50); + testHelper.drag(element, handle, 50, 50); element.remove(); }); @@ -215,7 +216,7 @@ test("resize", function() { }); handle = $(".ui-resizable-se", element.dialog("widget")); - TestHelpers.dialog.drag(element, handle, 50, 50); + testHelper.drag(element, handle, 50, 50); element.remove(); }); @@ -233,7 +234,7 @@ test("resizeStop", function() { ok(ui.position !== undefined, "ui.position in callback"); ok(ui.size !== undefined, "ui.size in callback"); } - }).bind("dialogresizestop", function(ev, ui) { + }).on("dialogresizestop", function(ev, ui) { ok(true, "resizing fires dialogresizestop event"); equal(this, element[0], "context of event"); ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); @@ -243,7 +244,7 @@ test("resizeStop", function() { }); handle = $(".ui-resizable-se", element.dialog("widget")); - TestHelpers.dialog.drag(element, handle, 50, 50); + testHelper.drag(element, handle, 50, 50); element.remove(); }); @@ -257,7 +258,7 @@ asyncTest("close", function() { equal(ev.type, "dialogclose", "event type in callback"); deepEqual(ui, {}, "ui hash in callback"); } - }).bind("dialogclose", function(ev, ui) { + }).on("dialogclose", function(ev, ui) { ok(true, ".dialog('close') fires dialogclose event"); equal(this, element[0], "context of event"); deepEqual(ui, {}, "ui hash in event"); @@ -275,7 +276,7 @@ asyncTest("close", function() { deepEqual(ui, {}, "ui hash in callback"); start(); } - }).bind("dialogclose", function(ev, ui) { + }).on("dialogclose", function(ev, ui) { ok(true, ".dialog('close') fires dialogclose event"); equal(this, element[0], "context of event"); deepEqual(ui, {}, "ui hash in event"); @@ -313,7 +314,7 @@ test("beforeClose", function() { ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing"); element.remove(); - element = $("<div></div>").dialog().bind("dialogbeforeclose", function(ev, ui) { + element = $("<div></div>").dialog().on("dialogbeforeclose", function(ev, ui) { ok(true, ".dialog('close') triggers dialogbeforeclose event"); equal(this, element[0], "context of event"); deepEqual(ui, {}, "ui hash in event"); @@ -337,7 +338,7 @@ asyncTest("ensure dialog's container doesn't scroll on resize and focus", functi equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after focus moved to dialog"); element.dialog("destroy"); start(); - }, 500); + }); }); test("#5184: isOpen in dialogclose event is true", function() { @@ -366,4 +367,4 @@ test("ensure dialog keeps focus when clicking modal overlay", function() { element.remove(); }); -})(jQuery); +} ); diff --git a/tests/unit/dialog/dialog_test_helpers.js b/tests/unit/dialog/helper.js index 705eb3010..f84d1d624 100644 --- a/tests/unit/dialog/dialog_test_helpers.js +++ b/tests/unit/dialog/helper.js @@ -1,4 +1,10 @@ -TestHelpers.dialog = { +define( [ + "jquery", + "lib/helper", + "ui/dialog" +], function( $, helper ) { + +return $.extend( helper, { drag: function(element, handle, dx, dy) { var d = element.dialog("widget"); //this mouseover is to work around a limitation in resizable @@ -14,7 +20,7 @@ TestHelpers.dialog = { handle = $(".ui-dialog-titlebar", d), offsetBefore = d.offset(); - TestHelpers.dialog.drag(element, handle, dx, dy); + this.drag(element, handle, dx, dy); offsetAfter = d.offset(); @@ -34,7 +40,7 @@ TestHelpers.dialog = { heightBefore = element.height(), widthBefore = element.width(); - TestHelpers.dialog.drag(element, handle, 50, 50); + this.drag(element, handle, 50, 50); heightAfter = element.height(); widthAfter = element.width(); @@ -44,4 +50,6 @@ TestHelpers.dialog = { expected = { width: widthBefore + dw, height: heightBefore + dh }; deepEqual(actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg); } -}; +} ); + +} ); diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/methods.js index c449ad0d4..cee0cd3a7 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/methods.js @@ -1,7 +1,7 @@ -/* - * dialog_methods.js - */ -(function($) { +define( [ + "jquery", + "ui/dialog" +], function( $ ) { module("dialog: methods", { teardown: function() { @@ -33,18 +33,18 @@ test("init", function() { ok(true, "arbitrary option setter after init"); }); -test("destroy", function() { +test("destroy", function( assert ) { expect( 17 ); var element, element2; $( "#dialog1, #form-dialog" ).hide(); - domEqual( "#dialog1", function() { + assert.domEqual( "#dialog1", function() { var dialog = $( "#dialog1" ).dialog().dialog( "destroy" ); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); equal( dialog.index(), 0 ); }); - domEqual( "#form-dialog", function() { + assert.domEqual( "#form-dialog", function() { var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" ); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); equal( dialog.index(), 2 ); @@ -56,7 +56,7 @@ test("destroy", function() { minHeight: "100px", height: "200px" }); - domEqual( "#dialog1", function() { + assert.domEqual( "#dialog1", function() { $( "#dialog1" ).dialog().dialog( "destroy" ); }); @@ -84,10 +84,10 @@ asyncTest("#9000: Dialog leaves broken event handler after close/destroy in cert expect( 1 ); $( "#dialog1" ).dialog({ modal:true }).dialog( "close" ).dialog( "destroy" ); setTimeout(function() { - $( "#favorite-animal" ).focus(); + $( "#favorite-animal" ).trigger( "focus" ); ok( true, "close and destroy modal dialog before its really opened" ); start(); - }, 2 ); + }); }); test("#4980: Destroy should place element back in original DOM position", function(){ @@ -100,13 +100,12 @@ test("#4980: Destroy should place element back in original DOM position", functi ok($.contains(container[0], modal[0]), "dialog(destroy) should place element back in original DOM position"); }); -test( "enable/disable disabled", function() { - expect( 4 ); +test( "enable/disable disabled", function( assert ) { + expect( 3 ); var element = $( "<div></div>" ).dialog(); element.dialog( "disable" ); equal(element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" ); - ok( !element.dialog( "widget" ).hasClass( "ui-dialog-disabled" ), "disable method doesn't add ui-dialog-disabled class" ); - ok( !element.dialog( "widget" ).hasClass( "ui-state-disabled" ), "disable method doesn't add ui-state-disabled class" ); + assert.lacksClasses( element, "ui-dialog-disabled ui-state-disabled", "disable method doesn't add classes" ); ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" ); }); @@ -224,23 +223,23 @@ asyncTest( "#8958: dialog can be opened while opening", function() { // Support: IE8 // For some reason the #favorite-color input doesn't get focus if we don't // focus the body first, causing the test to hang. - $( "body" ).focus(); + $( "body" ).trigger( "focus" ); $( "#favorite-animal" ) // We focus the input to start the test. Once it receives focus, the // dialog will open. Opening the dialog, will cause an element inside // the dialog to gain focus, thus blurring the input. - .bind( "focus", function() { + .on( "focus", function() { element.dialog( "open" ); }) // When the input blurs, the dialog is in the process of opening. We // try to open the dialog again, to make sure that dialogs properly // handle a call to the open() method during the process of the dialog // being opened. - .bind( "blur", function() { + .on( "blur", function() { element.dialog( "open" ); }) - .focus(); + .trigger( "focus" ); }); test("#5531: dialog width should be at least minWidth on creation", function () { @@ -265,4 +264,4 @@ test("#5531: dialog width should be at least minWidth on creation", function () }); -})(jQuery); +} ); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/options.js index 3e5444c67..6de336fd6 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/options.js @@ -1,7 +1,10 @@ -/* - * dialog_options.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/dialog", + "ui/effect-blind", + "ui/effect-explode" +], function( $, testHelper ) { module("dialog: options"); @@ -78,7 +81,7 @@ test("autoOpen", function() { element.remove(); }); -test("buttons", function() { +test("buttons", function( assert ) { expect(21); var btn, i, newButtons, @@ -105,8 +108,8 @@ test("buttons", function() { i++; }); - ok(btn.parent().hasClass("ui-dialog-buttonset"), "buttons in container"); - ok(element.parent().hasClass("ui-dialog-buttons"), "dialog wrapper adds class about having buttons"); + assert.hasClasses( btn.parent(), "ui-dialog-buttonset" ); + assert.hasClasses( element.parent(), "ui-dialog-buttons" ); btn.trigger("click"); @@ -136,12 +139,11 @@ test("buttons", function() { btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); equal(btn.length, 0, "all buttons have been removed"); equal(element.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed"); - equal(element.parent().hasClass("ui-dialog-buttons"), false, "dialog wrapper removes class about having buttons"); - + assert.lacksClasses( element.parent(), "ui-dialog-buttons" ); element.remove(); }); -test("buttons - advanced", function() { +test("buttons - advanced", function( assert ) { expect( 7 ); var buttons, @@ -166,10 +168,10 @@ test("buttons - advanced", function() { equal(buttons.length, 1, "correct number of buttons"); equal(buttons.attr("id"), "my-button-id", "correct id"); equal(buttons.text(), "a button", "correct label"); - ok(buttons.hasClass("additional-class"), "additional classes added"); + assert.hasClasses( buttons, "additional-class" ); deepEqual( buttons.button("option", "icons"), { primary: "ui-icon-cancel", secondary: null } ); equal( buttons.button( "option", "text" ), false ); - buttons.click(); + buttons.trigger( "click" ); element.remove(); }); @@ -224,40 +226,20 @@ test("closeText", function() { element.remove(); }); -test("dialogClass", function() { - expect( 6 ); - - var element = $("<div></div>").dialog(); - equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added"); - element.remove(); - - element = $("<div></div>").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 = $("<div></div>").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); var element = $("<div></div>").dialog({ draggable: false }); - TestHelpers.dialog.testDrag(element, 50, -50, 0, 0); + testHelper.testDrag(element, 50, -50, 0, 0); element.dialog("option", "draggable", true); - TestHelpers.dialog.testDrag(element, 50, -50, 50, -50); + testHelper.testDrag(element, 50, -50, 50, -50); element.remove(); element = $("<div></div>").dialog({ draggable: true }); - TestHelpers.dialog.testDrag(element, 50, -50, 50, -50); + testHelper.testDrag(element, 50, -50, 50, -50); element.dialog("option", "draggable", false); - TestHelpers.dialog.testDrag(element, 50, -50, 0, 0); + testHelper.testDrag(element, 50, -50, 0, 0); element.remove(); }); @@ -283,92 +265,83 @@ test("height", function() { element.remove(); }); -asyncTest( "hide, #5860 - don't leave effects wrapper behind", function() { - expect( 1 ); - $( "#dialog1" ).dialog({ hide: "clip" }).dialog( "close" ).dialog( "destroy" ); - setTimeout(function() { - equal( $( ".ui-effects-wrapper" ).length, 0 ); - start(); - }, 500); -}); - -test("maxHeight", function() { +test("maxHeight", function( assert ) { expect(3); var element = $("<div></div>").dialog({ maxHeight: 200 }); - TestHelpers.dialog.drag(element, ".ui-resizable-s", 1000, 1000); - closeEnough(element.dialog("widget").height(), 200, 1, "maxHeight"); + testHelper.drag(element, ".ui-resizable-s", 1000, 1000); + assert.close(element.dialog("widget").height(), 200, 1, "maxHeight"); element.remove(); element = $("<div></div>").dialog({ maxHeight: 200 }); - TestHelpers.dialog.drag(element, ".ui-resizable-n", -1000, -1000); - closeEnough(element.dialog("widget").height(), 200, 1, "maxHeight"); + testHelper.drag(element, ".ui-resizable-n", -1000, -1000); + assert.close(element.dialog("widget").height(), 200, 1, "maxHeight"); element.remove(); element = $("<div></div>").dialog({ maxHeight: 200 }).dialog("option", "maxHeight", 300); - TestHelpers.dialog.drag(element, ".ui-resizable-s", 1000, 1000); - closeEnough(element.dialog("widget").height(), 300, 1, "maxHeight"); + testHelper.drag(element, ".ui-resizable-s", 1000, 1000); + assert.close(element.dialog("widget").height(), 300, 1, "maxHeight"); element.remove(); }); -test("maxWidth", function() { +test("maxWidth", function( assert ) { expect(3); var element = $("<div></div>").dialog({ maxWidth: 200 }); - TestHelpers.dialog.drag(element, ".ui-resizable-e", 1000, 1000); - closeEnough(element.dialog("widget").width(), 200, 1, "maxWidth"); + testHelper.drag(element, ".ui-resizable-e", 1000, 1000); + assert.close(element.dialog("widget").width(), 200, 1, "maxWidth"); element.remove(); element = $("<div></div>").dialog({ maxWidth: 200 }); - TestHelpers.dialog.drag(element, ".ui-resizable-w", -1000, -1000); - closeEnough(element.dialog("widget").width(), 200, 1, "maxWidth"); + testHelper.drag(element, ".ui-resizable-w", -1000, -1000); + assert.close(element.dialog("widget").width(), 200, 1, "maxWidth"); element.remove(); element = $("<div></div>").dialog({ maxWidth: 200 }).dialog("option", "maxWidth", 300); - TestHelpers.dialog.drag(element, ".ui-resizable-w", -1000, -1000); - closeEnough(element.dialog("widget").width(), 300, 1, "maxWidth"); + testHelper.drag(element, ".ui-resizable-w", -1000, -1000); + assert.close(element.dialog("widget").width(), 300, 1, "maxWidth"); element.remove(); }); -test("minHeight", function() { +test("minHeight", function( assert ) { expect(3); var element = $("<div></div>").dialog({ minHeight: 10 }); - TestHelpers.dialog.drag(element, ".ui-resizable-s", -1000, -1000); - closeEnough(element.dialog("widget").height(), 10, 1, "minHeight"); + testHelper.drag(element, ".ui-resizable-s", -1000, -1000); + assert.close(element.dialog("widget").height(), 10, 1, "minHeight"); element.remove(); element = $("<div></div>").dialog({ minHeight: 10 }); - TestHelpers.dialog.drag(element, ".ui-resizable-n", 1000, 1000); - closeEnough(element.dialog("widget").height(), 10, 1, "minHeight"); + testHelper.drag(element, ".ui-resizable-n", 1000, 1000); + assert.close(element.dialog("widget").height(), 10, 1, "minHeight"); element.remove(); element = $("<div></div>").dialog({ minHeight: 10 }).dialog("option", "minHeight", 30); - TestHelpers.dialog.drag(element, ".ui-resizable-n", 1000, 1000); - closeEnough(element.dialog("widget").height(), 30, 1, "minHeight"); + testHelper.drag(element, ".ui-resizable-n", 1000, 1000); + assert.close(element.dialog("widget").height(), 30, 1, "minHeight"); element.remove(); }); -test("minWidth", function() { +test("minWidth", function( assert ) { expect(3); var element = $("<div></div>").dialog({ minWidth: 10 }); - TestHelpers.dialog.drag(element, ".ui-resizable-e", -1000, -1000); - closeEnough(element.dialog("widget").width(), 10, 1, "minWidth"); + testHelper.drag(element, ".ui-resizable-e", -1000, -1000); + assert.close(element.dialog("widget").width(), 10, 1, "minWidth"); element.remove(); element = $("<div></div>").dialog({ minWidth: 10 }); - TestHelpers.dialog.drag(element, ".ui-resizable-w", 1000, 1000); - closeEnough(element.dialog("widget").width(), 10, 1, "minWidth"); + testHelper.drag(element, ".ui-resizable-w", 1000, 1000); + assert.close(element.dialog("widget").width(), 10, 1, "minWidth"); element.remove(); element = $("<div></div>").dialog({ minWidth: 30 }).dialog("option", "minWidth", 30); - TestHelpers.dialog.drag(element, ".ui-resizable-w", 1000, 1000); - closeEnough(element.dialog("widget").width(), 30, 1, "minWidth"); + testHelper.drag(element, ".ui-resizable-w", 1000, 1000); + assert.close(element.dialog("widget").width(), 30, 1, "minWidth"); element.remove(); }); -test( "position, default center on window", function() { +test( "position, default center on window", function( assert ) { expect( 2 ); // dialogs alter the window width and height in Firefox @@ -379,12 +352,12 @@ test( "position, default center on window", function() { element = $("<div></div>").dialog(), dialog = element.dialog("widget"), offset = dialog.offset(); - closeEnough( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" ); - closeEnough( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" ); + assert.close( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" ); + assert.close( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" ); element.remove(); }); -test( "position, right bottom at right bottom via ui.position args", function() { +test( "position, right bottom at right bottom via ui.position args", function( assert ) { expect( 2 ); // dialogs alter the window width and height in Firefox @@ -401,12 +374,12 @@ test( "position, right bottom at right bottom via ui.position args", function() dialog = element.dialog("widget"), offset = dialog.offset(); - closeEnough( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" ); - closeEnough( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" ); + assert.close( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" ); + assert.close( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" ); element.remove(); }); -test( "position, at another element", function() { +test( "position, at another element", function( assert ) { expect( 4 ); var parent = $("<div></div>").css({ position: "absolute", @@ -428,8 +401,8 @@ test( "position, at another element", function() { dialog = element.dialog("widget"), offset = dialog.offset(); - closeEnough( offset.left, 600, 1, "dialog left position at another element on initilization" ); - closeEnough( offset.top, 400, 1, "dialog top position at another element on initilization" ); + assert.close( offset.left, 600, 1, "dialog left position at another element on initilization" ); + assert.close( offset.top, 400, 1, "dialog top position at another element on initilization" ); element.dialog("option", "position", { my: "left top", @@ -440,8 +413,8 @@ test( "position, at another element", function() { offset = dialog.offset(); - closeEnough( offset.left, 610, 1, "dialog left position at another element via setting option" ); - closeEnough( offset.top, 410, 1, "dialog top position at another element via setting option" ); + assert.close( offset.left, 610, 1, "dialog left position at another element via setting option" ); + assert.close( offset.top, 410, 1, "dialog top position at another element via setting option" ); element.remove(); parent.remove(); @@ -451,15 +424,15 @@ test("resizable", function() { expect(4); var element = $("<div></div>").dialog(); - TestHelpers.dialog.shouldResize(element, 50, 50, "[default]"); + testHelper.shouldResize(element, 50, 50, "[default]"); element.dialog("option", "resizable", false); - TestHelpers.dialog.shouldResize(element, 0, 0, "disabled after init"); + testHelper.shouldResize(element, 0, 0, "disabled after init"); element.remove(); element = $("<div></div>").dialog({ resizable: false }); - TestHelpers.dialog.shouldResize(element, 0, 0, "disabled in init options"); + testHelper.shouldResize(element, 0, 0, "disabled in init options"); element.dialog("option", "resizable", true); - TestHelpers.dialog.shouldResize(element, 50, 50, "enabled after init"); + testHelper.shouldResize(element, 50, 50, "enabled after init"); element.remove(); }); @@ -505,17 +478,17 @@ test( "title", function() { element.remove(); }); -test("width", function() { +test("width", function( assert ) { expect(3); var element = $("<div></div>").dialog(); - closeEnough(element.dialog("widget").width(), 300, 1, "default width"); + assert.close(element.dialog("widget").width(), 300, 1, "default width"); element.remove(); element = $("<div></div>").dialog({width: 437 }); - closeEnough(element.dialog("widget").width(), 437, 1, "explicit width"); + assert.close(element.dialog("widget").width(), 437, 1, "explicit width"); element.dialog("option", "width", 438); - closeEnough(element.dialog("widget").width(), 438, 1, "explicit width after init"); + assert.close(element.dialog("widget").width(), 438, 1, "explicit width after init"); element.remove(); }); @@ -524,18 +497,18 @@ test("#4826: setting resizable false toggles resizable on dialog", function() { var i, element = $("<div></div>").dialog({ resizable: false }); - TestHelpers.dialog.shouldResize(element, 0, 0, "[default]"); + testHelper.shouldResize(element, 0, 0, "[default]"); for (i=0; i<2; i++) { element.dialog("close").dialog("open"); - TestHelpers.dialog.shouldResize(element, 0, 0, "initialized with resizable false toggle ("+ (i+1) +")"); + testHelper.shouldResize(element, 0, 0, "initialized with resizable false toggle ("+ (i+1) +")"); } element.remove(); element = $("<div></div>").dialog({ resizable: true }); - TestHelpers.dialog.shouldResize(element, 50, 50, "[default]"); + testHelper.shouldResize(element, 50, 50, "[default]"); for (i=0; i<2; i++) { element.dialog("close").dialog("option", "resizable", false).dialog("open"); - TestHelpers.dialog.shouldResize(element, 0, 0, "set option resizable false toggle ("+ (i+1) +")"); + testHelper.shouldResize(element, 0, 0, "set option resizable false toggle ("+ (i+1) +")"); } element.remove(); @@ -581,4 +554,4 @@ asyncTest( "Open followed by close during show effect", function() { }, 100 ); }); -})(jQuery); +} ); diff --git a/tests/unit/draggable/all.html b/tests/unit/draggable/all.html index ae2fe4f12..9bdc0d881 100644 --- a/tests/unit/draggable/all.html +++ b/tests/unit/draggable/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/draggable/draggable_common.js b/tests/unit/draggable/common.js index 5abd09e49..7ae032c0f 100644 --- a/tests/unit/draggable/draggable_common.js +++ b/tests/unit/draggable/common.js @@ -1,8 +1,14 @@ -TestHelpers.commonWidgetTests( "draggable", { +define( [ + "lib/common", + "ui/draggable" +], function( common ) { + +common.testWidget( "draggable", { defaults: { appendTo: "parent", axis: false, - cancel: "input,textarea,button,select,option", + cancel: "input, textarea, button, select, option", + classes: {}, connectToSortable: false, containment: false, cursor: "auto", @@ -38,3 +44,5 @@ TestHelpers.commonWidgetTests( "draggable", { stop: null } }); + +} ); diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/core.js index 81c31e22f..802ed2928 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/core.js @@ -1,12 +1,14 @@ -/* - * draggable_core.js - */ - -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/draggable", + "ui/droppable", + "ui/resizable" +], function( $, testHelper ) { module( "draggable: core" ); -test( "element types", function() { +test( "element types", function( assert ) { var typeNames = ( "p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" + ",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" + @@ -25,13 +27,6 @@ test( "element types", function() { el.append("<tr><td>content</td></tr>"); } - // intrinsic height is incorrect in FF for buttons with no content - // https://bugzilla.mozilla.org/show_bug.cgi?id=471763 - // Support: FF - if ( typeName === "button" ) { - el.text( "button" ); - } - el.draggable({ cancel: "" }); offsetBefore = el.offset(); el.simulate( "drag", { @@ -42,8 +37,8 @@ test( "element types", function() { // Support: FF, Chrome, and IE9, // there are some rounding errors in so we can't say equal, we have to settle for close enough - closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" ); - closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" ); + assert.close( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" ); + assert.close( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" ); el.draggable("destroy"); el.remove(); }); @@ -51,12 +46,12 @@ test( "element types", function() { test( "No options, relative", function() { expect( 2 ); - TestHelpers.draggable.shouldMove( $( "#draggable1" ).draggable(), "no options, relative" ); + testHelper.shouldMove( $( "#draggable1" ).draggable(), "no options, relative" ); }); test( "No options, absolute", function() { expect( 2 ); - TestHelpers.draggable.shouldMove( $( "#draggable2" ).draggable(), "no options, absolute" ); + testHelper.shouldMove( $( "#draggable2" ).draggable(), "no options, absolute" ); }); test( "resizable handle with complex markup (#8756 / #8757)", function() { @@ -99,7 +94,7 @@ test( "#8269: Removing draggable element on drop", function() { }); // Support: Opera 12.10, Safari 5.1, jQuery <1.8 - if ( TestHelpers.draggable.unreliableContains ) { + if ( testHelper.unreliableContains ) { ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); } else { @@ -121,11 +116,11 @@ test( "Stray mousemove after mousedown still drags", function() { // In IE8, when content is placed under the mouse (e.g. when draggable content is replaced // on mousedown), mousemove is triggered on those elements even though the mouse hasn't moved. // Support: IE <9 - element.bind( "mousedown", function() { + element.on( "mousedown", function() { $( document ).simulate( "mousemove", { button: -1 }); }); - TestHelpers.draggable.shouldMove( element, "element is draggable" ); + testHelper.shouldMove( element, "element is draggable" ); }); test( "#6258: not following mouse when scrolled and using overflow-y: scroll", function() { @@ -145,7 +140,7 @@ test( "#6258: not following mouse when scrolled and using overflow-y: scroll", f oldOverflowY = $( "html" ).css( "overflow-y" ), oldOverflowX = $( "html" ).css( "overflow-x" ); - TestHelpers.forceScrollableWindow(); + testHelper.forceScrollableWindow(); $( "html" ) .css( "overflow-y", "scroll" ) @@ -171,7 +166,7 @@ test( "#9315: jumps down with offset of scrollbar", function() { } }); - TestHelpers.forceScrollableWindow(); + testHelper.forceScrollableWindow(); $( "html" ).scrollTop( 300 ).scrollLeft( 300 ); @@ -205,7 +200,7 @@ test( "scroll offset with fixed ancestors", function() { } }); - TestHelpers.forceScrollableWindow(); + testHelper.forceScrollableWindow(); $( "#wrapper" ).css( "position", "fixed" ); $( "#wrapper2" ).css( "position", "absolute" ); @@ -276,8 +271,8 @@ test( "#5727: draggable from iframe", function() { equal( draggable1.closest( iframeBody ).length, 1 ); // TODO: fix draggable within an IFRAME to fire events on the element properly - // and these TestHelpers.draggable.shouldMove relies on events for testing - //TestHelpers.draggable.shouldMove( draggable1, "draggable from an iframe" ); + // and these testHelper.shouldMove relies on events for testing + //testHelper.shouldMove( draggable1, "draggable from an iframe" ); }); test( "#8399: A draggable should become the active element after you are finished interacting with it, but not before.", function() { @@ -289,7 +284,7 @@ test( "#8399: A draggable should become the active element after you are finishe notStrictEqual( document.activeElement, element.get( 0 ), "moving a draggable anchor did not make it the active element" ); }); - TestHelpers.draggable.move( element, 50, 50 ); + testHelper.move( element, 50, 50 ); strictEqual( document.activeElement, element.get( 0 ), "finishing moving a draggable anchor made it the active element" ); }); @@ -300,16 +295,16 @@ asyncTest( "blur behavior", function() { var element = $( "#draggable1" ).draggable(), focusElement = $( "<div tabindex='1'></div>" ).appendTo( element ); - TestHelpers.onFocus( focusElement, function() { + testHelper.onFocus( focusElement, function() { strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" ); - TestHelpers.draggable.move( focusElement, 1, 1 ); + testHelper.move( focusElement, 1, 1 ); // http://bugs.jqueryui.com/ticket/10527 // Draggable: Can't select option in modal dialog (IE8) strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused after mousing down on itself" ); - TestHelpers.draggable.move( element, 50, 50 ); + testHelper.move( element, 50, 50 ); // http://bugs.jqueryui.com/ticket/4261 // active element should blur when mousing down on a draggable @@ -318,60 +313,34 @@ asyncTest( "blur behavior", function() { }); }); -test( "ui-draggable-handle assigned to appropriate element", function() { +test( "ui-draggable-handle assigned to appropriate element", function( assert ) { expect( 5 ); var p = $( "<p>" ).appendTo( "#qunit-fixture" ), element = $( "<div><p></p></div>" ).appendTo( "#qunit-fixture" ).draggable(); - ok( element.hasClass( "ui-draggable-handle" ), "handle is element by default" ); + assert.hasClasses( element, "ui-draggable-handle" ); element.draggable( "option", "handle", "p" ); - ok( !element.hasClass( "ui-draggable-handle" ), "removed from element" ); - ok( element.find( "p" ).hasClass( "ui-draggable-handle" ), "added to handle" ); - - ok( !p.hasClass( "ui-draggable-handle" ), + assert.lacksClasses( element, "ui-draggable-handle" ); + assert.hasClasses( element.find( "p" ), "ui-draggable-handle", "ensure handle class name is constrained within the draggble (#10212)" ); + assert.lacksClasses( p, "ui-draggable-handle" ); element.draggable( "destroy" ); - ok( !element.find( "p" ).hasClass( "ui-draggable-handle" ), "removed in destroy()" ); + assert.lacksClasses( element.find( "p" ), "ui-draggable-handle" ); }); -test( "ui-draggable-handle managed correctly in nested draggables", function() { +test( "ui-draggable-handle managed correctly in nested draggables", function( assert ) { expect( 4 ); var parent = $( "<div><div></div></div>" ).draggable().appendTo( "#qunit-fixture" ), child = parent.find( "div" ).draggable(); - ok( parent.hasClass( "ui-draggable-handle" ), "parent has class name on init" ); - ok( child.hasClass( "ui-draggable-handle" ), "child has class name on init" ); + assert.hasClasses( parent, "ui-draggable-handle", "parent has class name on init" ); + assert.hasClasses( child, "ui-draggable-handle", "child has class name on init" ); parent.draggable( "destroy" ); - ok( !parent.hasClass( "ui-draggable-handle" ), "parent loses class name on destroy" ); - ok( child.hasClass( "ui-draggable-handle" ), "child retains class name on destroy" ); -}); - -// http://bugs.jqueryui.com/ticket/7772 -// when css 'right' is set, element resizes on drag -test( "setting right/bottom css shouldn't cause resize", function() { - expect( 4 ); - - var finalOffset, - element = $( "#draggable3" ), - origWidth = element.width(), - origHeight = element.height(), - origOffset = element.offset(); - - element.draggable(); - - TestHelpers.draggable.move( element, -50, -50 ); - - finalOffset = element.offset(); - finalOffset.left += 50; - finalOffset.top += 50; - - closeEnough( element.width(), origWidth, 1, "element retains width" ); - closeEnough( element.height(), origHeight, 1, "element retains height" ); - closeEnough( finalOffset.top, origOffset.top, "element moves the correct vertical distance" ); - closeEnough( finalOffset.top, origOffset.top, "element moves the correct horizontal distance" ); + assert.lacksClasses( parent, "ui-draggable-handle", "parent loses class name on destroy" ); + assert.hasClasses( child, "ui-draggable-handle", "child retains class name on destroy" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index eb4985adc..0971b2325 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -4,93 +4,66 @@ <meta charset="utf-8"> <title>jQuery UI Draggable Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core"></script> + <script src="../../lib/bootstrap.js" data-widget="draggable"></script> <style> - #main { - width: 1000px; - height: 1000px; - overflow: scroll; - overflow-x: scroll; - overflow-y: scroll; - position: relative; - left: 0; - top: 0; - } - #main-forceScrollable { - position: absolute; - left: 0; - top: 0; - width: 1100px; - height: 1100px; - } - #scrollParent { - width: 1200px; - height: 1200px; - position: relative; - left: 0; - top: 0; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; - } - #scrollParent-forceScrollable { - position: absolute; - left: 0; - top: 0; - width: 1300px; - height: 1300px; - } - /* See #9077 */ - #draggable3, #draggable4 { - z-index: 100; - } - .sortable { - position: relative; - top: 8000px; - left: 10px; - width: 300px; - padding: 0; - margin: 0; - border: 0; - } - .sortable li { - height: 100px; - padding: 0; - margin: 0; - border: 0; - list-style: none; - display: inline-block; - } + #main { + width: 1000px; + height: 1000px; + overflow: scroll; + overflow-x: scroll; + overflow-y: scroll; + position: relative; + left: 0; + top: 0; + } + #main-forceScrollable { + position: absolute; + left: 0; + top: 0; + width: 1100px; + height: 1100px; + } + #scrollParent { + width: 1200px; + height: 1200px; + position: relative; + left: 0; + top: 0; + overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; + } + #scrollParent-forceScrollable { + position: absolute; + left: 0; + top: 0; + width: 1300px; + height: 1300px; + } + /* See #9077 */ + #draggable3, #draggable4 { + z-index: 100; + } + .sortable { + position: relative; + top: 8000px; + left: 10px; + width: 300px; + padding: 0; + margin: 0; + border: 0; + } + .sortable li { + height: 100px; + padding: 0; + margin: 0; + border: 0; + list-style: none; + display: inline-block; + } </style> - - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/mouse.js", - "ui/resizable.js", - "ui/draggable.js", - "ui/droppable.js", - "ui/sortable.js" - ] - }); - </script> - - <script src="draggable_common.js"></script> - <script src="draggable_core.js"></script> - <script src="draggable_events.js"></script> - <script src="draggable_methods.js"></script> - <script src="draggable_options.js"></script> - <script src="draggable_test_helpers.js"></script> - - <script src="../swarminject.js"></script> </head> <body> @@ -100,7 +73,6 @@ <div id="main"> <div id="draggable1" style="background: green; width: 200px; height: 100px; position: relative; top: 0; left: 0;">Relative</div> <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div> - <div id="draggable3" style="background: green; position: absolute; right: 5px; bottom: 5px; padding: 7px; border: 3px solid black;"><span><em>Absolute right-bottom</em></span></div> <div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div> <div id="main-forceScrollable"></div> </div> diff --git a/tests/unit/draggable/draggable_events.js b/tests/unit/draggable/events.js index dd5c315b0..ebbf606ef 100644 --- a/tests/unit/draggable/draggable_events.js +++ b/tests/unit/draggable/events.js @@ -1,7 +1,7 @@ -/* - * draggable_events.js - */ -(function( $ ) { +define( [ + "jquery", + "ui/draggable" +], function( $ ) { var element; @@ -161,4 +161,4 @@ test( "position and offset in hash is consistent between start, drag, and stop", deepEqual( dragOffset, stopOffset, "drag offset equals stop offset" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/draggable/draggable_test_helpers.js b/tests/unit/draggable/helper.js index 1b004e7cf..4af87d37f 100644 --- a/tests/unit/draggable/draggable_test_helpers.js +++ b/tests/unit/draggable/helper.js @@ -1,11 +1,20 @@ -TestHelpers.draggable = { +define( [ + "jquery", + "lib/helper", + "ui/draggable" +], function( $, helper ) { + +return $.extend( helper, { + // TODO: remove the unreliable offset hacks unreliableOffset: $.ui.ie && ( !document.documentMode || document.documentMode < 8 ) ? 2 : 0, // Support: Opera 12.10, Safari 5.1, jQuery <1.8 + unreliableContains: (function() { var element = $( "<div>" ); return $.contains( element[ 0 ].ownerDocument, element[ 0 ] ); })(), + testDragPosition: function( el, dx, dy, expectedDX, expectedDY, msg ) { msg = msg ? msg + "." : ""; @@ -14,6 +23,7 @@ TestHelpers.draggable = { deepEqual( ui.position, positionExpected, "position dragged[" + dx + ", " + dy + "] " + msg ); }); }, + testDragOffset: function( el, dx, dy, expectedDX, expectedDY, msg ) { msg = msg ? msg + "." : ""; @@ -24,6 +34,7 @@ TestHelpers.draggable = { deepEqual( ui.offset, offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg ); }); }, + testDragHelperOffset: function( el, dx, dy, expectedDX, expectedDY, msg ) { msg = msg ? msg + "." : ""; @@ -34,33 +45,38 @@ TestHelpers.draggable = { deepEqual( ui.helper.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg ); }); }, + testDrag: function( el, handle, dx, dy, expectedDX, expectedDY, msg ) { - TestHelpers.draggable.testDragPosition( el, dx, dy, expectedDX, expectedDY, msg ); - TestHelpers.draggable.testDragOffset( el, dx, dy, expectedDX, expectedDY, msg ); + this.testDragPosition( el, dx, dy, expectedDX, expectedDY, msg ); + this.testDragOffset( el, dx, dy, expectedDX, expectedDY, msg ); $( handle ).simulate( "drag", { dx: dx, dy: dy }); }, + shouldMovePositionButNotOffset: function( el, msg, handle ) { handle = handle || el; - TestHelpers.draggable.testDragPosition( el, 100, 100, 100, 100, msg ); - TestHelpers.draggable.testDragHelperOffset( el, 100, 100, 0, 0, msg ); + this.testDragPosition( el, 100, 100, 100, 100, msg ); + this.testDragHelperOffset( el, 100, 100, 0, 0, msg ); $( handle ).simulate( "drag", { dx: 100, dy: 100 }); }, + shouldMove: function( el, msg, handle ) { handle = handle || el; - TestHelpers.draggable.testDrag( el, handle, 100, 100, 100, 100, msg ); + this.testDrag( el, handle, 100, 100, 100, 100, msg ); }, + shouldNotMove: function( el, msg, handle ) { handle = handle || el; - TestHelpers.draggable.testDrag( el, handle, 100, 100, 0, 0, msg ); + this.testDrag( el, handle, 100, 100, 0, 0, msg ); }, + shouldNotDrag: function( el, msg, handle ) { handle = handle || el; @@ -68,7 +84,7 @@ TestHelpers.draggable = { element = $( el ), beginOffset = element.offset(); - element.bind( "dragstop", function() { + element.on( "dragstop", function() { ok( false, "should not drag " + msg ); }); @@ -84,48 +100,59 @@ TestHelpers.draggable = { equal( newOffset.left, beginOffset.left, "Offset left should not be different" ); equal( newOffset.top, beginOffset.top, "Offset top should not be different" ); - element.unbind( "dragstop" ); + element.off( "dragstop" ); }, + setScrollable: function( what, isScrollable ) { var overflow = isScrollable ? "scroll" : "hidden"; $( what ).css({ overflow: overflow, overflowX: overflow, overflowY: overflow }); }, + testScroll: function( el, position ) { var oldPosition = $( "#main" ).css( "position" ); $( "#main" ).css({ position: position, top: "0px", left: "0px" }); - TestHelpers.draggable.shouldMove( el, position + " parent" ); + this.shouldMove( el, position + " parent" ); $( "#main" ).css( "position", oldPosition ); }, + restoreScroll: function( what ) { $( what ).scrollTop( 0 ).scrollLeft( 0 ); }, + setScroll: function( what ) { $( what ).scrollTop( 100 ).scrollLeft( 100 ); }, + border: function( el, side ) { return parseInt( el.css( "border-" + side + "-width" ), 10 ) || 0; }, + margin: function( el, side ) { return parseInt( el.css( "margin-" + side ), 10 ) || 0; }, + move: function( el, x, y ) { $( el ).simulate( "drag", { dx: x, dy: y }); }, + trackMouseCss: function( el ) { - el.bind( "drag", function() { + el.on( "drag", function() { el.data( "last_dragged_cursor", $( "body" ).css( "cursor" ) ); }); }, + trackAppendedParent: function( el ) { // TODO: appendTo is currently ignored if helper is original (see #7044) el.draggable( "option", "helper", "clone" ); // Get what parent is at time of drag - el.bind( "drag", function(e, ui) { + el.on( "drag", function(e, ui) { el.data( "last_dragged_parent", ui.helper.parent()[ 0 ] ); }); } -}; +} ); + +} ); diff --git a/tests/unit/draggable/draggable_methods.js b/tests/unit/draggable/methods.js index 351d57764..195e9e2fb 100644 --- a/tests/unit/draggable/draggable_methods.js +++ b/tests/unit/draggable/methods.js @@ -1,7 +1,8 @@ -/* - * draggable_methods.js - */ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/draggable" +], function( $, testHelper ) { var element; @@ -54,50 +55,50 @@ test( "enable", function() { expect( 11 ); element.draggable({ disabled: true }); - TestHelpers.draggable.shouldNotDrag( element, ".draggable({ disabled: true })" ); + testHelper.shouldNotDrag( element, ".draggable({ disabled: true })" ); element.draggable("enable"); - TestHelpers.draggable.shouldMove( element, ".draggable('enable')" ); + testHelper.shouldMove( element, ".draggable('enable')" ); equal( element.draggable( "option", "disabled" ), false, "disabled option getter" ); element.draggable("destroy"); element.draggable({ disabled: true }); - TestHelpers.draggable.shouldNotDrag( element, ".draggable({ disabled: true })" ); + testHelper.shouldNotDrag( element, ".draggable({ disabled: true })" ); element.draggable( "option", "disabled", false ); equal(element.draggable( "option", "disabled" ), false, "disabled option setter" ); - TestHelpers.draggable.shouldMove( element, ".draggable('option', 'disabled', false)" ); + testHelper.shouldMove( element, ".draggable('option', 'disabled', false)" ); var expected = element.draggable(), actual = expected.draggable("enable"); equal( actual, expected, "enable is chainable" ); }); -test( "disable", function() { +test( "disable", function( assert ) { expect( 14 ); element = $( "#draggable2" ).draggable({ disabled: false }); - TestHelpers.draggable.shouldMove( element, ".draggable({ disabled: false })" ); + testHelper.shouldMove( element, ".draggable({ disabled: false })" ); element.draggable( "disable" ); - TestHelpers.draggable.shouldNotDrag( element, ".draggable('disable')" ); + testHelper.shouldNotDrag( element, ".draggable('disable')" ); equal( element.draggable( "option", "disabled" ), true, "disabled option getter" ); element.draggable( "destroy" ); element.draggable({ disabled: false }); - TestHelpers.draggable.shouldMove( element, ".draggable({ disabled: false })" ); + testHelper.shouldMove( element, ".draggable({ disabled: false })" ); element.draggable( "option", "disabled", true ); equal( element.draggable( "option", "disabled" ), true, "disabled option setter" ); - TestHelpers.draggable.shouldNotDrag( element, ".draggable('option', 'disabled', true)" ); + testHelper.shouldNotDrag( element, ".draggable('option', 'disabled', true)" ); - ok( !element.draggable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" ); + assert.lacksClasses( element.draggable( "widget" ), "ui-state-disabled" ); ok( !element.draggable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - ok( element.draggable( "widget" ).hasClass( "ui-draggable-disabled" ), "element gets ui-draggable-disabled" ); + assert.hasClasses( element.draggable( "widget" ), "ui-draggable-disabled" ); var expected = element.draggable(), actual = expected.draggable( "disable" ); equal( actual, expected, "disable is chainable" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/options.js index d8bbedc91..877b4275c 100644 --- a/tests/unit/draggable/draggable_options.js +++ b/tests/unit/draggable/options.js @@ -1,15 +1,19 @@ -(function( $ ) { - -module( "draggable: options" ); +define( [ + "jquery", + "./helper", + "ui/draggable", + "ui/droppable", + "ui/sortable" +], function( $, testHelper ) { // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: 'parent' }, default, no clone", function() { expect( 4 ); var element = $( "#draggable2" ).draggable({ appendTo: "parent" }); - TestHelpers.draggable.shouldMove( element, "absolute appendTo: parent" ); + testHelper.shouldMove( element, "absolute appendTo: parent" ); element = $( "#draggable1" ).draggable({ appendTo: "parent" }); - TestHelpers.draggable.shouldMove( element, "relative appendTo: parent" ); + testHelper.shouldMove( element, "relative appendTo: parent" ); }); // TODO: This doesn't actually test whether append happened, possibly remove @@ -17,20 +21,20 @@ test( "{ appendTo: Element }, no clone", function() { expect( 4 ); var element = $( "#draggable2" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] }); - TestHelpers.draggable.shouldMove( element, "absolute appendTo: Element" ); + testHelper.shouldMove( element, "absolute appendTo: Element" ); element = $( "#draggable1" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] }); - TestHelpers.draggable.shouldMove( element, "relative appendTo: Element" ); + testHelper.shouldMove( element, "relative appendTo: Element" ); }); // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: Selector }, no clone", function() { expect( 4 ); var element = $( "#draggable2" ).draggable({ appendTo: "#main" }); - TestHelpers.draggable.shouldMove( element, "absolute appendTo: Selector" ); + testHelper.shouldMove( element, "absolute appendTo: Selector" ); element = $( "#draggable1" ).draggable({ appendTo: "#main" }); - TestHelpers.draggable.shouldMove( element, "relative appendTo: Selector" ); + testHelper.shouldMove( element, "relative appendTo: Selector" ); }); test( "{ appendTo: 'parent' }, default", function() { @@ -38,11 +42,11 @@ test( "{ appendTo: 'parent' }, default", function() { var element = $( "#draggable1" ).draggable(); - TestHelpers.draggable.trackAppendedParent( element ); + testHelper.trackAppendedParent( element ); equal( element.draggable( "option", "appendTo" ), "parent" ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), $( "#main" )[ 0 ] ); }); @@ -52,9 +56,9 @@ test( "{ appendTo: Element }", function() { var appendTo = $( "#draggable2" ).parent()[ 0 ], element = $( "#draggable1" ).draggable({ appendTo: appendTo }); - TestHelpers.draggable.trackAppendedParent( element ); + testHelper.trackAppendedParent( element ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), appendTo ); }); @@ -64,9 +68,9 @@ test( "{ appendTo: jQuery }", function() { var appendTo = $( "#draggable2" ).parent(), element = $( "#draggable1" ).draggable({ appendTo: appendTo }); - TestHelpers.draggable.trackAppendedParent( element ); + testHelper.trackAppendedParent( element ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), appendTo[ 0 ] ); }); @@ -76,9 +80,9 @@ test( "{ appendTo: Selector }", function() { var appendTo = "#main", element = $( "#draggable1" ).draggable({ appendTo: appendTo }); - TestHelpers.draggable.trackAppendedParent( element ); + testHelper.trackAppendedParent( element ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), $(appendTo)[ 0 ] ); }); @@ -87,34 +91,34 @@ test( "appendTo, default, switching after initialization", function() { var element = $( "#draggable1" ).draggable({ helper: "clone" }); - TestHelpers.draggable.trackAppendedParent( element ); + testHelper.trackAppendedParent( element ); // Move and make sure element was appended to fixture - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), $( "#main" )[ 0 ] ); // Move and make sure element was appended to main element.draggable( "option", "appendTo", $( "#qunit-fixture" ) ); - TestHelpers.draggable.move( element, 2, 2 ); + testHelper.move( element, 2, 2 ); equal( element.data( "last_dragged_parent" ), $( "#qunit-fixture" )[ 0 ] ); }); test( "{ axis: false }, default", function() { expect( 2 ); var element = $( "#draggable2" ).draggable({ axis: false }); - TestHelpers.draggable.shouldMove( element, "axis: false" ); + testHelper.shouldMove( element, "axis: false" ); }); test( "{ axis: 'x' }", function() { expect( 2 ); var element = $( "#draggable2" ).draggable({ axis: "x" }); - TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 0, "axis: x" ); + testHelper.testDrag( element, element, 50, 50, 50, 0, "axis: x" ); }); test( "{ axis: 'y' }", function() { expect( 2 ); var element = $( "#draggable2" ).draggable({ axis: "y" }); - TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 50, "axis: y" ); + testHelper.testDrag( element, element, 50, 50, 0, 50, "axis: y" ); }); test( "{ axis: ? }, unexpected", function() { @@ -132,7 +136,7 @@ test( "{ axis: ? }, unexpected", function() { $.each(unexpected, function(key, val) { element = $( "#draggable2" ).draggable({ axis: val }); - TestHelpers.draggable.shouldMove( element, "axis: " + key ); + testHelper.shouldMove( element, "axis: " + key ); element.draggable( "destroy" ); }); }); @@ -143,15 +147,15 @@ test( "axis, default, switching after initialization", function() { var element = $( "#draggable1" ).draggable({ axis: false }); // Any Direction - TestHelpers.draggable.shouldMove( element, "axis: default" ); + testHelper.shouldMove( element, "axis: default" ); // Only horizontal element.draggable( "option", "axis", "x" ); - TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 0, "axis: x as option" ); + testHelper.testDrag( element, element, 50, 50, 50, 0, "axis: x as option" ); // Vertical only element.draggable( "option", "axis", "y" ); - TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 50, "axis: y as option" ); + testHelper.testDrag( element, element, 50, 50, 0, 50, "axis: y as option" ); }); @@ -161,12 +165,12 @@ test( "{ cancel: 'input,textarea,button,select,option' }, default", function() { $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#qunit-fixture" ); var element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" }); - TestHelpers.draggable.shouldMove( element, "cancel: default, element dragged" ); + testHelper.shouldMove( element, "cancel: default, element dragged" ); element.draggable( "destroy" ); element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" }); - TestHelpers.draggable.shouldNotDrag( element, "cancel: default, input dragged", "#draggable-option-cancel-default input" ); + testHelper.shouldNotDrag( element, "cancel: default, input dragged", "#draggable-option-cancel-default input" ); element.draggable( "destroy" ); }); @@ -174,12 +178,12 @@ test( "{ cancel: 'span' }", function() { expect( 4 ); var element = $( "#draggable2" ).draggable(); - TestHelpers.draggable.shouldMove( element, "cancel: default, span dragged", "#draggable2 span" ); + testHelper.shouldMove( element, "cancel: default, span dragged", "#draggable2 span" ); element.draggable( "destroy" ); element = $( "#draggable2" ).draggable({ cancel: "span" }); - TestHelpers.draggable.shouldNotDrag( element, "cancel: span, span dragged", "#draggable2 span" ); + testHelper.shouldNotDrag( element, "cancel: span, span dragged", "#draggable2 span" ); }); test( "{ cancel: ? }, unexpected", function() { @@ -197,7 +201,7 @@ test( "{ cancel: ? }, unexpected", function() { $.each( unexpected, function( key, val ) { element = $( "#draggable2" ).draggable({ cancel: val }); - TestHelpers.draggable.shouldMove( element, "cancel: " + key ); + testHelper.shouldMove( element, "cancel: " + key ); element.draggable( "destroy" ); }); }); @@ -215,15 +219,15 @@ test( "{ cancel: Selectors }, matching parent selector", function() { $( "#wrapping a" ).append( element ); - TestHelpers.draggable.shouldMove( element, "drag span child", "#draggable2 span" ); - TestHelpers.draggable.shouldNotDrag( $( "#draggable2 span a" ), "drag span a" ); - TestHelpers.draggable.shouldNotDrag( $( "#wrapping a" ), "drag wrapping a" ); + testHelper.shouldMove( element, "drag span child", "#draggable2 span" ); + testHelper.shouldNotDrag( $( "#draggable2 span a" ), "drag span a" ); + testHelper.shouldNotDrag( $( "#wrapping a" ), "drag wrapping a" ); $( "#draggable2" ).draggable( "option", "cancel", "span > a" ); $( "#draggable2" ).find( "a" ).append( "<a>" ); - TestHelpers.draggable.shouldMove( element, "drag span child", $( "#draggable2 span a" ).last() ); - TestHelpers.draggable.shouldNotDrag( $( "#draggable2 span a" ).first(), "drag span a first child" ); + testHelper.shouldMove( element, "drag span child", $( "#draggable2 span a" ).last() ); + testHelper.shouldNotDrag( $( "#draggable2 span a" ).first(), "drag span a first child" ); }); */ @@ -235,13 +239,13 @@ test( "cancelement, default, switching after initialization", function() { var input = $( "#draggable-option-cancel-default input" ), element = $( "#draggable-option-cancel-default" ).draggable(); - TestHelpers.draggable.shouldNotDrag( element, "cancel: default, input dragged", input ); + testHelper.shouldNotDrag( element, "cancel: default, input dragged", input ); element.draggable( "option", "cancel", "textarea" ); - TestHelpers.draggable.shouldMove( element, "cancel: textarea, input dragged", input ); + testHelper.shouldMove( element, "cancel: textarea, input dragged", input ); element.draggable( "option", "cancel", "input" ); - TestHelpers.draggable.shouldNotDrag( element, "cancel: input, input dragged", input ); + testHelper.shouldNotDrag( element, "cancel: input, input dragged", input ); }); test( "connectToSortable, dragging out of a sortable", function() { @@ -436,8 +440,8 @@ test( "{ containment: Element }", function() { p = element.parent(), po = p.offset(), expected = { - left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ), - top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" ) + left: po.left + testHelper.border( p, "left" ) + testHelper.margin( element, "left" ), + top: po.top + testHelper.border( p, "top" ) + testHelper.margin( element, "top" ) }; element.simulate( "drag", { @@ -456,8 +460,8 @@ test( "{ containment: Selector }", function() { p = element.parent(), po = p.offset(), expected = { - left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ), - top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" ) + left: po.left + testHelper.border( p, "left" ) + testHelper.margin( element, "left" ), + top: po.top + testHelper.border( p, "top" ) + testHelper.margin( element, "top" ) }; element.simulate( "drag", { @@ -476,7 +480,7 @@ test( "{ containment: [x1, y1, x2, y2] }", function() { element.draggable( "option", "containment", [ eo.left, eo.top, eo.left + element.width() + 5, eo.top + element.height() + 5 ] ); - TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0, "containment: [x1, y1, x2, y2]" ); + testHelper.testDrag( element, element, -100, -100, 0, 0, "containment: [x1, y1, x2, y2]" ); }); test( "{ containment: 'parent' }, relative", function() { @@ -487,8 +491,8 @@ test( "{ containment: 'parent' }, relative", function() { p = element.parent(), po = p.offset(), expected = { - left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ), - top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" ) + left: po.left + testHelper.border( p, "left" ) + testHelper.margin( element, "left" ), + top: po.top + testHelper.border( p, "top" ) + testHelper.margin( element, "top" ) }; element.simulate( "drag", { @@ -507,8 +511,8 @@ test( "{ containment: 'parent' }, absolute", function() { p = element.parent(), po = p.offset(), expected = { - left: po.left + TestHelpers.draggable.border( p, "left" ) + TestHelpers.draggable.margin( element, "left" ), - top: po.top + TestHelpers.draggable.border( p, "top" ) + TestHelpers.draggable.margin( element, "top" ) + left: po.left + testHelper.border( p, "left" ) + testHelper.margin( element, "left" ), + top: po.top + testHelper.border( p, "top" ) + testHelper.margin( element, "top" ) }; element.simulate( "drag", { @@ -519,7 +523,7 @@ test( "{ containment: 'parent' }, absolute", function() { deepEqual( offsetAfter, expected, "compare offset to parent" ); }); -test( "containment, account for border", function() { +test( "containment, account for border", function( assert ) { expect( 2 ); var el = $( "#draggable1" ).appendTo( "#scrollParent" ), @@ -531,8 +535,8 @@ test( "containment, account for border", function() { }), parentBottom = parent.offset().top + parent.outerHeight(), parentRight = parent.offset().left + parent.outerWidth(), - parentBorderBottom = TestHelpers.draggable.border( parent, "bottom" ), - parentBorderRight = TestHelpers.draggable.border( parent, "right" ); + parentBorderBottom = testHelper.border( parent, "bottom" ), + parentBorderRight = testHelper.border( parent, "right" ); el.css({ height: "5px", @@ -544,9 +548,9 @@ test( "containment, account for border", function() { dy: 100 }); - closeEnough( el.offset().top, parentBottom - parentBorderBottom - el.height(), 1, + assert.close( el.offset().top, parentBottom - parentBorderBottom - el.height(), 1, "The draggable should be on top of its parent's bottom border" ); - closeEnough( el.offset().left, parentRight - parentBorderRight - el.width(), 1, + assert.close( el.offset().left, parentRight - parentBorderRight - el.width(), 1, "The draggable should be to the right of its parent's right border" ); }); @@ -587,16 +591,16 @@ test( "containment, default, switching after initialization", function() { po = element.parent().offset(), containment = [ po.left - 100, po.top - 100, po.left + 500, po.top + 500 ]; - TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100, "containment: default" ); + testHelper.testDrag( element, element, -100, -100, -100, -100, "containment: default" ); element.draggable( "option", "containment", "parent" ).css({ top: 0, left: 0 }); - TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0, "containment: parent as option" ); + testHelper.testDrag( element, element, -100, -100, 0, 0, "containment: parent as option" ); element.draggable( "option", "containment", containment ).css({ top: 0, left: 0 }); - TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100, "containment: array as option" ); + testHelper.testDrag( element, element, -100, -100, -100, -100, "containment: array as option" ); element.draggable( "option", "containment", false ); - TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100, "containment: false as option" ); + testHelper.testDrag( element, element, -100, -100, -100, -100, "containment: false as option" ); }); test( "{ cursor: 'auto' }, default", function() { @@ -674,7 +678,7 @@ test( "#6889: Cursor doesn't revert to pre-dragging state after revert action wh }), expected = getCursor(); - if ( TestHelpers.draggable.unreliableContains ) { + if ( testHelper.unreliableContains ) { ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); } else { @@ -690,17 +694,17 @@ test( "cursor, default, switching after initialization", function() { var element = $( "#draggable1" ).draggable(); - TestHelpers.draggable.trackMouseCss( element ); + testHelper.trackMouseCss( element ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_cursor" ), "auto" ); element.draggable( "option", "cursor", "move" ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_cursor" ), "move" ); element.draggable( "option", "cursor", "ns-resize" ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_cursor" ), "ns-resize" ); }); @@ -727,11 +731,11 @@ test( "cursorAt", function() { equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" ); equal( ui.position.top - ui.originalPosition.top, deltaY, testName + " " + position + " top" ); } else if ( testData.cursorAt.right ) { - equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" ); - equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - TestHelpers.draggable.unreliableOffset, testName + " " + position + " top" ); + equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - testHelper.unreliableOffset, testName + " " + position + " left" ); + equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - testHelper.unreliableOffset, testName + " " + position + " top" ); } else { - equal( event.clientX - ui.offset.left, testData.x + TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" ); - equal( event.clientY - ui.offset.top, testData.y + TestHelpers.draggable.unreliableOffset, testName + " " + position + " top" ); + equal( event.clientX - ui.offset.left, testData.x + testHelper.unreliableOffset, testName + " " + position + " left" ); + equal( event.clientY - ui.offset.top, testData.y + testHelper.unreliableOffset, testName + " " + position + " top" ); } } }); @@ -769,11 +773,11 @@ test( "cursorAt, switching after initialization", function() { equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" ); equal( ui.position.top - ui.originalPosition.top, deltaY, testName + " " + position + " top" ); } else if ( testData.cursorAt.right ) { - equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" ); - equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - TestHelpers.draggable.unreliableOffset, testName + " " + position + " top" ); + equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - testHelper.unreliableOffset, testName + " " + position + " left" ); + equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - testHelper.unreliableOffset, testName + " " + position + " top" ); } else { - equal( event.clientX - ui.offset.left, testData.x + TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" ); - equal( event.clientY - ui.offset.top, testData.y + TestHelpers.draggable.unreliableOffset, testName + " " + position + " top" ); + equal( event.clientX - ui.offset.left, testData.x + testHelper.unreliableOffset, testName + " " + position + " left" ); + equal( event.clientY - ui.offset.top, testData.y + testHelper.unreliableOffset, testName + " " + position + " top" ); } } }); @@ -795,29 +799,29 @@ test( "disabled", function() { var element = $( "#draggable1" ).draggable(); - TestHelpers.draggable.shouldMove( element, "disabled: default" ); + testHelper.shouldMove( element, "disabled: default" ); element.draggable( "option", "disabled", true ); - TestHelpers.draggable.shouldNotDrag( element, "option: disabled true" ); + testHelper.shouldNotDrag( element, "option: disabled true" ); element.draggable( "option", "disabled", false ); - TestHelpers.draggable.shouldMove( element, "option: disabled false" ); + testHelper.shouldMove( element, "option: disabled false" ); }); test( "{ grid: [50, 50] }, relative", function() { expect( 4 ); var element = $( "#draggable1" ).draggable({ grid: [ 50, 50 ] }); - TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] relative" ); - TestHelpers.draggable.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] relative" ); + testHelper.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] relative" ); + testHelper.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] relative" ); }); test( "{ grid: [50, 50] }, absolute", function() { expect( 4 ); var element = $( "#draggable2" ).draggable({ grid: [ 50, 50 ] }); - TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] absolute" ); - TestHelpers.draggable.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] absolute" ); + testHelper.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] absolute" ); + testHelper.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] absolute" ); }); test( "grid, switching after initialization", function() { @@ -826,13 +830,13 @@ test( "grid, switching after initialization", function() { var element = $( "#draggable1" ).draggable(); // Forward - TestHelpers.draggable.testDrag( element, element, 24, 24, 24, 24, "grid: default" ); - TestHelpers.draggable.testDrag( element, element, 0, 0, 0, 0, "grid: default" ); + testHelper.testDrag( element, element, 24, 24, 24, 24, "grid: default" ); + testHelper.testDrag( element, element, 0, 0, 0, 0, "grid: default" ); element.draggable( "option", "grid", [ 50, 50 ] ); - TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] as option" ); - TestHelpers.draggable.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] as option" ); + testHelper.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] as option" ); + testHelper.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] as option" ); }); test( "{ handle: 'span' }", function() { @@ -840,9 +844,9 @@ test( "{ handle: 'span' }", function() { var element = $( "#draggable2" ).draggable({ handle: "span" }); - TestHelpers.draggable.shouldMove( element, "handle: span", "#draggable2 span"); - TestHelpers.draggable.shouldMove( element, "handle: span child", "#draggable2 span em" ); - TestHelpers.draggable.shouldNotDrag( element, "handle: span element" ); + testHelper.shouldMove( element, "handle: span", "#draggable2 span"); + testHelper.shouldMove( element, "handle: span child", "#draggable2 span em" ); + testHelper.shouldNotDrag( element, "handle: span element" ); }); test( "handle, default, switching after initialization", function() { @@ -850,31 +854,31 @@ test( "handle, default, switching after initialization", function() { var element = $( "#draggable2" ).draggable(); - TestHelpers.draggable.shouldMove( element, "handle: default, element dragged" ); - TestHelpers.draggable.shouldMove( element, "handle: default, span dragged", "#draggable2 span" ); + testHelper.shouldMove( element, "handle: default, element dragged" ); + testHelper.shouldMove( element, "handle: default, span dragged", "#draggable2 span" ); // Switch element.draggable( "option", "handle", "span" ); - TestHelpers.draggable.shouldNotDrag( element, "handle: span as option, element dragged" ); - TestHelpers.draggable.shouldMove( element, "handle: span as option, span dragged", "#draggable2 span" ); + testHelper.shouldNotDrag( element, "handle: span as option, element dragged" ); + testHelper.shouldMove( element, "handle: span as option, span dragged", "#draggable2 span" ); // And back element.draggable( "option", "handle", false ); - TestHelpers.draggable.shouldMove( element, "handle: false as option, element dragged" ); - TestHelpers.draggable.shouldMove( element, "handle: false as option, span dragged", "#draggable2 span" ); + testHelper.shouldMove( element, "handle: false as option, element dragged" ); + testHelper.shouldMove( element, "handle: false as option, span dragged", "#draggable2 span" ); }); test( "helper, default, switching after initialization", function() { expect( 6 ); var element = $( "#draggable1" ).draggable(); - TestHelpers.draggable.shouldMove( element, "helper: default" ); + testHelper.shouldMove( element, "helper: default" ); element.draggable( "option", "helper", "clone" ); - TestHelpers.draggable.shouldMove( element, "helper: clone" ); + testHelper.shouldMove( element, "helper: clone" ); element.draggable( "option", "helper", "original" ); - TestHelpers.draggable.shouldMove( element, "helper: original" ); + testHelper.shouldMove( element, "helper: original" ); }); // http://bugs.jqueryui.com/ticket/9446 @@ -888,7 +892,7 @@ test( "helper, function returning original element", function() { } }); - TestHelpers.draggable.testDragHelperOffset( element, 100, 100, 100, 100, "original element is draggable" ); + testHelper.testDragHelperOffset( element, 100, 100, 100, 100, "original element is draggable" ); element.simulate( "drag", { dx: 100, @@ -907,25 +911,25 @@ function testHelperPosition( scrollPositions, position, helper, scrollElements, }); if ( scrollElements.length === 1 && scrollElements[ 0 ] === "#scrollParent" ) { - TestHelpers.draggable.setScrollable( "#main", false ); - TestHelpers.draggable.setScrollable( "#scrollParent", true ); + testHelper.setScrollable( "#main", false ); + testHelper.setScrollable( "#scrollParent", true ); } for ( j = 0; j < scrollPositions.length; j++ ) { for ( i = 0; i < scrollElements.length; i++ ) { - TestHelpers.draggable.setScroll( scrollElements[ i ] ); + testHelper.setScroll( scrollElements[ i ] ); } - TestHelpers.draggable.testScroll( element, scrollPositions[ j ] ); + testHelper.testScroll( element, scrollPositions[ j ] ); for ( i = 0; i < scrollElements.length; i++ ) { - TestHelpers.draggable.restoreScroll( scrollElements[ i ] ); + testHelper.restoreScroll( scrollElements[ i ] ); } } if ( scrollElements.length === 1 && scrollElements[ 1 ] === "#scrollParent" ) { - TestHelpers.draggable.setScrollable( "#main", true ); - TestHelpers.draggable.setScrollable( "#scrollParent", false ); + testHelper.setScrollable( "#main", true ); + testHelper.setScrollable( "#scrollParent", false ); } }); } @@ -983,15 +987,15 @@ test( "opacity, default, switching after initialization", function() { } }); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( opacity, 1 ); element.draggable( "option", "opacity", 0.5 ); - TestHelpers.draggable.move( element, 2, 1 ); + testHelper.move( element, 2, 1 ); equal( opacity, 0.5 ); element.draggable( "option", "opacity", false ); - TestHelpers.draggable.move( element, 3, 1 ); + testHelper.move( element, 3, 1 ); equal( opacity, 1 ); }); @@ -1002,13 +1006,13 @@ asyncTest( "revert and revertDuration", function() { revert: true, revertDuration: 0 }); - TestHelpers.draggable.shouldMovePositionButNotOffset( element, "revert: true, revertDuration: 0 should revert immediately" ); + testHelper.shouldMovePositionButNotOffset( element, "revert: true, revertDuration: 0 should revert immediately" ); $( "#draggable2" ).draggable( "option", "revert", "invalid" ); - TestHelpers.draggable.shouldMovePositionButNotOffset( element, "revert: invalid, revertDuration: 0 should revert immediately" ); + testHelper.shouldMovePositionButNotOffset( element, "revert: invalid, revertDuration: 0 should revert immediately" ); $( "#draggable2" ).draggable( "option", "revert", false ); - TestHelpers.draggable.shouldMove( element, "revert: false should allow movement" ); + testHelper.shouldMove( element, "revert: false should allow movement" ); $( "#draggable2" ).draggable( "option", { revert: true, @@ -1019,7 +1023,7 @@ asyncTest( "revert and revertDuration", function() { }); // animation are async, so test for it asynchronously - TestHelpers.draggable.move( element, 50, 50 ); + testHelper.move( element, 50, 50 ); setTimeout( function() { ok( $( "#draggable2" ).is( ":animated" ), "revert: true with revertDuration should animate" ); }); @@ -1035,7 +1039,7 @@ test( "revert: valid", function() { $( "#droppable" ).droppable(); - TestHelpers.draggable.shouldMovePositionButNotOffset( element, "revert: valid reverts when dropped on a droppable" ); + testHelper.shouldMovePositionButNotOffset( element, "revert: valid reverts when dropped on a droppable" ); }); test( "scope", function() { @@ -1049,17 +1053,17 @@ test( "scope", function() { $( "#droppable" ).droppable({ scope: "tasks" }); - TestHelpers.draggable.shouldMovePositionButNotOffset( element, "revert: valid reverts when dropped on a droppable in scope" ); + testHelper.shouldMovePositionButNotOffset( element, "revert: valid reverts when dropped on a droppable in scope" ); $( "#droppable" ).droppable( "destroy" ).droppable({ scope: "nottasks" }); - TestHelpers.draggable.shouldMove( element, "revert: valid reverts when dropped on a droppable out of scope" ); + testHelper.shouldMove( element, "revert: valid reverts when dropped on a droppable out of scope" ); }); test( "scroll, scrollSensitivity, and scrollSpeed", function() { expect( 2 ); - TestHelpers.draggable.setScrollable( "#main", false ); + testHelper.setScrollable( "#main", false ); var currentScrollTop, viewportHeight = $( window ).height(), @@ -1101,7 +1105,7 @@ test( "scroll, scrollSensitivity, and scrollSpeed", function() { moves: 1 }); - TestHelpers.draggable.restoreScroll( document ); + testHelper.restoreScroll( document ); }); test( "scroll ignores containers that are overflow: hidden", function() { @@ -1137,10 +1141,10 @@ test( "scroll ignores containers that are overflow: hidden", function() { equal( scrollParent.scrollLeft(), 0, "container doesn't scroll horizontally" ); }); -test( "#6817: auto scroll goes double distance when dragging", function() { +test( "#6817: auto scroll goes double distance when dragging", function( assert ) { expect( 2 ); - TestHelpers.draggable.restoreScroll( document ); + testHelper.restoreScroll( document ); var offsetBefore, distance = 10, @@ -1149,8 +1153,8 @@ test( "#6817: auto scroll goes double distance when dragging", function() { scroll: true, stop: function( e, ui ) { equal( ui.offset.top, newY, "offset of item matches pointer position after scroll" ); - // TODO: fix IE8 testswarm IFRAME positioning bug so closeEnough can be turned back to equal - closeEnough( ui.offset.top - offsetBefore.top, distance, 1, "offset of item only moves expected distance after scroll" ); + // TODO: fix IE8 testswarm IFRAME positioning bug so assert.close can be turned back to equal + assert.close( ui.offset.top - offsetBefore.top, distance, 1, "offset of item only moves expected distance after scroll" ); } }), scrollSensitivity = element.draggable( "option", "scrollSensitivity" ), @@ -1171,10 +1175,10 @@ test( "#6817: auto scroll goes double distance when dragging", function() { moves: 1 }); - TestHelpers.draggable.restoreScroll( document ); + testHelper.restoreScroll( document ); }); -test( "snap, snapMode, and snapTolerance", function() { +test( "snap, snapMode, and snapTolerance", function( assert ) { expect( 10 ); var newX, newY, @@ -1206,9 +1210,9 @@ test( "snap, snapMode, and snapTolerance", function() { moves: 1 }); - // TODO: fix IE8 testswarm IFRAME positioning bug so closeEnough can be turned back to equal - closeEnough( element.offset().left, newX, 1, "doesn't snap outside the snapTolerance" ); - closeEnough( element.offset().top, newY, 1, "doesn't snap outside the snapTolerance" ); + // TODO: fix IE8 testswarm IFRAME positioning bug so assert.close can be turned back to equal + assert.close( element.offset().left, newX, 1, "doesn't snap outside the snapTolerance" ); + assert.close( element.offset().top, newY, 1, "doesn't snap outside the snapTolerance" ); newX += 3; @@ -1301,7 +1305,7 @@ test( "snap, snapMode, and snapTolerance", function() { deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap on the inner snapTolerance area when snapMode is outer" ); }); -test( "#8459: element can snap to an element that was removed during drag", function() { +test( "#8459: element can snap to an element that was removed during drag", function( assert ) { expect( 2 ); var newX, newY, @@ -1333,13 +1337,13 @@ test( "#8459: element can snap to an element that was removed during drag", func }); // Support: Opera 12.10, Safari 5.1, jQuery <1.8 - if ( TestHelpers.draggable.unreliableContains ) { + if ( testHelper.unreliableContains ) { ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); } else { - // TODO: fix IE8 testswarm IFRAME positioning bug so closeEnough can be turned back to equal - closeEnough( element.offset().left, newX, 1, "doesn't snap to a removed element" ); - closeEnough( element.offset().top, newY, 1, "doesn't snap to a removed element" ); + // TODO: fix IE8 testswarm IFRAME positioning bug so assert.close can be turned back to equal + assert.close( element.offset().left, newX, 1, "doesn't snap to a removed element" ); + assert.close( element.offset().top, newY, 1, "doesn't snap to a removed element" ); } }); @@ -1390,10 +1394,10 @@ test( "stack", function() { stack: "#draggable1, #draggable2" }); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( element.css( "zIndex" ), "2", "stack increments zIndex correctly" ); - TestHelpers.draggable.move( element2, 1, 1 ); + testHelper.move( element2, 1, 1 ); equal( element2.css( "zIndex" ), "3", "stack increments zIndex correctly" ); }); @@ -1431,15 +1435,15 @@ test( "zIndex, default, switching after initialization", function() { element.css( "z-index", 1 ); - TestHelpers.draggable.move( element, 1, 1 ); + testHelper.move( element, 1, 1 ); equal( zindex, 1 ); element.draggable( "option", "zIndex", 5 ); - TestHelpers.draggable.move( element, 2, 1 ); + testHelper.move( element, 2, 1 ); equal( zindex, 5 ); element.draggable( "option", "zIndex", false ); - TestHelpers.draggable.move( element, 3, 1 ); + testHelper.move( element, 3, 1 ); equal( zindex, 1 ); }); @@ -1486,4 +1490,4 @@ test( "iframeFix", function() { }); }); -})( jQuery ); +} ); diff --git a/tests/unit/droppable/all.html b/tests/unit/droppable/all.html index b8be47d0d..4934e13d1 100644 --- a/tests/unit/droppable/all.html +++ b/tests/unit/droppable/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/droppable/droppable_common.js b/tests/unit/droppable/common-deprecated.js index c112def3c..9d2f6c6b6 100644 --- a/tests/unit/droppable/droppable_common.js +++ b/tests/unit/droppable/common-deprecated.js @@ -1,8 +1,14 @@ -TestHelpers.commonWidgetTests( "droppable", { +define( [ + "lib/common", + "ui/droppable" +], function( common ) { + +common.testWidget( "droppable", { defaults: { accept: "*", activeClass: false, addClasses: true, + classes: {}, disabled: false, greedy: false, hoverClass: false, @@ -18,3 +24,5 @@ TestHelpers.commonWidgetTests( "droppable", { over: null } }); + +} ); diff --git a/tests/unit/droppable/common.js b/tests/unit/droppable/common.js new file mode 100644 index 000000000..ef8e11692 --- /dev/null +++ b/tests/unit/droppable/common.js @@ -0,0 +1,26 @@ +define( [ + "lib/common", + "ui/droppable" +], function( common ) { + +common.testWidget( "droppable", { + defaults: { + accept: "*", + addClasses: true, + classes: {}, + disabled: false, + greedy: false, + scope: "default", + tolerance: "intersect", + + // callbacks + activate: null, + create: null, + deactivate: null, + drop: null, + out: null, + over: null + } +}); + +} ); diff --git a/tests/unit/droppable/droppable_core.js b/tests/unit/droppable/core.js index 53b08fd85..43608353d 100644 --- a/tests/unit/droppable/droppable_core.js +++ b/tests/unit/droppable/core.js @@ -1,8 +1,8 @@ -/* - * droppable_core.js - */ - -(function($) { +define( [ + "jquery", + "./helper", + "ui/droppable" +], function( $, testHelper ) { module("droppable: core"); @@ -20,10 +20,10 @@ test("element types", function() { (typeName === "table" && el.append("<tr><td>content</td></tr>")); el.droppable(); - TestHelpers.droppable.shouldDrop(); + testHelper.shouldDrop(); el.droppable("destroy"); el.remove(); }); }); -})(jQuery); +} ); diff --git a/tests/unit/droppable/deprecated.html b/tests/unit/droppable/deprecated.html new file mode 100644 index 000000000..45bf1f460 --- /dev/null +++ b/tests/unit/droppable/deprecated.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Droppable Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core"></script> + <script src="../../lib/bootstrap.js" data-widget="droppable" data-deprecated="true"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div> +<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div> +<div id="droppable2" style="width: 100px; height: 100px;">Droppable</div> +<div style='width:1000px;height:1000px;'> </div> + +</div> +</body> +</html> diff --git a/tests/unit/droppable/deprecated.js b/tests/unit/droppable/deprecated.js new file mode 100644 index 000000000..3931f5f06 --- /dev/null +++ b/tests/unit/droppable/deprecated.js @@ -0,0 +1 @@ +define( function() {} ); diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html index 03ff888e8..5c3ec3dd9 100644 --- a/tests/unit/droppable/droppable.html +++ b/tests/unit/droppable/droppable.html @@ -4,32 +4,10 @@ <meta charset="utf-8"> <title>jQuery UI Droppable Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/mouse.js", - "ui/draggable.js", - "ui/droppable.js" - ] - }); - </script> - - <script src="droppable_common.js"></script> - <script src="droppable_core.js"></script> - <script src="droppable_events.js"></script> - <script src="droppable_methods.js"></script> - <script src="droppable_options.js"></script> - <script src="droppable_test_helpers.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core"></script> + <script src="../../lib/bootstrap.js" data-widget="droppable" + data-no-back-compat="true"></script> </head> <body> diff --git a/tests/unit/droppable/droppable_events.js b/tests/unit/droppable/events.js index 0e1424245..a60d9292e 100644 --- a/tests/unit/droppable/droppable_events.js +++ b/tests/unit/droppable/events.js @@ -1,8 +1,11 @@ -(function( $ ) { +define( [ + "jquery", + "ui/droppable" +], function( $ ) { module( "droppable: events" ); -test( "droppable destruction/recreation on drop event", function() { +test( "droppable destruction/recreation on drop event", function( assert ) { expect( 1 ); var config = { @@ -32,7 +35,7 @@ test( "droppable destruction/recreation on drop event", function() { dy: dy }); - ok( !droppable2.hasClass( "active" ), "subsequent droppable no longer active" ); + assert.lacksClasses( droppable2, "active", "subsequent droppable no longer active" ); }); // todo: comment the following in when ready to actually test @@ -58,4 +61,4 @@ test("drop", function() { }); */ -})( jQuery ); +} ); diff --git a/tests/unit/droppable/droppable_test_helpers.js b/tests/unit/droppable/helper.js index ce972be63..460fa1aa6 100644 --- a/tests/unit/droppable/droppable_test_helpers.js +++ b/tests/unit/droppable/helper.js @@ -1,10 +1,18 @@ -TestHelpers.droppable = { +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { + +return $.extend( helper, { shouldDrop: function() { // todo: actually implement this ok(true, "missing test - untested code is broken code"); }, + shouldNotDrop: function() { // todo: actually implement this ok(true, "missing test - untested code is broken code"); } -}; +} ); + +} ); diff --git a/tests/unit/droppable/droppable_methods.js b/tests/unit/droppable/methods.js index a8a2a078c..1c9bba023 100644 --- a/tests/unit/droppable/droppable_methods.js +++ b/tests/unit/droppable/methods.js @@ -1,7 +1,8 @@ -/* - * droppable_methods.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/droppable" +], function( $, testHelper ) { module("droppable: methods"); @@ -47,45 +48,45 @@ test("enable", function() { var el, expected, actual; el = $("#droppable1").droppable({ disabled: true }); - TestHelpers.droppable.shouldNotDrop(); + testHelper.shouldNotDrop(); el.droppable("enable"); - TestHelpers.droppable.shouldDrop(); + testHelper.shouldDrop(); equal(el.droppable("option", "disabled"), false, "disabled option getter"); el.droppable("destroy"); el.droppable({ disabled: true }); - TestHelpers.droppable.shouldNotDrop(); + testHelper.shouldNotDrop(); el.droppable("option", "disabled", false); equal(el.droppable("option", "disabled"), false, "disabled option setter"); - TestHelpers.droppable.shouldDrop(); + testHelper.shouldDrop(); expected = $("<div></div>").droppable(), actual = expected.droppable("enable"); equal(actual, expected, "enable is chainable"); }); -test( "disable", function() { +test( "disable", function( assert ) { expect( 10 ); var actual, expected, element = $( "#droppable1" ).droppable({ disabled: false }); - TestHelpers.droppable.shouldDrop(); + testHelper.shouldDrop(); element.droppable( "disable" ); - TestHelpers.droppable.shouldNotDrop(); + testHelper.shouldNotDrop(); equal( element.droppable( "option", "disabled" ), true, "disabled option getter" ); element.droppable( "destroy" ); element.droppable({ disabled: false }); - TestHelpers.droppable.shouldDrop(); + testHelper.shouldDrop(); element.droppable( "option", "disabled", true ); - ok( !element.droppable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" ); + assert.lacksClasses( element.droppable( "widget" ), "ui-state-disabled" ); ok( !element.droppable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - ok( element.droppable( "widget" ).hasClass( "ui-droppable-disabled" ), "element gets ui-droppable-disabled" ); + assert.hasClasses( element.droppable( "widget" ), "ui-droppable-disabled" ); equal( element.droppable( "option", "disabled" ), true, "disabled option setter" ); - TestHelpers.droppable.shouldNotDrop(); + testHelper.shouldNotDrop(); expected = $( "<div></div>" ).droppable(); actual = expected.droppable( "disable" ); equal( actual, expected, "disable is chainable" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/droppable/droppable_options.js b/tests/unit/droppable/options.js index 047858abf..c7c0dbdd6 100644 --- a/tests/unit/droppable/droppable_options.js +++ b/tests/unit/droppable/options.js @@ -1,7 +1,7 @@ -/* - * droppable_options.js - */ -(function($) { +define( [ + "jquery", + "ui/droppable" +], function( $ ) { module( "droppable: options" ); @@ -22,17 +22,18 @@ test( "activeClass", function() { ok(false, 'missing test - untested code is broken code'); }); */ -test( "{ addClasses: true }, default", function() { +test( "{ addClasses: true }, default", function( assert ) { expect( 1 ); var el = $( "<div />" ).droppable({ addClasses: true }); - ok( el.is( ".ui-droppable" ), "'ui-droppable' class added" ); + assert.hasClasses( el, "ui-droppable" ); el.droppable( "destroy" ); }); -test( "{ addClasses: false }", function() { +test( "{ addClasses: false }", function( assert ) { expect( 1 ); var el = $( "<div />" ).droppable({ addClasses: false }); - ok( !el.is( ".ui-droppable" ), "'ui-droppable' class not added" ); + + assert.lacksClasses( el, "ui-droppable" ); el.droppable( "destroy" ); }); @@ -133,7 +134,7 @@ test( "tolerance, intersect", function() { left: 0 }); - droppable.unbind( "drop" ).bind( "drop", function() { + droppable.off( "drop" ).on( "drop", function() { equal( true, data[ 2 ], data[ 3 ] ); }); @@ -172,7 +173,7 @@ test( "tolerance, pointer", function() { $.each( dataset, function() { var data = this; - droppable.unbind( "drop" ).bind( "drop", function() { + droppable.off( "drop" ).on( "drop", function() { equal( true, data[ 2 ], data[ 3 ] ); }); @@ -186,7 +187,7 @@ test( "tolerance, pointer", function() { draggable.css({ top: 0, left: 0 }).draggable( "option", "axis", "x" ); droppable.css({ top: 15, left: 15 }); - droppable.unbind( "drop" ).bind( "drop", function() { + droppable.off( "drop" ).on( "drop", function() { ok( true, "drop fires as long as pointer is within droppable" ); }); @@ -201,4 +202,4 @@ test( "tolerance, touch", function() { ok(false, 'missing test - untested code is broken code'); }); */ -})(jQuery); +} ); diff --git a/tests/unit/effects/all.html b/tests/unit/effects/all.html index 54752f594..b043b6223 100644 --- a/tests/unit/effects/all.html +++ b/tests/unit/effects/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/core.js index 0c4e5574f..db83ca093 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/core.js @@ -1,4 +1,23 @@ -(function($) { +define( [ + "jquery", + "lib/common", + "ui/effect", + "ui/effect-blind", + "ui/effect-bounce", + "ui/effect-clip", + "ui/effect-drop", + "ui/effect-explode", + "ui/effect-fade", + "ui/effect-fold", + "ui/effect-highlight", + "ui/effect-puff", + "ui/effect-pulsate", + "ui/effect-scale", + "ui/effect-shake", + "ui/effect-size", + "ui/effect-slide", + "ui/effect-transfer" +], function( $, common ) { function present( value, array, message ) { QUnit.push( jQuery.inArray( value, array ) !== -1, value, array, message ); @@ -182,13 +201,14 @@ asyncTest( "animateClass clears style properties when stopped", function() { start(); }); -asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() { +asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", +function( assert ) { expect( 2 ); var test = $( "div.ticket7106" ); // ensure the class stays and that the css property stays function animationComplete() { - ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" ); + assert.hasClasses( test, "testClass", "class change during animateClass was not lost" ); equal( test.height(), 100, "css change during animateClass was not lost" ); start(); } @@ -238,10 +258,36 @@ test( "createPlaceholder: preserves layout affecting properties", function() { deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" ); }); +module( "transfer" ); + +asyncTest( "transfer() without callback", function() { + expect( 0 ); + + // Verify that the effect works without a callback + $( "#elem" ).transfer( { + to: ".animateClass", + duration: 1 + } ); + setTimeout( function() { + start(); + }, 25 ); +} ); + +asyncTest( "transfer() with callback", function() { + expect( 1 ); + $( "#elem" ).transfer( { + to: ".animateClass", + duration: 1 + }, function() { + ok( true, "callback invoked" ); + start(); + } ); +} ); + $.each( $.effects.effect, function( effect ) { module( "effects." + effect ); - TestHelpers.testJshint( "effect-" + effect ); + common.testJshint( "effect-" + effect ); if ( effect === "transfer" ) { return; @@ -318,4 +364,4 @@ $.each( $.effects.effect, function( effect ) { }); }); -})(jQuery); +} ); diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index a092ce04b..b9ea802d0 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -4,38 +4,10 @@ <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - js: [ - "ui/effect.js", - "ui/effect-blind.js", - "ui/effect-bounce.js", - "ui/effect-clip.js", - "ui/effect-drop.js", - "ui/effect-explode.js", - "ui/effect-fade.js", - "ui/effect-fold.js", - "ui/effect-highlight.js", - "ui/effect-puff.js", - "ui/effect-pulsate.js", - "ui/effect-scale.js", - "ui/effect-shake.js", - "ui/effect-size.js", - "ui/effect-slide.js", - "ui/effect-transfer.js" - ] - }); + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js"></script> + <script src="../../lib/bootstrap.js" data-modules="core scale"> </script> - - <script src="effects_core.js"></script> - <script src="effects_scale.js"></script> - - <script src="../swarminject.js"></script> <style> #qunit-fixture { width: 1000px; diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/scale.js index caed39c22..186daf09f 100644 --- a/tests/unit/effects/effects_scale.js +++ b/tests/unit/effects/scale.js @@ -1,13 +1,17 @@ -(function( $ ) { +define( [ + "jquery", + "ui/effect-scale" +], function( $ ) { + module( "effect.scale: Scale" ); function run( position, v, h, vo, ho ) { var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")"; - asyncTest( desc, function() { + asyncTest( desc, function( assert ) { expect( 2 ); function complete() { - closeEnough( parseInt( test.css( h ), 10 ), target[ h ], 1, "Horizontal Position Correct " + desc ); - closeEnough( parseInt( test.css( v ), 10 ), target[ v ], 1, "Vertical Position Correct " + desc ); + assert.close( parseInt( test.css( h ), 10 ), target[ h ], 1, "Horizontal Position Correct " + desc ); + assert.close( parseInt( test.css( v ), 10 ), target[ v ], 1, "Vertical Position Correct " + desc ); start(); } var test = $( ".testScale" ), @@ -65,4 +69,4 @@ $(function() { } }); -})( jQuery ); +} ); diff --git a/tests/unit/form-reset-mixin/all.html b/tests/unit/form-reset-mixin/all.html new file mode 100644 index 000000000..9acf969e3 --- /dev/null +++ b/tests/unit/form-reset-mixin/all.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Form Reset Mixin Test Suite</title> + + <script src="../../../external/jquery/jquery.js"></script> + + <link rel="stylesheet" href="../../../external/qunit/qunit.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> + <script src="../../../external/qunit/qunit.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "form-reset-mixin" ); + </script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/tests/unit/form-reset-mixin/core.js b/tests/unit/form-reset-mixin/core.js new file mode 100644 index 000000000..14e804643 --- /dev/null +++ b/tests/unit/form-reset-mixin/core.js @@ -0,0 +1,95 @@ +define( [ + "jquery", + "lib/common", + "ui/widget", + "ui/form-reset-mixin" +], function( $, common ) { + +module( "widget factory", { + setup: function() { + $.widget( "ui.testWidget", [ $.ui.formResetMixin, { + _create: function() { + this._bindFormResetHandler(); + }, + _destroy: function() { + this._unbindFormResetHandler(); + }, + refresh: function() { + $.ui.testWidget.refreshed.push( this.element.attr( "id" ) ); + } + } ] ); + + $.ui.testWidget.refreshed = []; + }, + + teardown: function() { + delete $.ui.testWidget; + delete $.fn.testWidget; + } +}); + +common.testJshint( "form-reset-mixin" ); + +asyncTest( "form reset", function() { + expect( 2 ); + + var form = $( "#main" ); + var inputs = form.find( "input" ); + + inputs.testWidget(); + form.on( "reset", function() { + setTimeout(function() { + deepEqual( $.ui.testWidget.refreshed, [ "input1", "input2", "input3", "input4" ], + "All widgets are refreshed on form reset" ); + equal( form.data( "ui-form-reset-instances" ).length, 4, + "All widget instances are tracked against the form" ); + start(); + } ); + } ); + form[ 0 ].reset(); +} ); + +asyncTest( "destroy", function() { + expect( 2 ); + + var form = $( "#main" ); + var inputs = form.find( "input" ); + + inputs + .testWidget() + .eq( 1 ) + .testWidget( "destroy" ); + + form.on( "reset", function() { + setTimeout(function() { + deepEqual( $.ui.testWidget.refreshed, [ "input1", "input3", "input4" ], + "All widgets are refreshed on form reset" ); + deepEqual( form.data( "ui-form-reset-instances" ).length, 3, + "All widget instances are tracked against the form" ); + start(); + } ); + } ); + form[ 0 ].reset(); +} ); + +asyncTest( "destroy all", function() { + expect( 2 ); + + var form = $( "#main" ); + + form.find( "input" ) + .testWidget() + .testWidget( "destroy" ); + + form.on( "reset", function() { + setTimeout(function() { + deepEqual( $.ui.testWidget.refreshed, [], "No widgets are refreshed after destroy" ); + strictEqual( form.data( "ui-form-reset-instances" ), undefined, + "Form data is removed when the last widget instance is destroyed" ); + start(); + } ); + } ); + form[ 0 ].reset(); +} ); + +} ); diff --git a/tests/unit/form-reset-mixin/form-reset-mixin.html b/tests/unit/form-reset-mixin/form-reset-mixin.html new file mode 100644 index 000000000..a20e25d4a --- /dev/null +++ b/tests/unit/form-reset-mixin/form-reset-mixin.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Form Reset Mixin Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js"></script> + <script src="../../lib/bootstrap.js" data-modules="core"> + </script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +<form id="main"> + <input id="input1"> + <input id="input2"> + <input id="input3"> + <input id="input4"> +</form> + +</div> +</body> +</html> diff --git a/tests/unit/menu/all.html b/tests/unit/menu/all.html index b1631496d..b8f7b3f37 100644 --- a/tests/unit/menu/all.html +++ b/tests/unit/menu/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/common.js index ae0ab9887..0f0a04de8 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/common.js @@ -1,5 +1,11 @@ -TestHelpers.commonWidgetTests( "menu", { +define( [ + "lib/common", + "ui/menu" +], function( common ) { + +common.testWidget( "menu", { defaults: { + classes: {}, disabled: false, icons: { submenu: "ui-icon-caret-1-e" @@ -19,3 +25,5 @@ TestHelpers.commonWidgetTests( "menu", { select: null } }); + +} ); diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/core.js index f02f97fca..dc853be3c 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/core.js @@ -1,14 +1,28 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { module( "menu: core" ); -test( "markup structure", function() { - expect( 6 ); - var element = $( "#menu1" ).menu(); - ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" ); - element.children().each(function( index ) { - ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" ); - }); +test( "markup structure", function( assert ) { + expect( 11 ); + var element = $( "#menu9" ).menu(), + items = element.children(), + firstItemChildren = items.eq( 0 ).children(); + + assert.hasClasses( element, "ui-menu ui-widget ui-widget-content" ); + assert.hasClasses( items[ 0 ], "ui-menu-item" ); + equal( items.eq( 0 ).children().length, 2, "Item has exactly 2 children when it has a sub menu" ); + assert.hasClasses( firstItemChildren[ 0 ], "ui-menu-item-wrapper" ); + assert.hasClasses( firstItemChildren[ 1 ], "ui-menu ui-widget ui-widget-content" ); + assert.hasClasses( firstItemChildren.eq( 1 ).children()[ 0 ], "ui-menu-item" ); + assert.hasClasses( firstItemChildren.eq( 1 ).children().eq( 0 ).children(), "ui-menu-item-wrapper" ); + assert.hasClasses( items[ 1 ], "ui-menu-item" ); + equal( items.eq( 1 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" ); + assert.hasClasses( items[ 2 ], "ui-menu-item" ); + equal( items.eq( 2 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" ); }); test( "accessibility", function () { @@ -33,11 +47,11 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio $( "<input>", { id: "test9044" } ).appendTo( "body" ); - $( "#testID1" ).bind( "click", function() { - $( "#test9044" ).focus(); + $( "#testID1" ).on( "click", function() { + $( "#test9044" ).trigger( "focus" ); }); - TestHelpers.menu.click( element, "3" ); + testHelper.click( element, "3" ); setTimeout( function() { equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" ); $( "#test9044" ).remove(); @@ -45,7 +59,7 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio }); }); -asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function() { +asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function( assert ) { expect( 1 ); var element = $( "#menu1" ).menu(), firstChild = element.children().eq( 0 ), @@ -54,9 +68,9 @@ asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected element.menu( "focus", null, firstChild ); wrapper.addClass( "ui-state-active" ); setTimeout( function() { - ok( wrapper.is( ".ui-state-active" ), "ui-state-active improperly removed" ); + assert.hasClasses( wrapper, "ui-state-active" ); start(); - }, 500 ); + }); }); -})( jQuery ); +} ); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/events.js index b1ade3b85..88a1f288c 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/events.js @@ -1,12 +1,16 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { -var log = TestHelpers.menu.log, - logOutput = TestHelpers.menu.logOutput, - click = TestHelpers.menu.click; +var log = testHelper.log, + logOutput = testHelper.logOutput, + click = testHelper.click; module( "menu: events", { setup: function() { - TestHelpers.menu.clearLog(); + testHelper.clearLog(); } }); @@ -58,7 +62,7 @@ asyncTest( "handle blur", function() { click( element, "1" ); setTimeout(function() { - element.blur(); + element.trigger( "blur" ); setTimeout(function() { start(); }, 350 ); @@ -111,62 +115,108 @@ asyncTest( "handle focus of menu with active item", function() { }); }); -asyncTest( "handle submenu auto collapse: mouseleave", function() { +test( "handle mouseenter on nested menu item", function( assert ) { + assert.expect( 8 ); + $.ui.menu.prototype.delay = 1; + var activeItem, + done = assert.async(), + element = $( "#menu2" ).menu(); + + element + .menu( "previous" ) + .menu( "expand" ); + + function checkSubmenus() { + equal( element.find( "ul[aria-expanded='true']" ).length, 2, "both submenus expanded" ); + } + function menumouseenter1() { + element.menu( "expand" ); + setTimeout( menumouseenter2, 25 ); + } + function menumouseenter2() { + checkSubmenus(); + activeItem = $( "#" + element.attr( "aria-activedescendant" ) ); + assert.hasClasses( activeItem, "ui-state-active" ); + activeItem.trigger( "mouseleave" ); + setTimeout( menumouseenter3, 25 ); + } + function menumouseenter3() { + checkSubmenus(); + assert.lacksClasses( activeItem, "ui-state-active" ); + activeItem.trigger( "mouseenter" ); + setTimeout( menumouseenter4, 25 ); + } + function menumouseenter4() { + checkSubmenus(); + activeItem.parents( ".ui-menu-item" ).each( function( index, item ) { + assert.hasClasses( $( item ).children( ".ui-menu-item-wrapper" ), "ui-state-active" ); + } ); + $.ui.menu.prototype.delay = 300; + done(); + } + setTimeout( menumouseenter1, 25 ); +} ); + +asyncTest( "handle submenu auto collapse: mouseleave, default markup", function() { expect( 4 ); + $.ui.menu.prototype.delay = 1; var element = $( "#menu2" ).menu(), event = $.Event( "mouseenter" ); function menumouseleave1() { equal( element.find( "ul[aria-expanded='true']" ).length, 1, "first submenu expanded" ); element.menu( "focus", event, element.find( "li:nth-child(7) li:first" ) ); - setTimeout( menumouseleave2, 350 ); + setTimeout( menumouseleave2, 25 ); } function menumouseleave2() { equal( element.find( "ul[aria-expanded='true']" ).length, 2, "second submenu expanded" ); element.find( "ul[aria-expanded='true']:first" ).trigger( "mouseleave" ); - setTimeout( menumouseleave3, 350 ); + setTimeout( menumouseleave3, 25 ); } function menumouseleave3() { equal( element.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); element.trigger( "mouseleave" ); - setTimeout( menumouseleave4, 350 ); + setTimeout( menumouseleave4, 25 ); } function menumouseleave4() { equal( element.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); + $.ui.menu.prototype.delay = 300; start(); } element.find( "li:nth-child(7)" ).trigger( "mouseenter" ); - setTimeout( menumouseleave1, 350 ); + setTimeout( menumouseleave1, 25 ); }); -asyncTest( "handle submenu auto collapse: mouseleave", function() { +asyncTest( "handle submenu auto collapse: mouseleave, custom markup", function() { expect( 4 ); + $.ui.menu.prototype.delay = 1; var element = $( "#menu5" ).menu({ menus: ".menu" }), event = $.Event( "mouseenter" ); function menumouseleave1() { equal( element.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" ); element.menu( "focus", event, element.find( ":nth-child(7)" ).find( ".menu" ).eq( 0 ).children().eq( 0 ) ); - setTimeout( menumouseleave2, 350 ); + setTimeout( menumouseleave2, 25 ); } function menumouseleave2() { equal( element.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" ); element.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" ); - setTimeout( menumouseleave3, 350 ); + setTimeout( menumouseleave3, 25 ); } function menumouseleave3() { equal( element.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); element.trigger( "mouseleave" ); - setTimeout( menumouseleave4, 350 ); + setTimeout( menumouseleave4, 25 ); } function menumouseleave4() { equal( element.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); + $.ui.menu.prototype.delay = 300; start(); } element.find( ":nth-child(7)" ).trigger( "mouseenter" ); - setTimeout( menumouseleave1, 350 ); + setTimeout( menumouseleave1, 25 ); }); asyncTest( "handle keyboard navigation on menu without scroll and without submenus", function() { @@ -251,9 +301,9 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); - setTimeout( menukeyboard1, 50 ); + setTimeout( menukeyboard1 ); }); - element.focus(); + element.trigger( "focus" ); function menukeyboard1() { log( "keydown", true ); @@ -274,8 +324,8 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" setTimeout(function() { equal( logOutput(), "keydown,1,2,3,4,0", "Keydown RIGHT (open submenu)" ); - setTimeout( menukeyboard2, 50 ); - }, 50 ); + setTimeout( menukeyboard2 ); + } ); } function menukeyboard2() { @@ -285,7 +335,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" // re-open submenu element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - setTimeout( menukeyboard3, 50 ); + setTimeout( menukeyboard3 ); } function menukeyboard3() { @@ -319,7 +369,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.SPACE } ); - setTimeout( menukeyboard4, 50 ); + setTimeout( menukeyboard4 ); } function menukeyboard4() { @@ -344,9 +394,9 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - setTimeout( menukeyboard6, 50 ); - }, 50 ); - }, 50 ); + setTimeout( menukeyboard6 ); + } ); + } ); } function menukeyboard6() { @@ -446,9 +496,9 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); - setTimeout( menukeyboard1, 50 ); + setTimeout( menukeyboard1 ); }); - element.focus(); + element.trigger( "focus" ); function menukeyboard1() { log( "keydown", true ); @@ -543,7 +593,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite equal( logOutput(), "keydown,1", "Keydown focus but not select disabled item" ); setTimeout( menukeyboard1, 50 ); }); - element.focus(); + element.trigger( "focus" ); function menukeyboard1() { log( "keydown", true ); @@ -595,7 +645,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" ); setTimeout( menukeyboard1, 50 ); }); - element.focus(); + element.trigger( "focus" ); function menukeyboard1() { log( "keydown", true ); @@ -667,13 +717,13 @@ test( "#9469: Stopping propagation in a select event should not suppress subsequ equal( logOutput(), "1,2", "Both select events were not triggered." ); }); -asyncTest( "#10571: When typing in a menu, only menu-items should be focused", function() { +asyncTest( "#10571: When typing in a menu, only menu-items should be focused", function( assert ) { expect( 3 ); var element = $( "#menu8" ).menu({ focus: function( event, ui ) { equal( ui.item.length, 1, "There should only be one match when filtering" ); - ok( ui.item.hasClass( "ui-menu-item" ), "element is .ui-menu-item" ); + assert.hasClasses( ui.item, "ui-menu-item" ); equal( ui.item.text(), "-Saarland", "element has correct text" ); } }); @@ -684,4 +734,4 @@ asyncTest( "#10571: When typing in a menu, only menu-items should be focused", f }); }); -})( jQuery ); +} ); diff --git a/tests/unit/menu/menu_test_helpers.js b/tests/unit/menu/helper.js index ea273c765..445663985 100644 --- a/tests/unit/menu/menu_test_helpers.js +++ b/tests/unit/menu/helper.js @@ -1,9 +1,12 @@ -(function() { +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { var lastItem, log = []; -TestHelpers.menu = { +return $.extend( helper, { log: function( message, clear ) { if ( clear ) { log.length = 0; @@ -28,6 +31,6 @@ TestHelpers.menu = { .children( ".ui-menu-item-wrapper" ) .trigger( "click" ); } -}; +} ); -})(); +} ); diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index 56115c334..2d871a4b3 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -4,30 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Menu Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "menu" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/menu.js" - ] - }); - </script> - - <script src="menu_test_helpers.js"></script> - <script src="menu_common.js"></script> - <script src="menu_core.js"></script> - <script src="menu_events.js"></script> - <script src="menu_methods.js"></script> - <script src="menu_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core menu"></script> + <script src="../../lib/bootstrap.js" data-widget="menu"></script> <style> .ui-menu { font-size: 15px; @@ -52,7 +31,7 @@ <div id="qunit-fixture"> <ul class="foo" id="menu1"> - <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Aberdeen</div> <li class="foo"><div>Ada</div></li> <li class="foo"><div>Adamsville</div></li> <li class="foo"><div id="testID1">Addyston</div></li> @@ -332,6 +311,18 @@ <li class="foo"><div>-Saarland</div></li> </ul> +<ul class="foo" id="menu9"> + <li class="foo"> + <div>Aberdeen</div> + <ul> + <li class="foo"><div>Ada</div></li> + </ul> + </li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> +</ul> </div> </body> </html> diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/methods.js index ef8279018..e322ab214 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/methods.js @@ -1,32 +1,30 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { -var log = TestHelpers.menu.log, - logOutput = TestHelpers.menu.logOutput, - click = TestHelpers.menu.click; +var log = testHelper.log, + logOutput = testHelper.logOutput, + click = testHelper.click; module( "menu: methods", { setup: function() { - TestHelpers.menu.clearLog(); + testHelper.clearLog(); } }); -test( "destroy", function() { - expect( 4 ); - domEqual( "#menu1", function() { - $( "#menu1" ).menu().menu( "destroy" ); - }); - domEqual( "#menu2", function() { +test( "destroy", function( assert ) { + expect( 2 ); + assert.domEqual( "#menu2", function() { $( "#menu2" ).menu().menu( "destroy" ); }); - domEqual( "#menu5", function() { + assert.domEqual( "#menu5", function() { $( "#menu5").menu().menu( "destroy" ); }); - domEqual( "#menu6", function() { - $( "#menu6" ).menu().menu( "destroy" ); - }); }); -test( "enable/disable", function() { +test( "enable/disable", function( assert ) { expect( 3 ); var element = $( "#menu1" ).menu({ select: function() { @@ -34,12 +32,12 @@ test( "enable/disable", function() { } }); element.menu( "disable" ); - ok( element.is( ".ui-state-disabled" ), "Missing ui-state-disabled class" ); + assert.hasClasses( element, "ui-state-disabled" ); log( "click", true ); click( element, "1" ); log( "afterclick" ); element.menu( "enable" ); - ok( element.not( ".ui-state-disabled" ), "Has ui-state-disabled class" ); + assert.lacksClasses( element, "ui-state-disabled" ); log( "click" ); click( element, "1" ); log( "afterclick" ); @@ -69,18 +67,18 @@ test( "refresh submenu", function() { equal( element.find( "ul:first .ui-menu-item" ).length, 4 ); }); -test( "refresh icons (see #9377)", function() { +test( "refresh icons (see #9377)", function( assert ) { expect( 3 ); var element = $( "#menu1" ).menu(); - ok( !element.hasClass( "ui-menu-icons") ); + assert.lacksClasses( element, "ui-menu-icons" ); element.find( "li:first .ui-menu-item-wrapper" ) .html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); element.menu( "refresh" ); - ok( element.hasClass( "ui-menu-icons" ) ); + assert.hasClasses( element, "ui-menu-icons" ); element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" ); element.menu( "refresh" ); - ok( !element.hasClass( "ui-menu-icons" ) ); + assert.lacksClasses( element, "ui-menu-icons" ); }); test( "widget", function() { @@ -115,4 +113,4 @@ test( "widget", function() { // TODO: test select method -})( jQuery ); +} ); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/options.js index 3b71037e8..8994b026f 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/options.js @@ -1,16 +1,20 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { -var log = TestHelpers.menu.log, - logOutput = TestHelpers.menu.logOutput, - click = TestHelpers.menu.click; +var log = testHelper.log, + logOutput = testHelper.logOutput, + click = testHelper.click; module( "menu: options", { setup: function() { - TestHelpers.menu.clearLog(); + testHelper.clearLog(); } }); -test( "{ disabled: true }", function() { +test( "{ disabled: true }", function( assert ) { expect( 2 ); var element = $( "#menu1" ).menu({ disabled: true, @@ -18,14 +22,14 @@ test( "{ disabled: true }", function() { log(); } }); - ok( element.hasClass( "ui-state-disabled" ), "Missing ui-state-disabled class" ); + assert.hasClasses( element, "ui-state-disabled" ); log( "click", true ); click( element, "1" ); log( "afterclick" ); equal( logOutput(), "click,afterclick", "Click order not valid." ); }); -test( "{ disabled: false }", function() { +test( "{ disabled: false }", function( assert ) { expect( 2 ); var element = $( "#menu1" ).menu({ disabled: false, @@ -33,44 +37,50 @@ test( "{ disabled: false }", function() { log(); } }); - ok( !element.hasClass( "ui-state-disabled" ), "Has ui-state-disabled class" ); + assert.lacksClasses( element, "ui-state-disabled" ); log( "click", true ); click( element, "1" ); log( "afterclick" ); equal( logOutput(), "click,1,afterclick", "Click order not valid." ); }); -test( "{ icons: default }", function() { - expect( 2 ); +test( "{ icons: default }", function( assert ) { + expect( 8 ); var element = $( "#menu2" ).menu(); - equal( element.find( ".ui-menu-icon" ).attr( "class" ), "ui-menu-icon ui-icon ui-icon-caret-1-e" ); + element.find( ".ui-menu-icon" ).each( function() { + assert.hasClasses( this, "ui-menu-icon ui-icon ui-icon-caret-1-e" ); + }); element.menu( "option", "icons.submenu", "ui-icon-triangle-1-e" ); - equal( element.find( ".ui-menu-icon" ).attr( "class" ), "ui-menu-icon ui-icon ui-icon-triangle-1-e" ); + element.find( ".ui-menu-icon" ).each( function() { + assert.hasClasses( this, "ui-menu-icon ui-icon ui-icon-triangle-1-e" ); + }); }); -test( "{ icons: { submenu: 'custom' } }", function() { - expect( 1 ); +test( "{ icons: { submenu: 'custom' } }", function( assert ) { + expect( 4 ); var element = $( "#menu2" ).menu({ icons: { submenu: "custom-class" } }); - equal( element.find( ".ui-menu-icon" ).attr( "class" ), "ui-menu-icon ui-icon custom-class" ); + element.find( ".ui-menu-icon" ).each( function() { + assert.hasClasses( this, "ui-menu-icon ui-icon custom-class" ); + }); }); // TODO: test menus option // TODO: test position option -test( "{ role: 'menu' } ", function() { +test( "{ role: 'menu' } ", function( assert ) { var element = $( "#menu1" ).menu(), items = element.find( "li" ); expect( 2 + 3 * items.length ); equal( element.attr( "role" ), "menu" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { - ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); + assert.hasClasses( $( this ), "ui-menu-item" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", @@ -78,7 +88,7 @@ test( "{ role: 'menu' } ", function() { }); }); -test( "{ role: 'listbox' } ", function() { +test( "{ role: 'listbox' } ", function( assert ) { var element = $( "#menu1" ).menu({ role: "listbox" }), @@ -87,7 +97,7 @@ test( "{ role: 'listbox' } ", function() { equal( element.attr( "role" ), "listbox" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { - ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); + assert.hasClasses( $( this ), "ui-menu-item" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option", "menu item ("+ item + ") role" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", @@ -95,21 +105,21 @@ test( "{ role: 'listbox' } ", function() { }); }); -test( "{ role: null }", function() { +test( "{ role: null }", function( assert ) { var element = $( "#menu1" ).menu({ role: null }), items = element.find( "li" ); expect( 2 + 3 * items.length ); - strictEqual( element.attr( "role" ), undefined ); + equal( element.attr( "role" ), null ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { - ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), undefined, + assert.hasClasses( $( this ), "ui-menu-item" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), null, "menu item ("+ item + ") role" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); -})( jQuery ); +} ); diff --git a/tests/unit/position/all.html b/tests/unit/position/all.html index f2dfa779c..82e5cd9bc 100644 --- a/tests/unit/position/all.html +++ b/tests/unit/position/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/position/position_core.js b/tests/unit/position/core.js index 7176e37e1..c480e2178 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/core.js @@ -1,4 +1,8 @@ -(function( $ ) { +define( [ + "jquery", + "lib/common", + "ui/position" +], function( $, common ) { var win = $( window ), scrollTopSupport = function() { @@ -16,7 +20,7 @@ module( "position", { } }); -TestHelpers.testJshint( "position" ); +common.testJshint( "position" ); test( "my, at, of", function() { expect( 4 ); @@ -763,4 +767,4 @@ test( "bug #8710: flip if flipped position fits more", function() { }, "no flip - top fits less" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 334fbbb78..a8c9fceea 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -4,37 +4,21 @@ <meta charset="utf-8"> <title>jQuery UI Position Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - js: [ "ui/position.js" ] - }); - </script> - - <script src="position_core.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js"></script> + <script src="../../lib/bootstrap.js" data-modules="core"></script> </head> <body> <div id="qunit" style="position:relative; z-index:2;"></div> -<!-- -elements smaller than 20px have a line-height set on them to avoid a bug in IE6 -.height() returns the greater of the height and line-height ---> - <div id="qunit-fixture" style="top: 0; left: 0; z-index:1"> - <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> - <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> - <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> - <div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px; line-height: 12px;"></div> + <div id="el1" style="position: absolute; width: 6px; height: 6px;"></div> + <div id="el2" style="position: absolute; width: 6px; height: 6px;"></div> + <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px;"></div> + <div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px;"></div> <div id="scrollx" style="position: absolute; top: 0px; left: 0px"> - <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> + <div id="elx" style="position: absolute; width: 10px; height: 10px;"></div> <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div> </div> @@ -48,8 +32,8 @@ elements smaller than 20px have a line-height set on them to avoid a bug in IE6 <div style="width: 50px; height: 10px;"></div> </div> - <div id="bug-8710-within-smaller" style="position: absolute; width: 100px; height: 99px; top: 0px; left: 0px; line-height: 99px;"></div> - <div id="bug-8710-within-bigger" style="position: absolute; width: 100px; height: 101px; top: 0px; left: 0px; line-height: 101px;"></div> + <div id="bug-8710-within-smaller" style="position: absolute; width: 100px; height: 99px; top: 0px; left: 0px;"></div> + <div id="bug-8710-within-bigger" style="position: absolute; width: 100px; height: 101px; top: 0px; left: 0px;"></div> </div> </body> diff --git a/tests/unit/progressbar/all.html b/tests/unit/progressbar/all.html index c8cfc824d..b20bdd27e 100644 --- a/tests/unit/progressbar/all.html +++ b/tests/unit/progressbar/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/progressbar/common.js b/tests/unit/progressbar/common.js new file mode 100644 index 000000000..c949f136f --- /dev/null +++ b/tests/unit/progressbar/common.js @@ -0,0 +1,24 @@ +define( [ + "lib/common", + "ui/progressbar" +], function( common ) { + +common.testWidget( "progressbar", { + defaults: { + classes: { + "ui-progressbar": "ui-corner-all", + "ui-progressbar-value": "ui-corner-left", + "ui-progressbar-complete": "ui-corner-right" + }, + disabled: false, + max: 100, + value: 0, + + //callbacks + change: null, + complete: null, + create: null + } +}); + +} ); diff --git a/tests/unit/progressbar/core.js b/tests/unit/progressbar/core.js new file mode 100644 index 000000000..05eea9ef7 --- /dev/null +++ b/tests/unit/progressbar/core.js @@ -0,0 +1,64 @@ +define( [ + "jquery", + "ui/progressbar" +], function( $ ) { + +module( "progressbar: core" ); + +test( "markup structure", function( assert ) { + expect( 7 ); + var element = $( "#progressbar" ).progressbar(), + value = element.children().eq( 0 ); + + assert.hasClasses( element, "ui-progressbar ui-widget ui-widget-content" ); + assert.hasClasses( value, "ui-progressbar-value ui-widget-header" ); + assert.lacksClasses( value, "ui-progressbar-complete" ); + assert.lacksClasses( element, "ui-progressbar-indeterminate" ); + equal( element.children().length, 1, "Main element contains one child" ); + + element.progressbar( "option", "value", 100 ); + assert.hasClasses( value, "ui-progressbar-complete ui-widget-header ui-progressbar-value" ); + equal( element.children().children().length, 0, "no overlay div" ); +}); + +test( "markup structure - indeterminate", function( assert ) { + expect( 5 ); + var element = $( "#progressbar" ).progressbar({ value: false }), + children = element.children(); + + assert.hasClasses( element, "ui-progressbar ui-progressbar-indeterminate ui-widget ui-widget-content" ); + assert.hasClasses( children[ 0 ], "ui-progressbar-value ui-widget-header" ); + equal( children.length, 1, "Main element contains one child" ); + assert.hasClasses( children[ 0 ], "ui-progressbar-value" ); + equal( children.children( ".ui-progressbar-overlay" ).length, 1, + "Value has class ui-progressbar-overlay" ); +}); + +test( "accessibility", function() { + expect( 11 ); + var element = $( "#progressbar" ).progressbar(); + + equal( element.attr( "role" ), "progressbar", "aria role" ); + equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" ); + equal( element.attr( "aria-valuemax" ), 100, "aria-valuemax" ); + equal( element.attr( "aria-valuenow" ), 0, "aria-valuenow initially" ); + + element.progressbar( "value", 77 ); + equal( element.attr( "aria-valuenow" ), 77, "aria-valuenow" ); + + element.progressbar( "option", "max", 150 ); + equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" ); + + element.progressbar( "disable" ); + equal( element.attr( "aria-disabled" ), "true", "aria-disabled on" ); + + element.progressbar( "enable" ); + equal( element.attr( "aria-disabled" ), "false", "aria-disabled off" ); + + element.progressbar( "option", "value", false ); + equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" ); + equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" ); + equal( element.attr( "aria-valuenow" ), null, "aria-valuenow" ); +}); + +} ); diff --git a/tests/unit/progressbar/progressbar_events.js b/tests/unit/progressbar/events.js index 95effda75..a40b2c432 100644 --- a/tests/unit/progressbar/progressbar_events.js +++ b/tests/unit/progressbar/events.js @@ -1,3 +1,8 @@ +define( [ + "jquery", + "ui/progressbar" +], function( $ ) { + module( "progressbar: events" ); test( "create", function() { @@ -49,3 +54,5 @@ test( "complete", function() { value = 100; element.progressbar( "value", value ); }); + +} ); diff --git a/tests/unit/progressbar/progressbar_methods.js b/tests/unit/progressbar/methods.js index 004eacf90..eaf0a5c76 100644 --- a/tests/unit/progressbar/progressbar_methods.js +++ b/tests/unit/progressbar/methods.js @@ -1,20 +1,25 @@ +define( [ + "jquery", + "ui/progressbar" +], function( $ ) { + module( "progressbar: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#progressbar", function() { + assert.domEqual( "#progressbar", function() { $( "#progressbar" ).progressbar().progressbar( "destroy" ); }); }); -test( "disable", function() { +test( "disable", function( assert ) { expect( 3 ); var element = $( "#progressbar" ).progressbar().progressbar( "disable" ); - ok( element.progressbar( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" ); + assert.hasClasses( element.progressbar( "widget" ), "ui-state-disabled" ); ok( element.progressbar( "widget" ).attr( "aria-disabled" ), "element gets aria-disabled" ); - ok( element.progressbar( "widget" ).hasClass( "ui-progressbar-disabled" ), "element gets ui-progressbar-disabled" ); + assert.hasClasses( element.progressbar( "widget" ), "ui-progressbar-disabled" ); }); test( "value", function() { @@ -33,3 +38,5 @@ test( "widget", function() { equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); }); + +} ); diff --git a/tests/unit/progressbar/progressbar_options.js b/tests/unit/progressbar/options.js index bc0b5d00d..7b6ac9db2 100644 --- a/tests/unit/progressbar/progressbar_options.js +++ b/tests/unit/progressbar/options.js @@ -1,3 +1,8 @@ +define( [ + "jquery", + "ui/progressbar" +], function( $ ) { + module( "progressbar: options" ); test( "{ value: 0 }, default", function() { @@ -70,3 +75,5 @@ test( "change max below value", function() { equal( $( "#progressbar" ).progressbar( "value" ), 5, "value constrained at max" ); }); + +} ); diff --git a/tests/unit/progressbar/progressbar.html b/tests/unit/progressbar/progressbar.html index 56a02bcd4..18a5195bc 100644 --- a/tests/unit/progressbar/progressbar.html +++ b/tests/unit/progressbar/progressbar.html @@ -4,29 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Progressbar Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "progressbar" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/progressbar.js" - ] - }); - </script> - - <script src="progressbar_common.js"></script> - <script src="progressbar_core.js"></script> - <script src="progressbar_events.js"></script> - <script src="progressbar_methods.js"></script> - <script src="progressbar_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core progressbar"></script> + <script src="../../lib/bootstrap.js" data-widget="progressbar"></script> </head> <body> diff --git a/tests/unit/progressbar/progressbar_common.js b/tests/unit/progressbar/progressbar_common.js deleted file mode 100644 index 0768576f5..000000000 --- a/tests/unit/progressbar/progressbar_common.js +++ /dev/null @@ -1,12 +0,0 @@ -TestHelpers.commonWidgetTests( "progressbar", { - defaults: { - disabled: false, - max: 100, - value: 0, - - //callbacks - change: null, - complete: null, - create: null - } -}); diff --git a/tests/unit/progressbar/progressbar_core.js b/tests/unit/progressbar/progressbar_core.js deleted file mode 100644 index 8f4a138ce..000000000 --- a/tests/unit/progressbar/progressbar_core.js +++ /dev/null @@ -1,53 +0,0 @@ -module( "progressbar: core" ); - -test( "markup structure", function() { - expect( 5 ); - var element = $( "#progressbar" ).progressbar(); - ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" ); - 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" ), - "child is .ui-progressbar-value" ); - equal( element.children().children().length, 0, "no overlay div" ); -}); - -test( "markup structure - indeterminate", function() { - expect( 5 ); - 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" ); - equal( element.children().length, 1, "main element contains one child" ); - ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ), - "child is .ui-progressbar-value" ); - equal( element.children().children( ".ui-progressbar-overlay" ).length, 1, - ".ui-progressbar-value has .ui-progressbar-overlay" ); -}); - -test( "accessibility", function() { - expect( 11 ); - var element = $( "#progressbar" ).progressbar(); - - equal( element.attr( "role" ), "progressbar", "aria role" ); - equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" ); - equal( element.attr( "aria-valuemax" ), 100, "aria-valuemax" ); - equal( element.attr( "aria-valuenow" ), 0, "aria-valuenow initially" ); - - element.progressbar( "value", 77 ); - equal( element.attr( "aria-valuenow" ), 77, "aria-valuenow" ); - - element.progressbar( "option", "max", 150 ); - equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" ); - - element.progressbar( "disable" ); - equal( element.attr( "aria-disabled" ), "true", "aria-disabled on" ); - - element.progressbar( "enable" ); - equal( element.attr( "aria-disabled" ), "false", "aria-disabled off" ); - - element.progressbar( "option", "value", false ); - equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" ); - equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" ); - strictEqual( element.attr( "aria-valuenow" ), undefined, "aria-valuenow" ); -}); diff --git a/tests/unit/qunit-composite.css b/tests/unit/qunit-composite.css deleted file mode 100644 index c530436da..000000000 --- a/tests/unit/qunit-composite.css +++ /dev/null @@ -1,13 +0,0 @@ -iframe.qunit-subsuite { - position: fixed; - bottom: 0; - left: 0; - - margin: 0; - padding: 0; - border-width: 1px 0 0; - height: 45%; - width: 100%; - - background: #fff; -} diff --git a/tests/unit/qunit-composite.js b/tests/unit/qunit-composite.js deleted file mode 100644 index 2e5454056..000000000 --- a/tests/unit/qunit-composite.js +++ /dev/null @@ -1,112 +0,0 @@ -(function( QUnit ) { - -QUnit.extend( QUnit, { - testSuites: function( suites ) { - QUnit.begin(function() { - QUnit.initIframe(); - }); - - for ( var i = 0; i < suites.length; i++ ) { - QUnit.runSuite( suites[i] ); - } - - QUnit.done(function() { - this.iframe.style.display = "none"; - }); - }, - - runSuite: function( suite ) { - var path = suite; - - if ( QUnit.is( "object", suite ) ) { - path = suite.path; - suite = suite.name; - } - - asyncTest( suite, function() { - QUnit.iframe.setAttribute( "src", path ); - }); - }, - - initIframe: function() { - var body = document.body, - iframe = this.iframe = document.createElement( "iframe" ), - iframeWin; - - iframe.className = "qunit-subsuite"; - body.appendChild( iframe ); - - function onIframeLoad() { - var module, test, - count = 0; - - if (iframe.src === "") { - return; - } - - iframeWin.QUnit.moduleStart(function( data ) { - // capture module name for messages - module = data.name; - }); - - iframeWin.QUnit.testStart(function( data ) { - // capture test name for messages - test = data.name; - }); - iframeWin.QUnit.testDone(function() { - test = null; - }); - - iframeWin.QUnit.log(function( data ) { - if (test === null) { - return; - } - // pass all test details through to the main page - var message = module + ": " + test + ": " + data.message; - expect( ++count ); - QUnit.push( data.result, data.actual, data.expected, message ); - }); - - iframeWin.QUnit.done(function() { - // start the wrapper test from the main page - start(); - }); - } - QUnit.addEvent( iframe, "load", onIframeLoad ); - - iframeWin = iframe.contentWindow; - } -}); - -QUnit.testStart(function( data ) { - // update the test status to show which test suite is running - QUnit.id( "qunit-testresult" ).innerHTML = "Running " + data.name + "...<br> "; -}); - -QUnit.testDone(function() { - var i, - current = QUnit.id( this.config.current.id ), - children = current.children, - src = this.iframe.src; - - // undo the auto-expansion of failed tests - for ( i = 0; i < children.length; i++ ) { - if ( children[i].nodeName === "OL" ) { - children[i].style.display = "none"; - } - } - - QUnit.addEvent(current, "dblclick", function( e ) { - var target = e && e.target ? e.target : window.event.srcElement; - if ( target.nodeName.toLowerCase() === "span" || target.nodeName.toLowerCase() === "b" ) { - target = target.parentNode; - } - if ( window.location && target.nodeName.toLowerCase() === "strong" ) { - window.location = src; - } - }); - - current.getElementsByTagName("a")[0].href = src; -}); - -}( QUnit ) ); diff --git a/tests/unit/resizable/all.html b/tests/unit/resizable/all.html index 1c4116175..486f26696 100644 --- a/tests/unit/resizable/all.html +++ b/tests/unit/resizable/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/common.js index c261ac5b9..822a4db87 100644 --- a/tests/unit/resizable/resizable_common.js +++ b/tests/unit/resizable/common.js @@ -1,4 +1,9 @@ -TestHelpers.commonWidgetTests( "resizable", { +define( [ + "lib/common", + "ui/resizable" +], function( common ) { + +common.testWidget( "resizable", { defaults: { alsoResize: false, animate: false, @@ -6,7 +11,10 @@ TestHelpers.commonWidgetTests( "resizable", { animateEasing: "swing", aspectRatio: false, autoHide: false, - cancel: "input,textarea,button,select,option", + cancel: "input, textarea, button, select, option", + classes: { + "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se" + }, containment: false, delay: 0, disabled: false, @@ -28,3 +36,5 @@ TestHelpers.commonWidgetTests( "resizable", { stop: null } }); + +} ); diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/core.js index f43cde623..8c21fbd7d 100644 --- a/tests/unit/resizable/resizable_core.js +++ b/tests/unit/resizable/core.js @@ -1,8 +1,8 @@ -/* - * resizable_core.js - */ - -(function($) { +define( [ + "jquery", + "./helper", + "ui/resizable" +], function( $, testHelper ) { module("resizable: core"); @@ -30,10 +30,10 @@ test("n", function() { var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, 0, -50); + testHelper.drag(handle, 0, -50); equal( target.height(), 150, "compare height" ); - TestHelpers.resizable.drag(handle, 0, 50); + testHelper.drag(handle, 0, 50); equal( target.height(), 100, "compare height" ); equal( target[0].style.left, "", "left should not be modified" ); @@ -45,10 +45,10 @@ test("s", function() { var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, 0, 50); + testHelper.drag(handle, 0, 50); equal( target.height(), 150, "compare height" ); - TestHelpers.resizable.drag(handle, 0, -50); + testHelper.drag(handle, 0, -50); equal( target.height(), 100, "compare height" ); equal( target[0].style.top, "", "top should not be modified" ); @@ -61,10 +61,10 @@ test("e", function() { var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, 50); + testHelper.drag(handle, 50); equal( target.width(), 150, "compare width"); - TestHelpers.resizable.drag(handle, -50); + testHelper.drag(handle, -50); equal( target.width(), 100, "compare width" ); equal( target[0].style.height, "", "height should not be modified" ); @@ -77,10 +77,10 @@ test("w", function() { var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, -50); + testHelper.drag(handle, -50); equal( target.width(), 150, "compare width" ); - TestHelpers.resizable.drag(handle, 50); + testHelper.drag(handle, 50); equal( target.width(), 100, "compare width" ); equal( target[0].style.height, "", "height should not be modified" ); @@ -92,11 +92,11 @@ test("ne", function() { var handle = ".ui-resizable-ne", target = $("#resizable1").css({ overflow: "hidden" }).resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, -50, -50); + testHelper.drag(handle, -50, -50); equal( target.width(), 50, "compare width" ); equal( target.height(), 150, "compare height" ); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); @@ -108,11 +108,11 @@ test("se", function() { var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal( target.width(), 150, "compare width" ); equal( target.height(), 150, "compare height" ); - TestHelpers.resizable.drag(handle, -50, -50); + testHelper.drag(handle, -50, -50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); @@ -125,11 +125,11 @@ test("sw", function() { var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, -50, -50); + testHelper.drag(handle, -50, -50); equal( target.width(), 150, "compare width" ); equal( target.height(), 50, "compare height" ); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); @@ -141,11 +141,11 @@ test("nw", function() { var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, -50, -50); + testHelper.drag(handle, -50, -50); equal( target.width(), 150, "compare width" ); equal( target.height(), 150, "compare height" ); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); }); @@ -163,10 +163,10 @@ test("handle with complex markup (#8756)", function() { var handle = ".ui-resizable-w div", target = $("#resizable1").resizable({ handles: "all" }); - TestHelpers.resizable.drag(handle, -50); + testHelper.drag(handle, -50); equal( target.width(), 150, "compare width" ); - TestHelpers.resizable.drag(handle, 50); + testHelper.drag(handle, 50); equal( target.width(), 100, "compare width" ); }); @@ -186,7 +186,7 @@ test("resizable accounts for scroll position correctly (#3815)", function() { left = el.css("left"); top = el.css("top"); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); deepEqual( el.position(), position, "position stays the same when resized" ); equal( el.css("left"), left, "css('left') stays the same when resized" ); equal( el.css("top"), top, "css('top') stays the same when resized" ); @@ -203,7 +203,7 @@ test( "resizable stores correct size when using helper and grid (#9547)", functi grid: [ 10, 10 ] }); - TestHelpers.resizable.drag( handle, 1, 1 ); + testHelper.drag( handle, 1, 1 ); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); }); @@ -227,18 +227,18 @@ test( "nested resizable", function() { innerHandle = $( "#inner > .ui-resizable-e" ); outerHandle = $( "#outer > .ui-resizable-e" ); - TestHelpers.resizable.drag( innerHandle, 10 ); + testHelper.drag( innerHandle, 10 ); equal( inner.width(), 40, "compare width of inner element" ); - TestHelpers.resizable.drag( innerHandle, -10 ); + testHelper.drag( innerHandle, -10 ); equal( inner.width(), 30, "compare width of inner element" ); - TestHelpers.resizable.drag( outerHandle, 10 ); + testHelper.drag( outerHandle, 10 ); equal( outer.width(), 60, "compare width of outer element" ); - TestHelpers.resizable.drag( outerHandle, -10 ); + testHelper.drag( outerHandle, -10 ); equal( outer.width(), 50, "compare width of outer element" ); inner.remove(); outer.remove(); }); -})(jQuery); +} ); diff --git a/tests/unit/resizable/resizable_events.js b/tests/unit/resizable/events.js index d3851f72e..2a06f87cc 100644 --- a/tests/unit/resizable/resizable_events.js +++ b/tests/unit/resizable/events.js @@ -1,7 +1,8 @@ -/* - * resizable_events.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/resizable" +], function( $, testHelper ) { module("resizable: events"); @@ -23,7 +24,7 @@ test("start", function() { } }); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal(count, 1, "start callback should happen exactly once"); @@ -54,7 +55,7 @@ test( "resize", function() { } }); - TestHelpers.resizable.drag( handle, 50, 50 ); + testHelper.drag( handle, 50, 50 ); equal( count, 2, "resize callback should happen exactly once per size adjustment" ); @@ -82,7 +83,7 @@ test( "resize (min/max dimensions)", function() { } }); - TestHelpers.resizable.drag( handle, -200, -200 ); + testHelper.drag( handle, -200, -200 ); equal( count, 1, "resize callback should happen exactly once per size adjustment" ); @@ -112,10 +113,10 @@ test( "resize (containment)", function() { }); // Prove you can't resize outside containment by dragging southeast corner southeast - TestHelpers.resizable.drag( handle, 100, 100 ); + testHelper.drag( handle, 100, 100 ); // Prove you can't resize outside containment by dragging southeast corner northwest - TestHelpers.resizable.drag( handle, -200, -200 ); + testHelper.drag( handle, -200, -200 ); equal( count, 1, "resize callback should happen exactly once per size adjustment" ); @@ -140,7 +141,7 @@ test("resize (grid)", function() { } }); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment"); @@ -159,7 +160,7 @@ test( "resize, custom adjustment", function() { } }); - TestHelpers.resizable.drag( handle, 50, 50 ); + testHelper.drag( handle, 50, 50 ); equal( element.width(), 100, "resize event can control width" ); equal( element.height(), 200, "resize event can control height" ); @@ -185,7 +186,7 @@ test("stop", function() { } }); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal(count, 1, "stop callback should happen exactly once"); @@ -230,7 +231,7 @@ test( "resize (containment) works with parent with negative offset", function() widthBefore = target.width(); - TestHelpers.resizable.drag( handle, increaseWidthBy, 0 ); + testHelper.drag( handle, increaseWidthBy, 0 ); widthAfter = target.width(); @@ -238,4 +239,4 @@ test( "resize (containment) works with parent with negative offset", function() }); -})(jQuery); +} ); diff --git a/tests/unit/resizable/resizable_test_helpers.js b/tests/unit/resizable/helper.js index cc0ef48ec..494c1a073 100644 --- a/tests/unit/resizable/resizable_test_helpers.js +++ b/tests/unit/resizable/helper.js @@ -1,4 +1,9 @@ -TestHelpers.resizable = { +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { + +return $.extend( helper, { drag: function( el, dx, dy ) { // this mouseover is to work around a limitation in resizable // TODO: fix resizable so handle doesn't require mouseover in order to be used @@ -8,4 +13,6 @@ TestHelpers.resizable = { dy: dy }); } -}; +} ); + +} ); diff --git a/tests/unit/resizable/resizable_methods.js b/tests/unit/resizable/methods.js index abb8951f9..a7056a105 100644 --- a/tests/unit/resizable/resizable_methods.js +++ b/tests/unit/resizable/methods.js @@ -1,21 +1,21 @@ -/* - * resizable_methods.js - */ -(function($) { +define( [ + "jquery", + "ui/resizable" +], function( $ ) { module( "resizable: methods" ); -test( "disable", function() { +test( "disable", function( assert ) { expect( 5 ); var element = $( "#resizable1" ).resizable({ disabled: false }), chainable = element.resizable( "disable" ); - ok( !element.resizable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" ); + assert.lacksClasses( element.resizable( "widget" ), "ui-state-disabled" ); ok( !element.resizable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - ok( element.resizable( "widget" ).hasClass( "ui-resizable-disabled" ), "element gets ui-resizable-disabled" ); + assert.hasClasses( element.resizable( "widget" ), "ui-resizable-disabled" ); equal( element.resizable( "option", "disabled" ), true, "disabled option setter" ); equal( chainable, element, "disable is chainable" ); }); -})(jQuery); +} ); diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/options.js index cacebf05c..7d9615b64 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/options.js @@ -1,7 +1,8 @@ -/* - * resizable_options.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/resizable" +], function( $, testHelper ) { module("resizable: options"); @@ -19,7 +20,7 @@ test( "alsoResize", function() { }), handle = ".ui-resizable-e"; - TestHelpers.resizable.drag( handle, 80 ); + testHelper.drag( handle, 80 ); equal( element.width(), 180, "resizable width" ); equal( other.width(), 130, "alsoResize width" ); }); @@ -29,11 +30,11 @@ test("aspectRatio: 'preserve' (e)", function() { var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, 80); + testHelper.drag(handle, 80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, -130); + testHelper.drag(handle, -130); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -43,11 +44,11 @@ test("aspectRatio: 'preserve' (w)", function() { var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, -80); + testHelper.drag(handle, -80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, 130); + testHelper.drag(handle, 130); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -57,11 +58,11 @@ test("aspectRatio: 'preserve' (n)", function() { var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, 0, -80); + testHelper.drag(handle, 0, -80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, 0, 80); + testHelper.drag(handle, 0, 80); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -71,11 +72,11 @@ test("aspectRatio: 'preserve' (s)", function() { var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, 0, 80); + testHelper.drag(handle, 0, 80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, 0, -80); + testHelper.drag(handle, 0, -80); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -85,11 +86,11 @@ test("aspectRatio: 'preserve' (se)", function() { var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, 80, 80); + testHelper.drag(handle, 80, 80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, -80, -80); + testHelper.drag(handle, -80, -80); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -99,11 +100,11 @@ test("aspectRatio: 'preserve' (sw)", function() { var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, -80, 80); + testHelper.drag(handle, -80, 80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, 80, -80); + testHelper.drag(handle, 80, -80); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -113,11 +114,11 @@ test("aspectRatio: 'preserve' (ne)", function() { var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); - TestHelpers.resizable.drag(handle, 80, -80); + testHelper.drag(handle, 80, -80); equal( target.width(), 130, "compare maxWidth"); equal( target.height(), 130, "compare maxHeight"); - TestHelpers.resizable.drag(handle, -80, 80); + testHelper.drag(handle, -80, 80); equal( target.width(), 70, "compare minWidth"); equal( target.height(), 70, "compare minHeight"); }); @@ -137,7 +138,7 @@ test( "aspectRatio: Resizing can move objects", function() { $( "#container" ).css({ width: 200, height: 300 }); $( "#resizable1" ).css({ width: 100, height: 100, left: 75, top: 200 }); - TestHelpers.resizable.drag( handleW, -20 ); + testHelper.drag( handleW, -20 ); equal( target.width(), 100, "compare width - no size change" ); equal( target.height(), 100, "compare height - no size change" ); equal( target.position().left, 75, "compare left - no movement" ); @@ -146,7 +147,7 @@ test( "aspectRatio: Resizing can move objects", function() { $( "#container" ).css({ width: 200, height: 300, position: "absolute", left: 100, top: 100 }); $( "#resizable1" ).css({ width: 100, height: 100, left: 0, top: 0 }); - TestHelpers.resizable.drag( handleNW, -20, -20 ); + testHelper.drag( handleNW, -20, -20 ); equal( target.width(), 100, "compare width - no size change" ); equal( target.height(), 100, "compare height - no size change" ); equal( target.position().left, 0, "compare left - no movement" ); @@ -160,11 +161,11 @@ test( "containment", function() { containment: "#container" }); - TestHelpers.resizable.drag( ".ui-resizable-se", 20, 30 ); + testHelper.drag( ".ui-resizable-se", 20, 30 ); equal( element.width(), 120, "unconstrained width within container" ); equal( element.height(), 130, "unconstrained height within container" ); - TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 ); + testHelper.drag( ".ui-resizable-se", 400, 400 ); equal( element.width(), 300, "constrained width at containment edge" ); equal( element.height(), 200, "constrained height at containment edge" ); }); @@ -179,10 +180,10 @@ test( "containment - not immediate parent", function() { handles: "all" }); - TestHelpers.resizable.drag( ".ui-resizable-e", 300, 0 ); + testHelper.drag( ".ui-resizable-e", 300, 0 ); equal( element.width(), 400, "Relative, contained within container width" ); - TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 ); + testHelper.drag( ".ui-resizable-s", 0, 300 ); equal( element.height(), 400, "Relative, contained within container height" ); $( "#child" ).css( { left: 50, top: 50 } ); @@ -194,10 +195,10 @@ test( "containment - not immediate parent", function() { handles: "all" }); - TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 ); + testHelper.drag( ".ui-resizable-e", 400, 0 ); equal( element.width(), 300, "Relative with Left, contained within container width" ); - TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 ); + testHelper.drag( ".ui-resizable-s", 0, 400 ); equal( element.height(), 300, "Relative with Top, contained within container height" ); }); @@ -211,10 +212,10 @@ test( "containment - immediate parent", function() { handles: "all" }); - TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 ); + testHelper.drag( ".ui-resizable-e", 400, 0 ); equal( element.width(), 300, "Relative, contained within container width" ); - TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 ); + testHelper.drag( ".ui-resizable-s", 0, 400 ); equal( element.height(), 300, "Relative, contained within container height" ); $( "#child" ).css( { left: 50, top: 50 } ); @@ -226,10 +227,10 @@ test( "containment - immediate parent", function() { handles: "all" }); - TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 ); + testHelper.drag( ".ui-resizable-e", 400, 0 ); equal( element.width(), 250, "Relative with Left, contained within container width" ); - TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 ); + testHelper.drag( ".ui-resizable-s", 0, 400 ); equal( element.height(), 250, "Relative with Top, contained within container height" ); }); @@ -238,11 +239,11 @@ test("grid", function() { var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: [ 0, 20 ] }); - TestHelpers.resizable.drag(handle, 3, 9); + testHelper.drag(handle, 3, 9); equal( target.width(), 103, "compare width"); equal( target.height(), 100, "compare height"); - TestHelpers.resizable.drag(handle, 15, 11); + testHelper.drag(handle, 15, 11); equal( target.width(), 118, "compare width"); equal( target.height(), 120, "compare height"); }); @@ -252,11 +253,11 @@ test("grid (min/max dimensions)", function() { var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 }); - TestHelpers.resizable.drag(handle, 50, 50); + testHelper.drag(handle, 50, 50); equal( target.width(), 120, "grid should respect maxWidth"); equal( target.height(), 120, "grid should respect maxHeight"); - TestHelpers.resizable.drag(handle, -100, -100); + testHelper.drag(handle, -100, -100); equal( target.width(), 80, "grid should respect minWidth"); equal( target.height(), 80, "grid should respect minHeight"); }); @@ -266,11 +267,11 @@ test("grid (wrapped)", function() { var handle = ".ui-resizable-se", target = $("#resizable2").resizable({ handles: "all", grid: [ 0, 20 ] }); - TestHelpers.resizable.drag(handle, 3, 9); + testHelper.drag(handle, 3, 9); equal( target.width(), 103, "compare width"); equal( target.height(), 100, "compare height"); - TestHelpers.resizable.drag(handle, 15, 11); + testHelper.drag(handle, 15, 11); equal( target.width(), 118, "compare width"); equal( target.height(), 120, "compare height"); }); @@ -285,13 +286,13 @@ test( "grid - Resizable: can be moved when grid option is set (#9611)", function grid: 50 }); - TestHelpers.resizable.drag( handle, 50, 50 ); + testHelper.drag( handle, 50, 50 ); equal( target.width(), 50, "compare width" ); equal( target.height(), 50, "compare height" ); oldPosition = target.position(); - TestHelpers.resizable.drag( handle, 50, 50 ); + testHelper.drag( handle, 50, 50 ); equal( target.width(), 50, "compare width" ); equal( target.height(), 50, "compare height" ); equal( target.position().top, oldPosition.top, "compare top" ); @@ -313,7 +314,7 @@ test( "grid - maintains grid with padding and border when approaching no dimensi grid: [ 50, 12 ] }); - TestHelpers.resizable.drag( handle, 50, 50 ); + testHelper.drag( handle, 50, 50 ); equal( target.outerWidth(), 50, "compare width" ); equal( target.outerHeight(), 52, "compare height" ); }); @@ -323,11 +324,11 @@ test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); - TestHelpers.resizable.drag(handle, -50, -50); + testHelper.drag(handle, -50, -50); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - TestHelpers.resizable.drag(handle, 70, 70); + testHelper.drag(handle, 70, 70); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); }); @@ -337,11 +338,11 @@ test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); - TestHelpers.resizable.drag(handle, 50, -50); + testHelper.drag(handle, 50, -50); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - TestHelpers.resizable.drag(handle, -70, 70); + testHelper.drag(handle, -70, 70); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); }); @@ -351,11 +352,11 @@ test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); - TestHelpers.resizable.drag(handle, -50, 50); + testHelper.drag(handle, -50, 50); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - TestHelpers.resizable.drag(handle, 70, -70); + testHelper.drag(handle, 70, -70); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); }); @@ -365,15 +366,44 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); - TestHelpers.resizable.drag(handle, 70, 70); + testHelper.drag(handle, 70, 70); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - TestHelpers.resizable.drag(handle, -70, -70); + testHelper.drag(handle, -70, -70); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); }); + +test( "custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () { + expect( 2 ); + + var handle = "#resizer1", + target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" ) }, containment: "parent" }); + + testHelper.drag( handle, 0, 70 ); + equal( target.height(), 170, "compare height" ); + + testHelper.drag( handle, 0, -70 ); + equal( target.height(), 100, "compare height" ); +}); + + +test( "custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function () { + expect( 2 ); + + var handle = "#resizer1", + target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" )[ 0 ] }, containment: "parent" }); + + testHelper.drag( handle, 0, 70 ); + equal( target.height(), 170, "compare height" ); + + testHelper.drag( handle, 0, -70 ); + equal( target.height(), 100, "compare height" ); +}); + + test("zIndex, applied to all handles", function() { expect(8); @@ -396,11 +426,41 @@ test( "alsoResize + containment", function() { containment: "#container" }); - TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 ); + testHelper.drag( ".ui-resizable-se", 400, 400 ); equal( element.width(), 300, "resizable constrained width at containment edge" ); equal( element.height(), 200, "resizable constrained height at containment edge" ); equal( other.width(), 250, "alsoResize constrained width at containment edge" ); equal( other.height(), 150, "alsoResize constrained height at containment edge" ); }); -})(jQuery); +test( "alsoResize + multiple selection", function() { + expect( 6 ); + var other1 = $( "<div>" ) + .addClass( "other" ) + .css({ + width: 50, + height: 50 + }) + .appendTo( "body" ), + other2 = $( "<div>" ) + .addClass( "other" ) + .css({ + width: 50, + height: 50 + }) + .appendTo( "body"), + element = $( "#resizable1" ).resizable({ + alsoResize: other1.add( other2 ), + containment: "#container" + }); + + testHelper.drag( ".ui-resizable-se", 400, 400 ); + equal( element.width(), 300, "resizable constrained width at containment edge" ); + equal( element.height(), 200, "resizable constrained height at containment edge" ); + equal( other1.width(), 250, "alsoResize o1 constrained width at containment edge" ); + equal( other1.height(), 150, "alsoResize o1 constrained height at containment edge" ); + equal( other2.width(), 250, "alsoResize o2 constrained width at containment edge" ); + equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" ); +}); + +} ); diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 5668c909a..e3550f31f 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -4,32 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Resizable Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "resizable" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/mouse.js", - "ui/resizable.js" - ] - }); - </script> - - <script src="resizable_common.js"></script> - <script src="resizable_core.js"></script> - <script src="resizable_events.js"></script> - <script src="resizable_methods.js"></script> - <script src="resizable_options.js"></script> - <script src="resizable_test_helpers.js"></script> - - <script src="../swarminject.js"></script> - + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core resizable"></script> + <script src="../../lib/bootstrap.js" data-widget="resizable"></script> <style> #container { width: 300px; @@ -69,6 +46,7 @@ <div id="container"> <div id="resizable1">I'm a resizable.</div> + <div id="resizer1" class="ui-resizable-handle ui-resizable-s"></div> </div> <div id="container2"> diff --git a/tests/unit/selectable/all.html b/tests/unit/selectable/all.html index bbaaac6f4..6f5cc5760 100644 --- a/tests/unit/selectable/all.html +++ b/tests/unit/selectable/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/selectable/selectable_common.js b/tests/unit/selectable/common.js index d00a47be5..9a14e6df5 100644 --- a/tests/unit/selectable/selectable_common.js +++ b/tests/unit/selectable/common.js @@ -1,8 +1,14 @@ -TestHelpers.commonWidgetTests("selectable", { +define( [ + "lib/common", + "ui/selectable" +], function( common ) { + +common.testWidget( "selectable", { defaults: { appendTo: "body", autoRefresh: true, - cancel: "input,textarea,button,select,option", + cancel: "input, textarea, button, select, option", + classes: {}, delay: 0, disabled: false, distance: 0, @@ -19,3 +25,5 @@ TestHelpers.commonWidgetTests("selectable", { unselecting: null } }); + +} ); diff --git a/tests/unit/selectable/selectable_core.js b/tests/unit/selectable/core.js index c3ace5370..c3ace5370 100644 --- a/tests/unit/selectable/selectable_core.js +++ b/tests/unit/selectable/core.js diff --git a/tests/unit/selectable/selectable_events.js b/tests/unit/selectable/events.js index 5df7f2f5b..6eb99f325 100644 --- a/tests/unit/selectable/selectable_events.js +++ b/tests/unit/selectable/events.js @@ -1,7 +1,8 @@ -/* - * selectable_events.js - */ -(function( $ ) { +define( [ + "jquery", + "lib/helper", + "ui/selectable" +], function( $, testHelpers ) { module("selectable: events"); @@ -40,7 +41,7 @@ test( "mousedown: initial position of helper", function() { var helperOffset, element = $( "#selectable1" ).selectable(), - contentToForceScroll = TestHelpers.forceScrollableWindow( "body" ); + contentToForceScroll = testHelpers.forceScrollableWindow( "body" ); $( window ).scrollTop( 100 ).scrollLeft( 100 ); @@ -59,4 +60,4 @@ test( "mousedown: initial position of helper", function() { $( window ).scrollTop( 0 ).scrollLeft( 0 ); }); -})( jQuery ); +} ); diff --git a/tests/unit/selectable/selectable_methods.js b/tests/unit/selectable/methods.js index 179d4ecd6..045809670 100644 --- a/tests/unit/selectable/selectable_methods.js +++ b/tests/unit/selectable/methods.js @@ -1,7 +1,7 @@ -/* - * selectable_methods.js - */ -(function($) { +define( [ + "jquery", + "ui/selectable" +], function( $ ) { module("selectable: methods"); @@ -71,7 +71,7 @@ test("enable", function() { equal(actual, expected, "enable is chainable"); }); -test( "disable", function() { +test( "disable", function( assert ) { expect( 6 ); var chainable, fired = false, @@ -98,13 +98,14 @@ test( "disable", function() { }); equal( fired, false, "start fired" ); - ok( !element.selectable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" ); + assert.lacksClasses( element.selectable( "widget" ), "ui-state-disabled" ); + ok( !element.selectable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - ok( element.selectable( "widget" ).hasClass( "ui-selectable-disabled" ), "element gets ui-selectable-disabled" ); + assert.hasClasses( element.selectable( "widget" ), "ui-selectable-disabled" ); element.selectable( "destroy" ); equal( chainable, element, "disable is chainable" ); }); -})(jQuery); +} ); diff --git a/tests/unit/selectable/selectable_options.js b/tests/unit/selectable/options.js index 292c0cf96..cdbfb4aab 100644 --- a/tests/unit/selectable/selectable_options.js +++ b/tests/unit/selectable/options.js @@ -1,7 +1,7 @@ -/* - * selectable_options.js - */ -(function($) { +define( [ + "jquery", + "ui/selectable" +], function( $ ) { module("selectable: options"); @@ -61,4 +61,4 @@ test("filter", function() { el.selectable("destroy"); }); -})(jQuery); +} ); diff --git a/tests/unit/selectable/selectable.html b/tests/unit/selectable/selectable.html index cc4edf909..9cee000c0 100644 --- a/tests/unit/selectable/selectable.html +++ b/tests/unit/selectable/selectable.html @@ -4,30 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Selectable Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "selectable" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/mouse.js", - "ui/selectable.js" - ] - }); - </script> - - <script src="selectable_common.js"></script> - <script src="selectable_core.js"></script> - <script src="selectable_events.js"></script> - <script src="selectable_methods.js"></script> - <script src="selectable_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core selectable"></script> + <script src="../../lib/bootstrap.js" data-widget="selectable"></script> </head> <body> diff --git a/tests/unit/selectmenu/all.html b/tests/unit/selectmenu/all.html index 9e4ffd77a..d4e339f96 100644 --- a/tests/unit/selectmenu/all.html +++ b/tests/unit/selectmenu/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/common.js index 10073fe97..b24b8dace 100644 --- a/tests/unit/selectmenu/selectmenu_common.js +++ b/tests/unit/selectmenu/common.js @@ -1,6 +1,15 @@ -TestHelpers.commonWidgetTests( "selectmenu", { +define( [ + "lib/common", + "ui/selectmenu" +], function( common ) { + +common.testWidget( "selectmenu", { defaults: { appendTo: null, + classes: { + "ui-selectmenu-button-open": "ui-corner-top", + "ui-selectmenu-button-closed": "ui-corner-all" + }, disabled: null, icons: { button: "ui-icon-triangle-1-s" @@ -10,7 +19,7 @@ TestHelpers.commonWidgetTests( "selectmenu", { at: "left bottom", collision: "none" }, - width: null, + width: false, // callbacks change: null, @@ -21,3 +30,5 @@ TestHelpers.commonWidgetTests( "selectmenu", { select: null } }); + +} ); diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/core.js index 0a2431861..e5807817e 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/core.js @@ -1,7 +1,25 @@ -(function( $ ) { +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { module( "selectmenu: core" ); +test( "markup structure", function( assert ) { + expect( 4 ); + + var element = $( "#files" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + menuWrap = menu.parent(); + + assert.hasClasses( button, + "ui-selectmenu-button ui-selectmenu-button-closed ui-widget" ); + assert.lacksClasses( button, "ui-selectmenu-button-open" ); + assert.hasClasses( menuWrap, "ui-selectmenu-menu" ); + assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" ); +}); + asyncTest( "accessibility", function() { var wrappers, button, menu, element = $( "#speed" ).attr( "title", "A demo title" ); @@ -279,7 +297,7 @@ $.each([ } }); - asyncTest( "empty option - " + settings.type, function() { + asyncTest( "empty option - " + settings.type, function( assert ) { expect( 7 ); var button, menu, wrappers, wrapper, @@ -301,10 +319,8 @@ $.each([ "correct amount of list elements" ); ok( wrapper.outerHeight() > 10, "empty item seems to have reasonable height" ); ok( wrapper.attr( "id" ), "empty item has id attribute" ); - ok( wrapper.parent().hasClass( "ui-menu-item" ), - "empty item has ui-menu-item class" ); - ok( !wrapper.hasClass( "ui-menu-divider" ), - "empty item does not have ui-menu-divider class" ); + assert.hasClasses( wrapper.parent(), "ui-menu-item" ); + assert.lacksClasses( wrapper, "ui-menu-divider" ); equal( wrapper.attr( "tabindex" ), -1, "empty item has tabindex" ); equal( wrapper.attr( "role" ), "option", "empty item has role option" ); @@ -313,4 +329,4 @@ $.each([ }); }); -})( jQuery ); +} ); diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/events.js index 3ab6e93bc..d5c463fa9 100644 --- a/tests/unit/selectmenu/selectmenu_events.js +++ b/tests/unit/selectmenu/events.js @@ -1,4 +1,7 @@ -(function ( $ ) { +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { module( "selectmenu: events", { setup: function() { @@ -130,4 +133,4 @@ asyncTest( "select", function() { }); }); -})( jQuery ); +} ); diff --git a/tests/unit/selectmenu/selectmenu_methods.js b/tests/unit/selectmenu/methods.js index 0ff0f95c2..8481e804e 100644 --- a/tests/unit/selectmenu/selectmenu_methods.js +++ b/tests/unit/selectmenu/methods.js @@ -1,10 +1,13 @@ -(function( $ ) { +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { module( "selectmenu: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#speed", function() { + assert.domEqual( "#speed", function() { $( "#speed" ).selectmenu().selectmenu( "destroy" ); }); }); @@ -114,7 +117,7 @@ test( "refresh - disabled select", function() { equal( menu.attr( "aria-disabled" ), "true", "menu ARIA" ); }); -test( "refresh - disabled option", function() { +test( "refresh - disabled option", function( assert ) { expect( 1 ); var disabledItem, @@ -125,10 +128,10 @@ test( "refresh - disabled option", function() { element.selectmenu( "refresh" ); disabledItem = menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).eq( 2 ); - ok( disabledItem.hasClass( "ui-state-disabled" ), "class" ); + assert.hasClasses( disabledItem, "ui-state-disabled" ); }); -test( "refresh - disabled optgroup", function() { +test( "refresh - disabled optgroup", function( assert ) { var i, item, element = $( "#files" ).selectmenu(), menu = element.selectmenu( "menuWidget" ).parent(), @@ -141,7 +144,8 @@ test( "refresh - disabled optgroup", function() { element.selectmenu( "refresh" ); item = menu.find( "li.ui-selectmenu-optgroup" ).first(); - ok( item.hasClass( "ui-state-disabled" ), "class" ); + + assert.hasClasses( item, "ui-state-disabled" ); equal( menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).filter( ".ui-state-disabled" ).length, @@ -150,7 +154,7 @@ test( "refresh - disabled optgroup", function() { ); for ( i = 0; i < originalDisabledOptions.length; i++ ) { item = item.next( "li" ); - ok( item.hasClass( "ui-state-disabled" ), "item #" + i + ": class" ); + assert.hasClasses( item, "ui-state-disabled" ); } }); @@ -168,7 +172,7 @@ test( "refresh - remove all options", function() { equal( menu.children().length, 0, "Empty menu" ); }); -test( "widget and menuWidget", function() { +test( "widget and menuWidget", function( assert ) { expect( 4 ); var element = $( "#speed" ).selectmenu(), @@ -176,10 +180,10 @@ test( "widget and menuWidget", function() { menu = element.selectmenu( "menuWidget" ); equal( button.length, 1, "button: one element" ); - ok( button.is( ".ui-selectmenu-button" ), "button: class" ); + assert.hasClasses( button, "ui-selectmenu-button" ); equal( menu.length, 1, "Menu Widget: one element" ); ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/options.js index 954d572b5..deb7a6d3a 100644 --- a/tests/unit/selectmenu/selectmenu_options.js +++ b/tests/unit/selectmenu/options.js @@ -1,4 +1,7 @@ -(function ( $ ) { +define( [ + "jquery", + "ui/selectmenu" +], function( $ ) { module( "selectmenu: options" ); @@ -67,25 +70,24 @@ test( "appendTo: ui-front", function() { $( "#selectmenu-wrap2" )[ 0 ], "empty jQuery object, inside .ui-front" ); }); -test( "CSS styles", function() { - expect( 2 ); +test( "CSS styles", function( assert ) { + expect( 5 ); var element = $( "#speed" ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ); element.selectmenu( "open" ); - ok( - button.hasClass( "ui-corner-top" ) && !button.hasClass( "ui-corner-all" ) && - button.find( "span.ui-icon" ).hasClass( "ui-icon-triangle-1-s" ), - "button styles dropdown" - ); - ok( menu.hasClass( "ui-corner-bottom" ) && !menu.hasClass( "ui-corner-all" ), - "menu styles dropdown" ); + + assert.hasClasses( button, "ui-corner-top" ); + assert.lacksClasses( button, "ui-corner-all" ); + assert.hasClasses( button.find( "span.ui-icon" ), "ui-icon-triangle-1-s" ); + assert.hasClasses( menu, "ui-corner-bottom" ); + assert.lacksClasses( button, "ui-corner-all" ); }); test( "width", function() { - expect( 5 ); + expect( 6 ); var button, element = $( "#speed" ); @@ -93,6 +95,9 @@ test( "width", function() { element.selectmenu(); button = element.selectmenu( "widget" ); + equal( button[ 0 ].style.width, "", "no inline style" ); + + element.selectmenu( "option", "width", null ); equal( button.outerWidth(), element.outerWidth(), "button width auto" ); element.outerWidth( 100 ); @@ -107,7 +112,7 @@ test( "width", function() { element .append( $( "<option>", { text: "Option with a little longer text" } ) ) - .selectmenu( "option", "width", "" ) + .selectmenu( "option", "width", null ) .selectmenu( "refresh" ); equal( button.outerWidth(), element.outerWidth(), "button width with long option" ); @@ -115,9 +120,9 @@ test( "width", function() { element .selectmenu( "destroy" ) .css( "width", "100%" ) - .selectmenu(); + .selectmenu({ width: null }); button = element.selectmenu( "widget" ); equal( button.outerWidth(), 300, "button width fills container" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html index 618eea3d0..16e0f15a7 100644 --- a/tests/unit/selectmenu/selectmenu.html +++ b/tests/unit/selectmenu/selectmenu.html @@ -4,31 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Selectmenu Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "menu" , "selectmenu" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/position.js", - "ui/menu.js", - "ui/selectmenu.js" - ] - }); - </script> - - <script src="selectmenu_common.js"></script> - <script src="selectmenu_core.js"></script> - <script src="selectmenu_events.js"></script> - <script src="selectmenu_methods.js"></script> - <script src="selectmenu_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core menu selectmenu"></script> + <script src="../../lib/bootstrap.js" data-widget="selectmenu"></script> </head> <body> diff --git a/tests/unit/slider/all.html b/tests/unit/slider/all.html index 244b4f4f9..17d375ab4 100644 --- a/tests/unit/slider/all.html +++ b/tests/unit/slider/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/slider/common.js b/tests/unit/slider/common.js new file mode 100644 index 000000000..77004d159 --- /dev/null +++ b/tests/unit/slider/common.js @@ -0,0 +1,35 @@ +define( [ + "lib/common", + "ui/slider" +], function( common ) { + +common.testWidget( "slider", { + defaults: { + animate: false, + cancel: "input, textarea, button, select, option", + classes: { + "ui-slider": "ui-corner-all", + "ui-slider-handle": "ui-corner-all", + "ui-slider-range": "ui-corner-all ui-widget-header" + }, + delay: 0, + disabled: false, + distance: 0, + max: 100, + min: 0, + orientation: "horizontal", + range: false, + step: 1, + value: 0, + values: null, + + // callbacks + create: null, + change: null, + slide: null, + start: null, + stop: null + } +}); + +} ); diff --git a/tests/unit/slider/slider_core.js b/tests/unit/slider/core.js index 3649bded0..797d5525c 100644 --- a/tests/unit/slider/slider_core.js +++ b/tests/unit/slider/core.js @@ -1,7 +1,7 @@ -(function( $ ) { -// -// Slider Test Helper Functions -// +define( [ + "jquery", + "ui/slider" +], function( $ ) { var element, options; @@ -12,6 +12,18 @@ function handle() { // Slider Tests module( "slider: core" ); +test( "markup structure", function( assert ) { + expect( 4 ); + var element = $( "<div>" ).slider({ range: true }), + handle = element.find( "span" ), + range = element.find( "div" ); + + assert.hasClasses( element, "ui-slider ui-slider-horizontal ui-widget ui-widget-content" ); + assert.hasClasses( range, "ui-slider-range ui-widget-header" ); + assert.hasClasses( handle[ 0 ], "ui-slider-handle" ); + assert.hasClasses( handle[ 1 ], "ui-slider-handle" ); +}); + test( "keydown HOME on handle sets value to min", function() { expect( 2 ); element = $( "<div></div>" ); @@ -294,4 +306,4 @@ test( "keydown LEFT on handle decreases value by step, not less than min", funct element.slider( "destroy" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/events.js index ec93a0565..db771ec27 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/events.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/slider" +], function( $ ) { module( "slider: events" ); @@ -99,7 +102,7 @@ test( "programmatic event triggers", function() { }); test( "mouse based interaction part two: when handles overlap", function() { - expect( 4 ); + expect( 6 ); var element = $( "#slider1" ) .slider({ @@ -147,6 +150,83 @@ test( "mouse based interaction part two: when handles overlap", function() { }); handles.eq( 0 ).simulate( "drag", { dx: 10 } ); + element = $( "#slider1" ) + .slider({ + range: true, + min: 0, + max: 100, + values: [ 0, 50 ] + }), + handles = element.find( ".ui-slider-handle" ); + + element.slider( "option", { values: [ 100, 100 ] } ); + handles.eq( 0 ).simulate( "drag", { dx: -10 } ); + equal( element.slider( "values" )[ 0 ], 99, "setting both values of range slider to the maximum doesn't lock slider" ); + + element.slider( "option", { values: [ 0, 0 ] } ); + handles.eq( 1 ).simulate( "drag", { dx: 10 } ); + equal( element.slider( "values" )[ 1 ], 1, "setting both values of range slider to the minimum doesn't lock slider" ); +}); + +test( "event data", function() { + expect( 6 ); + + var slideHandleIndex = 3, + values = [ 8, 9, 7, 4 ], + newValues = [ 8, 9, 7, 5 ], + element = $( "#slider1" ) + .slider({ + values: values, + start: function( event, ui ) { + deepEqual( ui, expectedUiHash, "passing ui to start event" ); + }, + slide: function( event, ui ) { + deepEqual( ui, expectedChangedUiHash, "passing ui to slide event" ); + }, + stop: function( event, ui ) { + deepEqual( ui, expectedChangedUiHash, "passing ui to stop event" ); + }, + change: function( event, ui ) { + deepEqual( ui, expectedChangedUiHash, "passing ui to change event" ); + } + }), + handles = element.find( ".ui-slider-handle" ), + expectedUiHash = { + handle: handles.eq( slideHandleIndex )[ 0 ], + handleIndex: slideHandleIndex, + values: values, + value: values[ slideHandleIndex ] + }, + expectedChangedUiHash = $.extend( {}, expectedUiHash, { + values: newValues, + value: newValues[ slideHandleIndex ] + }); + + handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } ); + + element.slider( "destroy" ); + element = $( "#slider1" ).slider({ + min: 0, + max: 100, + value: 1, + slide: function ( event, ui ) { + equal( ui.value, 0, "should pass 0 value if slider reaches it" ); + } + }); + handles = element.find( ".ui-slider-handle" ); + handles.eq( 0 ).simulate( "drag", { dx: -10 } ); + + element.slider( "destroy" ); + element = $( "#slider1" ).slider({ + min: 0, + max: 100, + values: [ 1, 2 ], + slide: function ( event, ui ) { + equal( ui.value, 0, "should pass 0 value if one of handles reaches it" ); + } + }); + handles = element.find( ".ui-slider-handle" ); + handles.eq( 0 ).simulate( "drag", { dx: -10 } ); }); -})( jQuery ); +} ); diff --git a/tests/unit/slider/slider_methods.js b/tests/unit/slider/methods.js index c5c7e1254..bddafefca 100644 --- a/tests/unit/slider/slider_methods.js +++ b/tests/unit/slider/methods.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/slider" +], function( $ ) { module( "slider: methods" ); @@ -23,46 +26,42 @@ test( "init", function() { ok( true, "arbitrary option setter after init" ); }); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#slider1", function() { + assert.domEqual( "#slider1", function() { $( "#slider1" ).slider().slider( "destroy" ); }); }); -test( "enable", function() { - expect( 5 ); +test( "enable", function( assert ) { + expect( 3 ); var element, expected = $( "<div></div>" ).slider(), actual = expected.slider( "enable" ); equal(actual, expected, "enable is chainable" ); element = $( "<div></div>" ).slider({ disabled: true }); - ok( element.hasClass( "ui-state-disabled" ), "slider has ui-state-disabled class before enable method call" ); - ok( element.hasClass( "ui-slider-disabled" ), "slider has ui-slider-disabled class before enable method call" ); + assert.hasClasses( element, "ui-state-disabled ui-slider-disabled" ); element.slider( "enable" ); - ok( !element.hasClass( "ui-state-disabled" ), "slider does not have ui-state-disabled class after enable method call" ); - ok( !element.hasClass( "ui-slider-disabled" ), "slider does not have ui-slider-disabled class after enable method call" ); + assert.lacksClasses( element, "ui-state-disabled ui-slider-disabled" ); }); -test( "disable", function() { - expect( 6 ); +test( "disable", function( assert ) { + expect( 4 ); var element, expected = $( "<div></div>" ).slider(), actual = expected.slider( "disable" ); equal(actual, expected, "disable is chainable" ); element = $( "<div></div>" ).slider({ disabled: false }); - ok( !element.hasClass( "ui-state-disabled" ), "slider does not have ui-state-disabled class before disabled method call" ); - ok( !element.hasClass( "ui-slider-disabled" ), "slider does not have ui-slider-disabled class before disable method call" ); + assert.lacksClasses( element, "ui-state-disabled ui-slider-disabled" ); element.slider( "disable" ); - ok( element.hasClass( "ui-state-disabled" ), "slider has ui-state-disabled class after disable method call" ); - ok( element.hasClass( "ui-slider-disabled" ), "slider has ui-slider-disabled class after disable method call" ); + assert.hasClasses( element, "ui-state-disabled ui-slider-disabled" ); ok( !element.attr( "aria-disabled" ), "slider does not have aria-disabled attr after disable method call" ); }); test( "value", function() { - expect( 17 ); + expect( 19 ); $( [ false, "min", "max" ] ).each(function() { var element = $( "<div></div>" ).slider({ range: this, @@ -88,10 +87,30 @@ test( "value", function() { equal( element.slider( "value" ), 1, "value method get respects max" ); equal( element.slider( "value", 2 ), element, "value method is chainable" ); equal( element.slider( "option", "value" ), 1, "value method set respects max" ); + + // set max value with step 0.01 + element.slider( "option", { + min: 2, + value: 2, + max: 2.4, + step: 0.01 + }); + element.slider( "option", "value", 2.4 ); + equal( element.slider( "value" ), 2.4, "value is set to max with 0.01 step" ); + + element = $( "<div></div>" ).slider({ + value: 100, + min: 10, + max: 500, + step: 50 + }); + + element.slider( "option", "value", 510 ); + equal( element.slider( "value" ), 460, "value is restricted to maximum valid step" ); }); //test( "values", function() { // ok(false, "missing test - untested code is broken code." ); //}); -})( jQuery ); +} ); diff --git a/tests/unit/slider/slider_options.js b/tests/unit/slider/options.js index 2badcc566..02d7f8891 100644 --- a/tests/unit/slider/slider_options.js +++ b/tests/unit/slider/options.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/slider" +], function( $ ) { var element, options; @@ -8,17 +11,17 @@ function handle() { module( "slider: options" ); -test( "disabled", function(){ +test( "disabled", function( assert ){ expect( 8 ); var count = 0; element = $( "#slider1" ).slider(); - element.bind( "slidestart", function() { + element.on( "slidestart", function() { count++; }); // enabled - ok( !element.hasClass( "ui-slider-disabled" ), "no disabled class" ); + assert.lacksClasses( element, "ui-slider-disabled" ); equal( element.slider( "option", "disabled" ), false , "is not disabled" ); handle().simulate( "drag", { dx: 10 } ); @@ -29,7 +32,7 @@ test( "disabled", function(){ // disabled element.slider( "option", "disabled", true ); - ok( element.hasClass( "ui-slider-disabled" ), "has disabled class" ); + assert.hasClasses( element, "ui-slider-disabled" ); equal( element.slider( "option", "disabled" ), true, "is disabled" ); handle().simulate( "drag", { dx: 10 } ); @@ -54,7 +57,7 @@ test( "max", function() { element.slider( options ); ok( element.slider( "option", "value" ) === options.value, "value option is not contained by max" ); ok( element.slider( "value" ) === options.max, "value method is contained by max" ); - + options = { max: 9, min: 1, @@ -65,7 +68,7 @@ test( "max", function() { element.slider( options ); ok( element.slider( "value" ) === 7, "value method is within max, edge Case" ); - + options.step = 2; element.slider( options ); @@ -105,8 +108,8 @@ test( "min", function() { }); -test( "orientation", function() { - expect( 8 ); +test( "orientation", function( assert ) { + expect( 14 ); element = $( "#slider1" ); options = { @@ -116,11 +119,12 @@ test( "orientation", function() { value: 1 }; - var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100; + var newValue, rangeSize, + percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100; element.slider( options ).slider( "option", "orientation", "horizontal" ); - ok( element.is( ".ui-slider-horizontal" ), "horizontal slider has class .ui-slider-horizontal" ); - ok( !element.is( ".ui-slider-vertical" ), "horizontal slider does not have class .ui-slider-vertical" ); + assert.hasClasses( element, "ui-slider-horizontal" ); + assert.lacksClasses( element, "ui-slider-vertical" ); equal( element.find( ".ui-slider-handle" )[ 0 ].style.bottom, "", "CSS bottom reset" ); equal( handle()[0].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" ); @@ -136,13 +140,49 @@ test( "orientation", function() { percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100; element.slider( options ).slider( "option", "orientation", "vertical" ); - ok( element.is( ".ui-slider-vertical" ), "vertical slider has class .ui-slider-vertical" ); - ok( !element.is( ".ui-slider-horizontal" ), "vertical slider does not have class .ui-slider-horizontal" ); + assert.hasClasses( element, "ui-slider-vertical" ); + assert.lacksClasses( element, "ui-slider-horizontal" ); equal( element.find( ".ui-slider-handle" )[ 0 ].style.left, "", "CSS left reset" ); equal( handle()[0].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" ); element.slider( "destroy" ); + newValue = 7; + rangeSize = 500 - (500 * newValue / 10); + element = $( "#slider2" ).slider({ + range: "max", + min: 0, + max: 10 + }); + + element.slider( "option", "value", newValue ); + element.slider( "option", "orientation", "vertical" ); + equal( element.find( ".ui-slider-range" ).width(), 12, + "range should occupy all horizontal space after changing orientation to vertical" ); + equal( element.find( ".ui-slider-range" ).height(), rangeSize, + "range height of vertical slider should be proportional to the value" ); + + element.slider( "option", "orientation", "horizontal" ); + equal( element.find( ".ui-slider-range " ).height(), 12, + "range should occupy all vertical space after changing orientation to horizontal" ); + equal( element.find( ".ui-slider-range" ).width(), rangeSize, + "range width of horizontal slider should be proportional to the value" ); + + element.slider( "destroy" ); + + element = $( "#slider2" ).slider({ + range: true, + min: 0, + max: 100 + }); + element.slider( "option", { values: [ 60, 70 ] } ); + notEqual( element.find( ".ui-slider-range " ).position().left, 0, + "range should not pull over to the track's border" ); + element.slider( "option", "orientation", "vertical" ); + equal( element.find( ".ui-slider-range " ).position().left, 0, + "range should pull over to the track's border" ); + + element.slider( "destroy" ); }); //spec: http://wiki.jqueryui.com/Slider#specs @@ -226,8 +266,8 @@ test( "values", function() { ); }); -test( "range", function() { - expect( 33 ); +test( "range", function( assert ) { + expect( 32 ); var range; // min @@ -264,8 +304,7 @@ test( "range", function() { range = element.find( ".ui-slider-range" ); equal( element.find( ".ui-slider-handle" ).length, 2, "range true, two handles" ); - ok( !range.is( ".ui-slider-range-min" ), "range true" ); - ok( !range.is( ".ui-slider-range-max" ), "range true" ); + assert.lacksClasses( range, "ui-slider-range-max ui-slider-range-min" ); element.slider( "destroy" ); // Change range from min to max @@ -344,4 +383,4 @@ test( "range", function() { element.slider( "destroy" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html index 0142b5e6b..39bcd05c3 100644 --- a/tests/unit/slider/slider.html +++ b/tests/unit/slider/slider.html @@ -4,30 +4,19 @@ <meta charset="utf-8"> <title>jQuery UI Slider Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "slider" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/mouse.js", - "ui/slider.js" - ] - }); - </script> - - <script src="slider_common.js"></script> - <script src="slider_core.js"></script> - <script src="slider_events.js"></script> - <script src="slider_methods.js"></script> - <script src="slider_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core slider"></script> + <script src="../../lib/bootstrap.js" data-widget="slider"></script> + <style> + #slider2.ui-slider-horizontal { + height: 12px; + width: 500px; + } + #slider2.ui-slider-vertical { + width: 12px; + height: 500px; + } + </style> </head> <body> @@ -35,6 +24,7 @@ <div id="qunit-fixture"> <div id="slider1"></div> +<div id="slider2"></div> <div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;"> <div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div> </div> diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js deleted file mode 100644 index 6d7278de6..000000000 --- a/tests/unit/slider/slider_common.js +++ /dev/null @@ -1,23 +0,0 @@ -TestHelpers.commonWidgetTests( "slider", { - defaults: { - animate: false, - cancel: "input,textarea,button,select,option", - delay: 0, - disabled: false, - distance: 0, - max: 100, - min: 0, - orientation: "horizontal", - range: false, - step: 1, - value: 0, - values: null, - - // callbacks - create: null, - change: null, - slide: null, - start: null, - stop: null - } -}); diff --git a/tests/unit/sortable/all.html b/tests/unit/sortable/all.html index cabaea469..cb08860bc 100644 --- a/tests/unit/sortable/all.html +++ b/tests/unit/sortable/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/sortable/sortable_common.js b/tests/unit/sortable/common.js index 86850a658..ab43251ab 100644 --- a/tests/unit/sortable/sortable_common.js +++ b/tests/unit/sortable/common.js @@ -1,8 +1,14 @@ -TestHelpers.commonWidgetTests( "sortable", { +define( [ + "lib/common", + "ui/sortable" +], function( common ) { + +common.testWidget( "sortable", { defaults: { appendTo: "parent", axis: false, - cancel: "input,textarea,button,select,option", + cancel: "input, textarea, button, select, option", + classes: {}, connectWith: false, containment: false, cursor: "auto", @@ -43,3 +49,5 @@ TestHelpers.commonWidgetTests( "sortable", { update: null } }); + +} ); diff --git a/tests/unit/sortable/core.js b/tests/unit/sortable/core.js new file mode 100644 index 000000000..7e973ec05 --- /dev/null +++ b/tests/unit/sortable/core.js @@ -0,0 +1,42 @@ +define( [ + "jquery", + "./helper", + "ui/sortable" +], function( $, testHelper ) { + +module( "sortable: core" ); + +test( "#9314: Sortable: Items cannot be dragged directly into bottom position", function() { + expect( 1 ); + + var el = $( ".connectWith" ).sortable({ + connectWith: ".connectWith" + }); + + testHelper.sort( $( "li", el[ 1 ] )[ 0 ], 0, -12, 5, "Dragging the sortable into connected sortable" ); +}); + +test( "ui-sortable-handle applied to appropriate element", function( assert ) { + expect( 8 ); + var item = "<li><p></p></li>", + el = $( "<ul>" + item + item + "</ul>" ) + .sortable() + .appendTo( "#qunit-fixture" ); + + assert.hasClasses( el.find( "li:first" ), "ui-sortable-handle" ); + assert.hasClasses( el.find( "li:last" ), "ui-sortable-handle" ); + + el.sortable( "option", "handle", "p" ); + assert.lacksClasses( el.find( "li" )[ 0 ], "ui-sortable-handle" ); + assert.lacksClasses( el.find( "li" )[ 1 ], "ui-sortable-handle" ); + assert.hasClasses( el.find( "p" )[ 0 ], "ui-sortable-handle" ); + assert.hasClasses( el.find( "p" )[ 1 ], "ui-sortable-handle" ); + + el.append( item ).sortable( "refresh" ); + assert.hasClasses( el.find( "p:last" ), "ui-sortable-handle" ); + + el.sortable( "destroy" ); + equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); +}); + +} ); diff --git a/tests/unit/sortable/sortable_events.js b/tests/unit/sortable/events.js index 46e86c906..267534b16 100644 --- a/tests/unit/sortable/sortable_events.js +++ b/tests/unit/sortable/events.js @@ -1,7 +1,9 @@ -/* - * sortable_events.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/sortable", + "ui/draggable" +], function( $, testHelper ) { module("sortable: events"); @@ -170,7 +172,7 @@ test("#3019: Stop fires too early", function() { } }); - TestHelpers.sortable.sort($("li", el)[0], 0, 44, 2, "Dragging the sortable"); + testHelper.sort($("li", el)[0], 0, 44, 2, "Dragging the sortable"); equal(helper, null, "helper should be false"); }); @@ -196,7 +198,7 @@ test("#4752: link event firing on sortable with connect list", function () { } }); - $("#qunit-fixture ul").bind("click.ui-sortable-test", function () { + $("#qunit-fixture ul").on("click.ui-sortable-test", function () { fired.click = true; }); @@ -373,4 +375,4 @@ test("deactivate", function() { }); */ -})(jQuery); +} ); diff --git a/tests/unit/sortable/sortable_test_helpers.js b/tests/unit/sortable/helper.js index 3cda43b8f..76545022e 100644 --- a/tests/unit/sortable/sortable_test_helpers.js +++ b/tests/unit/sortable/helper.js @@ -1,4 +1,9 @@ -TestHelpers.sortable = { +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { + +return $.extend( helper, { sort: function( handle, dx, dy, index, msg ) { $( handle ).simulate( "drag", { dx: dx, @@ -6,4 +11,6 @@ TestHelpers.sortable = { }); equal( $( handle ).parent().children().index( handle ), index, msg ); } -}; +} ); + +} ); diff --git a/tests/unit/sortable/sortable_methods.js b/tests/unit/sortable/methods.js index 9c0a86a35..d88b8089f 100644 --- a/tests/unit/sortable/sortable_methods.js +++ b/tests/unit/sortable/methods.js @@ -1,7 +1,8 @@ -/* - * sortable_methods.js - */ -(function($) { +define( [ + "jquery", + "./helper", + "ui/sortable" +], function( $, testHelper ) { module("sortable: methods"); @@ -47,7 +48,7 @@ test("enable", function() { el = $("#sortable").sortable({ disabled: true }); - TestHelpers.sortable.sort($("li", el)[0], 0, 44, 0, ".sortable({ disabled: true })"); + testHelper.sort($("li", el)[0], 0, 44, 0, ".sortable({ disabled: true })"); el.sortable("enable"); equal(el.sortable("option", "disabled"), false, "disabled option getter"); @@ -57,36 +58,36 @@ test("enable", function() { el.sortable("option", "disabled", false); equal(el.sortable("option", "disabled"), false, "disabled option setter"); - TestHelpers.sortable.sort($("li", el)[0], 0, 44, 2, ".sortable('option', 'disabled', false)"); + testHelper.sort($("li", el)[0], 0, 44, 2, ".sortable('option', 'disabled', false)"); expected = $("<div></div>").sortable(), actual = expected.sortable("enable"); equal(actual, expected, "enable is chainable"); }); -test( "disable", function() { +test( "disable", function( assert ) { expect( 9 ); var chainable, element = $( "#sortable" ).sortable({ disabled: false }); - TestHelpers.sortable.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" ); + testHelper.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" ); chainable = element.sortable( "disable" ); - TestHelpers.sortable.sort( $( "li", element )[ 0 ], 0, 44, 0, "disabled.sortable getter" ); + testHelper.sort( $( "li", element )[ 0 ], 0, 44, 0, "disabled.sortable getter" ); element.sortable( "destroy" ); element.sortable({ disabled: false }); - TestHelpers.sortable.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" ); + testHelper.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" ); element.sortable( "option", "disabled", true); equal( element.sortable( "option", "disabled" ), true, "disabled option setter" ); - ok( !element.sortable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" ); + assert.lacksClasses( element.sortable( "widget" ), "ui-state-disabled" ); ok( !element.sortable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); - ok( element.sortable( "widget" ).hasClass( "ui-sortable-disabled" ), "element gets ui-sortable-disabled" ); + assert.hasClasses( element.sortable( "widget" ), "ui-sortable-disabled" ); - TestHelpers.sortable.sort($( "li", element )[ 0 ], 0, 44, 0, ".sortable('option', 'disabled', true)" ); + testHelper.sort($( "li", element )[ 0 ], 0, 44, 0, ".sortable('option', 'disabled', true)" ); equal( chainable, element, "disable is chainable" ); }); @@ -125,4 +126,4 @@ test( "refresh() should update the positions of initially empty lists (see #7498 equal( changeCount, 1 ); }); -})(jQuery); +} ); diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/options.js index f2beb4dbc..930f339e6 100644 --- a/tests/unit/sortable/sortable_options.js +++ b/tests/unit/sortable/options.js @@ -1,7 +1,7 @@ -/* - * sortable_options.js - */ -(function($) { +define( [ + "jquery", + "ui/sortable" +], function( $ ) { module("sortable: options"); @@ -343,13 +343,13 @@ test( "{ placeholder: false } img", function() { }); }); -test( "{ placeholder: String }", function() { +test( "{ placeholder: String }", function( assert ) { expect( 1 ); var element = $( "#sortable" ).sortable({ placeholder: "test", start: function( event, ui ) { - ok( ui.placeholder.hasClass( "test" ), "placeholder has class" ); + assert.hasClasses( ui.placeholder, "test" ); } }); @@ -358,7 +358,7 @@ test( "{ placeholder: String }", function() { }); }); -test( "{ placholder: String } tr", function() { +test( "{ placholder: String } tr", function( assert ) { expect( 4 ); var originalWidths, @@ -368,7 +368,7 @@ test( "{ placholder: String } tr", function() { var currentWidths = otherRow.children().map(function() { return $( this ).width(); }).get(); - ok( ui.placeholder.hasClass( "test" ), "placeholder has class" ); + assert.hasClasses( ui.placeholder, "test" ); deepEqual( currentWidths, originalWidths, "table cells maintian size" ); equal( ui.placeholder.children().length, dragRow.children().length, "placeholder has correct number of cells" ); @@ -388,6 +388,42 @@ test( "{ placholder: String } tr", function() { }); }); +test( "{ placholder: String } tbody", function() { + expect( 6 ); + + var originalWidths, + element = $( "#sortable-table" ).sortable({ + placeholder: "test", + start: function( event, ui ) { + var currentWidths = otherBody.children().map(function() { + return $( this ).width(); + }).get(); + ok( ui.placeholder.hasClass( "test" ), "placeholder has class" ); + deepEqual( currentWidths, originalWidths, "table cells maintain size" ); + equal( ui.placeholder.children().length, 1, + "placeholder has one child" ); + equal( ui.placeholder.children( "tr" ).length, 1, + "placeholder's child is tr" ); + equal( ui.placeholder.find( "> tr" ).children().length, + dragBody.find( "> tr:first" ).children().length, + "placeholder's tr has correct number of cells" ); + equal( ui.placeholder.find( "> tr" ).children().html(), + $( "<span> </span>" ).html(), + "placeholder td has content for forced dimensions" ); + } + }), + bodies = element.children( "tbody" ), + dragBody = bodies.eq( 0 ), + otherBody = bodies.eq( 1 ); + + originalWidths = otherBody.children().map(function() { + return $( this ).width(); + }).get(); + dragBody.simulate( "drag", { + dy: 1 + }); +}); + /* test("{ revert: false }, default", function() { ok(false, "missing test - untested code is broken code."); @@ -457,4 +493,4 @@ test("{ zIndex: false }", function() { ok(false, "missing test - untested code is broken code."); }); */ -})(jQuery); +} ); diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html index 3edc999b7..8bfbd3370 100644 --- a/tests/unit/sortable/sortable.html +++ b/tests/unit/sortable/sortable.html @@ -4,32 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Sortable Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/mouse.js", - "ui/sortable.js", - "ui/draggable.js" - ] - }); - </script> - - <script src="sortable_common.js"></script> - <script src="sortable_core.js"></script> - <script src="sortable_events.js"></script> - <script src="sortable_methods.js"></script> - <script src="sortable_options.js"></script> - <script src="sortable_test_helpers.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core"></script> + <script src="../../lib/bootstrap.js" data-widget="sortable"></script> <style> #sortable, #sortable2 { position:relative; @@ -74,20 +51,56 @@ <table id="sortable-table"> <tbody> <tr> - <td>1</td> - <td>2</td> + <td>1.1</td> + <td>1.2</td> + </tr> + <tr> + <td>1.3</td> + <td>1.4</td> + </tr> + <tr> + <td>1.5</td> + <td>1.6</td> + </tr> + <tr> + <td>1.7</td> + <td>1.8</td> + </tr> + </tbody> + <tbody> + <tr> + <td>2.1</td> + <td>2.2</td> + </tr> + <tr> + <td>2.3</td> + <td>2.4</td> + </tr> + <tr> + <td>2.5</td> + <td>2.6</td> + </tr> + <tr> + <td>2.7</td> + <td>2.8</td> + </tr> + </tbody> + <tbody> + <tr> + <td>3.1</td> + <td>3.2</td> </tr> <tr> - <td>3</td> - <td>4</td> + <td>3.3</td> + <td>3.4</td> </tr> <tr> - <td>5</td> - <td>6</td> + <td>3.5</td> + <td>3.6</td> </tr> <tr> - <td>7</td> - <td>8</td> + <td>3.7</td> + <td>3.8</td> </tr> </tbody> </table> diff --git a/tests/unit/sortable/sortable_core.js b/tests/unit/sortable/sortable_core.js deleted file mode 100644 index 54069a9bf..000000000 --- a/tests/unit/sortable/sortable_core.js +++ /dev/null @@ -1,40 +0,0 @@ -/* - * sortable_core.js - */ - -(function( $ ) { - -module( "sortable: core" ); - -test( "#9314: Sortable: Items cannot be dragged directly into bottom position", function() { - expect( 1 ); - - var el = $( ".connectWith" ).sortable({ - connectWith: ".connectWith" - }); - - TestHelpers.sortable.sort( $( "li", el[ 1 ] )[ 0 ], 0, -12, 5, "Dragging the sortable into connected sortable" ); -}); - -test( "ui-sortable-handle applied to appropriate element", function() { - expect( 6 ); - var item = "<li><p></p></li>", - el = $( "<ul>" + item + item + "</ul>" ) - .sortable() - .appendTo( "#qunit-fixture" ); - - ok( el.find( "li:first" ).hasClass( "ui-sortable-handle" ), "defaults to item" ); - ok( el.find( "li:last" ).hasClass( "ui-sortable-handle" ), "both items received class name" ); - - el.sortable( "option", "handle", "p" ); - ok( !el.find( "li" ).hasClass( "ui-sortable-handle" ), "removed on change" ); - ok( el.find( "p" ).hasClass( "ui-sortable-handle" ), "applied to handle" ); - - el.append( item ).sortable( "refresh" ); - ok( el.find( "p:last" ).hasClass( "ui-sortable-handle" ), "class name applied on refresh" ); - - el.sortable( "destroy" ); - equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); -}); - -})( jQuery ); diff --git a/tests/unit/spinner/all.html b/tests/unit/spinner/all.html index 2778110f0..2c64e1dce 100644 --- a/tests/unit/spinner/all.html +++ b/tests/unit/spinner/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/spinner/spinner_common.js b/tests/unit/spinner/common-deprecated.js index b494e3ca3..2c40df76a 100644 --- a/tests/unit/spinner/spinner_common.js +++ b/tests/unit/spinner/common-deprecated.js @@ -1,5 +1,15 @@ -TestHelpers.commonWidgetTests( "spinner", { +define( [ + "lib/common", + "ui/spinner" +], function( common ) { + +common.testWidget( "spinner", { defaults: { + classes: { + "ui-spinner": "ui-corner-all", + "ui-spinner-up": "ui-corner-tr", + "ui-spinner-down": "ui-corner-br" + }, culture: null, disabled: false, icons: { @@ -21,3 +31,5 @@ TestHelpers.commonWidgetTests( "spinner", { stop: null } }); + +} ); diff --git a/tests/unit/spinner/common.js b/tests/unit/spinner/common.js new file mode 100644 index 000000000..2c40df76a --- /dev/null +++ b/tests/unit/spinner/common.js @@ -0,0 +1,35 @@ +define( [ + "lib/common", + "ui/spinner" +], function( common ) { + +common.testWidget( "spinner", { + defaults: { + classes: { + "ui-spinner": "ui-corner-all", + "ui-spinner-up": "ui-corner-tr", + "ui-spinner-down": "ui-corner-br" + }, + culture: null, + disabled: false, + icons: { + down: "ui-icon-triangle-1-s", + up: "ui-icon-triangle-1-n" + }, + incremental: true, + max: null, + min: null, + numberFormat: null, + page: 10, + step: 1, + + // callbacks + change: null, + create: null, + spin: null, + start: null, + stop: null + } +}); + +} ); diff --git a/tests/unit/spinner/spinner_core.js b/tests/unit/spinner/core.js index 03088fecd..2dc118666 100644 --- a/tests/unit/spinner/spinner_core.js +++ b/tests/unit/spinner/core.js @@ -1,9 +1,28 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/spinner" +], function( $, testHelper ) { -var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp; +var simulateKeyDownUp = testHelper.simulateKeyDownUp; module( "spinner: core" ); +test( "markup structure", function( assert ) { + expect( 6 ); + var element = $( "#spin" ).spinner(), + spinner = element.spinner( "widget" ), + up = spinner.find( ".ui-spinner-up" ), + down = spinner.find( ".ui-spinner-down" ); + + assert.hasClasses( element, "ui-spinner-input" ); + assert.hasClasses( spinner, "ui-spinner ui-widget ui-widget-content" ); + assert.hasClasses( up, "ui-spinner-button ui-spinner-up ui-widget" ); + equal( up.length, 1, "Spinner contains exactly one up button" ); + assert.hasClasses( down, "ui-spinner-button ui-spinner-down ui-widget" ); + equal( down.length, 1, "Spinner contains exactly one down button" ); +}); + test( "keydown UP on input, increases value not greater than max", function() { expect( 5 ); var element = $( "#spin" ).val( 70 ).spinner({ @@ -95,7 +114,7 @@ asyncTest( "blur input while spinning with UP", function() { value = element.val(); ok( value > 11, "repeating while key is down" ); - element.bind( "blur", function() { + element.on( "blur", function() { value = element.val(); setTimeout( step3, 750 ); })[ 0 ].blur(); @@ -206,16 +225,16 @@ test( "ARIA attributes", function() { test( "focus text field when pressing button", function() { expect( 2 ); var element = $( "#spin" ).spinner(); - $( "body" ).focus(); + $( "body" ).trigger( "focus" ); ok( element[ 0 ] !== document.activeElement, "not focused before" ); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown(); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ); ok( element[ 0 ] === document.activeElement, "focused after" ); }); test( "don't clear invalid value on blur", function() { expect( 1 ); var element = $( "#spin" ).spinner(); - element.focus().val( "a" ).blur(); + element.trigger( "focus" ).val( "a" ).trigger( "blur" ); equal( element.val(), "a" ); }); @@ -235,4 +254,4 @@ test( "precision", function() { equal( element.val(), "0.05", "precision from min" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/spinner/deprecated.html b/tests/unit/spinner/deprecated.html new file mode 100644 index 000000000..a6c249a17 --- /dev/null +++ b/tests/unit/spinner/deprecated.html @@ -0,0 +1,21 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Spinner Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button spinner"></script> + <script src="../../lib/bootstrap.js" data-widget="spinner" data-deprecated="true"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +<input id="spin" class="foo"> +<input id="spin2" value="2"> + +</div> +</body> +</html> diff --git a/tests/unit/spinner/deprecated.js b/tests/unit/spinner/deprecated.js new file mode 100644 index 000000000..c45a053fd --- /dev/null +++ b/tests/unit/spinner/deprecated.js @@ -0,0 +1,41 @@ +define( [ + "jquery", + "ui/spinner" +], function( $ ) { + +var originalSpinner = $.ui.spinner.prototype; +module( "spinner: deprecated", { + setup: function() { + $.widget( "ui.spinner", $.ui.spinner, { + _uiSpinnerHtml: function() { + return "<span class='spin-wrap'>"; + }, + + _buttonHtml: function() { + return "" + + "<a class='spin-up'>" + + "<span>▲</span>" + + "</a>" + + "<a>" + + "<span>▼</span>" + + "</a>"; + } + } ); + }, + + teardown: function() { + $.ui.spinner.prototype = originalSpinner; + } +} ); + +test( "markup structure - custom", function( assert ) { + expect( 2 ); + var element = $( "#spin" ).spinner(), + spinner = element.spinner( "widget" ), + up = spinner.find( ".ui-spinner-up" ); + + assert.hasClasses( spinner, "ui-spinner ui-widget ui-widget-content spin-wrap", "_uiSpinnerHtml() overides default markup" ); + assert.hasClasses( up, "ui-spinner-button ui-spinner-up ui-widget spin-up", "_ButtonHtml() overides default markup" ); +} ); + +} ); diff --git a/tests/unit/spinner/spinner_events.js b/tests/unit/spinner/events.js index 007d34cf7..14445f48e 100644 --- a/tests/unit/spinner/spinner_events.js +++ b/tests/unit/spinner/events.js @@ -1,6 +1,10 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/spinner" +], function( $, testHelper ) { -var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp; +var simulateKeyDownUp = testHelper.simulateKeyDownUp; module( "spinner: events" ); @@ -25,9 +29,9 @@ test( "start", function() { simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); shouldStart( true, "button up" ); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldStart( true, "button down" ); - element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldStart( true, "stepUp" ); element.spinner( "stepUp" ); @@ -64,9 +68,9 @@ test( "spin", function() { simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); shouldSpin( true, "button up" ); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldSpin( true, "button down" ); - element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldSpin( true, "stepUp" ); element.spinner( "stepUp" ); @@ -103,9 +107,9 @@ test( "stop", function() { simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); shouldStop( true, "button up" ); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldStop( true, "button down" ); - element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldStop( true, "stepUp" ); element.spinner( "stepUp" ); @@ -196,7 +200,7 @@ asyncTest( "change", function() { shouldChange( false, "blur after many keys, same final value" ); shouldChange( false, "button up, before blur" ); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldChange( true, "blur after button up" ); }, step7 ); } @@ -204,7 +208,7 @@ asyncTest( "change", function() { function step7() { focusWrap(function() { shouldChange( false, "button down, before blur" ); - element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldChange( true, "blur after button down" ); }, step8 ); } @@ -212,10 +216,10 @@ asyncTest( "change", function() { function step8() { focusWrap(function() { shouldChange( false, "many buttons, same final value, before blur" ); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup(); - element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup(); - element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup(); - element.spinner( "widget" ).find( ".ui-spinner-down" ).mousedown().mouseup(); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); + element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); + element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); + element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldChange( false, "blur after many buttons, same final value" ); }, step9 ); } @@ -256,4 +260,4 @@ asyncTest( "change", function() { setTimeout( step1 ); }); -})( jQuery ); +} ); diff --git a/tests/unit/spinner/spinner_test_helpers.js b/tests/unit/spinner/helper.js index 9b11cf632..ab99dcd8e 100644 --- a/tests/unit/spinner/spinner_test_helpers.js +++ b/tests/unit/spinner/helper.js @@ -1,7 +1,14 @@ -TestHelpers.spinner = { +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { + +return $.extend( helper, { simulateKeyDownUp: function( element, keyCode, shift ) { element .simulate( "keydown", { keyCode: keyCode, shiftKey: shift || false } ) .simulate( "keyup", { keyCode: keyCode, shiftKey: shift || false } ); } -}; +} ); + +} ); diff --git a/tests/unit/spinner/spinner_methods.js b/tests/unit/spinner/methods.js index cc4bc5a16..d6bf325f2 100644 --- a/tests/unit/spinner/spinner_methods.js +++ b/tests/unit/spinner/methods.js @@ -1,27 +1,30 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/spinner" +], function( $, testHelper ) { -var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp; +var simulateKeyDownUp = testHelper.simulateKeyDownUp; module( "spinner: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 1 ); - domEqual( "#spin", function() { + assert.domEqual( "#spin", function() { $( "#spin" ).spinner().spinner( "destroy" ); }); }); -test( "disable", function() { - expect( 16 ); +test( "disable", function( assert ) { + expect( 15 ); var element = $( "#spin" ).val( 2 ).spinner(), wrapper = $( "#spin" ).spinner( "widget" ); - ok( !wrapper.hasClass( "ui-spinner-disabled" ), "before: wrapper does not have ui-spinner-disabled class" ); + assert.lacksClasses( wrapper, "ui-spinner-disabled" ); ok( !element.is( ":disabled" ), "before: input does not have disabled attribute" ); element.spinner( "disable" ); - ok( wrapper.hasClass( "ui-spinner-disabled" ), "after: wrapper has ui-spinner-disabled class" ); - ok( wrapper.hasClass( "ui-state-disabled" ), "after: wrapper has ui-state-disabled class" ); + assert.hasClasses( wrapper, "ui-state-disabled ui-spinner-disabled" ); ok( !wrapper.attr( "aria-disabled" ), "after: wrapper does not have aria-disabled attr" ); ok( element.is( ":disabled"), "after: input has disabled attribute" ); @@ -56,17 +59,17 @@ test( "disable", function() { equal( 7, element.val(), "script - pageDown 1 page changes value" ); }); -test( "enable", function() { +test( "enable", function( assert ) { expect( 5 ); var element = $( "#spin" ).val( 1 ).spinner({ disabled: true }), wrapper = element.spinner( "widget" ); - ok( wrapper.hasClass( "ui-spinner-disabled" ), "before: wrapper has ui-spinner-disabled class" ); + assert.hasClasses( wrapper, "ui-spinner-disabled" ); ok( element.is( ":disabled" ), "before: input has disabled attribute" ); element.spinner( "enable" ); - ok( !wrapper.hasClass( ".ui-spinner-disabled" ), "after: wrapper does not have ui-spinner-disabled class" ); + assert.lacksClasses( wrapper, "ui-spinner-disabled" ); ok( !element.is( ":disabled" ), "after: input does not have disabled attribute" ); simulateKeyDownUp( element, $.ui.keyCode.UP ); @@ -205,4 +208,4 @@ test( "widget", function() { strictEqual( widgetElement[ 0 ], element.parent()[ 0 ], "parent element" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/spinner/spinner_options.js b/tests/unit/spinner/options.js index 65bbd2602..424932da4 100644 --- a/tests/unit/spinner/spinner_options.js +++ b/tests/unit/spinner/options.js @@ -1,24 +1,33 @@ -(function( $ ) { +define( [ + "jquery", + "ui/spinner", + "globalize-old", + "globalize-old/ja-JP" +], function( $ ) { module( "spinner: options" ); // culture is tested after numberFormat, since it depends on numberFormat -test( "icons: default ", function() { +test( "icons: default ", function( assert ) { expect( 4 ); var element = $( "#spin" ).val( 0 ).spinner(); - equal( element.spinner( "widget" ).find( ".ui-icon:first" ).attr( "class" ), "ui-icon ui-icon-triangle-1-n" ); - equal( element.spinner( "widget" ).find( ".ui-icon:last" ).attr( "class" ), "ui-icon ui-icon-triangle-1-s" ); + assert.hasClasses( element.spinner( "widget" ).find( ".ui-icon:first" ), + "ui-icon ui-icon-triangle-1-n" ); + assert.hasClasses( element.spinner( "widget" ).find( ".ui-icon:last" ), + "ui-icon ui-icon-triangle-1-s" ); element.spinner( "option", "icons", { up: "ui-icon-caret-1-n", down: "ui-icon-caret-1-s" }); - equal( element.spinner( "widget" ).find( ".ui-icon:first" ).attr( "class" ), "ui-icon ui-icon-caret-1-n" ); - equal( element.spinner( "widget" ).find( ".ui-icon:last" ).attr( "class" ), "ui-icon ui-icon-caret-1-s" ); + assert.hasClasses( element.spinner( "widget" ).find( ".ui-icon:first" ), + "ui-icon ui-icon-caret-1-n" ); + assert.hasClasses( element.spinner( "widget" ).find( ".ui-icon:last" ), + "ui-icon ui-icon-caret-1-s" ); }); -test( "icons: custom ", function() { +test( "icons: custom ", function( assert ) { expect( 2 ); var element = $( "#spin" ).val( 0 ).spinner({ icons: { @@ -26,8 +35,8 @@ test( "icons: custom ", function() { up: "custom-up" } }).spinner( "widget" ); - equal( element.find( ".ui-icon:first" ).attr( "class" ), "ui-icon custom-up" ); - equal( element.find( ".ui-icon:last" ).attr( "class" ), "ui-icon custom-down" ); + assert.hasClasses( element.find( ".ui-icon:first" ), "ui-icon custom-up" ); + assert.hasClasses( element.find( ".ui-icon:last" ), "ui-icon custom-down" ); }); test( "incremental, false", function() { @@ -172,7 +181,7 @@ test( "max", function() { element.spinner( "value", 1000 ); equal( element.val(), 100, "max constrained in value method" ); - element.val( 1000 ).blur(); + element.val( 1000 ).trigger( "blur" ); equal( element.val(), 1000, "max not constrained if manual entry" ); }); @@ -200,7 +209,7 @@ test( "min", function() { element.spinner( "value", -1000 ); equal( element.val(), -100, "min constrained in value method" ); - element.val( -1000 ).blur(); + element.val( -1000 ).trigger( "blur" ); equal( element.val(), -1000, "min not constrained if manual entry" ); }); @@ -259,4 +268,4 @@ test( "step, string", function() { equal( element.val(), "$0.70", "stepUp" ); }); -})( jQuery ); +} ); diff --git a/tests/unit/spinner/spinner.html b/tests/unit/spinner/spinner.html index 58988d742..ff38f16a8 100644 --- a/tests/unit/spinner/spinner.html +++ b/tests/unit/spinner/spinner.html @@ -4,33 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Spinner Test Suite</title> - <script src="../../jquery.js"></script> - <script src="../../../external/globalize/globalize.js"></script> - <script src="../../../external/globalize/globalize.culture.ja-JP.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "button", "spinner" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/button.js", - "ui/spinner.js" - ] - }); - </script> - - <script src="spinner_test_helpers.js"></script> - <script src="spinner_common.js"></script> - <script src="spinner_core.js"></script> - <script src="spinner_events.js"></script> - <script src="spinner_methods.js"></script> - <script src="spinner_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core button spinner"></script> + <script src="../../lib/bootstrap.js" data-widget="spinner"></script> </head> <body> diff --git a/tests/unit/subsuite.js b/tests/unit/subsuite.js index ba20a0706..a591ae711 100644 --- a/tests/unit/subsuite.js +++ b/tests/unit/subsuite.js @@ -5,7 +5,8 @@ var versions = [ "1.8.0", "1.8.1", "1.8.2", "1.8.3", "1.9.0", "1.9.1", "1.10.0", "1.10.1", "1.10.2", - "git" + "1.11.0", "1.11.1", "1.11.2", "1.11.3", + "compat-git" ], additionalTests = { // component: [ "other_test.html" ] diff --git a/tests/unit/swarminject.js b/tests/unit/swarminject.js deleted file mode 100644 index ebd3ccfac..000000000 --- a/tests/unit/swarminject.js +++ /dev/null @@ -1,10 +0,0 @@ -// load testswarm agent -(function() { - var url = window.location.search; - url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); - if ( !url || url.indexOf("http") !== 0 ) { - return; - } - document.write( "<scr" + "ipt src='http://swarm.jquery.org/js/inject.js?" + - (new Date()).getTime() + "'></scr" + "ipt>" ); -})(); diff --git a/tests/unit/tabs/all.html b/tests/unit/tabs/all.html index 8101bf34f..25f7bf3fd 100644 --- a/tests/unit/tabs/all.html +++ b/tests/unit/tabs/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/common.js index a589515f8..d3aa5cd48 100644 --- a/tests/unit/tabs/tabs_common.js +++ b/tests/unit/tabs/common.js @@ -1,6 +1,17 @@ -TestHelpers.commonWidgetTests( "tabs", { +define( [ + "lib/common", + "ui/tabs" +], function( common ) { + +common.testWidget( "tabs", { defaults: { active: null, + classes: { + "ui-tabs": "ui-corner-all", + "ui-tabs-nav": "ui-corner-all", + "ui-tab": "ui-corner-top", + "ui-tabs-panel": "ui-corner-bottom" + }, collapsible: false, disabled: false, event: "click", @@ -16,3 +27,5 @@ TestHelpers.commonWidgetTests( "tabs", { load: null } }); + +} ); diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/core.js index 2d18a6f1a..0d9a7306b 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/core.js @@ -1,16 +1,45 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/tabs" +], function( $, testHelper ) { -var state = TestHelpers.tabs.state; +var state = testHelper.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, - ".ui-tabs-panel elements exist, correct number" ); +test( "markup structure", function( assert ) { + expect( 20 ); + var element = $( "#tabs1" ).tabs(), + tabList = element.find( "ul, ol" ), + tabs = tabList.find( "li" ), + active = tabs.eq( 0 ), + anchors = tabs.find( "a" ), + panels = element.find( ".ui-tabs-panel" ); + + assert.hasClasses( element, "ui-tabs ui-widget ui-widget-content" ); + assert.lacksClasses( element, "ui-tabs-collapsible" ); + assert.hasClasses( tabList, "ui-tabs-nav ui-widget-header" ); + equal( tabList.length, 1, "The widget contains exactly one tab list" ); + assert.hasClasses( tabs[ 0 ], "ui-tabs-tab" ); + assert.hasClasses( tabs[ 1 ], "ui-tabs-tab" ); + assert.hasClasses( tabs[ 2 ], "ui-tabs-tab" ); + + // DEPRECATED + assert.hasClasses( tabs[ 0 ], "ui-tab" ); + assert.hasClasses( tabs[ 1 ], "ui-tab" ); + assert.hasClasses( tabs[ 2 ], "ui-tab" ); + + equal( tabs.length, 3, "There are exactly three tabs" ); + assert.hasClasses( anchors[ 0 ], "ui-tabs-anchor" ); + assert.hasClasses( anchors[ 1 ], "ui-tabs-anchor" ); + assert.hasClasses( anchors[ 2 ], "ui-tabs-anchor" ); + equal( anchors.length, 3, "There are exactly 3 anchors" ); + assert.hasClasses( active, "ui-tabs-active" ); + assert.hasClasses( panels[ 0 ], "ui-tabs-panel ui-widget-content" ); + assert.hasClasses( panels[ 1 ], "ui-tabs-panel ui-widget-content" ); + assert.hasClasses( panels[ 2 ], "ui-tabs-panel ui-widget-content" ); + equal( panels.length, 3, "There are exactly 3 tab panels" ); }); $.each({ @@ -19,12 +48,11 @@ $.each({ "multiple lists, ol first": "#tabs5", "empty list": "#tabs6" }, function( type, selector ) { - test( "markup structure: " + type, function() { + test( "markup structure: " + type, function( assert ) { 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" ); + assert.hasClasses( element, "ui-tabs" ); + assert.hasClasses( $( selector + "-list" ), "ui-tabs-nav" ); }); }); @@ -129,24 +157,27 @@ test( "accessibility", function() { equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" ); }); -asyncTest( "accessibility - ajax", function() { - expect( 4 ); +asyncTest( "accessibility - ajax", function( assert ) { + 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 ); + assert.hasClasses( tab, "ui-tabs-loading" ); equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" ); element.one( "tabsload", function() { setTimeout(function() { equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" ); + assert.lacksClasses( tab, "ui-tabs-loading" ); start(); }, 1 ); }); }); -asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function() { +asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function( assert ) { expect( 92 ); var element = $( "#tabs1" ).tabs({ collapsible: true @@ -155,20 +186,20 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", panels = element.find( ".ui-tabs-panel" ), keyCode = $.ui.keyCode; - element.tabs( "instance" ).delay = 50; + element.tabs( "instance" ).delay = 1; equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" ); tabs.eq( 0 ).simulate( "focus" ); // down, right, down (wrap), up (wrap) function step1() { - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "first tab has focus" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" ); tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); - ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" ); - ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" ); + assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "DOWN moves focus to next tab" ); + assert.lacksClasses( tabs.eq( 0 ), "ui-state-focus", "first tab is no longer focused" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" ); @@ -179,7 +210,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" ); @@ -190,7 +221,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first tab" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" ); @@ -198,7 +229,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "UP wraps focus to last tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" ); ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" ); @@ -208,7 +239,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step2, 100 ); + setTimeout( step2, 25 ); } // left, home, space @@ -223,7 +254,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } ); - ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" ); + assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "LEFT moves focus to previous tab" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" ); @@ -234,7 +265,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" ); tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } ); - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "HOME moves focus to first tab" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); ok( panels.eq( 0 ).is( ":hidden" ), "first panel is still hidden" ); @@ -246,7 +277,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", // SPACE activates, cancels delay tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.SPACE } ); - setTimeout( step3, 1 ); + setTimeout( step3 ); } // end, enter @@ -261,7 +292,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "END moves focus to last tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" ); ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" ); @@ -273,7 +304,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", // ENTER activates, cancels delay tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.ENTER } ); - setTimeout( step4, 1 ); + setTimeout( step4 ); } // enter (collapse) @@ -293,10 +324,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", equal( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); - setTimeout( start, 1 ); + setTimeout( start ); } - setTimeout( step1, 1 ); + setTimeout( step1 ); }); // Navigation with CTRL and COMMAND (both behave the same) @@ -304,14 +335,14 @@ $.each({ ctrl: "CTRL", meta: "COMMAND" }, function( modifier, label ) { - asyncTest( "keyboard support - " + label + " navigation", function() { + asyncTest( "keyboard support - " + label + " navigation", function( assert ) { expect( 115 ); var element = $( "#tabs1" ).tabs(), tabs = element.find( ".ui-tabs-nav li" ), panels = element.find( ".ui-tabs-panel" ), keyCode = $.ui.keyCode; - element.tabs( "instance" ).delay = 50; + element.tabs( "instance" ).delay = 1; equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" ); tabs.eq( 0 ).simulate( "focus" ); @@ -321,13 +352,13 @@ $.each({ var eventProperties = { keyCode: keyCode.DOWN }; eventProperties[ modifier + "Key" ] = true; - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "first tab has focus" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" ); tabs.eq( 0 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" ); - ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" ); + assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "DOWN moves focus to next tab" ); + assert.lacksClasses( tabs.eq( 0 ), ".ui-state-focus", "first tab is no longer focused" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" ); @@ -337,7 +368,7 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step2, 100 ); + setTimeout( step2, 25 ); } // right @@ -354,7 +385,7 @@ $.each({ equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" ); tabs.eq( 1 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" ); @@ -364,7 +395,7 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step3, 100 ); + setTimeout( step3, 25 ); } // down (wrap) @@ -381,13 +412,13 @@ $.each({ equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first tab" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" ); equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step4, 100 ); + setTimeout( step4, 25 ); } // up (wrap) @@ -401,7 +432,7 @@ $.each({ equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); tabs.eq( 0 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "UP wraps focus to last tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" ); @@ -411,7 +442,7 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step5, 100 ); + setTimeout( step5, 25 ); } // left @@ -428,7 +459,7 @@ $.each({ equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" ); + assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "LEFT moves focus to previous tab" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" ); @@ -438,7 +469,7 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step6, 100 ); + setTimeout( step6, 25 ); } // home @@ -455,7 +486,7 @@ $.each({ equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" ); tabs.eq( 1 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "HOME moves focus to first tab" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" ); @@ -465,7 +496,7 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step7, 100 ); + setTimeout( step7, 25 ); } // end @@ -479,7 +510,7 @@ $.each({ equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); tabs.eq( 0 ).simulate( "keydown", eventProperties ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "END moves focus to last tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" ); @@ -489,7 +520,7 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); - setTimeout( step8, 100 ); + setTimeout( step8, 25 ); } // space @@ -512,14 +543,14 @@ $.each({ equal( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab has aria-expanded=false" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" ); - setTimeout( start, 1 ); + setTimeout( start ); } - setTimeout( step1, 1 ); + setTimeout( step1 ); }); }); -asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() { +asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function( assert ) { expect( 50 ); var element = $( "#tabs1" ).tabs(), tabs = element.find( ".ui-tabs-nav li" ), @@ -535,7 +566,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } ); strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" ); - ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" ); + assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "ALT+PAGE_DOWN moves focus to next tab" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" ); equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "second tab has aria-expanded=true" ); @@ -546,7 +577,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } ); strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "ALT+PAGE_DOWN moves focus to next tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" ); ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" ); equal( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab has aria-expanded=true" ); @@ -557,7 +588,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } ); strictEqual( document.activeElement, tabs[ 0 ], "first tab is activeElement" ); - ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN wraps focus to first tab" ); + assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "ALT+PAGE_DOWN wraps focus to first tab" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" ); equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); @@ -567,7 +598,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); panels.eq( 0 ).simulate( "focus" ); - setTimeout( step2, 1 ); + setTimeout( step2 ); } function step2() { @@ -575,7 +606,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } ); strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" ); - ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_UP wraps focus to last tab" ); + assert.hasClasses( tabs.eq( 2 ), "ui-state-focus", "ALT+PAGE_UP wraps focus to last tab" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" ); ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" ); equal( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab has aria-expanded=true" ); @@ -586,7 +617,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } ); strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" ); - ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_UP moves focus to previous tab" ); + assert.hasClasses( tabs.eq( 1 ), "ui-state-focus", "ALT+PAGE_UP moves focus to previous tab" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" ); equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "second tab has aria-expanded=true" ); @@ -596,7 +627,7 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); panels.eq( 1 ).simulate( "focus" ); - setTimeout( step3, 1 ); + setTimeout( step3 ); } function step3() { @@ -605,10 +636,10 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() panels.eq( 1 ).simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } ); strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" ); - setTimeout( start, 1 ); + setTimeout( start ); } - setTimeout( step1, 1 ); + setTimeout( step1 ); }); test( "#3627 - Ajax tab with url containing a fragment identifier fails to load", function() { @@ -639,4 +670,4 @@ test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", funct state( element, 1 ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/events.js index f9b1755f7..d54d47926 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/events.js @@ -1,6 +1,10 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/tabs" +], function( $, testHelper ) { -var state = TestHelpers.tabs.state; +var state = testHelper.state; module( "tabs: events" ); @@ -81,7 +85,7 @@ test( "beforeActivate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 1, 0, 0 ); }); - anchors.eq( 1 ).click(); + anchors.eq( 1 ).trigger( "click" ); state( element, 0, 1, 0 ); // collapsing @@ -152,7 +156,7 @@ test( "activate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 0, 1, 0 ); }); - anchors.eq( 1 ).click(); + anchors.eq( 1 ).trigger( "click" ); state( element, 0, 1, 0 ); // collapsing @@ -247,7 +251,7 @@ test( "beforeLoad", function() { event.preventDefault(); state( element, 0, 0, 1, 0, 0 ); }); - element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).trigger( "click" ); state( element, 0, 0, 0, 1, 0 ); // .toLowerCase() is needed to convert <P> to <p> in old IEs equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" ); @@ -311,8 +315,8 @@ asyncTest( "load", function() { state( element, 0, 0, 0, 0, 1 ); start(); }); - element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).trigger( "click" ); } }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tabs/tabs_test_helpers.js b/tests/unit/tabs/helper.js index 1be90f8fe..5c9625f8c 100644 --- a/tests/unit/tabs/tabs_test_helpers.js +++ b/tests/unit/tabs/helper.js @@ -1,4 +1,10 @@ -TestHelpers.tabs = { +define( [ + "jquery", + "lib/helper", + "ui/tabs" +], function( $, helper ) { + +return $.extend( helper, { disabled: function( tabs, state ) { var expected, actual, internalState = tabs.tabs( "option", "disabled" ); @@ -63,4 +69,6 @@ TestHelpers.tabs = { }).get(); deepEqual( actual, expected ); } -}; +} ); + +} ); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/methods.js index a3d663f27..5975e5889 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/methods.js @@ -1,20 +1,40 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/tabs" +], function( $, testHelper ) { -var disabled = TestHelpers.tabs.disabled, - state = TestHelpers.tabs.state; +var disabled = testHelper.disabled, + state = testHelper.state; module( "tabs: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 2 ); - domEqual( "#tabs1", function() { + assert.domEqual( "#tabs1", function() { $( "#tabs1" ).tabs().tabs( "destroy" ); }); - domEqual( "#tabs2", function() { + assert.domEqual( "#tabs2", function() { $( "#tabs2" ).tabs().tabs( "destroy" ); }); }); +asyncTest( "destroy - ajax", function( assert ) { + expect( 1 ); + assert.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 ); @@ -206,7 +226,7 @@ asyncTest( "load", function() { strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); equal( uiPanel.find( "p" ).length, 1, "panel html" ); state( element, 1, 0, 0, 0, 0 ); - setTimeout( tabsload1, 100 ); + setTimeout( tabsload1 ); }); element.tabs( "load", 3 ); state( element, 1, 0, 0, 0, 0 ); @@ -218,7 +238,7 @@ asyncTest( "load", function() { }); element.one( "tabsload", function() { ok( true, "tabsload invoked" ); - setTimeout( tabsload2, 100 ); + setTimeout( tabsload2 ); }); element.tabs( "option", "active", 3 ); state( element, 0, 0, 0, 1, 0 ); @@ -267,4 +287,4 @@ test( "widget", function() { strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/options.js index 7f5352bac..dc1a03505 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/options.js @@ -1,8 +1,12 @@ -(function( $ ) { +define( [ + "jquery", + "./helper", + "ui/tabs" +], function( $, testHelper ) { -var disabled = TestHelpers.tabs.disabled, - equalHeight = TestHelpers.tabs.equalHeight, - state = TestHelpers.tabs.state; +var disabled = testHelper.disabled, + equalHeight = testHelper.equalHeight, + state = testHelper.state; module( "tabs: options" ); @@ -64,7 +68,7 @@ test( "{ active: Number }", function() { equal( element.tabs( "option", "active" ), 0 ); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "click" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -107,43 +111,48 @@ test( "active - mismatched tab/panel order", function() { location.hash = "#"; }); -test( "{ collapsible: false }", function() { - expect( 4 ); +test( "collapsible", function( assert ) { + expect( 13 ); var element = $( "#tabs1" ).tabs({ - active: 1 + active: 1, + collapsible: true }); + assert.hasClasses( element, "ui-tabs-collapsible" ); element.tabs( "option", "active", false ); - equal( element.tabs( "option", "active" ), 1 ); - state( element, 0, 1, 0 ); + equal( element.tabs( "option", "active" ), false ); + state( element, 0, 0, 0 ); - element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click(); + element.tabs( "option", "active", 1 ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); -test( "{ collapsible: true }", function() { - expect( 6 ); + element.find( ".ui-state-active .ui-tabs-anchor" ).trigger( "click" ); + equal( element.tabs( "option", "active" ), false ); + state( element, 0, 0, 0 ); - var element = $( "#tabs1" ).tabs({ + element.tabs( "option", "collapsible", false ); + assert.lacksClasses( element, "ui-tabs-collapsible" ); + + element.tabs( "option", "collapsible", true ); + + assert.hasClasses( element, "ui-tabs-collapsible" ); + + element.tabs({ active: 1, - collapsible: true + collapsible: false }); - element.tabs( "option", "active", false ); - equal( element.tabs( "option", "active" ), false ); - state( element, 0, 0, 0 ); + equal( element.tabs( "option", "active" ), 1 ); + state( element, 0, 1, 0 ); - element.tabs( "option", "active", 1 ); + element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).trigger( "click" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-state-active .ui-tabs-anchor" ).click(); - equal( element.tabs( "option", "active" ), false ); - state( element, 0, 0, 0 ); }); -test( "disabled", function() { +test( "disabled", function( assert ) { expect( 23 ); // fully enabled by default @@ -151,32 +160,32 @@ test( "disabled", function() { element = $( "#tabs1" ).tabs(); disabled( element, false ); - ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" ); - ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" ); ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" ); // disable single tab element.tabs( "option", "disabled", [ 1 ] ); disabled( element, [ 1 ] ); - ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" ); - ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" ); ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" ); // disabled active tab element.tabs( "option", "disabled", [ 0, 1 ] ); disabled( element, [ 0, 1 ] ); - ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" ); - ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" ); ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" ); // disable all tabs element.tabs( "option", "disabled", [ 0, 1, 2 ] ); disabled( element, true ); - ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" ); - ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-state-disabled" ); + assert.lacksClasses( element.tabs( "widget" ), "ui-tabs-disabled" ); ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" ); event = $.Event( "click" ); @@ -201,7 +210,7 @@ test( "{ event: null }", function() { state( element, 0, 1, 0 ); // ensure default click handler isn't bound - element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -347,7 +356,7 @@ asyncTest( "hide and show - animation", function() { equal( options, "drop", "correct options in _show()" ); setTimeout(function() { callback(); - }, 1 ); + }); }; widget._hide = function( element, options, callback ) { strictEqual( element[ 0 ], panels[ 0 ], "correct element in _hide()" ); @@ -355,11 +364,11 @@ asyncTest( "hide and show - animation", function() { setTimeout(function() { callback(); start(); - }, 1 ); + }); }; ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" ); element.tabs( "option", "active", 1 ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index 778639eb3..cb4e5389f 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -4,30 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Tabs Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "tabs" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/tabs.js" - ] - }); - </script> - - <script src="tabs_test_helpers.js"></script> - <script src="tabs_common.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="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core tabs"></script> + <script src="../../lib/bootstrap.js" data-widget="tabs"></script> <style> #tabs8, #tabs8 * { margin: 0; diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js deleted file mode 100644 index 00ff98677..000000000 --- a/tests/unit/testsuite.js +++ /dev/null @@ -1,341 +0,0 @@ -(function( $ ) { - -var reset, jshintLoaded; - -window.TestHelpers = {}; - -function includeStyle( url ) { - document.write( "<link rel='stylesheet' href='../../../" + url + "'>" ); -} - -function includeScript( url ) { - document.write( "<script src='../../../" + url + "'></script>" ); -} - -function url( value ) { - return value + ( /\?/.test( value ) ? "&" : "?" ) + new Date().getTime() + "" + - parseInt( Math.random() * 100000, 10 ); -} - -reset = QUnit.reset; -QUnit.reset = function() { - - // Ensure jQuery events and data on the fixture are properly removed - jQuery( "#qunit-fixture" ).empty(); - - // Let QUnit reset the fixture - reset.apply( this, arguments ); -}; - -QUnit.config.requireExpects = true; - -/* -// TODO: Add back the ability to test against minified files -// see QUnit.urlParams.min usage below -QUnit.config.urlConfig.push({ - id: "min", - label: "Minified source", - tooltip: "Load minified source files instead of the regular unminified ones." -}); -*/ - -TestHelpers.loadResources = QUnit.urlParams.min ? - function() { - includeStyle( "dist/jquery-ui.min.css" ); - includeScript( "dist/jquery-ui.min.js" ); - } : - function( resources ) { - $.each( resources.css || [], function( i, resource ) { - includeStyle( "themes/base/" + resource + ".css" ); - }); - $.each( resources.js || [], function( i, resource ) { - includeScript( resource ); - }); - }; - -QUnit.config.urlConfig.push({ - id: "nojshint", - label: "Skip JSHint", - tooltip: "Skip running JSHint, e.g., within TestSwarm, where Jenkins runs it already" -}); - -QUnit.config.urlConfig.push({ - id: "jquery", - label: "jQuery version", - value: [ - "1.7.0", "1.7.1", "1.7.2", "1.8.0", "1.8.1", "1.8.2", "1.8.3", - "1.9.0", "1.9.1", "1.10.0", "1.10.1", "1.10.2", "2.0.0", - "2.0.1", "2.0.2", "2.0.3", "git" - ], - tooltip: "Which jQuery Core version to test against" -}); - -jshintLoaded = false; -TestHelpers.testJshint = function( module ) { - - // Function.prototype.bind check is needed because JSHint doesn't work in ES3 browsers anymore - // https://github.com/jshint/jshint/issues/1384 - if ( QUnit.urlParams.nojshint || !Function.prototype.bind ) { - return; - } - - if ( !jshintLoaded ) { - includeScript( "external/jshint/jshint.js" ); - jshintLoaded = true; - } - - asyncTest( "JSHint", function() { - expect( 1 ); - - $.when( - $.ajax({ - url: url( "../../../ui/.jshintrc" ), - dataType: "json" - }), - $.ajax({ - url: url( "../../../ui/" + module + ".js" ), - dataType: "text" - }) - ).done(function( hintArgs, srcArgs ) { - var globals, passed, errors, - jshintrc = hintArgs[ 0 ], - source = srcArgs[ 0 ]; - - globals = jshintrc.globals || {}; - delete jshintrc.globals; - passed = JSHINT( source, jshintrc, globals ); - errors = $.map( JSHINT.errors, function( error ) { - - // JSHINT may report null if there are too many errors - if ( !error ) { - return; - } - - return "[L" + error.line + ":C" + error.character + "] " + - error.reason + "\n" + error.evidence + "\n"; - }).join( "\n" ); - ok( passed, errors ); - start(); - }) - .fail(function() { - ok( false, "error loading source" ); - start(); - }); - }); -}; - -function testWidgetDefaults( widget, defaults ) { - var pluginDefaults = $.ui[ widget ].prototype.options; - - // Ensure that all defaults have the correct value - test( "defined defaults", function() { - var count = 0; - $.each( defaults, function( key, val ) { - expect( ++count ); - if ( $.isFunction( val ) ) { - ok( $.isFunction( pluginDefaults[ key ] ), key ); - return; - } - deepEqual( pluginDefaults[ key ], val, key ); - }); - }); - - // Ensure that all defaults were tested - test( "tested defaults", function() { - var count = 0; - $.each( pluginDefaults, function( key ) { - expect( ++count ); - ok( key in defaults, key ); - }); - }); -} - -function testWidgetOverrides( widget ) { - if ( $.uiBackCompat === false ) { - test( "$.widget overrides", function() { - expect( 4 ); - $.each([ - "_createWidget", - "destroy", - "option", - "_trigger" - ], function( i, method ) { - strictEqual( $.ui[ widget ].prototype[ method ], - $.Widget.prototype[ method ], "should not override " + method ); - }); - }); - } -} - -function testBasicUsage( widget ) { - test( "basic usage", function() { - expect( 3 ); - - var defaultElement = $.ui[ widget ].prototype.defaultElement; - $( defaultElement ).appendTo( "body" )[ widget ]().remove(); - ok( true, "initialized on element" ); - - $( defaultElement )[ widget ]().remove(); - ok( true, "initialized on disconnected DOMElement - never connected" ); - - // Ensure manipulating removed elements works (#3664) - $( defaultElement ).appendTo( "body" ).remove()[ widget ]().remove(); - ok( true, "initialized on disconnected DOMElement - removed" ); - }); -} - -TestHelpers.commonWidgetTests = function( widget, settings ) { - module( widget + ": common widget" ); - - TestHelpers.testJshint( widget ); - testWidgetDefaults( widget, settings.defaults ); - testWidgetOverrides( widget ); - testBasicUsage( widget ); - test( "version", function() { - expect( 1 ); - ok( "version" in $.ui[ widget ].prototype, "version property exists" ); - }); -}; - -TestHelpers.onFocus = function( element, onFocus ) { - var fn = function( event ) { - if ( !event.originalEvent ) { - return; - } - element.unbind( "focus", fn ); - onFocus(); - }; - - element.bind( "focus", fn )[ 0 ].focus(); -}; - -TestHelpers.forceScrollableWindow = function( appendTo ) { - - // The main testable area is 10000x10000 so to enforce scrolling, - // this DIV must be greater than 10000 to work - return $( "<div>" ).css({ - height: "11000px", - width: "11000px" - }).appendTo( appendTo || "#qunit-fixture" ); -}; - -// Taken from https://github.com/jquery/qunit/tree/master/addons/close-enough -window.closeEnough = function( actual, expected, maxDifference, message ) { - var passes = ( actual === expected ) || Math.abs( actual - expected ) <= maxDifference; - QUnit.push( passes, actual, expected, message ); -}; - -/* - * Experimental assertion for comparing DOM objects. - * - * Serializes an element and some properties and attributes and its children if any, - * otherwise the text. Then compares the result using deepEqual(). - */ -window.domEqual = function( selector, modifier, message ) { - var expected, actual, - properties = [ - "disabled", - "readOnly" - ], - attributes = [ - "autocomplete", - "aria-activedescendant", - "aria-controls", - "aria-describedby", - "aria-disabled", - "aria-expanded", - "aria-haspopup", - "aria-hidden", - "aria-labelledby", - "aria-pressed", - "aria-selected", - "aria-valuemax", - "aria-valuemin", - "aria-valuenow", - "class", - "href", - "id", - "nodeName", - "role", - "tabIndex", - "title" - ]; - - function getElementStyles( elem ) { - var key, len, - style = elem.ownerDocument.defaultView ? - elem.ownerDocument.defaultView.getComputedStyle( elem, null ) : - elem.currentStyle, - styles = {}; - - if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) { - len = style.length; - while ( len-- ) { - key = style[ len ]; - if ( typeof style[ key ] === "string" ) { - styles[ $.camelCase( key ) ] = style[ key ]; - } - } - - // support: Opera, IE <9 - } else { - for ( key in style ) { - if ( typeof style[ key ] === "string" ) { - styles[ key ] = style[ key ]; - } - } - } - - return styles; - } - - function extract( elem ) { - if ( !elem || !elem.length ) { - QUnit.push( false, actual, expected, - "domEqual failed, can't extract " + selector + ", message was: " + message ); - return; - } - - var children, - result = {}; - $.each( properties, function( index, attr ) { - var value = elem.prop( attr ); - result[ attr ] = value !== undefined ? value : ""; - }); - $.each( attributes, function( index, attr ) { - var value = elem.attr( attr ); - result[ attr ] = value !== undefined ? value : ""; - }); - result.style = getElementStyles( elem[ 0 ] ); - result.events = $._data( elem[ 0 ], "events" ); - result.data = $.extend( {}, elem.data() ); - delete result.data[ $.expando ]; - children = elem.children(); - if ( children.length ) { - result.children = elem.children().map(function() { - return extract( $( this ) ); - }).get(); - } else { - result.text = elem.text(); - } - return result; - } - - function done() { - actual = extract( $( selector ) ); - QUnit.push( QUnit.equiv(actual, expected), actual, expected, message ); - } - - // Get current state prior to modifier - expected = extract( $( selector ) ); - - // Run modifier (async or sync), then compare state via done() - if ( modifier.length ) { - modifier( done ); - } else { - modifier(); - done(); - } -}; - -}( jQuery )); diff --git a/tests/unit/tooltip/all.html b/tests/unit/tooltip/all.html index db33226a8..e87a76203 100644 --- a/tests/unit/tooltip/all.html +++ b/tests/unit/tooltip/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/tooltip/tooltip_common.js b/tests/unit/tooltip/common-deprecated.js index 2d6ea91ec..d32e7656d 100644 --- a/tests/unit/tooltip/tooltip_common.js +++ b/tests/unit/tooltip/common-deprecated.js @@ -1,5 +1,13 @@ -TestHelpers.commonWidgetTests( "tooltip", { +define( [ + "lib/common", + "ui/tooltip" +], function( common ) { + +common.testWidget( "tooltip", { defaults: { + classes: { + "ui-tooltip": "ui-corner-all ui-widget-shadow" + }, content: function() {}, disabled: false, hide: true, @@ -19,3 +27,5 @@ TestHelpers.commonWidgetTests( "tooltip", { open: null } }); + +} ); diff --git a/tests/unit/tooltip/common.js b/tests/unit/tooltip/common.js new file mode 100644 index 000000000..f8045fc33 --- /dev/null +++ b/tests/unit/tooltip/common.js @@ -0,0 +1,30 @@ +define( [ + "lib/common", + "ui/tooltip" +], function( common ) { + +common.testWidget( "tooltip", { + defaults: { + classes: { + "ui-tooltip": "ui-corner-all ui-widget-shadow" + }, + content: function() {}, + disabled: false, + hide: true, + items: "[title]:not([disabled])", + position: { + my: "left top+15", + at: "left bottom", + collision: "flipfit flip" + }, + show: true, + track: false, + + // callbacks + close: null, + create: null, + open: null + } +}); + +} ); diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/core.js index 4933be9ba..de0b90224 100644 --- a/tests/unit/tooltip/tooltip_core.js +++ b/tests/unit/tooltip/core.js @@ -1,8 +1,11 @@ -(function( $ ) { +define( [ + "jquery", + "ui/tooltip" +], function( $ ) { module( "tooltip: core" ); -test( "markup structure", function() { +test( "markup structure", function( assert ) { expect( 7 ); var element = $( "#tooltipped1" ).tooltip(), tooltip = $( ".ui-tooltip" ); @@ -13,8 +16,8 @@ test( "markup structure", function() { element.tooltip( "open" ); tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); equal( tooltip.length, 1, "tooltip exists" ); - equal( element.attr( "aria-describedby"), tooltip.attr( "id" ), "aria-describedby" ); - ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" ); + equal( element.attr( "aria-describedby" ), tooltip.attr( "id" ), "aria-describedby" ); + assert.hasClasses( tooltip, "ui-tooltip ui-widget ui-widget-content ui-widget-shadow" ); equal( tooltip.length, 1, ".ui-tooltip exists" ); equal( tooltip.find( ".ui-tooltip-content" ).length, 1, ".ui-tooltip-content exists" ); @@ -38,8 +41,7 @@ test( "accessibility", function() { equal( element.attr( "aria-describedby" ), "fixture-span " + tooltipId, "multiple describedby when open" ); - // strictEqual to distinguish between .removeAttr( "title" ) and .attr( "title", "" ) - strictEqual( element.attr( "title" ), undefined, "no title when open" ); + equal( element.attr( "title" ), null, "no title when open" ); equal( liveRegion.children().length, 1 ); equal( liveRegion.children().last().html(), "..." ); element.tooltip( "close" ); @@ -135,20 +137,20 @@ asyncTest( "programmatic focus with async content", function() { } }); - element.bind( "tooltipopen", function( event ) { + element.on( "tooltipopen", function( event ) { deepEqual( event.originalEvent.type, "focusin" ); - element.bind( "tooltipclose", function( event ) { + element.on( "tooltipclose", function( event ) { deepEqual( event.originalEvent.type, "focusout" ); start(); }); setTimeout(function() { - element.blur(); + element.trigger( "blur" ); }); }); - element.focus(); + element.trigger( "focus" ); }); asyncTest( "destroy during hide animation; only one close event", function() { @@ -159,7 +161,7 @@ asyncTest( "destroy during hide animation; only one close event", function() { hide: true }); - element.bind( "tooltipclose", function() { + element.on( "tooltipclose", function() { ok( true, "tooltip closed" ); }); @@ -219,4 +221,29 @@ asyncTest( "multiple active delegated tooltips", function() { step1(); }); -}( jQuery ) ); +// http://bugs.jqueryui.com/ticket/11272 +test( "remove conflicting attributes from live region", function() { + expect( 2 ); + + var element = $( + "<div id='content'>" + + "<input type='radio' name='hobby' id='hobby1' checked='checked'>" + + "<label for='hobby1'>option 1</label>" + + "<input type='radio' name='hobby' id='hobby2'>" + + "<label for='hobby2'>option 2</label>" + + "</div>" ); + + $( "#tooltipped1" ) + .tooltip({ + content: element, + open: function() { + equal( $( ".ui-helper-hidden-accessible [name]" ).length, 0, + "no name attributes within live region" ); + equal( $( ".ui-helper-hidden-accessible [id]" ).length, 0, + "no id attributes within live region" ); + } + }) + .tooltip( "open" ); +}); + +} ); diff --git a/tests/unit/tooltip/deprecated.html b/tests/unit/tooltip/deprecated.html new file mode 100644 index 000000000..f2d04f3d1 --- /dev/null +++ b/tests/unit/tooltip/deprecated.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Tooltip Test Suite</title> + + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core tooltip"></script> + <script src="../../lib/bootstrap.js" data-widget="tooltip" data-deprecated="true"></script> +</head> +<body> + +<div id="qunit"></div> +<div id="qunit-fixture"> + +<div> + <a id="tooltipped1" href="#" title="anchortitle">anchor</a> + <input title="inputtitle"> + <span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span> + <span id="fixture-span" title="title-text">span</span> + <span id="contains-tooltipped" title="parent"><span id="contained-tooltipped" title="child">baz</span></span> +</div> + +<form id="tooltip-form"> + <input name="title" title="attroperties"> +</form> + +</div> +</body> +</html> diff --git a/tests/unit/tooltip/deprecated.js b/tests/unit/tooltip/deprecated.js new file mode 100644 index 000000000..057171ee2 --- /dev/null +++ b/tests/unit/tooltip/deprecated.js @@ -0,0 +1,16 @@ +define( [ + "jquery", + "ui/tooltip" +], function( $ ) { + +module( "tooltip: (deprecated) options" ); + +test( "tooltipClass", function( assert ) { + expect( 1 ); + var element = $( "#tooltipped1" ).tooltip({ + tooltipClass: "custom" + }).tooltip( "open" ); + assert.hasClasses( $( "#" + element.data( "ui-tooltip-id" ) ), "custom" ); +}); + +} ); diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/events.js index de16471ae..d8e9fa2a9 100644 --- a/tests/unit/tooltip/tooltip_events.js +++ b/tests/unit/tooltip/events.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/tooltip" +], function( $ ) { module( "tooltip: events" ); @@ -26,12 +29,12 @@ test( "mouse events", function() { expect( 2 ); var element = $( "#tooltipped1" ).tooltip(); - element.bind( "tooltipopen", function( event ) { + element.on( "tooltipopen", function( event ) { deepEqual( event.originalEvent.type, "mouseover" ); }); element.trigger( "mouseover" ); - element.bind( "tooltipclose", function( event ) { + element.on( "tooltipclose", function( event ) { deepEqual( event.originalEvent.type, "mouseleave" ); }); element.trigger( "focusout" ); @@ -42,16 +45,16 @@ test( "focus events", function() { expect( 2 ); var element = $( "#tooltipped1" ).tooltip(); - element.bind( "tooltipopen", function( event ) { + element.on( "tooltipopen", function( event ) { deepEqual( event.originalEvent.type, "focusin" ); }); element.trigger( "focusin" ); - element.bind( "tooltipclose", function( event ) { + element.on( "tooltipclose", function( event ) { deepEqual( event.originalEvent.type, "focusout" ); }); element.trigger( "mouseleave" ); element.trigger( "focusout" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/methods.js index e6641a14a..3db7b8f7c 100644 --- a/tests/unit/tooltip/tooltip_methods.js +++ b/tests/unit/tooltip/methods.js @@ -1,17 +1,20 @@ -(function( $ ) { +define( [ + "jquery", + "ui/tooltip" +], function( $ ) { module( "tooltip: methods" ); -test( "destroy", function() { +test( "destroy", function( assert ) { expect( 3 ); var element = $( "#tooltipped1" ); - domEqual( "#tooltipped1", function() { + assert.domEqual( "#tooltipped1", function() { element.tooltip().tooltip( "destroy" ); }); // make sure that open tooltips are removed on destroy - domEqual( "#tooltipped1", function() { + assert.domEqual( "#tooltipped1", function() { element .tooltip() .tooltip( "open", $.Event( "mouseover", { target: element[0] }) ) @@ -53,7 +56,7 @@ test( "open/close with tracking", function() { $.fx.off = false; }); -test( "enable/disable", function() { +test( "enable/disable", function( assert ) { expect( 11 ); $.fx.off = true; var tooltip, @@ -67,10 +70,10 @@ test( "enable/disable", function() { element.tooltip( "disable" ); equal( $( ".ui-tooltip" ).length, 0, "no tooltip when disabled" ); - ok( !element.tooltip( "widget" ).hasClass( "ui-state-disabled" ), "element doesn't get ui-state-disabled" ); + assert.lacksClasses( element.tooltip( "widget" ), "ui-state-disabled" ); ok( !element.tooltip( "widget" ).attr( "aria-disabled" ), "element doesn't get aria-disabled" ); - ok( !element.tooltip( "widget" ).hasClass( "ui-tooltip-disabled" ), "element doesn't get ui-tooltip-disabled" ); - strictEqual( tooltip.attr( "title" ), undefined, "title removed on disable" ); + assert.lacksClasses( element.tooltip( "widget" ), "ui-tooltip-disabled" ); + equal( tooltip.attr( "title" ), null, "title removed on disable" ); element.tooltip( "open" ); equal( $( ".ui-tooltip" ).length, 0, "open does nothing when disabled" ); @@ -133,4 +136,4 @@ test( "preserve changes to title attributes on close and destroy", function() { } ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/options.js index 2d49533f2..a0730414e 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/options.js @@ -1,4 +1,7 @@ -(function( $ ) { +define( [ + "jquery", + "ui/tooltip" +], function( $ ) { module( "tooltip: options" ); @@ -71,6 +74,28 @@ asyncTest( "content: sync + async callback", function() { }).tooltip( "open" ); }); +// http://bugs.jqueryui.com/ticket/8740 +asyncTest( "content: async callback loses focus before load", function() { + expect( 1 ); + + var element = $( "#tooltipped1" ).tooltip({ + content: function( response ) { + setTimeout(function() { + element.trigger( "mouseleave" ); + setTimeout(function() { + response( "sometext" ); + setTimeout(function() { + ok( !$( "#" + element.data( "ui-tooltip-id" ) ).is( ":visible" ), + "Tooltip should not display" ); + start(); + }); + }); + }); + } + }); + element.trigger( "mouseover" ); +}); + test( "content: change while open", function() { expect( 2 ) ; var element = $( "#tooltipped1" ).tooltip({ @@ -144,14 +169,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, @@ -191,8 +208,8 @@ test( "track and programmatic focus", function() { expect( 1 ); $( "#qunit-fixture div input" ).tooltip({ track: true - }).focus(); + }).trigger( "focus" ); equal( "inputtitle", $( ".ui-tooltip" ).text() ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index 18bd88c2c..b5561d926 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -4,30 +4,9 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core", "tooltip" ], - js: [ - "ui/core.js", - "ui/widget.js", - "ui/position.js", - "ui/tooltip.js" - ] - }); - </script> - - <script src="tooltip_common.js"></script> - <script src="tooltip_core.js"></script> - <script src="tooltip_events.js"></script> - <script src="tooltip_methods.js"></script> - <script src="tooltip_options.js"></script> - - <script src="../swarminject.js"></script> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core tooltip"></script> + <script src="../../lib/bootstrap.js" data-widget="tooltip" data-no-back-compat="true"></script> </head> <body> diff --git a/tests/unit/widget/all.html b/tests/unit/widget/all.html index b9dbb770c..7ef570bd1 100644 --- a/tests/unit/widget/all.html +++ b/tests/unit/widget/all.html @@ -7,9 +7,9 @@ <script src="../../../external/jquery/jquery.js"></script> <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <link rel="stylesheet" href="../qunit-composite.css"> + <link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css"> <script src="../../../external/qunit/qunit.js"></script> - <script src="../qunit-composite.js"></script> + <script src="../../../external/qunit-composite/qunit-composite.js"></script> <script src="../subsuite.js"></script> <script> diff --git a/tests/unit/widget/widget_animation.js b/tests/unit/widget/animation.js index 8ef55aa11..4e9d93ccf 100644 --- a/tests/unit/widget/widget_animation.js +++ b/tests/unit/widget/animation.js @@ -1,3 +1,7 @@ +define( [ + "jquery", + "ui/widget" +], function( $ ) { module( "widget animation", (function() { var show = $.fn.show, @@ -255,3 +259,5 @@ asyncTest( "show: object(effect)", function() { next(); }); }); + +} ); diff --git a/tests/unit/widget/classes.js b/tests/unit/widget/classes.js new file mode 100644 index 000000000..1b4a45120 --- /dev/null +++ b/tests/unit/widget/classes.js @@ -0,0 +1,146 @@ +define( [ + "jquery", + "ui/widget" +], function( $ ) { + +module( "widget factory classes", { + setup: function() { + $.widget( "ui.classesWidget", { + options: { + classes: { + "ui-classes-widget": "ui-theme-widget", + "ui-classes-element": "ui-theme-element ui-theme-element-2" + } + }, + _create: function() { + this.span = $( "<span>" ) + .appendTo( this.element ); + + this.element.wrap( "<div>" ); + + this.wrapper = this.element.parent(); + + this._addClass( "ui-classes-element", "ui-core-element" ) + ._addClass( "ui-classes-element-2" ) + ._addClass( null, "ui-core-element-null" ) + ._addClass( this.span, null, "ui-core-span-null" ) + ._addClass( this.span, "ui-classes-span", "ui-core-span" ) + ._addClass( this.wrapper, "ui-classes-widget" ); + + }, + toggleClasses: function( bool ) { + this._toggleClass( "ui-classes-element", "ui-core-element", bool ) + ._toggleClass( "ui-classes-element-2", null, bool ) + ._toggleClass( null, "ui-core-element-null", bool ) + ._toggleClass( this.span, null, "ui-core-span-null", bool ) + ._toggleClass( this.span, "ui-classes-span", "ui-core-span", bool ) + ._toggleClass( this.wrapper, "ui-classes-widget", null, bool ); + }, + removeClasses: function() { + this._removeClass( "ui-classes-element", "ui-core-element" ) + ._removeClass( "ui-classes-element-2" ) + ._removeClass( null, "ui-core-element-null" ) + ._removeClass( this.span, null, "ui-core-span-null" ) + ._removeClass( this.span, "ui-classes-span", "ui-core-span" ) + ._removeClass( this.wrapper, "ui-classes-widget" ); + }, + _destroy: function() { + this.span.remove(); + this.element.unwrap(); + } + }); + }, + teardown: function() { + delete $.ui.classesWidget; + delete $.fn.classesWidget; + } +}); + +function elementHasClasses( widget, method, assert ) { + var toggle = method === "toggle" ? ( ", true" ) : ""; + + assert.hasClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2", + "_" + method + "Class works with ( keys, extra" + toggle + " )" ); + assert.hasClasses( widget, "ui-classes-element-2", + "_" + method + "Class works with ( keys, null" + toggle + " )" ); + assert.hasClasses( widget, "ui-core-element-null", + "_" + method + "Class works with ( null, extra" + toggle + " )" ); + assert.hasClasses( widget.parent(), "ui-classes-widget ui-theme-widget", + "_" + method + "Class works with ( element, null, extra" + toggle + " )" ); + assert.hasClasses( widget.find( "span" ), "ui-classes-span ui-core-span", + "_" + method + "Class works with ( element, keys, extra" + toggle + " )" ); + assert.hasClasses( widget.find( "span" ), "ui-core-span-null", + "_" + method + "Class works with ( element, keys, null" + toggle + " )" ); +} +function elementLacksClasses( widget, method, assert ) { + var toggle = method === "toggle" ? ( ", false" ) : ""; + + assert.lacksClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2", + "_" + method + "Class works with ( keys, extra" + toggle + " )" ); + assert.lacksClasses( widget, "ui-classes-element-2", + "_" + method + "Class works with ( keys, null" + toggle + " )" ); + assert.lacksClasses( widget, "ui-core-element-null", + "_" + method + "Class works with ( null, extra" + toggle + " )" ); + assert.lacksClasses( widget.parent(), "ui-classes-widget ui-theme-widget", + "_" + method + "Class works with ( element, null, extra" + toggle + " )" ); + assert.lacksClasses( widget.find( "span" ), "ui-classes-span ui-core-span", + "_" + method + "Class works with ( element, keys, extra" + toggle + " )" ); + assert.lacksClasses( widget.find( "span" ), "ui-core-span-null", + "_" + method + "Class works with ( element, keys, null" + toggle + " )" ); +} + +test( ".option() - classes setter", function( assert ) { + expect( 11 ); + + var testWidget = $.ui.classesWidget(); + + elementHasClasses( testWidget.element, "add", assert ); + + testWidget.option({ + classes: { + "ui-classes-span": "custom-theme-span", + "ui-classes-widget": "ui-theme-widget custom-theme-widget", + "ui-classes-element": "ui-theme-element-2" + } + }); + + assert.lacksClasses( testWidget.element, "ui-theme-element", + "Removing a class from the value removes the class" ); + + testWidget.option( "classes.ui-classes-element", "" ); + assert.hasClasses( testWidget.element, "ui-classes-element", + "Setting to empty value leaves structure class" ); + assert.lacksClasses( testWidget.element, "ui-theme-element-2", + "Setting empty value removes previous value classes" ); + assert.hasClasses( testWidget.span, "ui-classes-span custom-theme-span", + "Adding a class to an empty value works as expected" ); + assert.hasClasses( testWidget.wrapper, "ui-classes-widget custom-theme-widget", + "Appending a class to the current value works as expected" ); +}); + +test( ".destroy() - class removal", function( assert ) { + expect( 1 ); + + assert.domEqual( "#widget", function() { + $( "#widget" ).classesWidget().classesWidget( "destroy" ); + }); +}); + +test( "._add/_remove/_toggleClass()", function( assert ) { + expect( 24 ); + + var widget = $( "#widget" ).classesWidget(); + + elementHasClasses( widget, "add", assert ); + + widget.classesWidget( "toggleClasses", false ); + elementLacksClasses( widget, "toggle", assert ); + + widget.classesWidget( "toggleClasses", true ); + elementHasClasses( widget, "toggle", assert ); + + widget.classesWidget( "removeClasses" ); + elementLacksClasses( widget, "remove", assert ); +}); + +} ); diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/core.js index 2b88e39ef..235bc6bb6 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/core.js @@ -1,4 +1,8 @@ -(function( $ ) { +define( [ + "jquery", + "lib/common", + "ui/widget" +], function( $, common ) { module( "widget factory", { teardown: function() { @@ -9,7 +13,7 @@ module( "widget factory", { } }); -TestHelpers.testJshint( "widget" ); +common.testJshint( "widget" ); test( "widget creation", function() { expect( 5 ); @@ -127,7 +131,7 @@ test( "jQuery usage", function() { shouldCreate = true; elem = $( "<div>" ) - .bind( "testwidgetcreate", function() { + .on( "testwidgetcreate", function() { ok( shouldCreate, "create event triggered on instantiation" ); }) .testWidget(); @@ -227,6 +231,7 @@ test( "merge multiple option arguments", function() { $.widget( "ui.testWidget", { _create: function() { deepEqual( this.options, { + classes: {}, create: null, disabled: false, option1: "value1", @@ -281,6 +286,7 @@ test( "._getCreateOptions()", function() { }, _create: function() { deepEqual( this.options, { + classes: {}, create: null, disabled: false, option1: "override1", @@ -388,7 +394,9 @@ test( "inheritance", function() { "extension class option array overwrites base"); delete $.ui.testWidgetBase; + delete $.fn.testWidgetBase; delete $.ui.testWidgetExtension; + delete $.fn.testWidgetExtension; }); test( "._super()", function() { @@ -424,7 +432,9 @@ test( "._super()", function() { instance = $( "<div>" ).testWidget3().testWidget3( "instance" ); instance.method( 5 ); delete $.ui.testWidget3; + delete $.fn.testWidget3; delete $.ui.testWidget2; + delete $.fn.testWidget2; }); test( "._superApply()", function() { @@ -461,7 +471,88 @@ test( "._superApply()", function() { instance = $( "<div>" ).testWidget3().testWidget3( "instance" ); instance.method( 5, 10 ); delete $.ui.testWidget3; + delete $.fn.testWidget3; delete $.ui.testWidget2; + delete $.fn.testWidget2; +}); + +test( "mixins", function() { + expect( 5 ); + + var mixin1 = { + foo: function() { + equal( method, "foo", "Methods from first mixin are copied over" ); + } + }; + var mixin2 = { + bar: function() { + equal( method, "bar", "Methods from second mixin are copied over" ); + } + }; + var prototype = { + baz: function() { + equal( method, "baz", "Methods from protoype are copied over" ); + } + }; + var existingBar = mixin2.bar; + var method; + + $.widget( "ui.testWidget", [ mixin1, mixin2, prototype ] ); + method = "foo"; + $.ui.testWidget.prototype.foo(); + method = "bar"; + $.ui.testWidget.prototype.bar(); + method = "baz"; + $.ui.testWidget.prototype.baz(); + + mixin1.foo = function() { + ok( false, "Changes to a mixin don't change the prototype" ); + }; + method = "foo"; + $.ui.testWidget.prototype.foo(); + + $.ui.testWidget.prototype.bar = function() {}; + strictEqual( mixin2.bar, existingBar, "Changes to a prototype don't change the mixin" ); +}); + +test( "mixins with inheritance", function() { + expect( 4 ); + + var mixin1 = { + foo: function() { + equal( method, "foo", "Methods from first mixin are copied over" ); + } + }; + var mixin2 = { + bar: function() { + equal( method, "bar", "Methods from second mixin are copied over" ); + } + }; + var parentPrototype = { + baz: function() { + equal( method, "baz", "Methods from parent protoype are copied over" ); + } + }; + var childPrototype = { + qux: function() { + equal( method, "qux", "Methods from child protoype are copied over" ); + } + }; + var method; + + $.widget( "ui.testWidget", [ mixin1, parentPrototype ] ); + $.widget( "ui.testWidget2", $.ui.testWidget, [ mixin2, childPrototype ] ); + method = "foo"; + $.ui.testWidget2.prototype.foo(); + method = "bar"; + $.ui.testWidget2.prototype.bar(); + method = "baz"; + $.ui.testWidget2.prototype.baz(); + method = "qux"; + $.ui.testWidget2.prototype.qux(); + + delete $.ui.testWidget2; + delete $.fn.testWidget2; }); test( ".option() - getter", function() { @@ -485,10 +576,11 @@ test( ".option() - getter", function() { options = div.testWidget( "option" ); deepEqual( options, { + baz: 5, + classes: {}, create: null, disabled: false, foo: "bar", - baz: 5, qux: [ "quux", "quuux" ] }, "full options hash returned" ); options.foo = "notbar"; @@ -810,7 +902,7 @@ test( "_on() with delegate", function() { _create: function() { var uuid = this.uuid; this.element = { - bind: function( event, handler ) { + on: function( event, handler ) { equal( event, "click.testWidget" + uuid ); ok( $.isFunction(handler) ); }, @@ -818,7 +910,7 @@ test( "_on() with delegate", function() { }; this.widget = function() { return { - delegate: function( selector, event, handler ) { + on: function( event, selector, handler ) { equal( selector, "a" ); equal( event, "click.testWidget" + uuid ); ok( $.isFunction(handler) ); @@ -831,7 +923,7 @@ test( "_on() with delegate", function() { }); this.widget = function() { return { - delegate: function( selector, event, handler ) { + on: function( event, selector, handler ) { equal( selector, "form fieldset > input" ); equal( event, "change.testWidget" + uuid ); ok( $.isFunction(handler) ); @@ -913,7 +1005,7 @@ test( "_off() - single event", function() { widget._on( element, { foo: function() { ok( shouldTriggerWidget, "foo called from _on" ); }}); - element.bind( "foo", function() { + element.on( "foo", function() { ok( shouldTriggerOther, "foo called from bind" ); }); shouldTriggerWidget = true; @@ -939,7 +1031,7 @@ test( "_off() - multiple events", function() { ok( shouldTriggerWidget, "bar called from _on" ); } }); - element.bind( "foo bar", function( event ) { + element.on( "foo bar", function( event ) { ok( shouldTriggerOther, event.type + " called from bind" ); }); shouldTriggerWidget = true; @@ -967,7 +1059,7 @@ test( "_off() - all events", function() { ok( shouldTriggerWidget, "bar called from _on" ); } }); - element.bind( "foo bar", function( event ) { + element.on( "foo bar", function( event ) { ok( shouldTriggerOther, event.type + " called from bind" ); }); shouldTriggerWidget = true; @@ -980,7 +1072,7 @@ test( "_off() - all events", function() { element.trigger( "bar" ); }); -test( "._hoverable()", function() { +test( "._hoverable()", function( assert ) { expect( 10 ); $.widget( "ui.testWidget", { _create: function() { @@ -989,30 +1081,30 @@ test( "._hoverable()", function() { }); var div = $( "#widget" ).testWidget().children(); - ok( !div.hasClass( "ui-state-hover" ), "not hovered on init" ); + assert.lacksClasses( div, "ui-state-hover", "not hovered on init" ); div.trigger( "mouseenter" ); - ok( div.hasClass( "ui-state-hover" ), "hovered after mouseenter" ); + assert.hasClasses( div, "ui-state-hover", "hovered after mouseenter" ); div.trigger( "mouseleave" ); - ok( !div.hasClass( "ui-state-hover" ), "not hovered after mouseleave" ); + assert.lacksClasses( div, "ui-state-hover", "not hovered after mouseleave" ); div.trigger( "mouseenter" ); - ok( div.hasClass( "ui-state-hover" ), "hovered after mouseenter" ); + assert.hasClasses( div, "ui-state-hover", "hovered after mouseenter" ); $( "#widget" ).testWidget( "disable" ); - ok( !div.hasClass( "ui-state-hover" ), "not hovered while disabled" ); + assert.lacksClasses( div, "ui-state-hover", "not hovered while disabled" ); div.trigger( "mouseenter" ); - ok( !div.hasClass( "ui-state-hover" ), "can't hover while disabled" ); + assert.lacksClasses( div, "ui-state-hover", "can't hover while disabled" ); $( "#widget" ).testWidget( "enable" ); - ok( !div.hasClass( "ui-state-hover" ), "enabling doesn't reset hover" ); + assert.lacksClasses( div, "ui-state-hover", "enabling doesn't reset hover" ); div.trigger( "mouseenter" ); - ok( div.hasClass( "ui-state-hover" ), "hovered after mouseenter" ); + assert.hasClasses( div, "ui-state-hover", "hovered after mouseenter" ); $( "#widget" ).testWidget( "destroy" ); - ok( !div.hasClass( "ui-state-hover" ), "not hovered after destroy" ); + assert.lacksClasses( div, "ui-state-hover", "not hovered after destroy" ); div.trigger( "mouseenter" ); - ok( !div.hasClass( "ui-state-hover" ), "event handler removed on destroy" ); + assert.lacksClasses( div, "ui-state-hover", "event handler removed on destroy" ); }); -test( "._focusable()", function() { +test( "._focusable()", function( assert ) { expect( 10 ); $.widget( "ui.testWidget", { _create: function() { @@ -1021,27 +1113,27 @@ test( "._focusable()", function() { }); var div = $( "#widget" ).testWidget().children(); - ok( !div.hasClass( "ui-state-focus" ), "not focused on init" ); + assert.lacksClasses( div, "ui-state-focus", "not focused on init" ); div.trigger( "focusin" ); - ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" ); + assert.hasClasses( div, "ui-state-focus", "focused after explicit focus" ); div.trigger( "focusout" ); - ok( !div.hasClass( "ui-state-focus" ), "not focused after blur" ); + assert.lacksClasses( div, "ui-state-focus", "not focused after blur" ); div.trigger( "focusin" ); - ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" ); + assert.hasClasses( div, "ui-state-focus", "focused after explicit focus" ); $( "#widget" ).testWidget( "disable" ); - ok( !div.hasClass( "ui-state-focus" ), "not focused while disabled" ); + assert.lacksClasses( div, "ui-state-focus", "not focused while disabled" ); div.trigger( "focusin" ); - ok( !div.hasClass( "ui-state-focus" ), "can't focus while disabled" ); + assert.lacksClasses( div, "ui-state-focus", "can't focus while disabled" ); $( "#widget" ).testWidget( "enable" ); - ok( !div.hasClass( "ui-state-focus" ), "enabling doesn't reset focus" ); + assert.lacksClasses( div, "ui-state-focus", "enabling doesn't reset focus" ); div.trigger( "focusin" ); - ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" ); + assert.hasClasses( div, "ui-state-focus", "focused after explicit focus" ); $( "#widget" ).testWidget( "destroy" ); - ok( !div.hasClass( "ui-state-focus" ), "not focused after destroy" ); + assert.lacksClasses( div, "ui-state-focus", "not focused after destroy" ); div.trigger( "focusin" ); - ok( !div.hasClass( "ui-state-focus" ), "event handler removed on destroy" ); + assert.lacksClasses( div, "ui-state-focus", "event handler removed on destroy" ); }); test( "._trigger() - no event, no ui", function() { @@ -1060,7 +1152,7 @@ test( "._trigger() - no event, no ui", function() { } }); $( document ).add( "#widget-wrapper" ).add( "#widget" ) - .bind( "testwidgetfoo", function( event, ui ) { + .on( "testwidgetfoo", function( event, ui ) { deepEqual( ui, {}, "empty ui hash passed" ); handlers.push( this ); }); @@ -1073,7 +1165,7 @@ test( "._trigger() - no event, no ui", function() { "callback" ], "event bubbles and then invokes callback" ); - $( document ).unbind( "testwidgetfoo" ); + $( document ).off( "testwidgetfoo" ); }); test( "._trigger() - cancelled event", function() { @@ -1088,7 +1180,7 @@ test( "._trigger() - cancelled event", function() { ok( true, "callback invoked even if event is cancelled" ); } }) - .bind( "testwidgetfoo", function() { + .on( "testwidgetfoo", function() { ok( true, "event was triggered" ); return false; }); @@ -1135,7 +1227,7 @@ test( "._trigger() - provide event and ui", function() { }, "ui object modified" ); } }); - $( "#widget" ).bind( "testwidgetfoo", function( event, ui ) { + $( "#widget" ).on( "testwidgetfoo", function( event, ui ) { equal( event.originalEvent, originalEvent, "original event object passed" ); deepEqual( ui, { foo: "bar", @@ -1146,7 +1238,7 @@ test( "._trigger() - provide event and ui", function() { }, "ui hash passed" ); ui.foo = "notbar"; }); - $( "#widget-wrapper" ).bind( "testwidgetfoo", function( event, ui ) { + $( "#widget-wrapper" ).on( "testwidgetfoo", function( event, ui ) { equal( event.originalEvent, originalEvent, "original event object passed" ); deepEqual( ui, { foo: "notbar", @@ -1193,7 +1285,7 @@ test( "._trigger() - array as ui", function() { this._trigger( "foo", null, [ ui, extra ] ); } }); - $( "#widget" ).bind( "testwidgetfoo", function( event, ui, extra ) { + $( "#widget" ).on( "testwidgetfoo", function( event, ui, extra ) { deepEqual( ui, { foo: "bar", baz: { @@ -1236,7 +1328,7 @@ test( "._trigger() - instance as element", function() { deepEqual( ui, { foo: "bar" }, "ui object passed to callback" ); } }); - $( instance ).bind( "testwidgetfoo", function( event, ui ) { + $( instance ).on( "testwidgetfoo", function( event, ui ) { equal( event.type, "testwidgetfoo", "event object passed to event handler" ); deepEqual( ui, { foo: "bar" }, "ui object passed to event handler" ); }); @@ -1368,7 +1460,9 @@ test( "redefine deep prototype chain", function() { instance.method( "level 1" ); delete $.ui.testWidget3; + delete $.fn.testWidget3; delete $.ui.testWidget2; + delete $.fn.testWidget2; }); test( "redefine - widgetEventPrefix", function() { @@ -1504,4 +1598,4 @@ test( "$.widget.bridge() - widgetFullName", function() { equal( typeof instance, "object", "instance stored in .data(widgetFullName)" ); }); -}( jQuery ) ); +} ); diff --git a/tests/unit/widget/widget_extend.js b/tests/unit/widget/extend.js index 14f9a46e0..a5a8cccaa 100644 --- a/tests/unit/widget/widget_extend.js +++ b/tests/unit/widget/extend.js @@ -1,3 +1,8 @@ +define( [ + "jquery", + "ui/widget" +], function( $ ) { + test( "$.widget.extend()", function() { expect( 27 ); @@ -103,3 +108,5 @@ test( "$.widget.extend()", function() { input.key[0] = 10; deepEqual( input, output, "don't clone arrays" ); }); + +} ); diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html index 2b764abab..3dea2ed69 100644 --- a/tests/unit/widget/widget.html +++ b/tests/unit/widget/widget.html @@ -4,25 +4,10 @@ <meta charset="utf-8"> <title>jQuery UI Widget Test Suite</title> - <script src="../../jquery.js"></script> - <link rel="stylesheet" href="../../../external/qunit/qunit.css"> - <script src="../../../external/qunit/qunit.js"></script> - <script src="../../../external/jquery-simulate/jquery.simulate.js"></script> - <script src="../testsuite.js"></script> - <script> - TestHelpers.loadResources({ - css: [ "core" ], - js: [ - "ui/widget.js" - ] - }); + <script src="../../../external/requirejs/require.js"></script> + <script src="../../lib/css.js" data-modules="core"></script> + <script src="../../lib/bootstrap.js" data-modules="core extend animation classes"> </script> - - <script src="widget_core.js"></script> - <script src="widget_extend.js"></script> - <script src="widget_animation.js"></script> - - <script src="../swarminject.js"></script> </head> <body> diff --git a/tests/visual/compound/dialog_widgets.html b/tests/visual/compound/dialog_widgets.html index f09cd16ac..0f6396d9d 100644 --- a/tests/visual/compound/dialog_widgets.html +++ b/tests/visual/compound/dialog_widgets.html @@ -35,7 +35,7 @@ $( "#autocomplete" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ] }); - $( "button" ).button().click(function() { + $( "button" ).button().on( "click", function() { $( "#dialog2" ).dialog( "open" ); }); $( "#datepicker" ).datepicker(); diff --git a/tests/visual/dialog/animated.html b/tests/visual/dialog/animated.html index 06c46fc86..2bb0b398b 100644 --- a/tests/visual/dialog/animated.html +++ b/tests/visual/dialog/animated.html @@ -31,7 +31,7 @@ modal: true }); - $( "#opener" ).click(function() { + $( "#opener" ).on( "click", function() { $( "#dialog" ).dialog( "open" ); }); }); diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 8b17a3389..59844c6a9 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -61,15 +61,15 @@ width: 600 }); - $( "#open-dialog" ).click(function() { + $( "#open-dialog" ).on( "click", function() { dialog.dialog( "open" ); }); - $( "#open-datepicker" ).click(function() { + $( "#open-datepicker" ).on( "click", function() { datepickerDialog.dialog( "open" ); }); - $( "#open-autocomplete" ).click(function() { + $( "#open-autocomplete" ).on( "click", function() { autocompleteDialog.dialog( "open" ); }); @@ -85,7 +85,7 @@ ] }); - $( "#destroy-dialog" ).click(function() { + $( "#destroy-dialog" ).on( "click", function() { dialog.dialog( "destroy" ).show(); $( this ).remove(); }); diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html index eab41cdbe..42d40f1f4 100644 --- a/tests/visual/dialog/form.html +++ b/tests/visual/dialog/form.html @@ -23,11 +23,11 @@ modal: true }); - $( "#open-form" ).click(function() { + $( "#open-form" ).on( "click", function() { $( "#form-dialog" ).dialog( "open" ); }); - $( "#open-prompt" ).click(function() { + $( "#open-prompt" ).on( "click", function() { $( "#prompt-dialog" ).dialog( "open" ); }); }); diff --git a/tests/visual/dialog/performance.html b/tests/visual/dialog/performance.html index 37ff93238..e01098ad1 100644 --- a/tests/visual/dialog/performance.html +++ b/tests/visual/dialog/performance.html @@ -26,7 +26,7 @@ }); $( "<li>Create: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" ); - $( "#opener" ).click(function() { + $( "#opener" ).on( "click", function() { start = $.now(); $( "#dialog" ).dialog( "open" ); $( "<li>Open: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" ); diff --git a/tests/visual/draggable/replaced.html b/tests/visual/draggable/replaced.html index 9b5471694..f343eea28 100644 --- a/tests/visual/draggable/replaced.html +++ b/tests/visual/draggable/replaced.html @@ -13,7 +13,7 @@ $(function() { $( "#draggable" ) .draggable() - .bind( "mousedown", function() { + .on( "mousedown", function() { $( this ).html( "<div>replaced</div>" ); }); }); diff --git a/tests/visual/effects/clip.html b/tests/visual/effects/clip.html index f56f54189..b8ede414b 100644 --- a/tests/visual/effects/clip.html +++ b/tests/visual/effects/clip.html @@ -12,14 +12,14 @@ var target = $( ".target" ), duration = 2000; - $( ".toggle" ).click(function( event ) { + $( ".toggle" ).on( "click", function( event ) { event.preventDefault(); target.toggle( "clip", { direction: "horizontal" }, duration ); }); - $( ".effect-toggle" ).click(function( event ) { + $( ".effect-toggle" ).on( "click", function( event ) { event.preventDefault(); target.effect( "clip", { direction: "vertical", @@ -27,7 +27,7 @@ }, duration ); }); - $( ".effect-default" ).click(function( event ) { + $( ".effect-default" ).on( "click", function( event ) { event.preventDefault(); target.effect( "clip", { direction: "vertical" diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js index f0963a99d..114dcc2a6 100644 --- a/tests/visual/effects/effects.js +++ b/tests/visual/effects/effects.js @@ -8,7 +8,7 @@ function effect( elem, name, options ) { easing: "easeOutQuint" }); - $( elem ).click(function() { + $( elem ).on( "click", function() { $( this ) .addClass( "current" ) // delaying the initial animation makes sure that the queue stays in tact @@ -21,7 +21,7 @@ function effect( elem, name, options ) { }); } -$( "#hide" ).click(function() { +$( "#hide" ).on( "click", function() { $( this ) .addClass( "current" ) .hide( duration ) @@ -60,7 +60,7 @@ effect( "#pulsate", "pulsate", { times: 2 } ); effect( "#puff", "puff", {} ); effect( "#scale", "scale", {} ); effect( "#size", "size", {} ); -$( "#sizeToggle" ).click(function() { +$( "#sizeToggle" ).on( "click", function() { var options = { to: { width: 300, height: 300 } }; $( this ) .addClass( "current" ) @@ -71,7 +71,7 @@ $( "#sizeToggle" ).click(function() { }); }); -$( "#shake" ).click(function() { +$( "#shake" ).on( "click", function() { $( this ) .addClass( "current" ) .effect( "shake", {}, 100, function() { @@ -84,7 +84,7 @@ effect( "#slideUp", "slide", { direction: "up" } ); effect( "#slideLeft", "slide", { direction: "left" } ); effect( "#slideRight", "slide", { direction: "right" } ); -$( "#transfer" ).click(function() { +$( "#transfer" ).on( "click", function() { $( this ) .addClass( "current" ) .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { @@ -92,15 +92,15 @@ $( "#transfer" ).click(function() { }); }); -$( "#addClass" ).click(function() { +$( "#addClass" ).on( "click", function() { $( this ).addClass( "current", duration, function() { $( this ).removeClass( "current" ); }); }); -$( "#removeClass" ).click(function() { +$( "#removeClass" ).on( "click", function() { $( this ).addClass( "current" ).removeClass( "current", duration ); }); -$( "#toggleClass" ).click(function() { +$( "#toggleClass" ).on( "click", function() { $( this ).toggleClass( "current", duration ); }); diff --git a/tests/visual/effects/scale.html b/tests/visual/effects/scale.html index 648a7027b..0723d9458 100644 --- a/tests/visual/effects/scale.html +++ b/tests/visual/effects/scale.html @@ -21,12 +21,12 @@ total *= this.options.length; }); - opts.change( doAnim ); - doer.click( doAnim ); - $( "#cyclePrev" ).click(function() { + opts.on( "change", doAnim ); + doer.on( "click", doAnim ); + $( "#cyclePrev" ).on( "click", function() { cycle( -1 ); }); - $( "#cycleNext" ).click(function() { + $( "#cycleNext" ).on( "click", function() { cycle( 1 ); }); diff --git a/tests/visual/effects/shake.html b/tests/visual/effects/shake.html index 595412b2b..29159e39d 100644 --- a/tests/visual/effects/shake.html +++ b/tests/visual/effects/shake.html @@ -10,7 +10,7 @@ <script src="../../../ui/effect-shake.js"></script> <script> $(function() { - $( "#btn" ).click(function() { + $( "#btn" ).on( "click", function() { $( ".shake" ).effect( "shake", { duration: +$( "#duration" ).val(), mode: "toggle" diff --git a/tests/visual/index.html b/tests/visual/index.html index 0c9b14da8..4979921a4 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -69,6 +69,11 @@ <li><a href="selectmenu/selectmenu.html">General</a></li> </ul> + <h2>Slider</h2> + <ul> + <li><a href="slider/range_slider.html">Range slider</a></li> + </ul> + <h2>Tooltip</h2> <ul> <li><a href="tooltip/tooltip.html">General</a></li> diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index d9c7adb85..70a9c40e5 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -54,17 +54,17 @@ drag: function() { position(); } }); - $( "#within" ).click(function() { + $( "#within" ).on( "click", function() { within = within.is( ".demo" ) ? $( window ) : $( ".demo" ); position(); }); - $( "#margin" ).click(function() { + $( "#margin" ).on( "click", function() { positionable.toggleClass( "extra-margin" ); position(); }); - $( "select, input" ).bind( "click keyup change", function() { position(); } ); + $( "select, input" ).on( "click keyup change", function() { position(); } ); position(); }); diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index 97682c628..988451026 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -64,7 +64,7 @@ using: using }; }; - $( document ).bind( "mousemove", function( event ) { + $( document ).on( "mousemove", function( event ) { element.position( positionWithOffset( event.pageX - targetOffset.left, event.pageY - targetOffset.top ) ); oppositeElement.position( positionWithOffset( diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html index 5ccfc8f63..f91894710 100644 --- a/tests/visual/selectmenu/selectmenu.html +++ b/tests/visual/selectmenu/selectmenu.html @@ -34,34 +34,34 @@ }); eventsSelectmenu.show(); - $("#destroy").click( function() { + $("#destroy").on( "click", function() { eventsSelectmenu.selectmenu("destroy"); return false; }); - $("#refresh_add").click( function() { + $("#refresh_add").on( "click", function() { eventsSelectmenu.append('<option value="fastsound">Speed of light</option>'); eventsSelectmenu.selectmenu("refresh"); return false; }); - $("#refresh_selected").click( function() { + $("#refresh_selected").on( "click", function() { eventsSelectmenu[0].selectedIndex = 0; eventsSelectmenu.selectmenu("refresh"); return false; }); - $("#refresh").click( function() { + $("#refresh").on( "click", function() { eventsSelectmenu.selectmenu("refresh"); return false; }); - $("#open").click( function() { + $("#open").on( "click", function() { eventsSelectmenu.selectmenu("open"); return false; }); - $("#close").click( function() { + $("#close").on( "click", function() { eventsSelectmenu.selectmenu("close"); return false; }); @@ -70,7 +70,7 @@ $('#disabled1, #disabled2, #disabled3').selectmenu(); var disabled4 = $('#disabled4').selectmenu(); - $("#disable_select").bind("click", function() { + $("#disable_select").on("click", function() { if (disable_select) { disable_select = false; disabled4.selectmenu("disable"); @@ -82,7 +82,7 @@ return false; }); - $("#disable_option").bind("click", function() { + $("#disable_option").on("click", function() { if (disable_option) { disable_option = false; disabled4.find("option:eq(0)").attr("disabled", "disabled"); @@ -94,7 +94,7 @@ return false; }); - $("#disable_optgroup").bind("click", function() { + $("#disable_optgroup").on("click", function() { if (disable_optgroup) { disable_optgroup = false; disabled4.find("optgroup:eq(0)").attr("disabled", "disabled"); diff --git a/tests/visual/slider/range_slider.html b/tests/visual/slider/range_slider.html new file mode 100644 index 000000000..2b041f377 --- /dev/null +++ b/tests/visual/slider/range_slider.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <title>jQuery UI Slider - Range slider</title> + <link rel="stylesheet" href="../../../themes/base/all.css"> + <style> + #wrapper { + font-family: Arial; + width: 500px; + margin: 20px auto; + } + </style> + <script src="../../../external/jquery/jquery.js"></script> + <script src="../../../ui/core.js"></script> + <script src="../../../ui/widget.js"></script> + <script src="../../../ui/mouse.js"></script> + <script src="../../../ui/slider.js"></script> +</head> +<body> +<div id="wrapper"> + <h1>Range Slider</h1> + <h3>When set both values of range slider to the maximum, slider should not lock</h3> + <div id="slider"></div> + <br> + <button id="set-max-values">set values to max</button> + <button id="set-min-values">set values to min</button> +</div> + +<script> + var el = $( "#slider" ).slider({ + range: true, + min: 0, + max: 100, + values: [ 0, 50 ] + }); + + $( "#set-max-values" ).on( "click", function() { + el.slider( "option", { values: [ 100, 100 ] } ); + }); + + $( "#set-min-values" ).on( "click", function() { + el.slider( "option", { values: [ 0, 0 ] } ); + }); +</script> +</body> +</html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 8d5364d78..c0ba7a11c 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-corner-all ui-widget-header" + } }); $( "#right1" ).tooltip({ - tooltipClass: "ui-state-error" + classes: { + "ui-tooltip": "ui-corner-all 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" @@ -94,8 +100,8 @@ show: { delay: 500 } - }).click(function() { - $( "#focus-on-me" ).focus(); + }).on( "click", function() { + $( "#focus-on-me" ).trigger( "focus" ); }); }); </script> |