Jenkins를 활용한 javascript 개발

Jenkins
for Javascript Development Env.

About me

윤지수
aniga75@gamil.com

지속적인 통합
> 품질,안전성

지속적인 통합
: continuous integration (CI)

1. Watch code
2. Build Project
3. Run Tests
4. Publish Results

Jenkins vs. Hudson

Java.net을 사용하던 Hudson은 SUN이 Oracle에 인수된 이후
Oracle의 ‘Hudson’상표권 주장으로 Jenkins으로 분리

Jenkins vs. Hudson

비슷하다 (설정, 플러그인 등)

Jenkins 의 실체

: jenkins.war + web server

오해
CI 구축은 어렵다
Javascript 프로젝트의 CI구축은 더 어렵다
CI 운영비용은 비싸다
CI는 규모가 있는 프로젝트에서만 하는 것이
다

Today’s Goal?
: Javascript CI 환경 만들기
Jenkins와 함께 쉽게 !

할 짓 요약
Jenkins 설치
소스 보관소 연동
코드가 좋은 코드인지 확인
코드가 잘 돌아가는 건지 확인
코드량이 얼마인지 확인

Jenkins 설치

소스 보관소 연동 Github

JSLint

코드가 좋은 코드인지 확인

JSLint 결과 Jenkins에서 시각화

Testing framework : Qunit

테스트 자동화 : JsTestDriver

코드가 잘 돌아가는 건지 확인

코드 커버리지: jscoverage

Test결과(jUnit test result Plugin)
테스트 결과를 jenkins에서 시각
화
Coverage 결과(cobertura Plugin)

코드량이 얼마인지 확인 N’Siq Plugin

이런 젠장, 뭔가
복잡해..

다.. 기억하지
않으셔도 되요.

Jenkins설치

3. Window service

Jenkins설치
4. Browser 확인

Jenkins설치
5. Jenkins Plugins 설치 방법

Jenkins설치

6. 새로운 프로젝트 생성!

Jenkins설치
6. 새로운 프로젝트 생성!

Git 연동

1. Download github plugin

2. local 에 git 설치
http://git-scm.com/downloads

3. Jenkins 설정 - git

Git 연동
project에 설정하기

JSLint 연동

연동 방법 개요

1. JSLint의 Java버전을 다운로드
2. Jenkins에 Ant 빌드 스크립트로 실행
3. Jenkins에서 그래프로 보여주기 위해서 Violations Plugin설치
4. Build

JSLint 연동

1. Download JSLint4Java
http://code.google.com/p/jslint4java/downloads

2. Ant Build 파일 만들기
Jekins/workspace/{projectname}/build.xml

<target name="jslint" description="run the JSLint tool on JS files">
<fileset dir="." id="jsfiles.raw">
<include name="src/*.js" />
<exclude name="src/*.min.js" />
</fileset>
<pathconvert pathsep=" " property="jsfiles.clean" refid="jsfiles.raw" />
<exec executable="java" output="build/jslint.xml">
<arg line="-jar ../../lib/jslint4java.jar --report xml ${jsfiles.clean}" />
</exec>
</target>

JSLint 연동

3. project 설정에 추가하기

JSLint 연동
4. 확인 (result.xml)

JSLint 연동
5. Jenkins 그래프로 보기 – violations plugin 설치

6. Jenkins 그래프로 보기 – project 설정

JSLint 연동
7. Jenkins 그래프로 보기 – 빌드 그리고 확인(1)

70개의 문제가 발견 됨을 표시하고 있음

JSLint 연동
7. Jenkins 그래프로 보기 – 빌드 그리고 확인(2)

파일별로 오류 내용을 확인 할 수 있음

JsTestDriver 연동

연동 방법 개요

1. JsTestDriver.jar , JsTestDriver-Qunit adaptor, jscoverage 다운로드
2. JsTestDriver.conf 설정
3. Ant 빌드 스크립트 작성
4. JsTestDriver Running
5. 테스트 결과를 그래프로 보기 위한 설정(jUnit test result report)
6. 커버리지 결과를 그래프로 보기 위한 설정(cobertura Plugin설치)
7. Cobertura Plugin에서 지원되는 xml타입으로 coverage결과를 변환

