Javascript Continuous Integration

We'll see how to setup javascript continuous intergration environment using jenknin, git, gerrit.

1. Add PhantomJS to  package.json

PhantomJS can execute javascript without browser. Need to add PhantomJS to run test-case upon PhantomJS


npm install phantomjs --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-junit-reporter --save-dev

2. Create separated karma config file

We'll create separate karma config file for jenkins. Let's create "jenkins-ci-conf.js" like followings. Set browser to phantomjs like line [line 63].

3. Create grunt task for jenkins CI

Create grunt task for Jenkins. In this example, I create "continuous" task. Look at [line 23 ~ 26] closely. Change karma config file to "jenkins-ci-conf.js". We have to use "singleRun". The "singleRun" options means that Continuous Integration mode. You can exectue the task like following command,
grunt karma:continuous

4. Build PhantomJS [If jenkins is installed linux]

If you jenkins is installed to linux, you need to build it. But you use other environment, you don't need to build. Refer PhantomJS in detail.

5. Install jenkins plugins [If jenkins is installed linux]

Install Environment Injector Plugin. It is useful to configure PhantomJS path.

6. Job configuration

Let's see job configuration. I used git as a source code management.

Source code management

build trigger

gerrit trigger

Build environment
set phantomJS path in script content

Build
There are two steps in build script. The first one is install dependents module using npm install. The second one is execute grunt task like "grunt karma:continuous"

Action after build
Set path to generate test result report

7. execute result.

자바스크립트 지속적 통합 : jenkins, git, gerrit, grunt, karma, jasmine, etc

이 포스트에서는 Jenknis 을 이용하여 자바스크립트 지속적 통합 (Continuous Integration) 을 설정하는 방법에 대해서 알아본다. 간단하게 설명하면, git 이나 svn 같은 소스 관리 툴에 소스를 업데이트 하면, 자동으로 CI 서버(여기서는 Jenkins) 에서 이를 감지하고, 빌드나 테스트 케이스를 실행하는 것이다. 이 포스트에서는 소스 관리툴을 git 과 gerrit 을 사용핬다.

1. PhantomJS 을  package.json 추가

PhantomJS는 브라우저 없이 자바스크립트를 실행할 수 있게 해주는 모듈이다. 테스트 케이스들을 PhantomJS을 사용하기 위해 package.json 을 관련 모듈을 업데이트 해주어야 한다.

npm install phantomjs --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-junit-reporter --save-dev

2. jenkins에서 사용할 karma 설정 파일

jenkins 은  별도의 karma 설정 파일을 사용할 것이다. 실제 로컬에서 개발을 진행할 때 사용하는 브라우저와 Jenkins이 실행하는 브라우저가 다르니 이렇게 파일을 분리하는 것이 편하다. 아래와 같은 jenkins-ci-conf.js 파일을 만들자. [라인 63] 을 보면 브라우저가 phantomjs 로 설정한 것을 확인할 수 있다.

3. grunt 에 jenkins에서 실행할 task 설정

grunt 에서 jenkins 에서 실행할 continuous 라는 타스크을 만들어준다. [라인23 ~ 26]을 살펴보자. karma 설정파일을 2번에서 만든 설정파일로 설정했다. 그리고 sigleRun 옵션이 설정된 것을 알 수 있다. singleRun 을 설정하면 Continuous Integeration 모드로 실행된다.


아래의 명령어를 통해서 타스크를 실행할 수 있다.
grunt karma:continuous

4. jenkins 이 설치된 서버에 PhantomJS 빌드 [jenkins이 리눅스에 설치된 경우]

만약 jenkins이 리눅스에 설치되어 있다면 별도로 build 을 해주어야 한다. 하지만 다른 운영체제에 설치되어 있다면, 이 단계는 진행할 필요가 없다. 자세한 내용은 PhantomJS 다운로드 페이지을 참고하자.

5. jenkins 플러그인 설치 [jenkins이 리눅스에 설치된 경우]

Environment Injector Plugin 을 설치하자. 4번에서 설치한 PhantomJS 경로를 Path 로 잡아줄때 유용하다.

6. job 설정

실제로 테스트를 실행할 job 설정을 살펴보자. 소스코드 관리는 git 을 통해서 진행했기에 아래와 같이 설정해준다.

소스코드관리

build trigger

gerrit trigger
코드리뷰 툴로 gerrit 과 연동하였다. project 와 branch 을 설정해준다.

빌드환경
script content 에서 4번에서 build 한 PhantomJS 의 경로를 설정해준다.

빌드
실제 빌드를 실행하는 스크립트 내용을 보면 크게 두가지로 이루어져 있다.
첫번째는 npm install 을 통해서 의존성을 가지는 모듈들을 설치하는 것이다. 두번째는 grunt karma:continuous 을 호출하여 실제 테스트 케이스를 실행한다.

빌드 후 조치
테스트 결과 레포트를 만들 경로를 설정해준다.

7. 실행 결과

jenkins,  git, gerrit, grunt, karma, jasmine, phantomjs 을 이용해서 자바스크립트 CI 을 설정하는 방법을 알아보았다. 실제 개발하는 환경과 CI을 실행하는 환경을 동일하게 가져가는 게 좋다. 하지만 실행하는 자바스크립트 엔진(크롬, 파이어폭스 또는 PhantomJS) 이 다르니 설정도 조금 달라졌다. 한가지 유의할 점은 브라우저별로 조금씩 지원하는 자바스크립트 문법이 틀리니 이점을 참고하자. 예를 들어 for---of 구문같은 경우 크롬을 사용하는 경우 별문제가 없이 실행되지만 PhantomJS에서는 아직 지원하지 않기에 문법오류가 발생한다. 자세한 내용은 이 링크를 참고하자.