improve radio button test coverage to check group scenarios

ExactTarget · Jun 9, 2015 · 952c1c6 · 952c1c6
1 parent 59e6e40
commit 952c1c6
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 2 deletions.
diff --git a/test/markup/radio-markup.html b/test/markup/radio-markup.html
@@ -7,6 +7,21 @@
 		</label>
 	</div>
 
+	<div id="RadioGroup" class="radio">
+		<label class="radio-custom">
+			<input class="sr-only" type="radio" name="group">
+			<span class="radio-label">Item 1</span>
+		</label>
+		<label class="radio-custom">
+			<input class="sr-only" type="radio" name="group">
+			<span class="radio-label">Item 2</span>
+		</label>
+		<label class="radio-custom">
+			<input class="sr-only" type="radio" name="group">
+			<span class="radio-label">Item 3</span>
+		</label>
+	</div>
+
 	<div id="RadioCheckedDisabled" class="radio">
 		<label class="radio-custom">
 			<input class="sr-only checked" type="radio" checked="checked" disabled="disabled">
@@ -39,4 +54,4 @@
 		<div class="radioToggle hidden">This message's visibility toggles by class with a radio above.</div>
 	</div>
 
-</div>
+</div>
diff --git a/test/radio-test.js b/test/radio-test.js
@@ -38,6 +38,85 @@ define(function(require){
 		equal(disabled, false, 'label does not have "disabled" class when input is enabled');
 	});
 
+	test("should set initial state to checked for first item in group", function () {
+		var $element = $(html).find('#RadioGroup').clone();
+
+		$element.find('input').eq(0).prop('checked', 'checked');
+
+		// initialize radio
+		$element.find('label').radio();
+
+		var item0 = $element.find('label').eq(0);
+		equal(item0.hasClass('checked'), true, 'index 0 label has "checked" class when input is checked');
+
+		var item1 = $element.find('label').eq(1);
+		equal(item1.hasClass('checked'), false, 'index 1 label does not have "checked" class');
+
+		var item2 = $element.find('label').eq(2);
+		equal(item2.hasClass('checked'), false, 'index 2 label does not have "checked" class');
+	});
+
+	test("should set 2nd item checked and 1st item unchecked after selecting 2nd item in group", function () {
+		var $element = $(html).find('#RadioGroup').clone();
+		$element.appendTo(document.body); // append to body to capture clicks
+
+		$element.find('input').eq(0).prop('checked', 'checked');
+
+		// initialize radio
+		$element.find('label').radio();
+
+		var $input = $element.find('input').eq(1);
+		$input.click();
+
+		// ensure item 0 (1st) label has checked class
+		var item0 = $element.find('label').eq(0);
+		equal(item0.hasClass('checked'), false, 'index 0 label does not have "checked" class when input is checked');
+
+		var item1 = $element.find('label').eq(1);
+		equal(item1.hasClass('checked'), true, 'index 1 label has "checked" class');
+
+		var item2 = $element.find('label').eq(2);
+		equal(item2.hasClass('checked'), false, 'index 2 label does not have "checked" class');
+
+		$element.remove();
+	});
+
+	test("should set initial state to checked for middle item in group", function () {
+		var $element = $(html).find('#RadioGroup').clone();
+
+		$element.find('input').eq(1).prop('checked', 'checked');
+
+		// initialize radio
+		$element.find('label').radio();
+
+		var item0 = $element.find('label').eq(0);
+		equal(item0.hasClass('checked'), false, 'index 0 label does not have "checked" class when input is checked');
+
+		var item1 = $element.find('label').eq(1);
+		equal(item1.hasClass('checked'), true, 'index 1 label has "checked" class');
+
+		var item2 = $element.find('label').eq(2);
+		equal(item2.hasClass('checked'), false, 'index 2 label does not have "checked" class');
+	});
+
+	test("should set initial state to checked for last item in group", function () {
+		var $element = $(html).find('#RadioGroup').clone();
+
+		$element.find('input').eq(2).prop('checked', 'checked');
+
+		// initialize radio
+		$element.find('label').radio();
+
+		var item0 = $element.find('label').eq(0);
+		equal(item0.hasClass('checked'), false, 'index 0 label does not have "checked" class when input is checked');
+
+		var item1 = $element.find('label').eq(1);
+		equal(item1.hasClass('checked'), false, 'index 1 label does not have "checked" class');
+
+		var item2 = $element.find('label').eq(2);
+		equal(item2.hasClass('checked'), true, 'index 2 label has "checked" class');
+	});
+
 	test("should set initial state for checked/disabled", function () {
 		var $element = $(html).find('#RadioCheckedDisabled').clone();
 
@@ -271,4 +350,4 @@ define(function(require){
 		equal(originalMarkup, markup, 'returned original markup');
 		equal($element.find('#Radio1').length, 0, 'radio removed from DOM');
 	});
-});
+});