개발

[Javascript] Jasmine을 이용한 테스트 코드 작성

마스터누누 2017. 5. 8. 11:51
728x90
반응형

 Jasmine을 이용한 테스트 코드 작성




테스트 주도 개발(TDD)에서 테스트 코드는 가장 중요한 요소로 손꼽힌다.

이러한 테스트코드 작성을 도와주기 위한 툴(라이브러리)은 여러개가 있는데

그 중 자바스크립트 관련 도서에서 자주 언급되는 자스민(jasmine)을 사용하는 기본적인 방법에 대해 알아보자




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link data-require="jasmine@*" data-semver="2.0.0" rel="stylesheet" href="http://cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css"
    />
    <script data-require="jasmine@*" data-semver="2.0.0" src="http://cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js">
    </script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="http://cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js">
    </script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="http://cdn.jsdelivr.net/jasmine/2.0.0/boot.js">
    </script>
</head>
 
<body>
    <script src="main.js"></script>
    <script src="main_test.js"></script>
</body>
 
</html>
cs


우선 테스트 코드를 사용하기 위한 기본적인 HTML 코드이다.

자스민은 다운받은 후 폴더에 추가하여 사용 할 수도 있지만 

개인적으로 이렇게 예제 용으로 작성하는것은 CDN을 선호하므로 위와 같이 자스민 코드의 link를 걸어준다.

그리고 하단에 테스트를 원하는 js파일과 이에 대한 테스트 검증 코드를 추가 해준다.




1
2
3
4
5
6
7
function helloWorld() {
    return "Hello world!"; 
}
 
function welcomeWorld(){
    return "Welcome world!";
}
cs

테스트를 원하는 코드이다.
간단하게, 호출하면 2개의 텍스트를 반환하는 함수를 만들었다.



1
2
3
4
5
6
7
8
9
10
11
describe("Hello world", function() {
    it("says hello", function() {
        expect(helloWorld()).toEqual("Hello world!");
    });
});
 
describe("welcome world", function() {
    it("says welcome", function() {
        expect(welcomeWorld()).toEqual("Welcome world!");
    });
});
cs


다음은 이에 대한 테스트를 수행하는 코드이다.

테스트에 가장 결정적인 함수는 expect인데 expect에 들어가는 인자와 

메소드 체이닝된 toEqual의 인자가 같아야 테스트 성공 메세지가 뜨게 된다.

이와같은 expect - toEqual을 여러개 작성해서 다수의 테스트를 진행할수도 있다. 





결과는 다음과 같다.

반응형
저작자표시 (새창열림)