[Casper.js] Backbone.js 테스트를 위한 선택

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

<참조>

  - Casper.js 홈페이지

  - NodeQA 사이트 소개글

  - Headless Integration Tests with CasperJS