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을 여러개 작성해서 다수의 테스트를 진행할수도 있다.
결과는 다음과 같다.
반응형
'개발' 카테고리의 다른 글
| [AWS] 회원 가입 (0) | 2017.05.10 |
|---|---|
| [AWS] 아마존 웹서비스와 클라우드 (0) | 2017.05.10 |
| [CSS] 7:3 비율 텍스트 레이아웃 (0) | 2017.05.05 |
| [CSS] 백그라운드 이미지 위에 글씨 배치 - 응용 (1) | 2017.05.01 |
| [CSS] 백그라운드 이미지 위에 글씨 배치 (3) | 2017.05.01 |
댓글