From e0042cf58d543caaf59123014dbd115820112972 Mon Sep 17 00:00:00 2001
From: Ghislain Seguin <ghislain@gmail.com>
Date: Fri, 24 Jun 2011 16:13:41 -0700
Subject: [PATCH] Added unit tests for controlgroup

---
 tests/unit/controlgroup/controlgroup_core.js | 108 +++++++++++++++++++
 tests/unit/controlgroup/index.html           |  68 ++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 tests/unit/controlgroup/controlgroup_core.js
 create mode 100644 tests/unit/controlgroup/index.html

diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js
new file mode 100644
index 00000000..077fe478
--- /dev/null
+++ b/tests/unit/controlgroup/controlgroup_core.js
@@ -0,0 +1,108 @@
+/*
+ * mobile checkboxradio unit tests
+ */
+(function($){
+	module( 'vertical controlgroup', {
+		setup: function() {
+			this.vcontrolgroup = $( "#vertical-controlgroup" );
+			this.vcontrolgroup.find( ".ui-btn" ).show();
+			this.vcontrolgroup.controlgroup("refresh");
+		}
+	});
+
+	test( "vertical controlgroup classes", function() {
+		var buttons = this.vcontrolgroup.find( ".ui-btn" ),
+			middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+			length = buttons.length;
+
+		ok( buttons.first().hasClass( "ui-corner-top" ), "first button should have class 'ui-corner-top'" );
+		ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
+		ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
+		ok( buttons.last().hasClass( "ui-corner-bottom"), "last button should have class 'ui-corner-bottom'" );
+	});
+
+	test( "vertical controlgroup after first button was hidden", function() {
+		//https://github.com/jquery/jquery-mobile/issues/1929
+
+		//We hide the first button and refresh
+		this.vcontrolgroup.find( ".ui-btn" ).first().hide();
+		this.vcontrolgroup.controlgroup("refresh");
+
+		var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+			middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+			length = buttons.length;
+		
+		ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
+		ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
+		ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
+		ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
+	});
+
+	test( "vertical controlgroup after last button was hidden", function() {
+		//https://github.com/jquery/jquery-mobile/issues/1929
+
+		//We hide the last button and refresh
+		this.vcontrolgroup.find( ".ui-btn" ).last().hide();
+		this.vcontrolgroup.controlgroup("refresh");
+
+		var buttons = this.vcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+			middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+			length = buttons.length;
+		
+		ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
+		ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
+		ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
+		ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
+	});
+
+	module( 'horizontal controlgroup', {
+		setup: function() {
+			this.hcontrolgroup = $( "#horizontal-controlgroup" );
+			this.hcontrolgroup.find( ".ui-btn" ).show();
+			this.hcontrolgroup.controlgroup("refresh");
+		}
+	});
+
+	test( "horizontal controlgroup classes", function() {
+		var buttons = this.hcontrolgroup.find( ".ui-btn" ),
+			middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+			length = buttons.length;
+
+		ok( buttons.first().hasClass( "ui-corner-left" ), "first button should have class 'ui-corner-left'" );
+		ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
+		ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
+		ok( buttons.last().hasClass( "ui-corner-right"), "last button should have class 'ui-corner-right'" );
+	});
+
+	test( "horizontal controlgroup after first button was hidden", function() {
+		//We hide the first button and refresh
+		this.hcontrolgroup.find( ".ui-btn" ).first().hide();
+		this.hcontrolgroup.controlgroup("refresh");
+
+		var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+			middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+			length = buttons.length;
+
+		ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
+		ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
+		ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
+		ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
+	});
+
+	test( "horizontal controlgroup after last button was hidden", function() {
+		//We hide the last button and refresh
+		this.hcontrolgroup.find( ".ui-btn" ).last().hide();
+		this.hcontrolgroup.controlgroup("refresh");
+
+		var buttons = this.hcontrolgroup.find( ".ui-btn" ).filter( ":visible" ),
+			middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
+			length = buttons.length;
+
+		ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
+		ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
+		ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
+		ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
+	});
+
+
+})(jQuery);
diff --git a/tests/unit/controlgroup/index.html b/tests/unit/controlgroup/index.html
new file mode 100644
index 00000000..40cab4b1
--- /dev/null
+++ b/tests/unit/controlgroup/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery Mobile Checkboxradio Test Suite</title>
+
+	<script src="../../../js/jquery.js"></script>
+	<script src="../jquery.setNameSpace.js"></script>
+	<script src="../../../js/"></script>
+	<script src="../../../tests/jquery.testHelper.js"></script>
+
+	<link rel="stylesheet" href="../../../themes/default/"/>
+	<link rel="stylesheet" href="../../../external/qunit.css"/>
+	<script src="../../../external/qunit.js"></script>
+
+	<script src="controlgroup_core.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlgroup Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="content">
+
+		<div data-nstest-role="fieldcontain" id="radio-active-btn-test">
+			<fieldset data-nstest-role="controlgroup" id="vertical-controlgroup">
+			  <legend>Choose a pet:</legend>
+			  <input type="radio" name="radio-pet-active-btn" id="radio-pet-1" value="choice-1" checked="checked"  />
+			  <label for="radio-pet-1">Cat</label>
+
+			  <input type="radio" name="radio-pet-active-btn" id="radio-pet-2" value="choice-2"  />
+			  <label for="radio-pet-2">Dog</label>
+
+			  <input type="radio" name="radio-pet-active-btn" id="radio-pet-3" value="choice-3"  />
+			  <label for="radio-pet-3">Hamster</label>
+
+			  <input type="radio" name="radio-pet-active-btn" id="radio-pet-4" value="choice-4"  />
+			  <label for="radio-pet-4">Lizard</label>
+			</fieldset>
+		</div>
+
+		<div data-nstest-role="fieldcontain">
+			<fieldset data-nstest-role="controlgroup" data-nstest-type="horizontal" id="horizontal-controlgroup">
+				<legend>Font styling:</legend>
+				<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+				<label for="checkbox-6">b</label>
+
+				<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+				<label for="checkbox-7"><em>i</em></label>
+
+				<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+				<label for="checkbox-8"><em>s</em></label>
+
+				<input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
+				<label for="checkbox-9">u</label>
+			</fieldset>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>