쿠...sal: [컴][웹] javascript unit test, karam + jasmine

js 유닛 테스트 / 자바스크립트 유닛 테스트 / javascript unit test / jasmine bdd / behavior driven development

ref. 1 에 BDD 에 대한 대략적인 설명과 Jasmine 에 대한 설명을 확인할 수 있다.

Unit test on WebStorm

아래글에 WebStorm 에서 java script unit test 를 하는 방법이 나와 있다.

Enabling JavaScript Unit Testing Support

아래 3가지 중 한개의 Test runner 를 사용해서 test framework 로 작성한 unit test 를 실행할 수 있다.

JSTestDriver
Karma
Cucumber.js

일단 개인적인 관심으로

karma

를 사용하기로 했다. 기본적으로 WebStorm 9.x 에서는 plugin 이 default 로 설치되어 있었다.

Running Unit Tests on Karma 를 참고해서 WebStorm 에서 Karma 를 이용해서 Unit test 를 실행해 보자.

Karma 설치 by npm

일단 Node.js 와 npm 은 알아서 설치하도록 하자.^^;; 참고로 여기서 windows 7 에서 설치할 것이다.

npm 을 이용해서 karma 를 설치하자. project 내에서만 사용할 것이라면, project folder 내에 설치하면 되고, 여러 project 에서 사용할 생각이라면 -g option 을 이용하자.

c:\myProject>npm.cmd install karma
npm WARN optional dep failed, continuing fsevents@0.3.4
\


> ws@0.4.32 install c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

|
c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>node "c:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
이 솔루션의 프로젝트를 한 번에 하나씩 빌드합니다. 병렬 빌드를 사용하려면 "/m" 스위치를 추가하십시오.
  bufferutil.cc
c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\node_modules\nan\nan.h(1103): warning C4267: '
초기화 중' : 'size_t'에서 'int'(으)로 변환하면서 데이터가 손실될 수 있습니다. [c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\bufferutil.vcxproj]
c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\node_modules\nan\nan.h(1117): warning C4267: '초기화 중' : 'size_t'에서 'int'(으)로 변환하면서 데이터가 손실될 수 있습니다. [c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\bufferutil.vcxproj]
C:\Users\namhadmin\.node-gyp\0.10.29\deps\v8\include\v8.h(179): warning C4506:'v8::Persistent<v8::Object> v8::Persistent<v8::Object>::New(v8::Handle<v8::Object>)' 인라인 함수에 대한 정의가 없습니다. [c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\bufferutil.vcxproj]

  c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\Release\bufferutil.lib 라이브러리 및 c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\Release\bufferutil.exp 개체를 생성하고 있습니다.
  코드를 생성하고 있습니다.
  코드를 생성했습니다.
  bufferutil.vcxproj -> c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\Release\\bufferutil.nodevalidation.cc
c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\node_modules\nan\nan.h(1103): warning C4267: '초기화 중' : 'size_t'에서 'int'(으)로 변환하면서 데이터가 손실될 수 있습니다. [c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\validation.vcxproj]
c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\node_modules\nan\nan.h(1117): warning C4267: '초기화 중' : 'size_t'에서 'int'(으)로 변환하면서 데이터가 손실될 수 있습니다. [c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\validation.vcxproj]
C:\Users\namhadmin\.node-gyp\0.10.29\deps\v8\include\v8.h(179): warning C4506:'v8::Persistent<v8::Object> v8::Persistent<v8::Object>::New(v8::Handle<v8::Object>)' 인라인 함수에 대한 정의가 없습니다. [c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\validation.vcxproj]

  c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\Release\validation.lib 라이브러리 및 c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\Release\validation.exp 개체를 생성하고 있습니다.
  코드를 생성하고 있습니다.
  코드를 생성했습니다.

  validation.vcxproj -> c:\Program Files\nodejs\node_modules\karma\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws\build\Release\\validation.node
karma@0.12.31 node_modules\karma
├── di@0.0.1
├── graceful-fs@2.0.3
├── colors@0.6.2
├── rimraf@2.2.8
├── mime@1.2.11
├── q@0.9.7
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── lodash@2.4.1
├── optimist@0.6.1 (minimist@0.0.10, wordwrap@0.0.2)
├── source-map@0.1.43 (amdefine@0.1.0)
├── useragent@2.0.10 (lru-cache@2.2.4)
├── glob@3.2.11 (inherits@2.0.1, minimatch@0.3.0)
├── log4js@0.6.22 (semver@1.1.4, async@0.2.10, readable-stream@1.0.33)
├── chokidar@0.12.6 (async-each@0.1.6, readdirp@1.3.0)
├── http-proxy@0.10.4 (pkginfo@0.3.0, utile@0.2.1)
├── connect@2.26.6 (fresh@0.2.4, cookie@0.1.2, pause@0.0.1, parseurl@1.3.0, cookie-signature@1.0.5, on-headers@1.0.0, response-time@2.0.1, bytes@1.0.0, vhost@3.0.0, basic-auth-connect@1.0.0, media-typer@0.3.0, cookie-parser@1.3.3, depd@0.4.5, qs@2.2.4, connect-timeout@1.3.0, method-override@2.2.0, debug@2.0.0, finalhandler@0.2.0, serve-favicon@2.1.7, morgan@1.3.2, multiparty@3.3.2, serve-static@1.6.4, body-parser@1.8.4, errorhandler@1.2.4, compression@1.1.2, type-is@1.5.5, csurf@1.6.5, serve-index@1.2.1, express-session@1.8.2)
└── socket.io@0.9.16 (base64id@0.1.0, policyfile@0.0.4, redis@0.7.3, socket.io-client@0.9.16)

