Backbone.js 번역서를 보던 중 코드를 테스트 해볼 수 있는 방법을 찾아 보았다. 백본이 브라우져에서 구동되는 SPA 라는 점을 감안한다면 브라우져 없이도 테스트 가능케 하는 방법으로 Casper.js 가 괜찮은 대안으로 보였다. 알아 볼까나~~~
1) Casper.js 란 무엇인가?
- 클라이언트 사이드 화면에 대하여 PhatomJS 기반하에 자바스크립트 코드로 테스트를 좀 더 쉽게 만들어 주는 유틸리티이다
- 따라서 사전에 PhantomJS는 설치되어 있어야 한다 (v1.7 이상, $ phantomjs --version 으로 확인)
- UI 코드 테스팅이 가능하다 : 페이지 네비게이션, 이벤트, 폼 서밋, 화면 렌더링 이미지 캡쳐등이 가능
- 즉, 브라우져에서 사람이 하는 행위를 자동화 하여 수행할 수 있다
2) 설치하기
- GitHub 위치 : https://github.com/n1k0/casperjs
- Mac : /usr/local/bin 은 .bash_profile 안에 PATH 걸려 있다는 가정
///////////////////////
// phantomjs 먼저 설치
1) 웹사이트에서 zip 파일 다운로드
2) 심볼릭 링크 : phantomjs 디렉토리로 들어가서 설정한 것임
$ ln -sf `pwd`/bin/phantomjs /usr/local/bin/phantomjs
///////////////////////
// casperjs 설치
$ git clone https://github.com/n1k0/casperjs.git
$ cd casperjs/
$ git checkout tags/1.0.2
$ ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs
3) 사용하기
- PhantomJS를 내부적으로 사용하기 때문에 팬텀의 기본 사용법을 익힌다
+ 팬텀 v1.6 이상부터 자체 내장 모듈을 4가지를 가지고 있다. CommonJS Modules' Require (참조)
1. webpage : var page = require('webapage').create(); 웹페이지 핸들링 추상화
2. system : var system = require('system'); os 정보, pid 정보, cli 아규먼트 정보
3. fs : var fs = require('fs'); 파일 시스템 핸들링, 디렉토리, 패스, 이름 정보
4. webserver : var svr = require('webserver').create(); Mongoose 라는 자체 웹서버 내장
- PhantomJS 간단 예제
///////////////////////
// 테스트하고 빠져나오기
// hello.js 코드
console.log("hi dowon");
phantom.exit();
// 결과
$ phantomjs hello.js
hi dowon
//////////////////////
// URL 속도 측정
// loadspeed.js
var page = require('webpage').create(),
system = require('system'),
t, address;
if (system.args.length === 1) {
console.log('Usage: loadspeed.js <some URL>');
phantom.exit();
}
t = Date.now();
address = system.args[1];
page.open(address, function (status) {
if (status !== 'success') {
console.log('FAIL to load the address');
} else {
t = Date.now() - t;
console.log('Loading time ' + t + ' msec');
}
phantom.exit();
})
// 결과
$ phantomjs loadspeed.js http://www.google.co.kr
Loading time 1027 msec
- CasperJS API의 예제를 돌려보자
+ Casper API : var capser = require('casper').create(); 캐스퍼 생성, 로깅, 시작/종료/대기, 마우스이벤트, 페이지네비게이션
+ Client Side API : 에코, 인코딩, 북마크릿(웹킷기반 브라우져만), 폼/필드 값얻기(__utils__ 프로퍼티사용), 마우스 이벤트
+ Colorizer API : var colorizer = require('colorizer').create('Colorizer'); 레벨에 따른 출력 색깔 표현
casper.echo('text message', 'INFO'); // green
casper.echo('text message', 'ERROR'); // red
미리 정의된 레벨과 컬러값
+ Tester API :casper객체에 test 프로퍼티로 Tester 클래스 제공함. assert 계열 메소드, info 메세지
var url = 'http://www.google.fr/';
var casper = require('casper').create();
casper.start(url, function() {
this.test.assert(this.getCurrentUrl() === url, 'url is the one expected');
});
+ Utils API : var util = require('utils'); 표준 자바스크립트 API 없는 것들 보충. isXX() 계열 메소드, dump하여 JSON 출력등
- CasperJS 간단 예제
////////////////////////////////
// casperjs 사용하여 이미지 생성
// 객체 생성
var casper = require('casper').create({
// 옵션적용
onError: function(self, m) { // Any "error" level message will be written
console.log('FATAL:' + m); // on the console output and PhantomJS will
self.exit(); // terminate
}
});
// 지정 url 호출과 callback 지정
// start 대신 open 을 통하여 POST, PUT, DELETE 값 전달도 가능
casper.start('http://www.weather.com/', function() {
this.captureSelector('weather.png', '#wx-main');
});
// 캐스퍼 수행하기
casper.run();
// casper.run() 이 Async 구동이기 때문에 casper.exit(); 를 호출하면 이미지 생성전에 exit 됨 (호출하지 말것)
//casper.exit();
4) Backbone.js 테스트 절차
나름 어떻게 테스트 해 볼 수 있을까 고민하다가 다음의 순서로 해보았고, 코드에 assert을 넣거나 응용을 하면 될듯하다
- 먼저 테스트 클라이언트 화면을 만든다 (index.html)
- CasperJS 테스트 코드를 짠다
- 테스트를 위한 웹서버를 구동한다 (static 띄우기)
$ static
serving "." at http://127.0.0.1:8080
16:46:17 [200]: /index.html
16:46:17 [200]: /lib/jquery-1.8.2.min.js
16:46:17 [200]: /lib/backbone-min.js
16:46:17 [200]: /lib/underscore-min.js
- 브라우져에서 확인(옵션)
- CasperJS 테스트 수행하기
$ casperjs index_test.js
>> {"title":"","completed":false}
test done
5) Node 에서 단순 테스트 하기
- 백본을 노드에서 수행할 수도 있다. 어차피 자바스크립트이기 때문이다
- 기본준비 : underscore.js, backbone.js 모듈을 node_modules 디렉토리방식으로 설치한다
$ npm install underscore
$ npm install backbone
- coffeescript 예제 코드 만들기
Backbone = require 'backbone'
Todo = Backbone.Model.extend {
# Todo에 대한 기본 속성
defaults: {
title: '',
completed: false
}
}
Todos = Backbone.Collection.extend {
model: Todo
}
firstTodo = new Todo {title:'Read whole book'}
# 컬렉션 객체에 모델 배열을 전달한다.
todos = new Todos [firstTodo]
console.log todos.length
- 수행 결과
// 커피파일 컴파일
$ coffee -c *.coffee
// 노드로 수행
$ node backbone_node.js
1
<참조>
- Headless Integration Tests with CasperJS
'Testing, TDD > Test First' 카테고리의 다른 글
| [QUnit] 클라이언트 코드 테스트의 강자 (0) | 2013.04.03 |
|---|---|
| [Backbone.js] 클라이언트 코드를 Mocha로 TDD 수행하기 (0) | 2013.03.20 |
| [Mocha] JavaScript Testing 하기 (0) | 2013.02.16 |
| [Mocha] Nodemon과 연동하기 (0) | 2013.02.07 |
| [Unit Test] Clean Code를 만들기 위한 방법 (0) | 2013.01.08 |
