티스토리 뷰

X-editable: FORM 대체 라이브러리
http://vitalets.github.com/x-editable/index.html


1. X-editable 라이브러리 임포트

<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">

<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable-inline.js">

* X-editable은 Popup 버전과 Inline 버전으로 구분되는데 Popup 버전은 table 엘러먼트 하위에 정의된 a 엘러먼트에 대해서만 동작하는 것을 확인했다.
* 따라서 프로젝트에서는 a 엘러먼트의 위치에 대한 제약이 없는 Inline 버전을 사용하기로 결정했다.

2. 유닛 테스트 환경 구성

<JavaScript>

$.mockjax({
    url: '/setUserName',
    responseTime: 200
});


* MockJax 라이브러리를 이용하여 모든 HTTP Request를 하이잭킹하여 유닛 테스트 수행 환경을 구성한다.

3. X-editable 유닛 테스트
<HTML>

<a id="userName">Json</a>


<JavaScript>

$('#userName').editable({
    type: 'text',
    url: '/setUserName',
    ajaxOptions: {
        dataType: 'json'
    },
    name: 'USERNAME', // DB에 업데이트될 컬럼명을 입력
    pk: 1 // DB에 업데이트될 로우의 PK인 ID 값을 입력, 생략시 서버 전송없이 새로 입력받은 값을 유지
});


MockJax 라이브러리 관련 북마크
https://github.com/appendto/jquery-mockjax
http://pragmatic-coding.blogspot.kr/2012/01/mocking-ajax-with-jquery-mockjax.html
http://addyosmani.com/blog/jquery-testing-tools/
http://dailyjs.com/2011/09/27/jquery-roundup/


댓글
댓글쓰기 폼