Skip to content
Permalink
Browse files

Selectmenu Tests: add unit and visual tests for width option

  • Loading branch information
fnagel committed Dec 5, 2013
1 parent 06bcd8e commit 1656cd2f340ac94b3b0c337f81eb3b31a4bb4d71
Showing with 92 additions and 1 deletion.
  1. +39 −0 tests/unit/selectmenu/selectmenu_options.js
  2. +53 −1 tests/visual/selectmenu/selectmenu.html
@@ -57,4 +57,43 @@ test( "CSS styles", function () {
ok( menu.hasClass( "ui-corner-bottom" ) && !menu.hasClass( "ui-corner-all" ), "menu styles dropdown" );
});


test( "Width", function () {
expect( 8 );

var element = $( "#speed" ),
button, menu;

element.selectmenu();
button = element.selectmenu( "widget" );
menu = element.selectmenu( "menuWidget" );

equal( button.outerWidth(), element.outerWidth(), "button width auto" );
element.selectmenu( "open" );
equal( menu.outerWidth(), element.outerWidth(), "menu width auto" );

element.outerWidth( 100 );
element.selectmenu( "refresh" );

equal( button.outerWidth(), 100, "button width set by CSS" );
element.selectmenu( "open" );
equal( menu.outerWidth(), 100, "menu width set by CSS" );

element.width( "" );
element.selectmenu( "option", "width", 100 );
element.selectmenu( "refresh" );

equal( button.outerWidth(), 100, "button width set by JS option" );
element.selectmenu( "open" );
equal( menu.outerWidth(), 100, "menu width set by JS option" );

element.append( $( "<option>", { text: "Option with a little longer text" } ) );
element.selectmenu( "option", "width", "" );
element.selectmenu( "refresh" );

equal( button.outerWidth(), element.outerWidth(), "button width with long option" );
element.selectmenu( "open" );
ok( menu.outerWidth() >= element.outerWidth(), "menu width with long option" );
});

})( jQuery );
@@ -107,7 +107,18 @@
});
/* empty */
$('.empty select').selectmenu();
$(".empty select").selectmenu();
/* width */
$("#width_auto1, #width_auto2").selectmenu();
$("#width_js1, #width_js2").selectmenu({
width: 200
});
var widthMenu = $("#width_menu").selectmenu();
widthMenu.selectmenu("menuWidget").addClass("width-menu");
});
</script>
<style>
@@ -117,6 +128,9 @@
select { width: 200px; }
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
/* width */
.width-menu { width: 196px; }
</style>
</head>
<body>
@@ -237,6 +251,44 @@ <h2>Empty tests</h2>
</optgroup>
</select>
</fieldset>

<h2>Width tests</h2>
<fieldset>
<label for="width_auto1">Width auto</label>
<select name="width_auto1" id="width_auto1" style="width: auto;">
<option>Width test 1</option>
<option>Width test 2</option>
<option>Width test 3</option>
</select>

<label for="width_auto2">Width auto with long option</label>
<select name="width_auto2" id="width_auto2" style="width: auto;">
<option>Width test 1</option>
<option>Width test 2</option>
<option>Width test 3 Width test 3 Width test 3</option>
</select>

<label for="width_js1">Width set by JS</label>
<select name="width_js1" id="width_js1">
<option>Width test 1</option>
<option>Width test 2</option>
<option>Width test 3</option>
</select>

<label for="width_js2">Width set by JS with long option</label>
<select name="width_js2" id="width_js2">
<option>Width test 1</option>
<option>Width test 2</option>
<option>Width test 3 Width test 3 Width test 3</option>
</select>

<label for="width_menu">Width set by JS with long option</label>
<select name="width_menu" id="width_menu">
<option>Width test 1</option>
<option>Width test 2</option>
<option>Width test 3 Width test 3 Width test 3</option>
</select>
</fieldset>
</form>

<div style="position: absolute; top: 1em; right: 1em;">

2 comments on commit 1656cd2

@jzaefferer

This comment has been minimized.

Copy link
Member

jzaefferer replied Dec 10, 2013

Thanks for the test. Looking at tests/visual/selectmenu/selectmenu.html I'm concerned about the select's that are unable to show the full text of the selected option. For "Width auto" the selected option is always cut off. On the next one, the long option is always cut off.

Looks like the difference between button and menu comes from extra padding and the triangle icon. Can we take that into account when calculating the width?

@fnagel

This comment has been minimized.

Copy link
Member Author

fnagel replied Dec 10, 2013

Please sign in to comment.
You can’t perform that action at this time.