jslint 돌려보기.
ITWeb/개발일반 2011. 11. 9. 19:07jsunit 작성했던 코드를 jslint 로 돌려본 화면 입니다.
뭐.. 코드가 너무 간단해서..
좀 부끄럽군요.. ㅋ
※ jslint 가기 : http://www.jslint.com/
jslint 돌려보기.ITWeb/개발일반 2011. 11. 9. 19:07jsunit 작성했던 코드를 jslint 로 돌려본 화면 입니다. 뭐.. 코드가 너무 간단해서.. 좀 부끄럽군요.. ㅋ ※ jslint 가기 : http://www.jslint.com/ Closure Linter 알아보기ITWeb/개발일반 2011. 11. 9. 17:06원래는 javascript 의 정적분석을 위해서 closure inspector 를 사용하려 했으나.. firefox 버전과 firebug 버전을 좀 타서.. 그냥.. 안하기로 했다.
걍.. checkstyle 이나 적용해 봅시다. Windows 버전임돠!! (cygwin 설치 하셔서 하시면 더 편하실거예요.. ) [참고사이트] - http://code.google.com/intl/ko/closure/utilities/docs/linter_howto.html - http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml [다운로드] - http://www.python.org/download/releases/ : version 호환성때문에 2.7 설치함. - http://pypi.python.org/pypi/setuptools#windows (다운로드) : 2.7 설치함. (easy_install) [설치] - python 과 setuptools 모두 exe 파일 이므로 실행 시켜서 설치 하시면 됩니다. [Closure Linter 설치] - python 이 설치된 폴더로 이동 - Python27\Scripts 로 이동 - cmd 창에서 easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz - 다운로드가 잘안되거나 에러 발생할 경우 수동으로 다운로드 받아서 아래 처럼 설치 - easy_install closure_linter-latest.tar.gz [gjslint 실행] - 역시 Python27\Scripts 로 이동 - cmd 창에서 실행 - gjslint D:\Workspace\jee\jsunit_prototype\UnitTC\index.js C:\Python27\Scripts>gjslint D:\Workspace\jee\jsunit_prototype\UnitTC\index.js ----- FILE : D:\Workspace\jee\jsunit_prototype\UnitTC\index.js ----- Line 2, E:0005: Illegal tab in whitespace before "var" Line 4, E:0005: Illegal tab in whitespace before "if" Line 5, E:0005: Illegal tab in whitespace before "div.innerHTML" Line 6, E:0005: Illegal tab in whitespace before "}" Found 4 errors, including 0 new errors, in 1 files (0 files OK).
Some of the errors reported by GJsLint may be auto-fixable using the script fixjsstyle. Please double check any changes it makes and report any bugs. The script can be run by executing:
fixjsstyle D:\Workspace\jee\jsunit_prototype\UnitTC\index.js - 위에 보이는 에러는 tab 을 space 4 로 바꾸지 않고 그냥 tab 문자로 사용을 해서 발생한 오류 입니다. - eclipse 에서 editor 설정과 fomatter 변경 하시면 됩니다. [compiler 수동실행] D:\Development>java -jar closure-compiler\compiler.jar --js D:\Workspace\jee\jsunit_prototype\UnitTC\index.js --create_source_map D:\Workspace\jee\jsunit_prototype\UnitTC\index-map --js_output_file D:\Workspace\jee\jsunit_prototype\UnitTC\index-compiled.js Google Closure CompilerITWeb/개발일반 2011. 11. 9. 14:28예전에 YUI 의 javascript code compressor 에 대해서 언급한적이 있다.
http://jjeong.tistory.com/467 구글의 closure compiler 도 이넘과 같은 기능을 지원해 준다. YUI 의 compressor 보다 구글 closure compiler 가 더 좋아 보이내요.. ^^ Bravo!!!!! jsunit 알아보기.ITWeb/개발일반 2011. 11. 9. 13:01[참고사이트] - http://www.jsunit.org - http://www.jsunit.net/ - http://duwonyi.springnote.com/pages/523087 - http://www.javajigi.net/pages/viewpage.action?pageId=4497 [다운로드] jsunit2_2.zip [설치방법] - plugin 설치 : eclipse_plugin1.0alpha3.zip 압축을 해제 하고 "net.jsunit_1.0.0" 폴더를 eclipse/plugins 폴더에 복사해서 넣는다. - jsunit2_2.zip 압축을 해제하고 적당한 위치에 옴겨놓는다. ( 예 : C:\development\jsunit ) - C:\development\jsunit 폴더에 logs 폴더 생성 [실행방법] - eclipse 실행 - 메뉴에서 Window -> Preferences > JsUnit 으로 이동 - Browser executables 에 IE, FF, Safari 등을 등록 - Java Project 를 신규로 생성하거나 기존 Web Project이 있으면 활용 - Web root 에 C:\development\jsunit 폴더의 app, css 폴더를 복사해서 넣는다. - 테스트 코드를 작성할 폴더를 하나 만든다. ( 예 : TestCase ) - TestCase 작성 jcoverage 때 사용한걸 조금 수정해서 돌려봄 // index.js var div = document.getElementById("textLayer");
if ( div.innerText == "Change Text by Click Action" ) { div.innerText = "Changed Text!!"; } } <!-- index.html --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>TestCase1</title> <script type="text/javascript" src="../app/jsUnitCore.js"></script> <script type="text/javascript" src="index.js"></script> <script type="text/javascript"> function testTextChange () { var div = document.getElementById("textLayer"); textChange();
assertEquals("Changed Text!!", div.innerText); } </script>
</head> <body> <div id="textLayer" onclick="textChange();">Change Text by Click Action</div> </body> </html> - index.html 파일에서 우클릭 후 run as JsUnit Test Page 실행 그러나 내 eclipse 에서는 동작 하지 않았다 ㅡ.ㅡ;; - 수동 실행 방법 : C:\development\jsunit\testRunner.html 실행 file:/// input text 부분에 index.html 파일 full path 등록 후 Run 버튼 클릭 (D:\Workspace\jee\jsunit_prototype\UnitTC\index.html) [TestCase 예제] - C:\Development\jsunit\tests 폴더에 들어가 보시면 예제 파일들이 많이 있으니 TestCase 작성 시 참고 하시면 됩니다. JSCoverage 알아보기.ITWeb/개발일반 2011. 11. 8. 14:41[JSCoverage 다운로드] - http://siliconforks.com/jscoverage/download.html [jscoverage.html 복사이동] - 압축해제 후 폴더로 이동 (jscoverage-0.5.1) - jscoverage-0.5.1/doc/instrumented/jscoverage.html 파일을 복사 - jscoverage-0.5.1/jscoverage.html 로 이동 [Test Code 작성] - jscoverage-0.5.1 폴더 아래 TestCase1 폴더 생성 - TestCase1 폴더에 테스트할 html 과 js 파일 복사 - 샘플 코드 (말 그대로 동작 하는것만 확인 하기 위한 샘플임돠) <!-- indexTest.html --> <html> <head> <title>TestCase1</title> <script type="text/javascript" src="indexTest.js"></script> </head> <body> <div id="textLayer" onclick="textChange();">Change Text by Click Action</div> </body> </html> // indexTest.js var div = document.getElementById("textLayer");
if ( div.innerText == "Change Text by Click Action" ) { div.innerText = "Changed Text!!"; } } [jscoverage server 실행 및 접속] - jscoverage-0.5.1>jscoverage-server.exe --ip-address=192.168.1.1 --port=9090 -v - http://192.168.1.1:9090/jscoverage.html - URL 부분에 http://192.168.1.1:9090/TestCase1/index.html 입력 후 "Open in frame" 버튼 클릭 - 상단 탭에서 Store 클릭 후 "Store Report" 버튼 클릭 [Report 보기] - jscoverage-0.5.1 폴더에 jscoverage-report 폴더생성 되고 하위에 jscoverage.html 클릭 후 coverage 확인 [jscoverage server 중지하기] - jscoverage-0.5.1>jscoverage-server.exe --ip-address=192.168.1.1 --port=9090 --shutdown 참 쉽죠잉~~~ |