JsTestDriver 연동

1. 다운로드 : JsTestDriver , JsTestDriver-Qunit adaptor, jscoverage
JsTestDriver.jar ,jscoverage.jar
http://code.google.com/p/js-test-driver/downloads/list

JsTestDriver-Qunit.jar
https://github.com/exnor/QUnit-to-JsTestDriver-adapter/downloads
# http://code.google.com/p/js-test-driver/wiki/QUnitAdapter 이걸 받으면 안됨(qunit변경 메소드 반영 안됨)

JsTestDriver 연동

2. JsTestDriver.conf 설정
server: http://localhost:4224

load:
- lib/qunit.js
- lib/qunit_jstestdriver_adaptor/equiv.js //qunit adaptor
- lib/qunit_jstestdriver_adaptor/QUnitAdapter.js //qunit adaptor
- lib/jindo.desktop.all.js
- src/*.js
- lib/*.js
- spec/testcode.js

serve:
- spec/test.html
- lib/qunit.css

plugin:
- name: "coverage"
jar: "lib_etc/coverage.jar"
module: "com.google.jstestdriver.coverage.CoverageModule"

# jstestdriver configuration : http://code.google.com/p/js-test-driver/wiki/ConfigurationFile

JsTestDriver 연동

3. 잠깐! JsTestDriver는 CI와 별개로 별도로 달리고 있어야 함

C:coderunjenkinsworkspacejenkins-test> java -jar JsTestDriver.jar --port 4224

Jenkins 설치 Git 연동 JSLint 연동 jsTestDriver 연동 LOC

JsTestDriver 연동

4. Ant Build 실행

C:coderunjenkinsworkspacejenkins-test> java -jar JsTestDriver.jar --port 4224

<target name="jstestdriver" depends="jslint" description="build jstestdriver">
<echo>build jstestdriver</echo>
<exec executable="java">
<arg line="-jar" />
<arg path="../../lib/jsTestDriver.jar" />
<arg value="--server"/>
<arg value="http://localhost:4224"/>
<arg value="--tests"/>
<arg value="all"/>
<arg value="--testOutput"/>
<arg value="./build"/>
<arg value="--reset"/>
</exec>
</target>
# jstestdriver command line flags : http://code.google.com/p/js-test-driver/wiki/CommandLineFlags

JsTestDriver 연동
5. 지금까지 Ant Build
<target name="jslint" description="run the JSLint tool on JS files">
<fileset dir="." id="jsfiles.raw">
<include name="src/*.js" />
<exclude name="src/*.min.js" />
</fileset>
<pathconvert pathsep=" " property="jsfiles.clean" refid="jsfiles.raw" />
<exec executable="java" output="build/jslint.xml">
<arg line="-jar ../../lib/jslint4java.jar --report xml ${jsfiles.clean}" />
</exec>
</target>

<target name="jstestdriver" depends="jslint" description="build jstestdriver">
<echo>build jstestdriver</echo>
<exec executable="java">
<arg line="-jar" />
<arg path="../../lib/jsTestDriver.jar" />
<arg value="--server"/>
<arg value="http://localhost:4224"/>
<arg value="--tests"/>
<arg value="all"/>
<arg value="--testOutput"/>
<arg value="./build"/>
<arg value="--reset"/>
</exec>
</target>

JsTestDriver 연동

6. Build !

테스트 결과 : TEST-Chrome_210118083_Windows.DefaultaModule.xml
테스트 커버리지 : jsTestDriver.conf-coverage.dat

JsTestDriver 연동

7. 테스트 결과를 그래프로 보기 위한 projcet 설정(jUnit test result report)

동작 방식 : ‘TEST-Chrome_210118083_Windows.DefaultaModule.xml’ 파일을 분석해서 결과를 보여줌.

JsTestDriver 연동

8. Build 후 확인

JsTestDriver 연동

8. 커버리지 결과를 그래프로 보기 위한 설정(cobertura Plugin설치)

jsTestDriver.conf-coverage.dat 파일을 Cobertura지원 xml 타입으로 변환하기 위해 python 오픈소스 script를 활용

• 먼저 Local 에 Python 설치: http://www.python.org/getit/
• Cobertura 변환 Python script 다운로드 : https://github.com/eriwen/lcov-to-cobertura-xml
• 실행 : Jenkins Python Plugin을 통해서 script를 실행 할 수 있지만, 윈도우에서 Python 실행 PATH를 인식하지 못하는
문제 발견. 대안으로 Ant build로 실행하고 exeutable에 절대경로를 입력
<다음장에서 Ant build 설정>

JsTestDriver 연동

Ant build에 python script 실행 추가

<target name="start" depends="jstestdriver" description="build python script">
<echo>build python for making cobertura xml</echo>
<exec executable="C:Python27python.exe" failonerror="true">
<arg value="lib_etc/lcov-to-cobertura-xml.py" />
<arg value="build/jsTestDriver.conf-coverage.dat" />
<arg value="-o"/>
<arg value="build/coverage.xml"/>
</exec>
</target>

JsTestDriver 연동

10. Project 설정에 corbetura 추가

JsTestDriver 연동
1. Build 후 coverage 결과 확인

LOC 연동
1. LOC(Line of Code)
NHN Opensource 활용 : https://wiki.jenkins-ci.org/display/JENKINS/NSIQ+Collector+Plugin
복잡도,LOC를 계산해주지만 LOC만을 활용

2. project 설정

LOC 연동
3. Build 후 확인

Jenkins를 활용한 javascript 개발

좀 더 해야 할 것
Jstestdriver
test code에서 외부 라이브러리를 사용하는 경우 에러가 발생. Js파일을 로딩하는데 문제가 있음 (require.js와
같은 것으로 동적로딩 필요)

복잡도, 중복코드 검사
Cyclomatic complexity 나 중복코드 검사 Plugin 연동 Reporting

Other Testing
Selenium, WebDriver, or PhantomJS
Mobile 환경 테스트

Other CI (Travis CI)
Github 와 찰떡 궁합으로 경량화된 CI
http://blog.outsider.ne.kr/779
http://tech.qmetric.co.uk/automating-javascript-ci-with-buster-js-and-travisci_205.html

Appendix. Inside NHN 품질관리
Hudson 기반의 Quality Practice 활동
http://book.naver.com/bookdb/book_detail.nhn?bid=6349938 (book)

JSLint Cyclomatic Complexity, Coverage 통합 자체 Plugin 개발
Selenium 활용한 UI Test 자동
http://helloworld.naver.com/helloworld/87523
http://www.slideshare.net/jscamp_kr/jscamp-hannam-qunit-test-automation-using-hudson-and-selenium

Dashboard, JIRA 연동
중복코드 검사
기타 프로젝트별 Build에 필요한 Hudson Plugin개발

참고
http://wiki.hudson-ci.org/display/HUDSON/Plugins
http://stephen.rees-carter.net/2011/05/jenkins-ci-jslint-javascript-quality-checking/
http://eriwen.com/tools/continuous-integration-for-javascript/
http://hudson-ci.org/download/plugins/
http://mirrors.jenkins-ci.org/
http://code.google.com/p/jslint4java/downloads
http://meri-stuff.blogspot.kr/2012/01/javascript-testing-with-jstestdriver.html
http://code.google.com/p/js-test-driver/wiki/
http://pseudobry.com/js-test-driver-qunit-coverage-requirejs/
https://github.com/youzee/tips-n-tricks/wiki/The-JavaScript-testing-stack
http://www.python.org/getit/
https://wiki.jenkins-ci.org/display/JENKINS/NSIQ+Collector+Plugin
http://pseudobry.com/js-test-driver-qunit-coverage-requirejs/
https://github.com/youzee/tips-n-tricks/wiki/The-JavaScript-testing-stack

Jenkins를 활용한 javascript 개발

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Jenkins를 활용한 javascript 개발 (20)

More from 지수 윤 (20)

Jenkins를 활용한 javascript 개발