라인트레이서 로봇을 활용한 초등 저학년의 STEAM 프로그램 개발 및 … · 명령을 내리는 곳이다. 센서는 인간의 감각기관(눈, 귀, 촉각)의
Jenkins를 활용한 javascript 개발
-
Upload
- -
Category
Technology
-
view
11.661 -
download
5
description
Transcript of Jenkins를 활용한 javascript 개발
Jenkinsfor Javascript Development Env.
About me
지속적인 통합 ?> 품질 , 안전성
지속적인 통합 : 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