Jenkins를 활용한 javascript 개발

Jenkinsfor Javascript Development Env.

About me

윤지수[email protected]

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

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

1. Watch code2. Build Project3. Run Tests4. Publish Results

첫째 .

CI? Jenkins?

Jenkins vs. Hudson

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

Jenkins vs. Hudson

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

Jenkins 의 실체

: jenkins.war + web server

Jenkins 의 실체

둘째 .

Jenkins 해보기

오해CI 구축은 어렵다

Javascript 프로젝트의 CI 구축은 더 어렵다

CI 운영비용은 비싸다

CI 는 규모가 있는 프로젝트에서만 하는

것이다

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

할 짓 요약

Jenkins 설치

소스 보관소 연동

코드가 좋은 코드인지 확인

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

코드량이 얼마인지 확인

Jenkins 설치

소스 보관소 연동 Github

코드가 좋은 코드인지 확인

JSLint

JSLint 결과 Jenkins 에서 시각화

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

Testing framework : Qunit

테스트 자동화 : JsTestDriver

코드 커버리지 : jscoverage

테스트 결과를 jenkins 에서 시각화

Test 결과 (jUnit test result Plugin)

Coverage 결과 (cobertura Plugin)

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

이런 젠장 ,

뭔가 복잡해 ..

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

Jenkins 설치

1.Download

Jenkins 설치

2. install

Jenkins 설치

3. Window service

Jenkins 설치

4. Browser 확인

Jenkins 설치

5. Jenkins Plugins 설치 방법

Jenkins 설치

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

Jenkins 설치

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

Jenkins 설치

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

Git 연동

1. Download github plugin

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

3. Jenkins 설정 - git

Git 연동project 에 설정하기

Git 연동확인하기

JSLint 연동

연동 방법 개요

1. JSLint 의 Java 버전을 다운로드

2. Jenkins 에 Ant 빌드 스크립트로 실행

3. Jenkins 에서 그래프로 보여주기 위해서 Violations Plugin

설치

4. Build

JSLint 연동

1. Download JSLint4Java

2. Ant Build 파일 만들기

http://code.google.com/p/jslint4java/downloads

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, jscover-

age 다운로드

2. JsTestDriver.conf 설정

3. Ant 빌드 스크립트 작성

4. JsTestDriver Running

5. 테스트 결과를 그래프로 보기 위한 설정 (jUnit test result re-

port)

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

설치 )

7. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage

결과를 변환

JsTestDriver 연동

1. 다운로드 : JsTestDriver , JsTestDriver-Qunit adaptor, js-

coverageJsTestDriver.jar ,jscoverage.jarhttp://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

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

JsTestDriver 연동

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

C:\code\run\jenkins\workspace\jenkins-test> java -jar JsTestDriver.jar --port 4224

JsTestDriver 연동

4. Ant Build 실행

C:\code\run\jenkins\workspace\jenkins-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 설치 )

9. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를

변환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 연동

9. Cobertura Plugin 에서 지원되는 xml 타입으로 coverage 결과를

변환

<target name="start" depends="jstestdriver" description="build python script">

<echo>build python for making cobertura xml</echo>

<exec executable="C:\Python27\python.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>

Ant build 에 python script 실행 추가

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 후 확인

Complete!

좀 더 해야 할 것Jstestdriver test code 에서 외부 라이브러리를 사용하는 경우 에러가 발생 . Js 파일을 로딩하는데 문제가 있음 (re-

quire.js 와 같은 것으로 동적로딩 필요 )

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

Other TestingSelenium, WebDriver, or PhantomJS

Mobile 환경 테스트

Other CI (Travis CI)Github 와 찰떡 궁합으로 경량화된 CIhttp://blog.outsider.ne.kr/779http://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.ht

ml

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-stac

k