JsUnit #

JsUnit은 자바스크립트(client-side) 언어의 유닛 테스팅 프레임워크(Unit Testing Framework)입니다. 이는 자바의 JUnit의 구조에 기반하여, 자바스크립트 언어에 맞게 포팅된 것이며, JUnit을 사용해본 사람이라면면 아래의 !JUnit과 JsUnit 비교를 통해 프레임워크의 대강의 구조를 쉽게 파악할 수 있습니다.

!JUnit과 JsUnit 비교 #

JUnit	JsUnit
Test Methods	Test Functions
Test Classes	Test Pages (HTML)
Extend junit.framework.TestCase	Include jsunit/app/jsUnitCore.js
junit.framework.TestSuite	Test Suite Pages (HTML)
AWT/Swing/IDE TestRunners	Pure HTML/JS TestRunner
public void setUp(), tearDown()	function setUp(), tearDown()
Runs in the target Java VM	Runs in the target browser(s)
Pure Java	Pure JavaScript

참고 링크 #

테스트 작성 #

JsUnit 테스트는 다음과 같은 순서로 진행하면 됩니다.

테스트 페이지를 작성합니다.
jsunit/testRunner.html를 웹브라우저로 엽니다.
작성한 테스트 페이지의 위치를 입력하고 Run 버튼을 누릅니다.
결과를 확인합니다.

이제 테스트 작성에 필요한 지식을 알아보도록 합시다.

테스트 페이지 #

테스트 페이지(Test Page)는 테스트 함수들을 가진 html 문서로, !JUnit의 테스트 클래스와 동일시되는 개념입니다. 테스트 함수는 테스트 페이지 내에 작성하거나, 외부 스크립트 파일로 작성하여 테스트 페이지에 포함 시켜주면 됩니다. 단 외부 스크립트 파일로 작성할 시에는 약간의 주의점이 필요하며 이는 나중에 설명하겠습니다. 다음의 예제는 기본적인 테스트 페이지 예제입니다.

<html>
<head>
<script type="text/javascript" src="/path/to/jsunit/app/jsUnitCore.js"></script>
<script type="text/javascript">
    function testAdd() {
        assertEquals( "1 + 1 = 2", ( 1 + 1 ), 2 );
    }

    function testSubtract() {
        assertEquals( "2 - 1 = 1", ( 2 - 1 ), 1 );
    }
</script>
</head>
<body></body>
</html>

JsUnit 설치 디렉터리의 testRunner.html 파일을 실행하고, Enter the filename of the Test Page to be run에 작성한 테스트 페이지의 경로를 입력한 후 Run 버튼을 누르면 테스트가 실행됩니다.

테스트 페이지 빠른 실행 #

testRunner.html에서 매번 테스트 대상 페이지를 입력하는 것은 매우 귀찮은 일입니다. URL 쿼리 스트링을 이용해서 편리하게 테스트할 수 있습니다. 아래 URL을 요청하면 testPage에 입력된 페이지가 바로 실행됩니다.

http:://path/to/jsunit/testRunner.html?autoRun=true&testPage=/path/to/hello_test.html

테스트 함수 #

테스트 함수(Test Function)는 !JUnit의 테스트 메소드와 같은 개념입니다. 테스트 함수는 testXXX의 이름을 사용해야 하며, 인자는 아무것도 받지 않습니다.

setUp(),tearDown() #

!JsUnit은 !JUnit과 마찬가지로 setUp과 tearDown을 지원합니다. 테스트 페이지에 setUp과 tearDown 함수가 있으면, 실행은 다음과 같은 순서로 이루어집니다.

function setUp() {
    // setUp as JUnit here...
}
function tearDown() {
    // tearDown as JUnit here...
}

function testA() {
    // test some
}
function testB() {
    // test some
}

setUp() > testA() > tearDown() > setUp() > testB() > tearDown() 이때, testA 와 testB 중에 무엇이 먼저 실행될지는 브라우저마다 다릅니다. 인터넷 익스플로러에서는 선언된 순서대로 testA가 실행된 후 testB가 실행됩니다. 하지만 파이어폭스에서는 선언된 순서의 반대로 testB가 먼저 실행된 후에 testA가 실행됩니다. 파이어폭스도 원래부터 그랬던 것이 아니라 파이어폭스 1.5부터 이렇게 바뀌었다고 하며, 때문에 JsUnit측에서는 원래 top-down 순서로 실행된다고 하던 문서 내용을 보장할 수 없다로 변경했다고 합니다. 만약 테스트 함수의 실행 순서를 강제하고 싶은 경우에는 exposeTestFunctionNames 함수를 이용하면 되며, 이 함수에서 반환한 배열의 순서대로 실행하게 됩니다.

