Selectmenu Tests: add unit and visual tests for width option

jquery · Dec 7, 2013 · 1656cd2 · 1656cd2 · jzaefferer · Dec 10, 2013
1 parent 06bcd8e
commit 1656cd2
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 1 deletion.
diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js
@@ -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 );
diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html
@@ -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;">