Karma configuration file

karma 는 karma.conf.js 라는 configuration 을 보고 unit test 를 실행한다. 이 녀석은

karma init

을 통해서 자동으로 생성할 수 있다.

c:\myProject>"c:\Program Files\nodejs\node.exe" c:\myProject\node_modules\karma\bin\karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next quest
ion.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/**/*.js
> src/html/assets/javascripts/*.js
WARN [init]: There is no file matching this pattern.

>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> no


Config file generated at "c:\myProject\karma.conf.js".

위에 녹색으로 된 곳에서는 test javascript file 과 함께 source file 의 path 도 지정해 줘야 한다.

Jasmine 설치

karma init 에서 선택한 framework 를 알아서 설치 해 준다. 여기서는 jasmine 을 선택했기 때문에

karma-jasmine

을 설치 해 준다

WebStorm 설정

WebStorm 에서 Run/Debug configuration 을 만들어주자.

Run > Edit Configurations

이제 이 녀석을 실행 해 주면, config file 에서 설정한 unit test file 들을 실행하게 된다.

command line 실행

WebStorm 에서 실행하면 WebStorm 의 debugger 를 사용하게 되는데, 이 녀석을 이용해서는 inner function 에 대한 dubugging 이 잘 안된다. 그리고 이 녀석으로 띄운 chrome 창에서 inspector 를 열어서 debugging 을 시도할 수 없다.(WebStorm message 에 inspector 를 닫아주라고 나온다. chrome bug 라고 하면서)

여하튼 그래서 그냥 command line 으로 karma 를 실행하고, 이 때 뜬 page 에서 debug 를 눌러서 debug.html page 를 호출하고, 여기서 inspector 를 열어서 refresh 를 한 번 해주면 된다.

아래 문서에 도움이 될 만한 방법이 나와 있다.

angularjs - debug in browser using testacular (now karma) - Stack Overflow : debugger 를 jasmine 에 넣어서 사용하는 방법

command line 에서 실행은 여기를 참고하자.

"c:\Program Files\nodejs\node.exe" c:\myProject\node_modules\karma\bin\karma start karma.conf.js

Jasmine-jQuery

Testing DOM Events Using jQuery and Jasmine 2.0 를 보면 jquery 를 jasmine 에서 사용할 수 있는 plugin 을 알려준다.

위의 글에서는

velesin/jasmine-jquery · GitHub

를 알려주는데, karma 용으로

karma-jasmine-jquery

가 있다. 이 녀석을 설치하면 된다. 참고로 jasmine 2.0 이상에서 동작한다.

c:\myProject> npm install karma-jasmine-jquery

참고로, 생각보다 설치가 오래 걸린다. 느긋하게 기다리자.

karma 는 기본적으로 karma- 로 시작하는 module 을 자동으로 load 한다고 한다. 그리고 .conf 에 직접 정해줄 수도 있다. .conf 의 frameworks 에 지정해 줄 때는 순서도 영향을 미친다. ref. 2 의 Usage 를 참고 하자.

기본적으로 karma-jasmine-jquery 에는 jquery 2.1.1 이 들어있다고 한다. 만약 자신이 개발에 사용한 jquery 버전이 달라서 그 녀석을 사용하려 한다면, jquery 버전을 .conf 에 지정해 주면 된다. ref. 2 의 Information 을 참고하자.

import library

내가 만든 library 를 import 하고 싶으면, html 에 <script> tag 로 include 한 대로 .conf 의 file 에 적어주면 된다.

// mypage.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
<script src="assets/javascripts/bootstrap.js"></script>
<script src="assets/javascripts/myLibrary.js"></script>

// karma.conf.js
module.exports = function(config) {
  config.set({
    ...
    // list of files / patterns to load in the browser
    files: [
      'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
      'src/html/assets/javascripts/bootstrap.js',
      'src/html/assets/javascripts/myLibrary.js',
      'src/html/assets/javascripts/work/*.js',
      'test/**/*.js'
    ],
    ...

Jasmine

Rspec 이라는 사실상의 BDD framework 의 표준이랑 비슷하다고 한다.

크게 2개 부분

descripbe 블럭
it 블럭

Jasmine 예제

Test event binding / unbinding with Jasmine

References

Testing Your JavaScript with Jasmine, by Andrew Burgess 4. Aug 2011
karma-jasmine-jquery

쿠...sal

[컴][웹] javascript unit test, karam + jasmine