테스트 페이지를 작성해서 JsUnit 으로 자바스크립트를 테스트 해보자. 두 수를 더해서 그 결과값을 리턴하는 아주 간단한 원본메소드를 아래와 같이 작성했다고 하자. 원본 메소드는 실제 웹화면에서 사용되어질 메소드이다. 테스트 메소드는 원본 메소드를 테스트 하기 위해서 새롭게 만들어진 메소드를 의미한다.
function addTwoNumbers(value1, value2){
return value1 + value2;
}
위 원본 메소드를 JsUnit 을 이용해서 테스트를 해보려면 assert 메소드를 이용한 테스트 메소드를 아래와 같이 작성해야 한다.
function testValidArgs(){
assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
}
테스트 메소드명를 정할때는 test 로 시작해야 한다는 점에 유의하자. JsUnit 은 test 로 시작하는 메소드만을 자동으로 인식해서 실행하고 결과를 알려주기 때문이다. 위 코드를 보면 JUnit 처럼 assertEquals 메소드가 있다. assertEquals 메소드에는 세개의 파라미터가 있는데, 첫번째는 주석이고 두번째는 비교할 결과값 세번째는 원본 메소드 이름을 설정하면 된다. 첫번째 주석 파라미터는 옵션으로 생략가능하다. assertEquals 메소드는 두번째와 세번째 파라미터를 비교해서 true 또는 false 를 리턴한다. assort 메소드의 종류는 아래와 같다.
assert([commet], booleanValue)
assertTrue([commet], booleanValue)
assertFalse([commet], booleanValue)
assertEquals([commet], value1, value2)
assertNotEquals([commet], value1, value2)
assertNull([commet], value)
assertNotNull([commet], value)
assertUndefined([commet], value)
assertNotUndefined([commet], value)
assertNaN([commet], value)
assertNotNaN([commet], value)
fail(comment)
테스트 메소드는 얼마든지 만들 수 있다. 음수에 대한 addTwoNumbers 메소드의 테스트 메소드는 다음과 같이 작성할 수 있다.
function testWithNegativeNumbers(){
assertEquals("Negative Numbers : -2 + -2 is -4", -4, addTwoNumbers(-2, -2));
}
실제 테스트 페이지 샘플 파일은 아래와 같이 작성할 수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A Simple Test Page</title>
<script language="javascript" src="../jsunit/app/jsUnitCore.js"></script>
<script language="javascript">
function addTwoNumbers(value1, value2){
return value1 + value2;
}
function testValidArgs(){
assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
}
function testWithNegativeNumbers(){
assertEquals("Negative Numbers : -2 + -2 is -4", -4, addTwoNumbers(-2, -2));
}
</script>
</head>
<body>
This is a Simple test page for addTwoNumbers(value1, value2)
</body>
</html>
<addTwoNumbers.html 의 전체코드>
위 addTwoNumbers.html 파일은 어느 디렉토리에 저장하더라도 JsUnit test runner 로 테스트 하는데 전혀 지장이 없다. 다만 주의할 점은 jsUnitCore.js 의 상대경로를 잘 맞춰야 한다. 테스트 파일을 저장한 위치로 부터 jsUnitCore.js 파일의 상대경로를 적어주면 된다.
만일 아래 그림과 같이 테스트 결과가 정상 혹은 실패로 나오지 않고 알 수 없는 상황이 발생한다면 AJAX 강의 6-6장 - JsUnit 활용/page timeout 필드을 참고하기 바란다.
위 파일의 실행결과는 아래와 같다.
위 그림은 테스트 메소드 실행결과가 모두 정상일 경우를 표시한 것이다. test runner 에 보면 Progess 바가 있는데 녹색이면 정상 종료를 의미하고 빨간색이면 무엇인가 문제가 있다는 것을 나타낸다.
상태표시 바에 대한 궁금한 점이 있다면 AJAX 강의 6-7장 - JsUnit 활용/Progress bar 및 상태표시 필드을 참고하기 바란다.
테스트 결과에 문제가 있을 경우에는 아래와 같은 화면을 보게 될 것이다.
위 그림은 테스트 도중에 무엇인가 문제가 있음을 의미한다. 사실 위 그림에 보면 Errors 와 Failures 가 의미하는 것에는 차이가 있다. 이 부분은 향후에 설명할 것이다. Show selected/Show all 버튼을 클릭하면 어디에 문제가 있는지 확인 할 수 있다.
위 메시지는 2 + 2 의 결과가 4가 나오기를 기대했는데 5가 나왔다는 것을 의미한다. 위 메시지를 보고 테스트 메소드 혹은 원본 메소드를 수정하면 된다.
JsUnit 을 사용하기 위해서는 테스트 페이지 및 테스트 메소드를 부가적으로 작성해야 한다. 이런 부차적인 작업을 해야 하는 목적은 잘 동작하는 원본 메소드를 얻기 위함이다. 따라서 원본 메소드를 sample.js 라는 별도의 js 파일에 모아놓고 테스트 페이지에는 테스트 메소드들만 코딩해두는 습관을 들여보자. 위 샘플 코드를 아래와 같이 수정하자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A Simple Test Page</title>
<script language="javascript" src="../jsunit/app/jsUnitCore.js"></script>
<script language="javascript" src="js/sample.js"></script>
<script language="javascript">
function testValidArgs(){
assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 3));
}
function testWithNegativeNumbers(){
assertEquals("Negative Numbers : -2 + -2 is -4", -4, addTwoNumbers(-2, -2));
}
</script>
</head>
<body>
This is a Simple test page for addTwoNumbers(value1, value2)
</body>
</html>
위 코드에서 <script language="javascript" src="js/sample.js"></script> 부분이 추가되었다는 것에 유의하자. sample.js 에는 addTwoNumbers 원본 메소드가 들어 있을 것이다. 테스트 해보면 같은 같은 결과가 나오는 것을 확인 할 수 있다.
앞서 테스트 메소드명은 test 로 시작해야 한다는 점을 기술하였다. 하지만 꼭 그런것만은 아니다. test 로 시작하면 JsUnit 이 자동으로 인식을 하므로 개발자 입장에서는 편리하기때문에 Edward 가기본적으로 그렇게 구현한 것 뿐이다. 강제로 테스트 메소드라는 것을 JsUnit 에게 인식시켜 주기 위해서는 exposeTestFunctionNames 메소드를 작성해야 한다. 아래의 테스트 페이지 코드를 보자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A Simple Test Page</title>
<script language="javascript" src="../jsunit/app/jsUnitCore.js"></script>
<script language="javascript" src="js/sample.js"></script>
<script language="javascript">
function testValidArgs(){
assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
}
function testWithNegativeNumbers(){
assertEquals("Negative Numbers : -2 + -2 is -4", -4, addTwoNumbers(-2, -2));
}
function notTestValidArgs(){
assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
}
function notTestWithNegativeNumbers(){
assertEquals("Negative Numbers : -2 + -2 is -4", -4, addTwoNumbers(-2, -2));
}
function exposeTestFunctionNames(){
var tests = new Array(2);
tests[0] = "notTestValidArgs";
tests[1] = "notTestWithNegativeNumbers";
return tests;
}
</script>
</head>
<body>
This is a Simple test page for addTwoNumbers(value1, value2)
</body>
</html>
위 코드를 보면 test 로 시작하는 테스트 메소드 2개와 그렇지 않은 테스트 메소드 2개가 있을 것이다. JsUnit 으로 실행해보면 4개의 테스트 메소드는 모두 실행된다. test 로 시작하는 메소드는 당연히 자동으로 실행될 것이고 그렇지 않은 테스트 메소드들은 exposeTestFunctionNames 내부에 정의되어 있기때문에 JsUnit 가 테스트 메소드로 인식하여 실행하는 것이다.
