radio 버튼 처리를 위한 테스트 코드를 작성해 보았다.
초기 로딩 화면은 다음과 같다.
테스트 코드는 다음과 같다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// DOM 생성 완료 시 화면 숨김
$("#changeM").hide();
$("#changeI").hide();
$("#changeH").hide();
// radio change 이벤트
$("input[name=radioName]").change(function() {
var radioValue = $(this).val();
if (radioValue == "M") {
$("#changeM").show();
$("#changeI").hide();
$("#changeH").hide();
} else if (radioValue == "I") {
$("#changeI").show();
$("#changeM").hide();
$("#changeH").hide();
} else if (radioValue == "H") {
$("#changeH").show();
$("#changeI").hide();
$("#changeM").hide();
}
});
// 서버에서 전달 받은 값으로 radio 버튼 변경
$("#changeUpdateRadio").click(function() {
var resultValue = $("#radioId").val();
$("input[name=radioName][value=" + resultValue + "]").attr("checked", true);
});
// 체크 되어 있는지 확인
var checkCnt = $("input[name=radioName]:checked").size();
if (checkCnt == 0) {
// default radio 체크 (첫 번째)
$("input[name=radioName]").eq(0).attr("checked", true);
}
});
</script>
</head>
<body>
<div id="radioArea">
<input type="radio" name="radioName" value="M" />mWeb
<input type="radio" name="radioName" value="I" />inApp
<input type="radio" name="radioName" value="H" />HTML5
</div>
<input type="hidden" id="radioId" value="I">
<br /><br />
<div id="changeTextArea">
<div id="changeM">
<span>this is M area</span>
<p>mobile web</p>
</div>
<div id="changeI">
<span>this is I area</span>
<p>inapp</p>
</div>
<div id="changeH">
<span>this is H area</span>
<p>html5</p>
</div>
</div>
<div id="buttonArea">
<input type="button" id="changeUpdateRadio" value="서버에서 받은 버튼 값으로 radio 체크 위치 변경">
</div>
</body>
</html>
여기서 한가지 고민되는 부분이 있었다.
radio 버튼을 클릭할 때마다 text를 변경하며 노출해야 하는데 위의 테스트 코드와 같이 hide(), show()를 이용하여 처리를 하다보면 버튼 항목이 추가되었을 때 늘어난 항목 만큼 조건절에 모두 추가해 줘야 한다.
그래서 루프를 이용하여 다음과 같이 처리하였다.
조금은 코드가 깔끔해 졌다. ^^
개발을 하다보면 시간에 쫓겨 이와 같은 고민을 하지 못하고, 그냥 지나쳐 버리곤 했는데 학습 테스트 코드를 작성하다 보면 이런 고민을 할 수 있어 여러모로 많은 도움이 되는 것 같다.
'프로그래밍' 카테고리의 다른 글
| HashMap 메소드 테스트 케이스 작성 (0) | 2012.11.09 |
|---|---|
| synchronized 키워드 3가지 테스트 케이스 (0) | 2012.11.09 |
| 이클립스 junit 특정 메소드만 테스트를 실행하고 싶을 때 (1) | 2012.11.07 |
| html table merge (4) | 2012.11.06 |
| XML namespace 이해하기 (0) | 2012.11.06 |
| jquery checkbox 전체 선택, 전체 해제, 체크 값 추출 (6) | 2012.11.05 |
| jquery selector 실습 (1) | 2012.11.02 |
| javascript Array객체에 contains 메서드 추가 (2) | 2012.11.02 |
