From bde431bb449b1d957d4e0b736111ff342f2a919d Mon Sep 17 00:00:00 2001 From: Scott González Date: Tue, 7 Apr 2015 10:55:52 -0400 Subject: Tests: Rename files Ref gh-1528 --- tests/unit/menu/common.js | 29 ++ tests/unit/menu/core.js | 76 ++++ tests/unit/menu/events.js | 737 +++++++++++++++++++++++++++++++++++ tests/unit/menu/helper.js | 36 ++ tests/unit/menu/menu_common.js | 29 -- tests/unit/menu/menu_core.js | 76 ---- tests/unit/menu/menu_events.js | 737 ----------------------------------- tests/unit/menu/menu_methods.js | 116 ------ tests/unit/menu/menu_options.js | 125 ------ tests/unit/menu/menu_test_helpers.js | 36 -- tests/unit/menu/methods.js | 116 ++++++ tests/unit/menu/options.js | 125 ++++++ 12 files changed, 1119 insertions(+), 1119 deletions(-) create mode 100644 tests/unit/menu/common.js create mode 100644 tests/unit/menu/core.js create mode 100644 tests/unit/menu/events.js create mode 100644 tests/unit/menu/helper.js delete mode 100644 tests/unit/menu/menu_common.js delete mode 100644 tests/unit/menu/menu_core.js delete mode 100644 tests/unit/menu/menu_events.js delete mode 100644 tests/unit/menu/menu_methods.js delete mode 100644 tests/unit/menu/menu_options.js delete mode 100644 tests/unit/menu/menu_test_helpers.js create mode 100644 tests/unit/menu/methods.js create mode 100644 tests/unit/menu/options.js (limited to 'tests/unit/menu') diff --git a/tests/unit/menu/common.js b/tests/unit/menu/common.js new file mode 100644 index 000000000..0f0a04de8 --- /dev/null +++ b/tests/unit/menu/common.js @@ -0,0 +1,29 @@ +define( [ + "lib/common", + "ui/menu" +], function( common ) { + +common.testWidget( "menu", { + defaults: { + classes: {}, + disabled: false, + icons: { + submenu: "ui-icon-caret-1-e" + }, + items: "> *", + menus: "ul", + position: { + my: "left top", + at: "right top" + }, + role: "menu", + + // callbacks + blur: null, + create: null, + focus: null, + select: null + } +}); + +} ); diff --git a/tests/unit/menu/core.js b/tests/unit/menu/core.js new file mode 100644 index 000000000..08644c31f --- /dev/null +++ b/tests/unit/menu/core.js @@ -0,0 +1,76 @@ +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { + +module( "menu: core" ); + +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 () { + expect( 4 ); + var element = $( "#menu1" ).menu(); + + equal( element.attr( "role" ), "menu", "main role" ); + ok( !element.attr( "aria-activedescendant" ), "aria-activedescendant not set" ); + + element.menu( "focus", $.Event(), element.children().eq( -2 ) ); + equal( element.attr( "aria-activedescendant" ), "testID1", "aria-activedescendant from existing id" ); + + element.menu( "focus", $.Event(), element.children().eq( 0 ) ); + ok( /^ui-id-\d+$/.test( element.attr( "aria-activedescendant" ) ), "aria-activedescendant from generated id" ); + + // Item roles are tested in the role option tests +}); + +asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", function() { + expect( 1 ); + var element = $( "#menu1" ).menu(); + + $( "", { id: "test9044" } ).appendTo( "body" ); + + $( "#testID1" ).bind( "click", function() { + $( "#test9044" ).focus(); + }); + + testHelper.click( element, "3" ); + setTimeout( function() { + equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" ); + $( "#test9044" ).remove(); + start(); + }); +}); + +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 ), + wrapper = firstChild.children( ".ui-menu-item-wrapper" ); + + element.menu( "focus", null, firstChild ); + wrapper.addClass( "ui-state-active" ); + setTimeout( function() { + assert.hasClasses( wrapper, "ui-state-active" ); + start(); + }); +}); + +} ); diff --git a/tests/unit/menu/events.js b/tests/unit/menu/events.js new file mode 100644 index 000000000..5cac3e737 --- /dev/null +++ b/tests/unit/menu/events.js @@ -0,0 +1,737 @@ +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { + +var log = testHelper.log, + logOutput = testHelper.logOutput, + click = testHelper.click; + +module( "menu: events", { + setup: function() { + testHelper.clearLog(); + } +}); + +test( "handle click on menu", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ + select: function() { + log(); + } + }); + log( "click", true ); + click( element, "1" ); + log( "afterclick" ); + click( element, "2" ); + click( element, "3" ); + click( element, "1" ); + equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." ); +}); + +test( "handle click on custom item menu", function() { + expect( 1 ); + var element = $( "#menu5" ).menu({ + select: function() { + log(); + }, + menus: ".menu" + }); + log( "click", true ); + click( element, "1" ); + log( "afterclick" ); + click( element, "2" ); + click( element, "3" ); + click( element, "1" ); + equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." ); +}); + +asyncTest( "handle blur", function() { + expect( 1 ); + var blurHandled = false, + element = $( "#menu1" ).menu({ + blur: function( event ) { + // Ignore duplicate blur event fired by IE + if ( !blurHandled ) { + blurHandled = true; + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + } + }); + + click( element, "1" ); + setTimeout(function() { + element.blur(); + setTimeout(function() { + start(); + }, 350 ); + }); +}); + +asyncTest( "handle blur via click outside", function() { + expect( 1 ); + var blurHandled = false, + element = $( "#menu1" ).menu({ + blur: function( event ) { + // Ignore duplicate blur event fired by IE + if ( !blurHandled ) { + blurHandled = true; + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + } + }); + + click( element, "1" ); + setTimeout(function() { + $( "", { id: "remove"} ).appendTo( "body" ).trigger( "click" ); + setTimeout(function() { + start(); + }, 350 ); + }); +}); + +asyncTest( "handle focus of menu with active item", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); + } + }); + + log( "focus", true ); + element[ 0 ].focus(); + setTimeout(function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element[ 0 ].blur(); + setTimeout(function() { + element[ 0 ].focus(); + setTimeout(function() { + equal( logOutput(), "focus,0,1,2,2", "current active item remains active" ); + start(); + }); + }); + }); +}); + +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, 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, 25 ); + } + function menumouseleave3() { + equal( element.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); + element.trigger( "mouseleave" ); + 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, 25 ); +}); + +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, 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, 25 ); + } + function menumouseleave3() { + equal( element.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); + element.trigger( "mouseleave" ); + 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, 25 ); +}); + +asyncTest( "handle keyboard navigation on menu without scroll and without submenus", function() { + expect( 12 ); + var element = $( "#menu1" ).menu({ + select: function( event, ui ) { + log( $( ui.item[ 0 ] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); + } + }); + + log( "keydown", true ); + element[ 0 ].focus(); + setTimeout(function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal( logOutput(), "keydown,1", "Keydown UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal( logOutput(), "keydown", "Keydown RIGHT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown,4", "Keydown PAGE_DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); + equal( logOutput(), "keydown,4", "Keydown END" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); + equal( logOutput(), "keydown,0", "Keydown HOME" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( logOutput(), "keydown", "Keydown ESCAPE (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" ); + + start(); + }); +}); + +asyncTest( "handle keyboard navigation on menu without scroll and with submenus", function() { + expect( 16 ); + var element = $( "#menu2" ).menu({ + select: function( event, ui ) { + log( $( ui.item[0] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); + setTimeout( menukeyboard1 ); + }); + element.focus(); + + function menukeyboard1() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal( logOutput(), "keydown,1,0", "Keydown UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + + setTimeout(function() { + equal( logOutput(), "keydown,1,2,3,4,0", "Keydown RIGHT (open submenu)" ); + setTimeout( menukeyboard2 ); + } ); + } + + function menukeyboard2() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown,4", "Keydown LEFT (close submenu)" ); + + // re-open submenu + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + setTimeout( menukeyboard3 ); + } + + function menukeyboard3() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown,2", "Keydown PAGE_DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); + equal( logOutput(), "keydown,2", "Keydown END" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); + equal( logOutput(), "keydown,0", "Keydown HOME" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( logOutput(), "keydown,4", "Keydown ESCAPE (close submenu)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.SPACE } ); + setTimeout( menukeyboard4 ); + } + + function menukeyboard4() { + equal( logOutput(), "keydown,0", "Keydown SPACE (open submenu)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( logOutput(), "keydown,4", "Keydown ESCAPE (close submenu)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + setTimeout( function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + setTimeout( function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + setTimeout( menukeyboard6 ); + } ); + } ); + } + + function menukeyboard6() { + equal( logOutput(), "keydown,Ada", "Keydown ENTER (open submenu)" ); + start(); + } +}); + +asyncTest( "handle keyboard navigation on menu with scroll and without submenus", function() { + expect( 14 ); + var element = $( "#menu3" ).menu({ + select: function( event, ui ) { + log( $( ui.item[ 0 ] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); + } + }); + + log( "keydown", true ); + element[ 0 ].focus(); + setTimeout(function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal( logOutput(), "keydown,1,0", "Keydown UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + equal( logOutput(), "keydown", "Keydown RIGHT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown,34", "Keydown PAGE_DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown,17", "Keydown PAGE_UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); + equal( logOutput(), "keydown,37", "Keydown END" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); + equal( logOutput(), "keydown,0", "Keydown HOME" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( logOutput(), "keydown", "Keydown ESCAPE (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" ); + + start(); + }); +}); + +asyncTest( "handle keyboard navigation on menu with scroll and with submenus", function() { + expect( 14 ); + var element = $( "#menu4" ).menu({ + select: function( event, ui ) { + log( $( ui.item[ 0 ] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index()); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); + setTimeout( menukeyboard1 ); + }); + element.focus(); + + function menukeyboard1() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); + equal( logOutput(), "keydown,1,0", "Keydown UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + + setTimeout( function() { + equal( logOutput(), "keydown,1,0", "Keydown RIGHT (open submenu)" ); + }, 50 ); + setTimeout( menukeyboard2, 50 ); + } + + function menukeyboard2() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown,1", "Keydown LEFT (close submenu)" ); + + // re-open submenu + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + setTimeout( menukeyboard3, 50 ); + } + + function menukeyboard3() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + equal( logOutput(), "keydown,27", "Keydown PAGE_DOWN" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown,10", "Keydown PAGE_UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); + equal( logOutput(), "keydown,27", "Keydown END" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); + equal( logOutput(), "keydown,0", "Keydown HOME" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( logOutput(), "keydown,1", "Keydown ESCAPE (close submenu)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + setTimeout( menukeyboard4, 50 ); + } + + function menukeyboard4() { + equal( logOutput(), "keydown,0", "Keydown ENTER (open submenu)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER (select item)" ); + + start(); + } +}); + +asyncTest( "handle keyboard navigation and mouse click on menu with disabled items", function() { + expect( 6 ); + var element = $( "#menu6" ).menu({ + select: function( event, ui ) { + log( $( ui.item[0] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index()); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( logOutput(), "keydown,1", "Keydown focus but not select disabled item" ); + setTimeout( menukeyboard1, 50 ); + }); + element.focus(); + + function menukeyboard1() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,2,3,4", "Keydown focus disabled item with submenu" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); + equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); + + setTimeout( function() { + equal( logOutput(), "keydown", "Keydown RIGHT (no effect on disabled sub-menu)" ); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + + setTimeout( function() { + equal( logOutput(), "keydown", "Keydown ENTER (no effect on disabled sub-menu)" ); + log( "click", true ); + click( element, "1" ); + equal( logOutput(), "click", "Click disabled item (no effect)" ); + start(); + }, 50 ); + }, 50 ); + } +}); + +asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() { + expect( 2 ); + var element = $( "#menu7" ).menu({ + items: "> :not('.ui-menu-group')", + select: function( event, ui ) { + log( $( ui.item[0] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" ); + setTimeout( menukeyboard1, 50 ); + }); + element.focus(); + + function menukeyboard1() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" ); + start(); + } +}); + +asyncTest( "handle keyboard navigation with spelling of menu items", function() { + expect( 3 ); + var element = $( "#menu2" ).menu({ + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: 65 } ); + element.simulate( "keydown", { keyCode: 68 } ); + element.simulate( "keydown", { keyCode: 68 } ); + equal( logOutput(), "keydown,0,1,3", "Keydown focus Addyston by spelling the first 3 letters" ); + element.simulate( "keydown", { keyCode: 68 } ); + equal( logOutput(), "keydown,0,1,3,4", "Keydown focus Delphi by repeating the 'd' again" ); + element.simulate( "keydown", { keyCode: 83 } ); + equal( logOutput(), "keydown,0,1,3,4,5", "Keydown focus Saarland ignoring leading space" ); + start(); + }); + element[ 0 ].focus(); +}); + +asyncTest( "Keep focus on selected item (see #10644)", function() { + expect( 1 ); + var element = $( "#menu2" ).menu({ + focus: function( event ) { + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: 65 } ); + element.simulate( "keydown", { keyCode: 68 } ); + element.simulate( "keydown", { keyCode: 68 } ); + element.simulate( "keydown", { keyCode: 89 } ); + element.simulate( "keydown", { keyCode: 83 } ); + equal( logOutput(), "keydown,0,1,3,3,3", + "Focus stays on 'Addyston', even after other options are eliminated" ); + start(); + }); + element[ 0 ].focus(); +}); + +test( "#9469: Stopping propagation in a select event should not suppress subsequent select events.", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ + select: function( event ) { + log(); + event.stopPropagation(); + } + }); + + click( element, "1" ); + click( element, "2" ); + + equal( logOutput(), "1,2", "Both select events were not triggered." ); +}); + +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" ); + assert.hasClasses( ui.item, "ui-menu-item" ); + equal( ui.item.text(), "-Saarland", "element has correct text" ); + } + }); + + setTimeout(function() { + element.menu( "widget" ).simulate( "keydown", { keyCode: "-".charCodeAt( 0 ) } ); + start(); + }); +}); + +} ); diff --git a/tests/unit/menu/helper.js b/tests/unit/menu/helper.js new file mode 100644 index 000000000..445663985 --- /dev/null +++ b/tests/unit/menu/helper.js @@ -0,0 +1,36 @@ +define( [ + "jquery", + "lib/helper" +], function( $, helper ) { + +var lastItem, + log = []; + +return $.extend( helper, { + log: function( message, clear ) { + if ( clear ) { + log.length = 0; + } + if ( message === undefined ) { + message = lastItem; + } + log.push( $.trim( message ) ); + }, + + logOutput: function() { + return log.join( "," ); + }, + + clearLog: function() { + log.length = 0; + }, + + click: function( menu, item ) { + lastItem = item; + menu.children( ":eq(" + item + ")" ) + .children( ".ui-menu-item-wrapper" ) + .trigger( "click" ); + } +} ); + +} ); diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js deleted file mode 100644 index 0f0a04de8..000000000 --- a/tests/unit/menu/menu_common.js +++ /dev/null @@ -1,29 +0,0 @@ -define( [ - "lib/common", - "ui/menu" -], function( common ) { - -common.testWidget( "menu", { - defaults: { - classes: {}, - disabled: false, - icons: { - submenu: "ui-icon-caret-1-e" - }, - items: "> *", - menus: "ul", - position: { - my: "left top", - at: "right top" - }, - role: "menu", - - // callbacks - blur: null, - create: null, - focus: null, - select: null - } -}); - -} ); diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js deleted file mode 100644 index 7ff127009..000000000 --- a/tests/unit/menu/menu_core.js +++ /dev/null @@ -1,76 +0,0 @@ -define( [ - "jquery", - "./menu_test_helpers", - "ui/menu" -], function( $, testHelper ) { - -module( "menu: core" ); - -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 () { - expect( 4 ); - var element = $( "#menu1" ).menu(); - - equal( element.attr( "role" ), "menu", "main role" ); - ok( !element.attr( "aria-activedescendant" ), "aria-activedescendant not set" ); - - element.menu( "focus", $.Event(), element.children().eq( -2 ) ); - equal( element.attr( "aria-activedescendant" ), "testID1", "aria-activedescendant from existing id" ); - - element.menu( "focus", $.Event(), element.children().eq( 0 ) ); - ok( /^ui-id-\d+$/.test( element.attr( "aria-activedescendant" ) ), "aria-activedescendant from generated id" ); - - // Item roles are tested in the role option tests -}); - -asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", function() { - expect( 1 ); - var element = $( "#menu1" ).menu(); - - $( "", { id: "test9044" } ).appendTo( "body" ); - - $( "#testID1" ).bind( "click", function() { - $( "#test9044" ).focus(); - }); - - testHelper.click( element, "3" ); - setTimeout( function() { - equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" ); - $( "#test9044" ).remove(); - start(); - }); -}); - -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 ), - wrapper = firstChild.children( ".ui-menu-item-wrapper" ); - - element.menu( "focus", null, firstChild ); - wrapper.addClass( "ui-state-active" ); - setTimeout( function() { - assert.hasClasses( wrapper, "ui-state-active" ); - start(); - }); -}); - -} ); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js deleted file mode 100644 index 9e0e0a2b7..000000000 --- a/tests/unit/menu/menu_events.js +++ /dev/null @@ -1,737 +0,0 @@ -define( [ - "jquery", - "./menu_test_helpers", - "ui/menu" -], function( $, testHelper ) { - -var log = testHelper.log, - logOutput = testHelper.logOutput, - click = testHelper.click; - -module( "menu: events", { - setup: function() { - testHelper.clearLog(); - } -}); - -test( "handle click on menu", function() { - expect( 1 ); - var element = $( "#menu1" ).menu({ - select: function() { - log(); - } - }); - log( "click", true ); - click( element, "1" ); - log( "afterclick" ); - click( element, "2" ); - click( element, "3" ); - click( element, "1" ); - equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." ); -}); - -test( "handle click on custom item menu", function() { - expect( 1 ); - var element = $( "#menu5" ).menu({ - select: function() { - log(); - }, - menus: ".menu" - }); - log( "click", true ); - click( element, "1" ); - log( "afterclick" ); - click( element, "2" ); - click( element, "3" ); - click( element, "1" ); - equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." ); -}); - -asyncTest( "handle blur", function() { - expect( 1 ); - var blurHandled = false, - element = $( "#menu1" ).menu({ - blur: function( event ) { - // Ignore duplicate blur event fired by IE - if ( !blurHandled ) { - blurHandled = true; - equal( event.type, "menublur", "blur event.type is 'menublur'" ); - } - } - }); - - click( element, "1" ); - setTimeout(function() { - element.blur(); - setTimeout(function() { - start(); - }, 350 ); - }); -}); - -asyncTest( "handle blur via click outside", function() { - expect( 1 ); - var blurHandled = false, - element = $( "#menu1" ).menu({ - blur: function( event ) { - // Ignore duplicate blur event fired by IE - if ( !blurHandled ) { - blurHandled = true; - equal( event.type, "menublur", "blur event.type is 'menublur'" ); - } - } - }); - - click( element, "1" ); - setTimeout(function() { - $( "", { id: "remove"} ).appendTo( "body" ).trigger( "click" ); - setTimeout(function() { - start(); - }, 350 ); - }); -}); - -asyncTest( "handle focus of menu with active item", function() { - expect( 1 ); - var element = $( "#menu1" ).menu({ - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); - } - }); - - log( "focus", true ); - element[ 0 ].focus(); - setTimeout(function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element[ 0 ].blur(); - setTimeout(function() { - element[ 0 ].focus(); - setTimeout(function() { - equal( logOutput(), "focus,0,1,2,2", "current active item remains active" ); - start(); - }); - }); - }); -}); - -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, 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, 25 ); - } - function menumouseleave3() { - equal( element.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); - element.trigger( "mouseleave" ); - 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, 25 ); -}); - -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, 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, 25 ); - } - function menumouseleave3() { - equal( element.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); - element.trigger( "mouseleave" ); - 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, 25 ); -}); - -asyncTest( "handle keyboard navigation on menu without scroll and without submenus", function() { - expect( 12 ); - var element = $( "#menu1" ).menu({ - select: function( event, ui ) { - log( $( ui.item[ 0 ] ).text() ); - }, - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); - } - }); - - log( "keydown", true ); - element[ 0 ].focus(); - setTimeout(function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal( logOutput(), "keydown,1", "Keydown UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - equal( logOutput(), "keydown", "Keydown RIGHT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,4", "Keydown PAGE_DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); - equal( logOutput(), "keydown,4", "Keydown END" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); - equal( logOutput(), "keydown,0", "Keydown HOME" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - equal( logOutput(), "keydown", "Keydown ESCAPE (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" ); - - start(); - }); -}); - -asyncTest( "handle keyboard navigation on menu without scroll and with submenus", function() { - expect( 16 ); - var element = $( "#menu2" ).menu({ - select: function( event, ui ) { - log( $( ui.item[0] ).text() ); - }, - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); - } - }); - - log( "keydown", true ); - element.one( "menufocus", function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); - setTimeout( menukeyboard1 ); - }); - element.focus(); - - function menukeyboard1() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal( logOutput(), "keydown,1,0", "Keydown UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - - setTimeout(function() { - equal( logOutput(), "keydown,1,2,3,4,0", "Keydown RIGHT (open submenu)" ); - setTimeout( menukeyboard2 ); - } ); - } - - function menukeyboard2() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown,4", "Keydown LEFT (close submenu)" ); - - // re-open submenu - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - setTimeout( menukeyboard3 ); - } - - function menukeyboard3() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,2", "Keydown PAGE_DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); - equal( logOutput(), "keydown,2", "Keydown END" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); - equal( logOutput(), "keydown,0", "Keydown HOME" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - equal( logOutput(), "keydown,4", "Keydown ESCAPE (close submenu)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.SPACE } ); - setTimeout( menukeyboard4 ); - } - - function menukeyboard4() { - equal( logOutput(), "keydown,0", "Keydown SPACE (open submenu)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - equal( logOutput(), "keydown,4", "Keydown ESCAPE (close submenu)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - setTimeout( function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - setTimeout( function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - setTimeout( menukeyboard6 ); - } ); - } ); - } - - function menukeyboard6() { - equal( logOutput(), "keydown,Ada", "Keydown ENTER (open submenu)" ); - start(); - } -}); - -asyncTest( "handle keyboard navigation on menu with scroll and without submenus", function() { - expect( 14 ); - var element = $( "#menu3" ).menu({ - select: function( event, ui ) { - log( $( ui.item[ 0 ] ).text() ); - }, - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); - } - }); - - log( "keydown", true ); - element[ 0 ].focus(); - setTimeout(function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal( logOutput(), "keydown,1,0", "Keydown UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - equal( logOutput(), "keydown", "Keydown RIGHT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,34", "Keydown PAGE_DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,17", "Keydown PAGE_UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown", "Keydown PAGE_UP (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); - equal( logOutput(), "keydown,37", "Keydown END" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown", "Keydown PAGE_DOWN (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); - equal( logOutput(), "keydown,0", "Keydown HOME" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - equal( logOutput(), "keydown", "Keydown ESCAPE (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" ); - - start(); - }); -}); - -asyncTest( "handle keyboard navigation on menu with scroll and with submenus", function() { - expect( 14 ); - var element = $( "#menu4" ).menu({ - select: function( event, ui ) { - log( $( ui.item[ 0 ] ).text() ); - }, - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index()); - } - }); - - log( "keydown", true ); - element.one( "menufocus", function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); - setTimeout( menukeyboard1 ); - }); - element.focus(); - - function menukeyboard1() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal( logOutput(), "keydown,1,0", "Keydown UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - - setTimeout( function() { - equal( logOutput(), "keydown,1,0", "Keydown RIGHT (open submenu)" ); - }, 50 ); - setTimeout( menukeyboard2, 50 ); - } - - function menukeyboard2() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown,1", "Keydown LEFT (close submenu)" ); - - // re-open submenu - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - setTimeout( menukeyboard3, 50 ); - } - - function menukeyboard3() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,17", "Keydown PAGE_DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,27", "Keydown PAGE_DOWN" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,10", "Keydown PAGE_UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,0", "Keydown PAGE_UP" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.END } ); - equal( logOutput(), "keydown,27", "Keydown END" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); - equal( logOutput(), "keydown,0", "Keydown HOME" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); - equal( logOutput(), "keydown,1", "Keydown ESCAPE (close submenu)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - setTimeout( menukeyboard4, 50 ); - } - - function menukeyboard4() { - equal( logOutput(), "keydown,0", "Keydown ENTER (open submenu)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER (select item)" ); - - start(); - } -}); - -asyncTest( "handle keyboard navigation and mouse click on menu with disabled items", function() { - expect( 6 ); - var element = $( "#menu6" ).menu({ - select: function( event, ui ) { - log( $( ui.item[0] ).text() ); - }, - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index()); - } - }); - - log( "keydown", true ); - element.one( "menufocus", function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - equal( logOutput(), "keydown,1", "Keydown focus but not select disabled item" ); - setTimeout( menukeyboard1, 50 ); - }); - element.focus(); - - function menukeyboard1() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,2,3,4", "Keydown focus disabled item with submenu" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal( logOutput(), "keydown", "Keydown LEFT (no effect)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - - setTimeout( function() { - equal( logOutput(), "keydown", "Keydown RIGHT (no effect on disabled sub-menu)" ); - - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - - setTimeout( function() { - equal( logOutput(), "keydown", "Keydown ENTER (no effect on disabled sub-menu)" ); - log( "click", true ); - click( element, "1" ); - equal( logOutput(), "click", "Click disabled item (no effect)" ); - start(); - }, 50 ); - }, 50 ); - } -}); - -asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() { - expect( 2 ); - var element = $( "#menu7" ).menu({ - items: "> :not('.ui-menu-group')", - select: function( event, ui ) { - log( $( ui.item[0] ).text() ); - }, - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); - } - }); - - log( "keydown", true ); - element.one( "menufocus", function() { - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); - equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" ); - setTimeout( menukeyboard1, 50 ); - }); - element.focus(); - - function menukeyboard1() { - log( "keydown", true ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" ); - start(); - } -}); - -asyncTest( "handle keyboard navigation with spelling of menu items", function() { - expect( 3 ); - var element = $( "#menu2" ).menu({ - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); - } - }); - - log( "keydown", true ); - element.one( "menufocus", function() { - element.simulate( "keydown", { keyCode: 65 } ); - element.simulate( "keydown", { keyCode: 68 } ); - element.simulate( "keydown", { keyCode: 68 } ); - equal( logOutput(), "keydown,0,1,3", "Keydown focus Addyston by spelling the first 3 letters" ); - element.simulate( "keydown", { keyCode: 68 } ); - equal( logOutput(), "keydown,0,1,3,4", "Keydown focus Delphi by repeating the 'd' again" ); - element.simulate( "keydown", { keyCode: 83 } ); - equal( logOutput(), "keydown,0,1,3,4,5", "Keydown focus Saarland ignoring leading space" ); - start(); - }); - element[ 0 ].focus(); -}); - -asyncTest( "Keep focus on selected item (see #10644)", function() { - expect( 1 ); - var element = $( "#menu2" ).menu({ - focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); - } - }); - - log( "keydown", true ); - element.one( "menufocus", function() { - element.simulate( "keydown", { keyCode: 65 } ); - element.simulate( "keydown", { keyCode: 68 } ); - element.simulate( "keydown", { keyCode: 68 } ); - element.simulate( "keydown", { keyCode: 89 } ); - element.simulate( "keydown", { keyCode: 83 } ); - equal( logOutput(), "keydown,0,1,3,3,3", - "Focus stays on 'Addyston', even after other options are eliminated" ); - start(); - }); - element[ 0 ].focus(); -}); - -test( "#9469: Stopping propagation in a select event should not suppress subsequent select events.", function() { - expect( 1 ); - var element = $( "#menu1" ).menu({ - select: function( event ) { - log(); - event.stopPropagation(); - } - }); - - click( element, "1" ); - click( element, "2" ); - - equal( logOutput(), "1,2", "Both select events were not triggered." ); -}); - -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" ); - assert.hasClasses( ui.item, "ui-menu-item" ); - equal( ui.item.text(), "-Saarland", "element has correct text" ); - } - }); - - setTimeout(function() { - element.menu( "widget" ).simulate( "keydown", { keyCode: "-".charCodeAt( 0 ) } ); - start(); - }); -}); - -} ); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js deleted file mode 100644 index 61be3229f..000000000 --- a/tests/unit/menu/menu_methods.js +++ /dev/null @@ -1,116 +0,0 @@ -define( [ - "jquery", - "./menu_test_helpers", - "ui/menu" -], function( $, testHelper ) { - -var log = testHelper.log, - logOutput = testHelper.logOutput, - click = testHelper.click; - -module( "menu: methods", { - setup: function() { - testHelper.clearLog(); - } -}); - -test( "destroy", function( assert ) { - expect( 2 ); - assert.domEqual( "#menu2", function() { - $( "#menu2" ).menu().menu( "destroy" ); - }); - assert.domEqual( "#menu5", function() { - $( "#menu5").menu().menu( "destroy" ); - }); -}); - -test( "enable/disable", function( assert ) { - expect( 3 ); - var element = $( "#menu1" ).menu({ - select: function() { - log(); - } - }); - element.menu( "disable" ); - assert.hasClasses( element, "ui-state-disabled" ); - log( "click", true ); - click( element, "1" ); - log( "afterclick" ); - element.menu( "enable" ); - assert.lacksClasses( element, "ui-state-disabled" ); - log( "click" ); - click( element, "1" ); - log( "afterclick" ); - equal( logOutput(), "click,afterclick,click,1,afterclick", "Click order not valid." ); -}); - -test( "refresh", function() { - expect( 5 ); - var element = $( "#menu1" ).menu(); - equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); - element.append( "
  • test item
    • " ).menu( "refresh" ); - equal( element.find( ".ui-menu-item" ).length, 6, "Incorrect number of menu items" ); - element.find( ".ui-menu-item:last" ).remove().end().menu( "refresh" ); - equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); - element.append( "
  • ---
    • " ).menu( "refresh" ); - equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); - element.children( ":last" ).remove().end().menu( "refresh" ); - equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); -}); - -test( "refresh submenu", function() { - expect( 2 ); - var element = $( "#menu2" ).menu(); - equal( element.find( "ul:first .ui-menu-item" ).length, 3 ); - element.find( "ul" ).addBack().append( "
  • New Item
    • " ); - element.menu( "refresh" ); - equal( element.find( "ul:first .ui-menu-item" ).length, 4 ); -}); - -test( "refresh icons (see #9377)", function( assert ) { - expect( 3 ); - var element = $( "#menu1" ).menu(); - assert.lacksClasses( element, "ui-menu-icons" ); - element.find( "li:first .ui-menu-item-wrapper" ) - .html( "Save" ); - element.menu( "refresh" ); - - assert.hasClasses( element, "ui-menu-icons" ); - element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" ); - element.menu( "refresh" ); - assert.lacksClasses( element, "ui-menu-icons" ); -}); - -test( "widget", function() { - expect( 2 ); - var element = $( "#menu1" ).menu(), - widgetElement = element.menu( "widget" ); - equal( widgetElement.length, 1, "one element" ); - strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); -}); - -// TODO: test focus method - -// TODO: test blur method - -// TODO: test collapseAll method - -// TODO: test collapse method - -// TODO: test expand method - -// TODO: test next method - -// TODO: test prev method - -// TODO: test isFirstItem method - -// TODO: test isLastItem method - -// TODO: test nextPage method - -// TODO: test prevPage method - -// TODO: test select method - -} ); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js deleted file mode 100644 index 762b057fb..000000000 --- a/tests/unit/menu/menu_options.js +++ /dev/null @@ -1,125 +0,0 @@ -define( [ - "jquery", - "./menu_test_helpers", - "ui/menu" -], function( $, testHelper ) { - -var log = testHelper.log, - logOutput = testHelper.logOutput, - click = testHelper.click; - -module( "menu: options", { - setup: function() { - testHelper.clearLog(); - } -}); - -test( "{ disabled: true }", function( assert ) { - expect( 2 ); - var element = $( "#menu1" ).menu({ - disabled: true, - select: function() { - log(); - } - }); - 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( assert ) { - expect( 2 ); - var element = $( "#menu1" ).menu({ - disabled: false, - select: function() { - log(); - } - }); - 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( assert ) { - expect( 8 ); - var element = $( "#menu2" ).menu(); - 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" ); - 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( assert ) { - expect( 4 ); - var element = $( "#menu2" ).menu({ - icons: { - submenu: "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( 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 ) { - 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", - "tabindex for menu item ("+ item + ")" ); - }); -}); - -test( "{ role: 'listbox' } ", function( assert ) { - var element = $( "#menu1" ).menu({ - role: "listbox" - }), - items = element.find( "li" ); - expect( 2 + 3 * items.length ); - equal( element.attr( "role" ), "listbox" ); - ok( items.length > 0, "number of menu items" ); - items.each(function( 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", - "tabindex for menu item ("+ item + ")" ); - }); -}); - -test( "{ role: null }", function( assert ) { - var element = $( "#menu1" ).menu({ - role: null - }), - items = element.find( "li" ); - expect( 2 + 3 * items.length ); - equal( element.attr( "role" ), null ); - ok( items.length > 0, "number of menu items" ); - items.each(function( item ) { - 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 + ")" ); - }); -}); - -} ); diff --git a/tests/unit/menu/menu_test_helpers.js b/tests/unit/menu/menu_test_helpers.js deleted file mode 100644 index 445663985..000000000 --- a/tests/unit/menu/menu_test_helpers.js +++ /dev/null @@ -1,36 +0,0 @@ -define( [ - "jquery", - "lib/helper" -], function( $, helper ) { - -var lastItem, - log = []; - -return $.extend( helper, { - log: function( message, clear ) { - if ( clear ) { - log.length = 0; - } - if ( message === undefined ) { - message = lastItem; - } - log.push( $.trim( message ) ); - }, - - logOutput: function() { - return log.join( "," ); - }, - - clearLog: function() { - log.length = 0; - }, - - click: function( menu, item ) { - lastItem = item; - menu.children( ":eq(" + item + ")" ) - .children( ".ui-menu-item-wrapper" ) - .trigger( "click" ); - } -} ); - -} ); diff --git a/tests/unit/menu/methods.js b/tests/unit/menu/methods.js new file mode 100644 index 000000000..e322ab214 --- /dev/null +++ b/tests/unit/menu/methods.js @@ -0,0 +1,116 @@ +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { + +var log = testHelper.log, + logOutput = testHelper.logOutput, + click = testHelper.click; + +module( "menu: methods", { + setup: function() { + testHelper.clearLog(); + } +}); + +test( "destroy", function( assert ) { + expect( 2 ); + assert.domEqual( "#menu2", function() { + $( "#menu2" ).menu().menu( "destroy" ); + }); + assert.domEqual( "#menu5", function() { + $( "#menu5").menu().menu( "destroy" ); + }); +}); + +test( "enable/disable", function( assert ) { + expect( 3 ); + var element = $( "#menu1" ).menu({ + select: function() { + log(); + } + }); + element.menu( "disable" ); + assert.hasClasses( element, "ui-state-disabled" ); + log( "click", true ); + click( element, "1" ); + log( "afterclick" ); + element.menu( "enable" ); + assert.lacksClasses( element, "ui-state-disabled" ); + log( "click" ); + click( element, "1" ); + log( "afterclick" ); + equal( logOutput(), "click,afterclick,click,1,afterclick", "Click order not valid." ); +}); + +test( "refresh", function() { + expect( 5 ); + var element = $( "#menu1" ).menu(); + equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); + element.append( "
  • test item
    • " ).menu( "refresh" ); + equal( element.find( ".ui-menu-item" ).length, 6, "Incorrect number of menu items" ); + element.find( ".ui-menu-item:last" ).remove().end().menu( "refresh" ); + equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); + element.append( "
  • ---
    • " ).menu( "refresh" ); + equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); + element.children( ":last" ).remove().end().menu( "refresh" ); + equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); +}); + +test( "refresh submenu", function() { + expect( 2 ); + var element = $( "#menu2" ).menu(); + equal( element.find( "ul:first .ui-menu-item" ).length, 3 ); + element.find( "ul" ).addBack().append( "
  • New Item
    • " ); + element.menu( "refresh" ); + equal( element.find( "ul:first .ui-menu-item" ).length, 4 ); +}); + +test( "refresh icons (see #9377)", function( assert ) { + expect( 3 ); + var element = $( "#menu1" ).menu(); + assert.lacksClasses( element, "ui-menu-icons" ); + element.find( "li:first .ui-menu-item-wrapper" ) + .html( "Save" ); + element.menu( "refresh" ); + + assert.hasClasses( element, "ui-menu-icons" ); + element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" ); + element.menu( "refresh" ); + assert.lacksClasses( element, "ui-menu-icons" ); +}); + +test( "widget", function() { + expect( 2 ); + var element = $( "#menu1" ).menu(), + widgetElement = element.menu( "widget" ); + equal( widgetElement.length, 1, "one element" ); + strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); +}); + +// TODO: test focus method + +// TODO: test blur method + +// TODO: test collapseAll method + +// TODO: test collapse method + +// TODO: test expand method + +// TODO: test next method + +// TODO: test prev method + +// TODO: test isFirstItem method + +// TODO: test isLastItem method + +// TODO: test nextPage method + +// TODO: test prevPage method + +// TODO: test select method + +} ); diff --git a/tests/unit/menu/options.js b/tests/unit/menu/options.js new file mode 100644 index 000000000..8994b026f --- /dev/null +++ b/tests/unit/menu/options.js @@ -0,0 +1,125 @@ +define( [ + "jquery", + "./helper", + "ui/menu" +], function( $, testHelper ) { + +var log = testHelper.log, + logOutput = testHelper.logOutput, + click = testHelper.click; + +module( "menu: options", { + setup: function() { + testHelper.clearLog(); + } +}); + +test( "{ disabled: true }", function( assert ) { + expect( 2 ); + var element = $( "#menu1" ).menu({ + disabled: true, + select: function() { + log(); + } + }); + 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( assert ) { + expect( 2 ); + var element = $( "#menu1" ).menu({ + disabled: false, + select: function() { + log(); + } + }); + 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( assert ) { + expect( 8 ); + var element = $( "#menu2" ).menu(); + 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" ); + 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( assert ) { + expect( 4 ); + var element = $( "#menu2" ).menu({ + icons: { + submenu: "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( 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 ) { + 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", + "tabindex for menu item ("+ item + ")" ); + }); +}); + +test( "{ role: 'listbox' } ", function( assert ) { + var element = $( "#menu1" ).menu({ + role: "listbox" + }), + items = element.find( "li" ); + expect( 2 + 3 * items.length ); + equal( element.attr( "role" ), "listbox" ); + ok( items.length > 0, "number of menu items" ); + items.each(function( 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", + "tabindex for menu item ("+ item + ")" ); + }); +}); + +test( "{ role: null }", function( assert ) { + var element = $( "#menu1" ).menu({ + role: null + }), + items = element.find( "li" ); + expect( 2 + 3 * items.length ); + equal( element.attr( "role" ), null ); + ok( items.length > 0, "number of menu items" ); + items.each(function( item ) { + 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 + ")" ); + }); +}); + +} ); -- cgit v1.2.3