function exposeTestFunctionNames() {
    return [ "testA", "testB" ];
}

testA() > testB()

외부 스크립트 파일로 테스트 함수 작성 #

외부 스크립트 파일로 테스트 함수를 작성하면, 파이어폭스를 제외한 브라우저들은 테스트 함수들을 자동으로 알지 못합니다. 때문에 외부 스크립트 파일로 테스트 함수를 작성할 때에는 exposeTestFunctionName 이라는 함수를 작성해주어야 합니다. exposeTestFunctionName 함수는 다음과 같이 테스트 함수들의 이름을 배열로 반환합니다.

function exposeTestFunctionNames() {
    var functionList = [];
    functionList[0] = "testA";
    functionList[1] = "testB";

    return functionList;
}

function testA() {
    // test some
}
function testB() {
    // test some
}

Assertion 함수 목록 #

다음은 !JsUnit이 지원하는 Assertion 함수의 목록입니다. [comment]의 경우 선택사항으로 입력하지 않아도 되는 값입니다.

assert( [comment], booleanValue )
assertTrue( [comment], booleanValue )
assertFalse( [comment], booleanValue )
assertEquals( [comment], value1, value2 )
assertNotEquals( [comment], value1, value2 )
assertNull( [comment], value )
assertNotNull( [comment], value )
assertUndefined( [comment], value )
assertNotUndefined( [comment], value )
assertNaN( [comment], value )
assertNotNaN( [comment], value )
fail( comment )

테스트 수트 페이지 #

테스트 수트 페이지(Test Suite Page)는 여러개의 테스트 페이지/테스트 수트의 리스트를 가지고 있는 페이지 입니다. testRunner.html로 테스트 수트 페이지를 실행하면, 해당 테스트 수트 페이지가 가지고 있는 리스트를 전부 테스트 하게 됩니다. 테스트 수트 페이지는 자신은 테스트 함수를 가져서는 안되며, suite 함수가 구현되어야 합니다. suite 함수는 JsUnitTestSuite 객체를 반환하는 함수입니다. 다음은 기본적인 테스트 수트 페이지의 예제입니다.

<html>
 <head>
  <script type="text/javascript" src="path/to/jsunit/app/jsUnitCore.js">
  <script type="text/javascript">
    function fooSuite() {
        var testSuite = new top.jsUnitTestSuite();
        testSuite.addTestPage( "some_foo_test.html" );
        testSuite.addTestPage( "other_foo_test.html" );
        return testSuite;
    }
    function barSuite() {
        var testSuite = new top.jsUnitTestSuite();
        testSuite.addTestPage( "some_bar_test.html" );
        testSuite.addTestPage( "other_bar_test.html" );
        return testSuite;
    }

    function suite() {
        var testSuite = new top.jsUnitTestSuite();
        testSuite.addTestSuite( fooSuite() );
        testSuite.addTestSuite( barSuite() );
        return testSuite;
    }
  </script>
 </head>
 <body>
 </body>
</html>

JsUnitTestSuite 객체 #

JsUnitTestSuite 객체는 다음의 두가지 함수를 가지고 있습니다.

addTestPage( filename ) - 테스트 페이지를 추가합니다. 파일 이름을 상대경로로 할 때에는, testRunner.html의 위치로부터 상대경로여야 합니다. 다른 테스트 수트 페이지를 추가할 수도 있습니다.
addTestSuite( aTestSuite ) - 테스트 수트를 추가합니다. 테스트 수트는 JsUnitTestSuite 객체여야 합니다.

이클립스 플러그인 #

JsUnit으로 테스트를 작성하고 실행하는 과정을 좀 더 쉽게 하기 위해서, 이클립스 플러그인을 사용할 수 있습니다. JsUnit 이클립스 플러그인은 작성한 테스트를 여러종류의 브라우저로 바로 테스트해보고 결과를 확인할 수 있도록 지원합니다. 설치는 다음과 같습니다.