Permalink
Browse files

Adds unit tests for vertical menubar

  • Loading branch information...
1 parent 48b842d commit 8a7cc699cb0bd3e5a63f09cb4b6a749323e40cee Steven G. Harms committed May 5, 2013
Showing with 32 additions and 14 deletions.
  1. +22 −3 tests/unit/menubar/menubar_core.js
  2. +10 −11 ui/jquery.ui.menubar.js
@@ -12,13 +12,14 @@ test( "markup structure", function() {
});
test( "Passing a vertical orientation parameter adds vertical classes on ui elements", function() {
- expect( 4 );
+ expect( 11 );
- var element = $( "#bar1" ).menubar({ orientation: "vertical" }),
+ var secondMenuItem,
+ element = $( "#bar1" ).menubar({ orientation: "vertical" }),
widget = element.data( "ui-menubar" ),
options = widget.options,
menuItemCount = element.children( ".ui-menubar-item" ).length,
- firstMenuItem = $( "#bar1 .ui-menubar-item .ui-button:first" );
+ firstMenuItem = $( "#bar1 .ui-menubar-item .ui-button:first" ),
defaultOrientation = $( "#bar2" ).menubar().data( "ui-menubar" ).options.orientation;
equal( "horizontal", defaultOrientation, "menubars shoud have horizontal orientation by default" );
@@ -29,6 +30,24 @@ test( "Passing a vertical orientation parameter adds vertical classes on ui elem
firstMenuItem[ 0 ].focus();
equal( document.activeElement, firstMenuItem[0], "Focus set on first menuItem" );
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
+ ok( firstMenuItem.hasClass( "ui-state-focus" ), "RIGHT should NOT move focus off of focused item if vertically oriented" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
+ ok( firstMenuItem.hasClass( "ui-state-focus" ), "LEFT should NOT move focus off of focused item if vertically oriented" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+ ok( !firstMenuItem.hasClass( "ui-state-focus" ), "DOWN should move focus off of focused item if vertically oriented" );
+
+ secondMenuItem = firstMenuItem.parent().next().children(":first");
+ equal( document.activeElement, secondMenuItem[ 0 ], "Focus is set on second menuItem" );
+
+ $( secondMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
+ ok( firstMenuItem.hasClass( "ui-state-focus" ), "UP should move focus back to the original menu item" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+ $( secondMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
+ ok( widget.active, "Pressing RIGHT on a menuItem with a subMenu should make the submenu active" );
});
test( "accessibility", function () {
@@ -131,9 +131,9 @@ $.widget( "ui.menubar", {
});
if ( this.options.orientation === "horizontal" ) {
- this._on( subMenus, this._submenuEventHandlerinHorizOrientation );;
+ this._on( subMenus, this._submenuEventHandlerinHorizOrientation );
} else if ( this.options.orientation === "vertical" ) {
- this._on( subMenus, this._submenuEventHandlerinVertOrientation );;
+ this._on( subMenus, this._submenuEventHandlerinVertOrientation );
}
this.menuItems.each(function( index, menuItem ) {
@@ -151,17 +151,16 @@ $.widget( "ui.menubar", {
}
switch ( event.keyCode ) {
case $.ui.keyCode.LEFT:
- console.log( "fire1!" );
- parentButton = menubar.active.prev( ".ui-button" );
+ parentButton = this.active.prev( ".ui-button" );
if ( this.openSubmenus ) {
this.openSubmenus--;
} else if ( this._hasSubMenu( parentButton.parent().prev() ) ) {
- menubar.active.blur();
- menubar._open( event, parentButton.parent().prev().find( ".ui-menu" ) );
+ this.active.blur();
+ this._open( event, parentButton.parent().prev().find( ".ui-menu" ) );
} else {
parentButton.parent().prev().find( ".ui-button" ).focus();
- menubar._close( event );
+ this._close( event );
this.open = true;
}
@@ -557,20 +556,20 @@ $.widget( "ui.menubar", {
},
_alterToVerticalOrientation: function() {
- var menubar = this;
+ var cssWidth;
if ( this.options.orientation !== "vertical" ) {
return;
}
function findLargestWidth( set ) {
return set.map(function(){
- return parseInt($( this ).css( 'width' ))
+ return parseInt( $( this ).css( "width" ), 10 );
}).sort()[ 0 ];
}
/* Make width of menubar the width of the largest menuItem */
- var cssWidth = findLargestWidth( this.items ) + "px";
+ cssWidth = findLargestWidth( this.items ) + "px";
this.element.css( "width", cssWidth );
this.items.css( "width", cssWidth);
@@ -585,7 +584,7 @@ $.widget( "ui.menubar", {
this.options.position = {
my: "left top",
at: "right top"
- }
+ };
}
});

0 comments on commit 8a7cc69

Please sign in to comment.